Create app/templates/index.html
Browse files- app/templates/index.html +70 -0
app/templates/index.html
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Triflix Uploader</title>
|
| 7 |
+
<link rel="stylesheet" href="{{ url_for('static', path='/style.css') }}">
|
| 8 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 9 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
| 11 |
+
</head>
|
| 12 |
+
<body>
|
| 13 |
+
<div class="container">
|
| 14 |
+
<header>
|
| 15 |
+
<h1>Triflix Uploader</h1>
|
| 16 |
+
<p>Secure, resumable file uploads.</p>
|
| 17 |
+
</header>
|
| 18 |
+
|
| 19 |
+
<main id="uploader-card" class="card">
|
| 20 |
+
<!-- Initial State: Select File -->
|
| 21 |
+
<div id="state-initial" class="uploader-state active">
|
| 22 |
+
<div class="drop-zone" id="drop-zone">
|
| 23 |
+
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10.586V19a1 1 0 0 0 2 0v-8.414l2.536 2.535a1 1 0 0 0 1.414-1.414l-4.242-4.243a1 1 0 0 0-1.414 0L4.05 9.172a1 1 0 0 0 1.414 1.414L7 10.586zM13 13a1 1 0 0 0-2 0v6a1 1 0 0 0 2 0v-6zm3.95-3.828-4.243-4.242a1 1 0 0 0-1.414 0L7 9.172A1 1 0 0 0 8.414 10.586L10 9.001V19a1 1 0 0 0 2 0V9.001l1.586 1.585a1 1 0 0 0 1.414-1.414zM12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z"/></svg>
|
| 24 |
+
<p><strong>Drag & Drop</strong> a file here or</p>
|
| 25 |
+
<button id="browse-btn" class="btn">Browse Files</button>
|
| 26 |
+
<input type="file" id="file-input" hidden>
|
| 27 |
+
</div>
|
| 28 |
+
</div>
|
| 29 |
+
|
| 30 |
+
<!-- Uploading State -->
|
| 31 |
+
<div id="state-uploading" class="uploader-state">
|
| 32 |
+
<p class="file-info">
|
| 33 |
+
Uploading: <strong id="file-name"></strong>
|
| 34 |
+
(<span id="file-size"></span>)
|
| 35 |
+
</p>
|
| 36 |
+
<div class="progress-bar-container">
|
| 37 |
+
<div class="progress-bar" id="progress-bar"></div>
|
| 38 |
+
</div>
|
| 39 |
+
<p class="status-text" id="status-text">Initializing...</p>
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<!-- Assembling State -->
|
| 43 |
+
<div id="state-assembling" class="uploader-state">
|
| 44 |
+
<div class="spinner"></div>
|
| 45 |
+
<p class="status-text">Finalizing and encrypting your file...</p>
|
| 46 |
+
<p class="subtle-text">Please wait, this may take a moment.</p>
|
| 47 |
+
</div>
|
| 48 |
+
|
| 49 |
+
<!-- Complete State -->
|
| 50 |
+
<div id="state-complete" class="uploader-state">
|
| 51 |
+
<svg class="icon success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm-1.95 14.243-3.536-3.536a1 1 0 1 1 1.414-1.414l2.828 2.829 5.657-5.657a1 1 0 0 1 1.414 1.414l-6.364 6.364a1 1 0 0 1-1.414 0z"/></svg>
|
| 52 |
+
<h2>Upload Complete!</h2>
|
| 53 |
+
<p>Your file has been securely uploaded and encrypted.</p>
|
| 54 |
+
<a href="#" id="download-link" class="btn btn-primary" download>Download File</a>
|
| 55 |
+
<button id="upload-another-btn" class="btn btn-secondary">Upload Another</button>
|
| 56 |
+
</div>
|
| 57 |
+
|
| 58 |
+
<!-- Error State -->
|
| 59 |
+
<div id="state-error" class="uploader-state">
|
| 60 |
+
<svg class="icon error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
|
| 61 |
+
<h2>Upload Failed</h2>
|
| 62 |
+
<p id="error-message">An unknown error occurred.</p>
|
| 63 |
+
<button id="retry-btn" class="btn btn-primary">Try Again</button>
|
| 64 |
+
</div>
|
| 65 |
+
</main>
|
| 66 |
+
</div>
|
| 67 |
+
|
| 68 |
+
<script src="{{ url_for('static', path='/script.js') }}"></script>
|
| 69 |
+
</body>
|
| 70 |
+
</html>
|