77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, maximum-scale=1.0">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Ticky">
|
|
<title>Ticky - Video Scroller</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Login Screen -->
|
|
<div id="loginScreen" class="login-screen active">
|
|
<div class="login-container">
|
|
<h1>Frankie's Den</h1>
|
|
<div id="setupMode" style="display: none;">
|
|
<p class="setup-text">First time setup - Create a 6-digit PIN</p>
|
|
</div>
|
|
<form id="loginForm">
|
|
<input type="password" id="pinInput" placeholder="Enter PIN" maxlength="6" inputmode="numeric" required>
|
|
<button type="submit">Unlock</button>
|
|
</form>
|
|
<div id="loginError" class="error-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App -->
|
|
<div id="mainApp" class="main-app">
|
|
<!-- Header -->
|
|
<div class="app-header">
|
|
<h2>Private Videos</h2>
|
|
<div class="header-buttons">
|
|
<button id="uploadBtn" class="btn-small">+ Upload</button>
|
|
<button id="logoutBtn" class="btn-small">Logout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video Viewer -->
|
|
<div class="video-viewer-container">
|
|
<div class="video-container" id="videoContainer">
|
|
<!-- Videos will be inserted here -->
|
|
</div>
|
|
<div class="loading" id="loading">Loading...</div>
|
|
</div>
|
|
|
|
<!-- Upload Modal -->
|
|
<div id="uploadModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Upload Encrypted Videos</h3>
|
|
<button class="close-btn" id="closeUploadBtn">×</button>
|
|
</div>
|
|
<form id="uploadForm">
|
|
<div class="file-drop-zone" id="dropZone">
|
|
<p>Drag and drop videos here or click to select</p>
|
|
<input type="file" id="fileInput" accept="video/*" multiple style="display: none;">
|
|
</div>
|
|
<button type="submit">Encrypt & Upload</button>
|
|
</form>
|
|
<div id="uploadError" class="error-message"></div>
|
|
<div id="uploadProgress" style="display: none;">
|
|
<div id="progressList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drop Zone Overlay -->
|
|
<div id="dropOverlay" class="drop-overlay">
|
|
<div class="drop-indicator">Drop files to upload</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|