Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>TG Drive</title> | |
| <link rel="stylesheet" href="static/home.css?v=2" /> | |
| <!-- Fonts Start --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" | |
| rel="stylesheet" /> | |
| <!-- Fonts End --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Sidebar Start --> | |
| <div class="sidebar"> | |
| <div class="sidebar-header"> | |
| <img src="https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png" /> | |
| <span>TG Drive</span> | |
| </div> | |
| <button id="new-button" class="new-button"> | |
| <img src="static/assets/plus-icon.svg" />New | |
| </button> | |
| <div id="new-upload" class="new-upload"> | |
| <input id="new-upload-focus" type="text" | |
| style="height: 0px; width: 0px; border: none; position: absolute" readonly /> | |
| <div id="new-folder-btn"> | |
| <img src="static/assets/folder-icon.svg" /> | |
| New Folder | |
| </div> | |
| <hr /> | |
| <div id="file-upload-btn"> | |
| <img src="static/assets/upload-icon.svg" /> | |
| File Upload | |
| </div> | |
| <input type="file" id="fileInput" style="height: 0px; width: 0px; border: none; position: absolute" /> | |
| <hr /> | |
| <div id="url-upload-btn"> | |
| <img src="static/assets/link-icon.svg" /> | |
| URL Upload | |
| </div> | |
| </div> | |
| <div class="sidebar-menu"> | |
| <a class="selected-item" href="/?path=/"><img src="static/assets/home-icon.svg" />Home</a> | |
| <a class="unselected-item" href="/?path=/trash"><img src="static/assets/trash-icon.svg" />Trash</a> | |
| </div> | |
| </div> | |
| <!-- Sidebar End --> | |
| <div id="bg-blur" class="bg-blur"></div> | |
| <!-- Create New Folder Start --> | |
| <div id="create-new-folder" class="create-new-folder"> | |
| <span>New Folder</span> | |
| <input type="text" id="new-folder-name" placeholder="Enter Folder Name" autocomplete="off" /> | |
| <div> | |
| <button id="new-folder-cancel">Cancel</button> | |
| <button id="new-folder-create">Create</button> | |
| </div> | |
| </div> | |
| <!-- Create New Folder End --> | |
| <!-- File / Folder Rename Start --> | |
| <div id="rename-file-folder" class="create-new-folder"> | |
| <span>Edit File/Folder Name</span> | |
| <input type="text" id="rename-name" placeholder="Enter File/Folder Name" autocomplete="off" /> | |
| <div> | |
| <button id="rename-cancel">Cancel</button> | |
| <button id="rename-create">Rename</button> | |
| </div> | |
| </div> | |
| <!-- File / Folder Rename End --> | |
| <!-- Remote Upload Start --> | |
| <div id="new-url-upload" class="create-new-folder"> | |
| <span>Url Upload</span> | |
| <input type="text" id="remote-url" placeholder="Enter Direct Download Link Of File" autocomplete="off" /> | |
| <div id="single-threaded-div"> | |
| <input type="checkbox" name="single-threaded-toggle" id="single-threaded-toggle"> | |
| <label for="single-threaded-toggle">Single Threaded</label> | |
| <a href="#"><img src="static/assets/info-icon-small.svg" alt="Info"></a> | |
| </div> | |
| <div> | |
| <button id="remote-cancel">Cancel</button> | |
| <button id="remote-start">Upload</button> | |
| </div> | |
| </div> | |
| <!-- Remote Upload End --> | |
| <!-- Get Password Start --> | |
| <div id="get-password" class="create-new-folder"> | |
| <span>Admin Login</span> | |
| <input type="text" id="auth-pass" placeholder="Enter Password" autocomplete="off" /> | |
| <div> | |
| <button id="pass-login">Login</button> | |
| </div> | |
| </div> | |
| <!-- Get Password End --> | |
| <!-- File Uploader Start --> | |
| <div id="file-uploader" class="file-uploader"> | |
| <span class="upload-head">🚀 Uploading File...</span> | |
| <span id="upload-filename" class="upload-info">Filename : </span> | |
| <span id="upload-filesize" class="upload-info">Filesize :</span> | |
| <span id="upload-status" class="upload-info">Status : </span> | |
| <span id="upload-percent" class="upload-info">Progress : </span> | |
| <div class="progress"> | |
| <div class="progress-bar" id="progress-bar"></div> | |
| </div> | |
| <div class="btn-div"> | |
| <button id="cancel-file-upload">Cancel Upload</button> | |
| </div> | |
| </div> | |
| <!-- File Uploader End --> | |
| <!-- Request Movie Start --> | |
| <div id="request-movie" class="create-new-folder"> | |
| <span>Request Movie</span> | |
| <input type="text" id="request-movie-title" placeholder="Movie Title" autocomplete="off" /> | |
| <input type="text" id="request-movie-year" placeholder="Year (e.g. 2023)" autocomplete="off" /> | |
| <div id="request-movie-info" style="font-size: 0.85rem; margin-top: 8px; max-height: 120px; overflow-y: auto;"></div> | |
| <div style="margin-top: 10px;"> | |
| <button id="request-movie-cancel">Cancel</button> | |
| <button id="request-movie-fetch">Fetch From TMDB</button> | |
| <button id="request-movie-send">Request This Movie</button> | |
| </div> | |
| </div> | |
| <!-- Request Movie End --> | |
| <!-- Main Content Start --> | |
| <div class="main-content"> | |
| <div class="header"> | |
| <button id="sidebar-toggle-btn" class="theme-toggle-btn" title="Toggle Sidebar" | |
| style="margin-right: 10px;"> | |
| <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#444746"> | |
| <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /> | |
| </svg> | |
| </button> | |
| <button id="theme-toggle-btn" class="theme-toggle-btn" title="Toggle Theme"> | |
| <svg id="theme-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" | |
| fill="#444746"> | |
| <path | |
| d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" /> | |
| </svg> | |
| </button> | |
| <div class="sort-dropdown"> | |
| <button id="sort-toggle-btn" class="theme-toggle-btn" title="Sort Files"> | |
| <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#444746"> | |
| <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/> | |
| </svg> | |
| </button> | |
| <div id="sort-menu" class="sort-menu"> | |
| <div class="sort-option" data-sort="date-desc">📅 Newest First</div> | |
| <div class="sort-option" data-sort="date-asc">📅 Oldest First</div> | |
| <div class="sort-option" data-sort="name-asc">🔤 A to Z</div> | |
| <div class="sort-option" data-sort="name-desc">🔤 Z to A</div> | |
| <div class="sort-option" data-sort="size-desc">📊 Largest First</div> | |
| <div class="sort-option" data-sort="size-asc">📊 Smallest First</div> | |
| </div> | |
| </div> | |
| <div class="search-bar"> | |
| <img src="static/assets/search-icon.svg" /> | |
| <form id="search-form"> | |
| <input id="file-search" type="text" placeholder="Search in Drive" autocomplete="off" /> | |
| </form> | |
| </div> | |
| <button id="request-movie-btn" class="theme-toggle-btn" title="Request Movie" style="margin-left: 10px;"> | |
| Request Movie | |
| </button> | |
| </div> | |
| <div class="directory"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>File Size</th> | |
| <th>More</th> | |
| </tr> | |
| </thead> | |
| <tbody id="directory-data"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toast Notifications Container --> | |
| <div id="toast-container"></div> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="loading-overlay"> | |
| <div class="loading-spinner"> | |
| <div class="spinner-ring"></div> | |
| <div class="spinner-ring"></div> | |
| <div class="spinner-ring"></div> | |
| </div> | |
| <p id="loading-text">Loading...</p> | |
| </div> | |
| <script src="static/js/toast.js?v=3"></script> | |
| <script src="static/js/extra.js?v=2"></script> | |
| <script src="static/js/apiHandler.js?v=2"></script> | |
| <script src="static/js/sidebar.js?v=2"></script> | |
| <script src="static/js/fileClickHandler.js?v=2"></script> | |
| <script src="static/js/sorting.js?v=3"></script> | |
| <script src="static/js/main.js?v=2"></script> | |
| </body> | |
| </html> |