Update app.py

app.py

@@ -74,75 +74,303 @@ async def index():
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>File Upload</title>
         <style>
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                margin: 0;
+                padding: 20px;
+                background-color: #f5f5f5;
+                color: #333;
+            }
+
+            .container {
+                max-width: 800px;
+                margin: 0 auto;
+                background: white;
+                padding: 30px;
+                border-radius: 12px;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            h1 {
+                font-size: 2.5em;
+                margin-bottom: 20px;
+                color: #007bff;
+            }
+
+            h2 {
+                font-size: 1.8em;
+                margin-top: 30px;
+                margin-bottom: 15px;
+                color: #333;
+            }
+
+            .upload-form {
+                margin-top: 20px;
+            }
+
+            .form-group {
+                margin-bottom: 20px;
+            }
+
+            .form-group label {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 8px;
+            }
+
+            .form-group input[type="text"],
+            .form-group input[type="file"] {
+                width: 100%;
+                padding: 12px;
+                border: 2px solid #ddd;
+                border-radius: 8px;
+                font-size: 1em;
+                transition: border-color 0.3s ease;
+            }
+
+            .form-group input[type="text"]:focus,
+            .form-group input[type="file"]:focus {
+                border-color: #007bff;
+                outline: none;
+            }
+
+            .file-input {
+                background: #f8f9fa;
+                padding: 20px;
+                border-radius: 8px;
+                border: 2px dashed #ddd;
+                text-align: center;
+                cursor: pointer;
+                transition: background 0.3s ease, border-color 0.3s ease;
+            }
+
+            .file-input:hover {
+                background: #e9ecef;
+                border-color: #007bff;
+            }
+
+            .file-input.dragover {
+                background: #e9ecef;
+                border-color: #007bff;
+            }
+
+            .file-input input {
+                display: none;
+            }
+
+            .file-input label {
+                font-size: 1.1em;
+                color: #666;
+                cursor: pointer;
+            }
+
+            .private-checkbox {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                margin-top: 20px;
+            }
+
+            .private-checkbox input {
+                width: 18px;
+                height: 18px;
+                cursor: pointer;
+            }
+
+            .private-checkbox label {
+                font-size: 1em;
+                color: #666;
+            }
+
             .progress-bar {
                 width: 100%;
-                background-color: #f3f3f3;
-                border-radius: 5px;
-                margin-top: 10px;
+                height: 12px;
+                background: #e9ecef;
+                border-radius: 6px;
+                margin-top: 20px;
+                overflow: hidden;
+                display: none;
             }
+
             .progress-bar-inner {
+                height: 100%;
+                background: #007bff;
                 width: 0%;
-                height: 30px;
-                background-color: #4caf50;
-                border-radius: 5px;
-                text-align: center;
-                line-height: 30px;
-                color: white;
+                border-radius: 6px;
                 transition: width 0.3s ease;
             }
+
             .button {
                 display: inline-block;
-                padding: 10px 20px;
-                background-color: #007bff;
+                padding: 12px 24px;
+                background: #007bff;
                 color: white;
-                text-decoration: none;
-                border-radius: 5px;
-                margin: 5px;
+                border: none;
+                border-radius: 8px;
+                font-size: 1em;
+                cursor: pointer;
+                transition: background 0.3s ease;
+                margin-top: 20px;
             }
+
             .button:hover {
-                background-color: #0056b3;
+                background: #0056b3;
             }
-            .private-checkbox {
-                margin: 10px 0;
+
+            .button:disabled {
+                background: #ccc;
+                cursor: not-allowed;
+            }
+
+            .upload-status {
+                margin-top: 20px;
+                font-size: 0.9em;
+                color: #666;
+            }
+
+            .search-form {
+                margin-top: 30px;
+            }
+
+            .search-form input[type="text"] {
+                width: calc(100% - 100px);
+                padding: 12px;
+                border: 2px solid #ddd;
+                border-radius: 8px;
+                font-size: 1em;
+                transition: border-color 0.3s ease;
+            }
+
+            .search-form input[type="text"]:focus {
+                border-color: #007bff;
+                outline: none;
+            }
+
+            .search-form button {
+                padding: 12px 24px;
+                background: #28a745;
+                color: white;
+                border: none;
+                border-radius: 8px;
+                font-size: 1em;
+                cursor: pointer;
+                transition: background 0.3s ease;
+            }
+
+            .search-form button:hover {
+                background: #218838;
+            }
+
+            @media (max-width: 768px) {
+                .container {
+                    padding: 20px;
+                }
+
+                h1 {
+                    font-size: 2em;
+                }
+
+                h2 {
+                    font-size: 1.5em;
+                }
+
+                .button {
+                    width: 100%;
+                    margin-top: 15px;
+                }
+
+                .search-form input[type="text"] {
+                    width: calc(100% - 90px);
+                }
             }
         </style>
     </head>
     <body>
-        <h1>File Upload & Album Management</h1>
-        <form action="/album/create" method="post" enctype="multipart/form-data" onsubmit="showProgressBar()">
-            <input type="text" name="album_name" placeholder="Album Name" required><br><br>
-            <input type="file" name="files" accept="*/*" multiple required><br><br>
-            <label class="private-checkbox">
-                <input type="checkbox" name="is_private"> Make this album private (exclude from search)
-            </label><br><br>
-            <div class="progress-bar">
-                <div class="progress-bar-inner" id="progressBar">0%</div>
-            </div>
-            <button type="submit">Create Album</button>
-        </form>
-        <h2>Single File Upload</h2>
-        <a href="https://albumup-up1.hf.space/" class="button">Upload Single File</a>
-        <h2>Search Albums</h2>
-        <form action="/search" method="get">
-            <input type="text" name="query" placeholder="Search by album name..." required>
-            <button type="submit">Search</button>
-        </form>
+        <div class="container">
+            <h1>File Upload & Album Management</h1>
+            
+            <form class="upload-form" action="/album/create" method="post" enctype="multipart/form-data" onsubmit="showProgressBar()">
+                <div class="form-group">
+                    <label for="album_name">Album Name</label>
+                    <input type="text" id="album_name" name="album_name" placeholder="Enter album name" required>
+                </div>
+
+                <div class="form-group">
+                    <div class="file-input" id="fileInput" ondragover="handleDragOver(event)" ondrop="handleDrop(event)">
+                        <input type="file" id="files" name="files" multiple required>
+                        <label for="files">Drag & drop files here or click to upload</label>
+                    </div>
+                </div>
+
+                <div class="private-checkbox">
+                    <input type="checkbox" id="is_private" name="is_private">
+                    <label for="is_private">Make this album private (exclude from search)</label>
+                </div>
+
+                <div class="progress-bar" id="progressBar">
+                    <div class="progress-bar-inner" id="progressBarInner"></div>
+                </div>
+
+                <button type="submit" class="button" id="uploadButton">Create Album</button>
+                <div class="upload-status" id="uploadStatus"></div>
+            </form>
+
+            <h2>Search Albums</h2>
+            <form class="search-form" action="/search" method="get">
+                <input type="text" name="query" placeholder="Search by album name..." required>
+                <button type="submit">Search</button>
+            </form>
+        </div>
+
         <script>
             function showProgressBar() {
                 const progressBar = document.getElementById('progressBar');
-                progressBar.style.width = '0%';
-                progressBar.textContent = '0%';
+                const progressBarInner = document.getElementById('progressBarInner');
+                const uploadButton = document.getElementById('uploadButton');
+                const uploadStatus = document.getElementById('uploadStatus');
+
+                progressBar.style.display = 'block';
+                uploadButton.disabled = true;
+                uploadButton.textContent = 'Uploading...';
+                uploadStatus.textContent = 'Starting upload...';
+
+                let progress = 0;
                 const interval = setInterval(() => {
-                    const width = parseFloat(progressBar.style.width);
-                    if (width < 90) {
-                        const newWidth = width + 1;
-                        progressBar.style.width = newWidth + '%';
-                        progressBar.textContent = Math.round(newWidth) + '%';
-                    } else {
+                    progress += 1;
+                    progressBarInner.style.width = progress + '%';
+                    if (progress >= 90) {
                         clearInterval(interval);
                     }
-                }, 30); // Update every 30ms for smoother progress
+                }, 30);
             }
+
+            function handleDragOver(event) {
+                event.preventDefault();
+                const fileInput = document.getElementById('fileInput');
+                fileInput.classList.add('dragover');
+            }
+
+            function handleDrop(event) {
+                event.preventDefault();
+                const fileInput = document.getElementById('fileInput');
+                fileInput.classList.remove('dragover');
+                const files = event.dataTransfer.files;
+                document.getElementById('files').files = files;
+                updateFileLabel(files);
+            }
+
+            function updateFileLabel(files) {
+                const label = document.querySelector('.file-input label');
+                if (files.length > 0) {
+                    label.textContent = `${files.length} file(s) selected`;
+                } else {
+                    label.textContent = 'Drag & drop files here or click to upload';
+                }
+            }
+
+            document.getElementById('files').addEventListener('change', (event) => {
+                updateFileLabel(event.target.files);
+            });
         </script>
     </body>
     </html>