UI Changes and better phone experience.

2025-05-14 05:00:12 -10:00
parent ed11ccd2a1
commit bb8690b74f
12 changed files with 655 additions and 427 deletions
@@ -10,31 +10,36 @@
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
    <!-- Header -->
-    <header class="card">
-        <h1>PacCrypt</h1>
-        <p>Encrypt and share your text or files securely</p>
-    </header>
+    <header class="card logo-header">
+        <div class="logo-container">
+          <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> 

    <!-- Main Content -->
    <main>
        <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;">
-                Looks like this area is locked behind a secret ghost door! 🛡️👻
+                Looks like this area is locked behind a secret ghost door!
            </p>

            <!-- Navigation -->
            <div class="button-group mt-4">
                <a href="{{ url_for('index') }}">
-                    <button type="button">⬅️ Return Home</button>
+                    <button type="button">Return Home</button>
                </a>
            </div>
        </section>
@@ -10,25 +10,30 @@
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
    <!-- Header -->
-    <header class="card">
-        <h1>PacCrypt</h1>
-        <p>Encrypt and share your text or files securely</p>
-    </header>
+    <header class="card logo-header">
+        <div class="logo-container">
+          <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> 

    <!-- Main Content -->
    <main>
        <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;">
-                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>

            <!-- Navigation -->
@@ -10,18 +10,23 @@
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
    <!-- Header -->
-    <header class="card">
-        <h1>PacCrypt</h1>
-        <p>Encrypt and share your text or files securely</p>
-    </header>
+    <header class="card logo-header">
+        <div class="logo-container">
+          <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> 

    <!-- Main Content -->
    <main>
@@ -10,24 +10,30 @@
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
+
    <!-- Header -->
-    <header class="card">
-        <h1>PacCrypt Admin Panel</h1>
-        <p>Site Overview & Controls</p>
-    </header>
+    <header class="card logo-header">
+        <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 PANEL</p>
+          </div>
+        </div>
+      </header>  

    <!-- Main Content -->
    <main>
        <!-- Site Map Section -->
        <section id="sitemap-section" class="card form-group">
-            <h2>💾 Server Management</h2>
+            <h2>Server Management</h2>
            
            <div class="sitemap-header">
                <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;">
                <ul style="list-style: none; padding-left: 0;">
                    {% for route in routes %}
-                    <li style="margin-bottom: 5px;">🔗 <code>{{ route }}</code></li>
+                    <li style="margin-bottom: 5px;"><code>{{ route }}</code></li>
                    {% endfor %}
                </ul>
            </div>

-            <!-- Action Buttons -->
-            <div class="button-group">
-                <button onclick="restartServer()">🔁 Restart Server</button>
-                <a href="{{ url_for('admin_logout') }}">
-                    <button type="button">🚪 Log Out</button>
-                </a>
-            </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>
+<!-- Server Management Buttons -->
+            <div class="admin-button-grid">
+                <button onclick="restartServer()">Restart Server</button>
+                <form action="{{ url_for('admin_logout') }}" method="GET" style="display: inline;">
+                    <button type="submit">Log Out</button>
+                </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>
+  

            <!-- Flash Messages -->
            <div id="admin-feedback" class="copy-feedback" style="display: none;"></div>
@@ -69,7 +68,7 @@

        <!-- Password Change Section -->
        <section id="password-change-section" class="card form-group">
-            <h2>🔑 Change Admin Password</h2>
+            <h2>Change Admin Password</h2>

            <!-- Password Feedback -->
            {% with messages = get_flashed_messages(with_categories=true, category_filter=['password-feedback']) %}
@@ -88,19 +87,19 @@

        <!-- Server Status Section -->
        <section id="server-status-section" class="card form-group">
-            <h2>📊 Server Status</h2>
-            <ul style="list-style: none; padding-left: 0;">
-                <li>🕒 Uptime: <code>{{ server_info.uptime }}</code></li>
-                <li>📅 Server Time: <code>{{ server_info.time }}</code></li>
-                <li>🐍 Python Version: <code>{{ server_info.python }}</code></li>
-                <li>⚙️ Flask Debug Mode: <code>{{ server_info.debug }}</code></li>
+            <h2>Server Status</h2>
+            <ul style="width: 400px;">
+                <li>Uptime: <code>0 days, 11 hours, 47 minutes</code></li>
+                <li>Server Time: <code>2025-05-14 14:32:18</code></li>
+                <li>Python Version: <code>3.13.3</code></li>
+                <li>Flask Debug Mode: <code>True</code></li>
            </ul>
        </section>

        <!-- Server Logs Section -->
        <section id="server-logs-section" class="card form-group">
-            <h2>📜 Server Logs</h2>
-            <button onclick="toggleLogs()" style="margin-bottom: 10px;">🔽 Show/Hide Logs</button>
+            <h2>Server Logs</h2>
+            <button onclick="toggleLogs()" style="margin-bottom: 10px;">Show/Hide Logs</button>
            <div id="logLoader" style="display: none; margin-bottom: 10px;">Loading logs...</div>
            <pre id="logContainer" style="display: none;"></pre>
        </section>
@@ -123,10 +122,10 @@
        const logLoader = document.getElementById('logLoader');
        if (logContainer.style.display === 'none') {
            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();
            logLoader.style.display = 'none';
-            logContainer.innerText = data.logs.join('\\n');
+            logContainer.innerText = data.logs.join('\n');
            logContainer.style.display = 'block';
        } else {
            logContainer.style.display = 'none';
@@ -10,8 +10,8 @@
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
@@ -10,8 +10,9 @@
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    
 </head>
 <body class="dark">
    <!-- Header -->
@@ -4,30 +4,35 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="PacCrypt - Admin Setup" />
-    <title>Admin Setup - PacCrypt</title>
+    <title>PacCrypt - Admin Setup</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/PacCrypt.png') }}" />
    
    <!-- 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 href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
 </head>
 <body class="dark">
    <!-- Header -->
-    <header class="card">
-        <h1>PacCrypt Admin</h1>
-        <p>Admin Setup</p>
-    </header>
+    <header class="card logo-header">
+        <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>
+          </div>
+        </div>
+      </header>  

    <!-- Main Content -->
    <main>
        <!-- Setup Form Section -->
        <section class="card form-group">
-            <h2>🛡️ Create Admin Account</h2>
+            <h2>Create Admin Account</h2>

            <!-- Flash Messages -->
            {% with messages = get_flashed_messages() %}
@@ -41,7 +46,7 @@
                <input type="text" name="username" placeholder="Username" required />
                <input type="password" name="password" placeholder="Password" required />
                <div class="button-group mt-3">
-                    <button type="submit">📝 Set Credentials</button>
+                    <button type="submit">Set Credentials</button>
                </div>
            </form>
        </section>
@@ -4,35 +4,40 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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 -->
    <link rel="icon" href="{{ url_for('static', filename='img/PacCrypt.png') }}" type="image/png" />
    
    <!-- Stylesheets -->
    <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 -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}" defer></script>
 </head>
 <body class="dark">
    <!-- Header -->
-    <header class="card">
-        <h1>PacCrypt</h1>
-        <p>Encrypt and share your text or files securely</p>
-    </header>
+    <header class="card logo-header">
+        <div class="logo-container">
+          <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>  

    <!-- Main Content -->
    <main>
        <!-- Password Generator Section -->
        <section id="password-generator-section" class="card form-group">
-            <h2>🔑 Password Generator</h2>
+            <h2>Password Generator</h2>
            <div class="form-group">
                <input type="text" id="generated-password" readonly />
                <div class="button-group">
-                    <button type="button" id="generate-btn">🎲 Generate</button>
-                    <button type="button" id="copy-btn">📋 Copy Password</button>
+                    <button type="button" id="generate-btn">Generate</button>
+                    <button type="button" id="copy-btn">Copy Password</button>
                </div>
                <div id="password-copy-feedback" class="copy-feedback">Password copied to clipboard!</div>
            </div>
@@ -52,7 +57,7 @@

        <!-- Encryption/Decryption Section -->
        <section id="encoding-section" class="card form-group">
-            <h2>🔐 Encrypt & Decrypt</h2>
+            <h2>Encrypt & Decrypt</h2>
            <form id="crypto-form" class="form-group">
                <!-- Encryption Type Selection -->
                <div class="form-group">
@@ -65,13 +70,14 @@

                <!-- Operation Toggle -->
                <div class="toggle-container">
-                    <span id="toggle-left-label">Encrypt</span>
-                    <label class="switch">
-                        <input type="checkbox" id="operation-toggle" />
-                        <span class="slider round"></span>
+                    <span class="toggle-label">Encrypt</span>
+                    <label class="material-switch">
+                      <input type="checkbox" id="operation-toggle">
+                      <span class="material-slider"></span>
                    </label>
-                    <span id="toggle-right-label">Decrypt</span>
-                </div>
+                    <span class="toggle-label">Decrypt</span>
+                  </div>
+                                 

                <!-- Text Input Section -->
                <div id="text-section" class="form-group">
@@ -86,19 +92,19 @@
                <!-- File Input Section -->
                <div id="file-section" class="form-group" style="display: none;">
                    <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>

                <!-- Action Buttons -->
                <div class="button-group">
-                    <button type="submit">⚡ Execute</button>
-                    <button type="button" id="copy-output-btn">📋 Copy Output</button>
+                    <button type="submit">Execute</button>
+                    <button type="button" id="copy-output-btn">Copy Output</button>
                </div>

                <!-- 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">
-                    <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 id="output-copy-feedback" class="copy-feedback">Text copied to clipboard!</div>
            </form>
@@ -106,7 +112,7 @@

        <!-- File Sharing Section -->
        <section id="sharing-section" class="card form-group">
-            <h2>📤 PacCrypt Share</h2>
+            <h2>PacCrypt Share</h2>
            <h3>Securely share encrypted files.</h3>
            <p>Do not lose your passwords, data will be lost forever!</p>

@@ -121,7 +127,7 @@
                    <div class="share-link-container">
                        <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> --->
-                        <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>
                    {% endif %}
@@ -136,7 +142,7 @@
            <!-- Share Link Container (initially hidden) -->
            <div class="share-link-container" id="share-link-container" style="display: none;">
                <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>
            <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="pickup_password" placeholder="Pickup Password" required />
                <div class="button-group">
-                    <button type="submit">🔒 Upload and Generate Link</button>
+                    <button type="submit">Upload and Generate Link</button>
                </div>
            </form>

@@ -11,7 +11,7 @@
    
    <!-- Stylesheets -->
    <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>
 <body class="dark">
    <!-- Header -->