uploading bar

2026-01-21 14:02:50 -07:00
parent 27acd0792f
commit fa3130682d
2 changed files with 178 additions and 1 deletions
--- a/Assets/DOJ/index.html
+++ b/Assets/DOJ/index.html
@@ -239,6 +239,46 @@
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
+
+        .upload-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .progress-container {
+            display: none;
+            width: 400px;
+            margin-top: 20px;
+            align-self: flex-end;
+            margin-right: calc(50% - 300px);
+        }
+
+        .progress-container.show {
+            display: block;
+        }
+
+        .progress-bar-wrapper {
+            width: 100%;
+            height: 30px;
+            background-color: #e0e0e0;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #0066cc 0%, #0052a3 100%);
+            width: 0%;
+            transition: width 0.3s ease;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            font-size: 14px;
+        }
    </style>
 </head>
 <body>
@@ -292,8 +332,52 @@
            <div class="zip-file-icon">
                <div class="zip-file-label">EpsteinFiles.zip</div>
            </div>
-            <button class="upload-button">UPLOAD</button>
+            <button class="upload-button" id="uploadBtn">UPLOAD</button>
+            <div class="progress-container" id="progressContainer">
+                <div class="progress-bar-wrapper">
+                    <div class="progress-bar" id="progressBar"></div>
+                </div>
+            </div>
        </div>
    </div>
+
+    <script>
+        const uploadBtn = document.getElementById('uploadBtn');
+        const progressContainer = document.getElementById('progressContainer');
+        const progressBar = document.getElementById('progressBar');
+
+        uploadBtn.addEventListener('click', function() {
+            // Disable button
+            uploadBtn.disabled = true;
+            uploadBtn.textContent = 'UPLOADING...';
+
+            // Show progress bar
+            progressContainer.classList.add('show');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+
+            // Simulate upload progress
+            let progress = 0;
+            const interval = setInterval(() => {
+                progress += Math.random() * 15;
+                if (progress >= 100) {
+                    progress = 100;
+                    clearInterval(interval);
+                    progressBar.textContent = '100%';
+                    
+                    // Reset after a moment
+                    setTimeout(() => {
+                        progressContainer.classList.remove('show');
+                        uploadBtn.disabled = false;
+                        uploadBtn.textContent = 'UPLOAD';
+                        progressBar.style.width = '0%';
+                    }, 1000);
+                } else {
+                    progressBar.style.width = progress + '%';
+                    progressBar.textContent = Math.round(progress) + '%';
+                }
+            }, 200);
+        });
+    </script>
 </body>
 </html>