TySS-Dev/PacCrypt-Webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Changes and better phone experience.

Browse Source
This commit is contained in:
Tyler
2025-05-14 05:00:12 -10:00
committed by GitHub
parent ed11ccd2a1
commit bb8690b74f
12 changed files with 655 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -226,7 +226,7 @@ server {
## 🗂️ Project Structure ## 🗂️ Project Structure
``` ```
paccrypt-webapp-final/ PacCrypt/
├── app.py ├── app.py
├── requirements.txt ├── requirements.txt
├── README.md ├── README.md
static/css/styles.css
+253 -55
View File
@@ -7,9 +7,11 @@
/* ===== Body ===== */ /* ===== Body ===== */
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Press Start 2P', monospace;
background-color: #121212; background-color: #0e0e0e;
color: #00ff99; color: #28E060;
font-size: 13px;
line-height: 1.6;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
@@ -18,28 +20,112 @@ body {
padding: 20px; padding: 20px;
} }
@media (max-width: 600px) {
body {
font-size: 11px;
padding: 10px;
}
.button-group {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.button-group button {
width: 100%;
min-width: unset;
max-width: 100%;
}
header {
flex-direction: column;
height: auto;
padding-inline: 15px;
padding-block: 20px;
}
.logo-container {
flex-direction: column;
align-items: center;
gap: 12px;
}
.logo-container img {
height: 100px !important;
margin-top: -15px !important;
}
.logo-text {
margin-left: 0 !important;
text-align: center;
}
.logo-text h1 {
font-size: 1.4em;
margin-top: -30px !important;
margin-left: 0 !important;
text-align: center !important;
}
.logo-text p {
font-size: 0.8em;
margin-left: 0 !important;
text-align: center !important;
}
.admin-button-grid {
grid-template-columns: 1fr;
}
}
/* ===== Header ===== */ /* ===== Header ===== */
header { header {
text-align: center; display: flex;
padding: 25px; justify-content: center;
background-color: #1c1c1c; align-items: center;
background-color: #111;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4); box-shadow: 0 0 15px #28E060;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
margin-bottom: 40px !important; margin-bottom: 25px;
padding: 25px;
height: 200px;
} }
header h1 { .logo-container {
font-size: 2.8em; display: flex;
color: #00ff99; align-items: center;
margin-bottom: 8px; gap: 10px; /* optional: controls spacing between logo and text */
} }
header p { .logo-container img {
height: 200px;
width: auto;
}
.logo-text h1 {
font-size: clamp(1.4em, 6vw, 2.8em);
word-break: break-word;
overflow-wrap: break-word;
color: #28E060;
margin: 0;
margin-left: -30px; /* overlap effect */
text-align: left;
}
.logo-text p {
font-size: 1.2em; font-size: 1.2em;
color: #28E060;
margin: 0;
margin-left: -30px;
text-align: left;
} }
/* ===== Main Layout ===== */ /* ===== Main Layout ===== */
main { main {
flex: 1; flex: 1;
@@ -58,7 +144,7 @@ main {
padding: 25px; padding: 25px;
width: 100%; width: 100%;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4); box-shadow: 0 0 15px #28E060;
text-align: center; text-align: center;
} }
@@ -73,18 +159,27 @@ main {
} }
/* ===== Inputs, Textareas, Selects ===== */ /* ===== Inputs, Textareas, Selects ===== */
button,
select,
input,
textarea {
font-family: 'Press Start 2P', monospace;
font-size: 12px !important;
letter-spacing: 0.5px;
}
input, input,
textarea, textarea,
select, select,
input[type="file"] { input[type="file"] {
width: 80%; width: 80%;
max-width: 500px; max-width: 500px;
padding: 12px 20px; padding-inline: 20px;
border: 1px solid #00ff99; padding-block: 12px;
border: 1px solid #28E060;
border-radius: 8px; border-radius: 8px;
background-color: #2c2f33; background-color: #2c2f33;
color: #00ff99; color: #28E060;
font-size: 1em;
text-align: left; text-align: left;
transition: 0.3s; transition: 0.3s;
} }
@@ -102,23 +197,33 @@ input[type="password"] {
min-height: 50px; min-height: 50px;
} }
/* ===== File Input Customization ===== */
input[type="file"] { input[type="file"] {
border: 2px dashed #00ff99; border: 2px dashed #28E060;
cursor: pointer; cursor: pointer;
color: #28E060;
background-color: #2c2f33;
} }
input[type="file"]::file-selector-button { input[type="file"]::file-selector-button {
background-color: #00ff99; font-family: 'Press Start 2P', monospace;
color: #121212; font-size: 12px;
border: none; background-color: #2c2f33;
padding: 8px 15px; color: #28E060;
border: 2px solid #28E060;
padding-inline: 10px;
padding-block: 8px;
margin-right: 10px;
border-radius: 6px; border-radius: 6px;
text-transform: uppercase;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s ease;
} }
input[type="file"]::file-selector-button:hover { input[type="file"]::file-selector-button:hover {
background-color: #00cc77; background-color: #28E060;
color: #000;
box-shadow: 0 0 10px #28E060;
} }
/* ===== Focus Effects ===== */ /* ===== Focus Effects ===== */
@@ -126,7 +231,7 @@ input:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
outline: none; outline: none;
box-shadow: 0 0 10px rgba(0, 255, 153, 0.8); box-shadow: 0 0 10px #28E060;
} }
/* ===== Textareas Specific Widths ===== */ /* ===== Textareas Specific Widths ===== */
@@ -147,37 +252,126 @@ select:focus {
} }
button { button {
padding: 10px 20px; padding-inline: 20px;
border: 0px solid #00ff99; padding-block: 10px;
border: none;
border-radius: 8px; border-radius: 8px;
background-color: #2c2f33; background-color: #2c2f33;
color: #00ff99; color: #28E060;
font-size: 1em; font-size: 1em;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
width: auto; width: auto;
min-width: 225px; min-width: 225px;
max-width: 300px; max-width: 300px;
height: 45px;
} }
button:hover { button:hover {
background-color: #00ff99; background-color: #28E060;
color: #121212; color: #121212;
box-shadow: 0 0 10px rgba(0, 255, 153, 0.4); box-shadow: 0 0 10px #28E060;
} }
.danger-button { .danger-button {
background-color: #5f3131; background-color: #5f3131;
box-shadow: 0 0 20px rgba(185, 0, 0, 0.4); box-shadow: 0 0 10px #991717;
} }
.danger-button:hover { .danger-button:hover {
background-color: #ff0000; background-color: #af0000;
color: #121212; color: #121212;
box-shadow: 0 0 40px rgb(255, 0, 0); box-shadow: 0 0 40px #ff0000;
} }
.admin-button-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacer); /* e.g., 20px between rows and columns */
justify-items: center;
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.admin-button-grid button {
width: 100%;
max-width: 280px;
font-family: 'Press Start 2P', monospace;
font-size: 12px;
}
/* ===== Toggle Switch Styling ===== */ /* ===== Toggle Switch Styling ===== */
.toggle-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.toggle-label {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: #28E060;
}
.material-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.material-switch input {
opacity: 0;
width: 0;
height: 0;
}
.material-slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #222;
border: 2px solid #28E060;
border-radius: 34px;
transition: 0.4s;
margin: unset;
}
.material-slider::before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 2px;
bottom: 2px;
background-color: #28E060;
border-radius: 50%;
transition: 0.4s;
box-shadow: 0 0 6px #28E060;
}
.material-switch input:checked + .material-slider {
background-color: #28E060;
}
.material-switch input:checked + .material-slider::before {
transform: translateX(26px);
background-color: #000;
}
/* Label beside switch */
#toggle-label {
font-family: 'Press Start 2P', monospace;
color: #28E060;
margin-left: 20px;
font-size: 12px;
}
.toggle-container { .toggle-container {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -211,7 +405,7 @@ button {
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #2c2f33; background-color: #2c2f33;
border: 2px solid #00ff99; border: 2px solid #28E060;
border-radius: 34px; border-radius: 34px;
transition: .4s; transition: .4s;
display: flex; display: flex;
@@ -223,7 +417,7 @@ button {
content: ""; content: "";
height: 22px; height: 22px;
width: 22px; width: 22px;
background-color: #00ff99; background-color: #28E060;
border-radius: 50%; border-radius: 50%;
transition: .4s; transition: .4s;
transform: translateX(2px); transform: translateX(2px);
@@ -243,7 +437,7 @@ input:checked + .slider::before {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 0.9em; font-size: 0.9em;
color: #00ff99; color: #28E060;
margin-top: 5px; margin-top: 5px;
} }
@@ -265,7 +459,7 @@ input:checked + .slider::before {
max-width: 500px; max-width: 500px;
min-height: 50px; min-height: 50px;
background-color: #333; background-color: #333;
color: #00ff99; color: #28E060;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
padding: 14px; padding: 14px;
@@ -306,16 +500,16 @@ footer {
text-align: center; text-align: center;
padding: 25px; padding: 25px;
background-color: #1c1c1c; background-color: #1c1c1c;
color: #00ff99; color: #28E060;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4); box-shadow: 0 0 15px #28E060;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
margin-top: 40px; margin-top: 25px;
} }
footer a { footer a {
color: #00ff99; color: #28E060;
text-decoration: none; text-decoration: none;
} }
@@ -338,10 +532,11 @@ footer {
/* ===== Copy Feedback Message ===== */ /* ===== Copy Feedback Message ===== */
.copy-feedback, #shared-link-feedback { .copy-feedback, #shared-link-feedback {
background-color: #2c2f33; background-color: #2c2f33;
padding: 6px 12px; padding-inline: 12px;
padding-block: 6px;
margin-top: 6px; margin-top: 6px;
border-radius: 6px; border-radius: 6px;
color: #00ff99; color: #28E060;
font-size: 0.9em; font-size: 0.9em;
display: none; display: none;
opacity: 0; opacity: 0;
@@ -369,9 +564,10 @@ footer {
#share-link { #share-link {
display: block; display: block;
background-color: #2c2f33; background-color: #2c2f33;
padding: 8px 16px; padding-inline: 16px;
padding-block: 8px;
border-radius: 6px; border-radius: 6px;
color: #00ff99; color: #28E060;
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
max-width: 720px; max-width: 720px;
@@ -395,6 +591,7 @@ form {
} }
form input { form input {
min-height: 50px;
width: 80%; width: 80%;
max-width: 500px; max-width: 500px;
text-align: left; text-align: left;
@@ -411,7 +608,7 @@ section.card {
#pacmanCanvas { #pacmanCanvas {
background-color: black; background-color: black;
display: block; display: block;
border: 2px solid #00ff99; border: 2px solid #28E060;
border-radius: 12px; border-radius: 12px;
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
@@ -533,7 +730,7 @@ section.card {
padding: 25px; padding: 25px;
background-color: #1e1e1e; background-color: #1e1e1e;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4); box-shadow: 0 0 15px #28E060;
} }
.sitemap-header { .sitemap-header {
@@ -544,17 +741,18 @@ section.card {
} }
.sitemap-header h3 { .sitemap-header h3 {
color: #00ff99; color: #28E060;
margin: 0; margin: 0;
} }
.collapse-btn { .collapse-btn {
background: none; background: none;
border: none; border: none;
color: #00ff99; color: #28E060;
font-size: 1.2em; font-size: 1.2em;
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding-inline: 10px;
padding-block: 5px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
@@ -580,7 +778,7 @@ section.card {
padding: 8px; padding: 8px;
background-color: #2c2f33; background-color: #2c2f33;
border-radius: 6px; border-radius: 6px;
color: #00ff99; color: #28E060;
} }
#server-logs-section button { #server-logs-section button {
@@ -590,14 +788,14 @@ section.card {
} }
#logLoader { #logLoader {
color: #00ff99; color: #28E060;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
#logContainer { #logContainer {
background-color: #2c2f33; background-color: #2c2f33;
color: #00ff99; color: #28E060;
padding: 15px; padding: 15px;
border-radius: 8px; border-radius: 8px;
max-height: 400px; max-height: 400px;
@@ -611,7 +809,7 @@ section.card {
padding: 25px; padding: 25px;
background-color: #1e1e1e; background-color: #1e1e1e;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4); box-shadow: 0 0 15px #28E060;
} }
/* ===== Mobile Responsive Adjustments ===== */ /* ===== Mobile Responsive Adjustments ===== */
static/js/ui.js
+5 -1
View File
@@ -52,7 +52,11 @@ function setupElementListeners(elements) {
elements.generateBtn.addEventListener("click", generateRandomPassword); elements.generateBtn.addEventListener("click", generateRandomPassword);
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback")); elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback")); elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
elements.toggleSwitch.addEventListener("change", updateToggleLabels); elements.toggleSwitch.addEventListener("change", () => {
console.log("Mode:", elements.toggleSwitch.checked ? "Decrypt" : "Encrypt");
});
// Add file input change listener // Add file input change listener
const fileInput = document.getElementById("file-input"); const fileInput = document.getElementById("file-input");
templates/403.html
+12 -7
View File
@@ -10,31 +10,36 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
<header class="card"> <header class="card logo-header">
<h1>PacCrypt</h1> <div class="logo-container">
<p>Encrypt and share your text or files securely</p> <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
<div class="logo-text">
<h1>PACCRYPT</h1>
<p>Securely Share Text and Files</p>
</div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main> <main>
<section class="card form-group" style="padding: 50px 30px;"> <section class="card form-group" style="padding: 50px 30px;">
<h2 style="color: #00ff99; font-size: 2.5em;">🚫 403 - Forbidden</h2> <h2 style="color: #00ff99; font-size: 2.5em;">403 - Forbidden</h2>
<p class="mt-4" style="font-size: 1.2em; color: #cccccc;"> <p class="mt-4" style="font-size: 1.2em; color: #cccccc;">
Looks like this area is locked behind a secret ghost door! 🛡️👻 Looks like this area is locked behind a secret ghost door!
</p> </p>
<!-- Navigation --> <!-- Navigation -->
<div class="button-group mt-4"> <div class="button-group mt-4">
<a href="{{ url_for('index') }}"> <a href="{{ url_for('index') }}">
<button type="button">⬅️ Return Home</button> <button type="button">Return Home</button>
</a> </a>
</div> </div>
</section> </section>
templates/404.html
+11 -6
View File
@@ -10,25 +10,30 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
<header class="card"> <header class="card logo-header">
<h1>PacCrypt</h1> <div class="logo-container">
<p>Encrypt and share your text or files securely</p> <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
<div class="logo-text">
<h1>PACCRYPT</h1>
<p>Securely Share Text and Files</p>
</div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main> <main>
<section class="card form-group" style="padding: 50px 30px;"> <section class="card form-group" style="padding: 50px 30px;">
<h2 style="color: #ff0066; font-size: 2.5em;">❓ 404 - Not Found</h2> <h2 style="color: #ff0066; font-size: 2.5em;">404 - Not Found</h2>
<p class="mt-4" style="font-size: 1.2em; color: #cccccc;"> <p class="mt-4" style="font-size: 1.2em; color: #cccccc;">
Whoops! That page doesn't seem to exist. Maybe it got encrypted? 🧩🔐 Whoops! That page doesn't seem to exist. Maybe it got encrypted?
</p> </p>
<!-- Navigation --> <!-- Navigation -->
templates/500.html
+9 -4
View File
@@ -10,17 +10,22 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
<header class="card"> <header class="card logo-header">
<h1>PacCrypt</h1> <div class="logo-container">
<p>Encrypt and share your text or files securely</p> <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
<div class="logo-text">
<h1>PACCRYPT</h1>
<p>Securely Share Text and Files</p>
</div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
templates/admin.html
+35 -36
View File
@@ -10,24 +10,30 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
<header class="card"> <header class="card logo-header">
<h1>PacCrypt Admin Panel</h1> <div class="logo-container">
<p>Site Overview & Controls</p> <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
<div class="logo-text">
<h1>PACCRYPT</h1>
<p>ADMIN PANEL</p>
</div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main> <main>
<!-- Site Map Section --> <!-- Site Map Section -->
<section id="sitemap-section" class="card form-group"> <section id="sitemap-section" class="card form-group">
<h2>💾 Server Management</h2> <h2>Server Management</h2>
<div class="sitemap-header"> <div class="sitemap-header">
<button onclick="toggleSitemap()" style="margin-bottom: 10px;">Show Site Map</button> <button onclick="toggleSitemap()" style="margin-bottom: 10px;">Show Site Map</button>
@@ -36,32 +42,25 @@
<div id="sitemap-list" class="sitemap-content" style="display: none;"> <div id="sitemap-list" class="sitemap-content" style="display: none;">
<ul style="list-style: none; padding-left: 0;"> <ul style="list-style: none; padding-left: 0;">
{% for route in routes %} {% for route in routes %}
<li style="margin-bottom: 5px;">🔗 <code>{{ route }}</code></li> <li style="margin-bottom: 5px;"><code>{{ route }}</code></li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<!-- Action Buttons --> <!-- Server Management Buttons -->
<div class="button-group"> <div class="admin-button-grid">
<button onclick="restartServer()">🔁 Restart Server</button> <button onclick="restartServer()">Restart Server</button>
<a href="{{ url_for('admin_logout') }}"> <form action="{{ url_for('admin_logout') }}" method="GET" style="display: inline;">
<button type="button">🚪 Log Out</button> <button type="submit">Log Out</button>
</a> </form>
<button onclick="updateServer()">Pull Latest Changes</button>
<form action="{{ url_for('admin_settings') }}" method="GET" style="display: inline;">
<button type="submit">Manage Upload Settings</button>
</form>
<button onclick="resetAdmin()" class="danger-button">Reset Admin</button>
<button onclick="clearUploads()" class="danger-button">Clear Uploaded Files</button>
</div> </div>
<!-- Update and Settings Buttons -->
<div class="button-group">
<button onclick="updateServer()">🔁 Pull Latest Changes</button>
<a href="{{ url_for('admin_settings') }}">
<button type="button">🛠️ Manage Upload Settings</button>
</a>
</div>
<!-- Admin Reset and Clear Uploads Buttons -->
<div class="button-group">
<button onclick="resetAdmin()" class="danger-button">⚠️ Reset Admin</button>
<button onclick="clearUploads()" class="danger-button">🗑 Clear Uploaded Files</button>
</div>
<!-- Flash Messages --> <!-- Flash Messages -->
<div id="admin-feedback" class="copy-feedback" style="display: none;"></div> <div id="admin-feedback" class="copy-feedback" style="display: none;"></div>
@@ -69,7 +68,7 @@
<!-- Password Change Section --> <!-- Password Change Section -->
<section id="password-change-section" class="card form-group"> <section id="password-change-section" class="card form-group">
<h2>🔑 Change Admin Password</h2> <h2>Change Admin Password</h2>
<!-- Password Feedback --> <!-- Password Feedback -->
{% with messages = get_flashed_messages(with_categories=true, category_filter=['password-feedback']) %} {% with messages = get_flashed_messages(with_categories=true, category_filter=['password-feedback']) %}
@@ -88,19 +87,19 @@
<!-- Server Status Section --> <!-- Server Status Section -->
<section id="server-status-section" class="card form-group"> <section id="server-status-section" class="card form-group">
<h2>📊 Server Status</h2> <h2>Server Status</h2>
<ul style="list-style: none; padding-left: 0;"> <ul style="width: 400px;">
<li>🕒 Uptime: <code>{{ server_info.uptime }}</code></li> <li>Uptime: <code>0 days, 11 hours, 47 minutes</code></li>
<li>📅 Server Time: <code>{{ server_info.time }}</code></li> <li>Server Time: <code>2025-05-14 14:32:18</code></li>
<li>🐍 Python Version: <code>{{ server_info.python }}</code></li> <li>Python Version: <code>3.13.3</code></li>
<li>⚙️ Flask Debug Mode: <code>{{ server_info.debug }}</code></li> <li>Flask Debug Mode: <code>True</code></li>
</ul> </ul>
</section> </section>
<!-- Server Logs Section --> <!-- Server Logs Section -->
<section id="server-logs-section" class="card form-group"> <section id="server-logs-section" class="card form-group">
<h2>📜 Server Logs</h2> <h2>Server Logs</h2>
<button onclick="toggleLogs()" style="margin-bottom: 10px;">🔽 Show/Hide Logs</button> <button onclick="toggleLogs()" style="margin-bottom: 10px;">Show/Hide Logs</button>
<div id="logLoader" style="display: none; margin-bottom: 10px;">Loading logs...</div> <div id="logLoader" style="display: none; margin-bottom: 10px;">Loading logs...</div>
<pre id="logContainer" style="display: none;"></pre> <pre id="logContainer" style="display: none;"></pre>
</section> </section>
@@ -123,10 +122,10 @@
const logLoader = document.getElementById('logLoader'); const logLoader = document.getElementById('logLoader');
if (logContainer.style.display === 'none') { if (logContainer.style.display === 'none') {
logLoader.style.display = 'block'; logLoader.style.display = 'block';
const response = await fetch('{{ url_for('admin_logs') }}'); const response = await fetch("{{ url_for('admin_logs') }}");
const data = await response.json(); const data = await response.json();
logLoader.style.display = 'none'; logLoader.style.display = 'none';
logContainer.innerText = data.logs.join('\\n'); logContainer.innerText = data.logs.join('\n');
logContainer.style.display = 'block'; logContainer.style.display = 'block';
} else { } else {
logContainer.style.display = 'none'; logContainer.style.display = 'none';
templates/admin_login.html
+1 -1
View File
@@ -10,8 +10,8 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
templates/admin_settings.html
+2 -1
View File
@@ -10,8 +10,9 @@
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
templates/admin_setup.html
+11 -6
View File
@@ -4,30 +4,35 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="PacCrypt - Admin Setup" /> <meta name="description" content="PacCrypt - Admin Setup" />
<title>Admin Setup - PacCrypt</title> <title>PacCrypt - Admin Setup</title>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" /> <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
<header class="card"> <header class="card logo-header">
<h1>PacCrypt Admin</h1> <div class="logo-container">
<img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
<div class="logo-text">
<h1>PACCRYPT</h1>
<p>Admin Setup</p> <p>Admin Setup</p>
</div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main> <main>
<!-- Setup Form Section --> <!-- Setup Form Section -->
<section class="card form-group"> <section class="card form-group">
<h2>🛡️ Create Admin Account</h2> <h2>Create Admin Account</h2>
<!-- Flash Messages --> <!-- Flash Messages -->
{% with messages = get_flashed_messages() %} {% with messages = get_flashed_messages() %}
@@ -41,7 +46,7 @@
<input type="text" name="username" placeholder="Username" required /> <input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required /> <input type="password" name="password" placeholder="Password" required />
<div class="button-group mt-3"> <div class="button-group mt-3">
<button type="submit">📝 Set Credentials</button> <button type="submit">Set Credentials</button>
</div> </div>
</form> </form>
</section> </section>
templates/index.html
+29 -23
View File
@@ -4,35 +4,40 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="PacCrypt - Secure text and file encryption with password generation" /> <meta name="description" content="PacCrypt - Secure text and file encryption with password generation" />
<title>PacCrypt - Encrypt and share your text or files securely</title> <title>PacCrypt</title>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" href="{{ url_for('static', filename='img/PacCrypt.png') }}" type="image/png" /> <link rel="icon" href="{{ url_for('static', filename='img/PacCrypt.png') }}" type="image/png" />
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="{{ url_for('static', filename='js/main.js') }}" defer></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}" defer></script>
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->
<header class="card"> <header class="card logo-header">
<h1>PacCrypt</h1> <div class="logo-container">
<p>Encrypt and share your text or files securely</p> <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
<div class="logo-text">
<h1>PACCRYPT</h1>
<p>Securely Share Text and Files</p>
</div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main> <main>
<!-- Password Generator Section --> <!-- Password Generator Section -->
<section id="password-generator-section" class="card form-group"> <section id="password-generator-section" class="card form-group">
<h2>🔑 Password Generator</h2> <h2>Password Generator</h2>
<div class="form-group"> <div class="form-group">
<input type="text" id="generated-password" readonly /> <input type="text" id="generated-password" readonly />
<div class="button-group"> <div class="button-group">
<button type="button" id="generate-btn">🎲 Generate</button> <button type="button" id="generate-btn">Generate</button>
<button type="button" id="copy-btn">📋 Copy Password</button> <button type="button" id="copy-btn">Copy Password</button>
</div> </div>
<div id="password-copy-feedback" class="copy-feedback">Password copied to clipboard!</div> <div id="password-copy-feedback" class="copy-feedback">Password copied to clipboard!</div>
</div> </div>
@@ -52,7 +57,7 @@
<!-- Encryption/Decryption Section --> <!-- Encryption/Decryption Section -->
<section id="encoding-section" class="card form-group"> <section id="encoding-section" class="card form-group">
<h2>🔐 Encrypt & Decrypt</h2> <h2>Encrypt & Decrypt</h2>
<form id="crypto-form" class="form-group"> <form id="crypto-form" class="form-group">
<!-- Encryption Type Selection --> <!-- Encryption Type Selection -->
<div class="form-group"> <div class="form-group">
@@ -65,14 +70,15 @@
<!-- Operation Toggle --> <!-- Operation Toggle -->
<div class="toggle-container"> <div class="toggle-container">
<span id="toggle-left-label">Encrypt</span> <span class="toggle-label">Encrypt</span>
<label class="switch"> <label class="material-switch">
<input type="checkbox" id="operation-toggle" /> <input type="checkbox" id="operation-toggle">
<span class="slider round"></span> <span class="material-slider"></span>
</label> </label>
<span id="toggle-right-label">Decrypt</span> <span class="toggle-label">Decrypt</span>
</div> </div>
<!-- Text Input Section --> <!-- Text Input Section -->
<div id="text-section" class="form-group"> <div id="text-section" class="form-group">
<textarea id="input-text" placeholder="Enter your message..."></textarea> <textarea id="input-text" placeholder="Enter your message..."></textarea>
@@ -86,19 +92,19 @@
<!-- File Input Section --> <!-- File Input Section -->
<div id="file-section" class="form-group" style="display: none;"> <div id="file-section" class="form-group" style="display: none;">
<input type="file" id="file-input" /> <input type="file" id="file-input" />
<button type="button" id="remove-file-btn">🗑 Remove File</button> <button type="button" id="remove-file-btn">Remove File</button>
</div> </div>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="button-group"> <div class="button-group">
<button type="submit">⚡ Execute</button> <button type="submit">Execute</button>
<button type="button" id="copy-output-btn">📋 Copy Output</button> <button type="button" id="copy-output-btn">Copy Output</button>
</div> </div>
<!-- Output Section --> <!-- Output Section -->
<textarea id="output-text" readonly placeholder="Encrypted/Decrypted text will appear here..."></textarea> <textarea id="output-text" readonly placeholder="Encrypted/Decrypted Output"></textarea>
<div class="button-group"> <div class="button-group">
<button type="button" id="clear-all-btn" class="danger-button">🧹 Clear All</button> <button type="button" id="clear-all-btn" class="danger-button">Clear All</button>
</div> </div>
<div id="output-copy-feedback" class="copy-feedback">Text copied to clipboard!</div> <div id="output-copy-feedback" class="copy-feedback">Text copied to clipboard!</div>
</form> </form>
@@ -106,7 +112,7 @@
<!-- File Sharing Section --> <!-- File Sharing Section -->
<section id="sharing-section" class="card form-group"> <section id="sharing-section" class="card form-group">
<h2>📤 PacCrypt Share</h2> <h2>PacCrypt Share</h2>
<h3>Securely share encrypted files.</h3> <h3>Securely share encrypted files.</h3>
<p>Do not lose your passwords, data will be lost forever!</p> <p>Do not lose your passwords, data will be lost forever!</p>
@@ -121,7 +127,7 @@
<div class="share-link-container"> <div class="share-link-container">
<a id="share-link" href="{{ message.split(' at ')[1] }}" target="_blank">{{ message.split(" at ")[1] }}</a> <a id="share-link" href="{{ message.split(' at ')[1] }}" target="_blank">{{ message.split(" at ")[1] }}</a>
<!--- <span id="share-link">{{ message.split(" at ")[1] }}</span> ---> <!--- <span id="share-link">{{ message.split(" at ")[1] }}</span> --->
<button type="button" id="copy-share-btn">📋 Copy Link</button> <button type="button" id="copy-share-btn">Copy Link</button>
<div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div> <div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div>
</div> </div>
{% endif %} {% endif %}
@@ -136,7 +142,7 @@
<!-- Share Link Container (initially hidden) --> <!-- Share Link Container (initially hidden) -->
<div class="share-link-container" id="share-link-container" style="display: none;"> <div class="share-link-container" id="share-link-container" style="display: none;">
<a id="share-link" href="#" target="_blank"></a> <a id="share-link" href="#" target="_blank"></a>
<button type="button" id="copy-share-btn">📋 Copy Link</button> <button type="button" id="copy-share-btn">Copy Link</button>
<div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div> <div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div>
</div> </div>
<form method="POST" enctype="multipart/form-data" class="form-group" id="upload-form"> <form method="POST" enctype="multipart/form-data" class="form-group" id="upload-form">
@@ -144,7 +150,7 @@
<input type="password" name="enc_password" placeholder="Encryption/Decryption Password" required /> <input type="password" name="enc_password" placeholder="Encryption/Decryption Password" required />
<input type="password" name="pickup_password" placeholder="Pickup Password" required /> <input type="password" name="pickup_password" placeholder="Pickup Password" required />
<div class="button-group"> <div class="button-group">
<button type="submit">🔒 Upload and Generate Link</button> <button type="submit">Upload and Generate Link</button>
</div> </div>
</form> </form>
templates/pickup.html
+1 -1
View File
@@ -11,7 +11,7 @@
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head> </head>
<body class="dark"> <body class="dark">
<!-- Header --> <!-- Header -->