tgdrive / website /home.html
copilot-swe-agent[bot]
feat: TMDB access token, robots.txt, refreshThumbnails, bot fixes, FA icons, SEO meta, sidebar credit, Android file picker fix
79bb8f3 unverified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>TG Drive</title>
<meta name="description" content="TG Drive - Store and stream files on Telegram. A fast, free cloud storage powered by Telegram." />
<meta name="keywords" content="TG Drive, Telegram storage, cloud drive, file storage, video streaming" />
<meta name="author" content="akay.is-a.dev" />
<meta name="robots" content="index, follow" />
<!-- Geo tags -->
<meta name="geo.region" content="IN" />
<meta name="geo.placename" content="India" />
<!-- Open Graph -->
<meta property="og:title" content="TG Drive" />
<meta property="og:description" content="Store and stream files on Telegram. Fast, free cloud storage." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://akay.is-a.dev" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="TG Drive" />
<meta name="twitter:description" content="Store and stream files on Telegram." />
<link rel="stylesheet" href="static/home.css?v=5" />
<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&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body>
<!-- Top Loading Bar -->
<div id="top-progress-bar"></div>
<!-- Mobile Overlay -->
<div id="mobile-overlay" class="mobile-overlay"></div>
<div class="container">
<!-- ===== SIDEBAR ===== -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img src="https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png" alt="TG Drive" />
<span>TG Drive</span>
</div>
<button id="new-button" class="new-button">
<i class="fa-solid fa-plus" style="margin-right:10px;font-size:16px"></i>
New
</button>
<div id="new-upload" class="new-upload">
<input id="new-upload-focus" type="text" style="height:0;width:0;border:none;position:absolute" readonly />
<div id="new-folder-btn">
<img src="static/assets/folder-icon.svg" alt="Folder" />
New Folder
</div>
<hr />
<div id="file-upload-btn">
<img src="static/assets/upload-icon.svg" alt="Upload" />
File Upload
</div>
<input type="file" id="fileInput" style="height:0;width:0;border:none;position:absolute" />
<hr />
<div id="url-upload-btn">
<img src="static/assets/link-icon.svg" alt="URL" />
URL Upload
</div>
</div>
<div class="sidebar-menu">
<a class="selected-item" href="/?path=/"><img src="static/assets/home-icon.svg" alt="Home" />Home</a>
<a class="unselected-item" href="/?path=/trash"><img src="static/assets/trash-icon.svg" alt="Trash" />Trash</a>
<a class="unselected-item" id="tmdb-sidebar-btn" href="#" onclick="openTmdbPanel(); return false;">
<i class="fa-solid fa-film" style="width:18px;height:18px;font-size:16px;flex-shrink:0"></i>
Movies / IMDB
</a>
</div>
<div class="sidebar-credit">
<i class="fa-solid fa-heart"></i> by <a href="https://akay.is-a.dev" target="_blank" rel="noopener">akay.is-a.dev</a>
</div>
</div>
<!-- BG Blur Overlay -->
<div id="bg-blur" class="bg-blur"></div>
<!-- ===== MODALS ===== -->
<div id="create-new-folder" class="modal-card">
<span class="modal-title">New Folder</span>
<input type="text" id="new-folder-name" placeholder="Enter Folder Name" autocomplete="off" />
<div class="modal-actions">
<button id="new-folder-cancel" class="btn-ghost">Cancel</button>
<button id="new-folder-create" class="btn-primary">Create</button>
</div>
</div>
<div id="rename-file-folder" class="modal-card">
<span class="modal-title">Rename</span>
<input type="text" id="rename-name" placeholder="Enter New Name" autocomplete="off" />
<div class="modal-actions">
<button id="rename-cancel" class="btn-ghost">Cancel</button>
<button id="rename-create" class="btn-primary">Rename</button>
</div>
</div>
<div id="new-url-upload" class="modal-card">
<span class="modal-title">URL Upload</span>
<input type="text" id="remote-url" placeholder="Enter Direct Download URL" 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 class="modal-actions">
<button id="remote-cancel" class="btn-ghost">Cancel</button>
<button id="remote-start" class="btn-primary">Upload</button>
</div>
</div>
<div id="get-password" class="modal-card">
<span class="modal-title">Admin Login</span>
<input type="password" id="auth-pass" placeholder="Enter Password" autocomplete="off" />
<div class="modal-actions">
<button id="pass-login" class="btn-primary">Login</button>
</div>
</div>
<!-- File Uploader Progress Modal -->
<div id="file-uploader" class="modal-card file-uploader-modal">
<span class="upload-head">🚀 Uploading...</span>
<span id="upload-filename" class="upload-info">Filename:</span>
<span id="upload-filesize" class="upload-info">Size:</span>
<span id="upload-status" class="upload-info">Status:</span>
<span id="upload-percent" class="upload-info">Progress:</span>
<div class="progress-track">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="modal-actions">
<button id="cancel-file-upload" class="btn-ghost">Cancel Upload</button>
</div>
</div>
<!-- ===== TMDB PANEL ===== -->
<div id="tmdb-panel" class="tmdb-panel">
<div class="tmdb-panel-header">
<div class="tmdb-panel-title">
<svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 0 24 24" width="22" fill="currentColor">
<path d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"/>
</svg>
Movies &amp; TV Shows
</div>
<button id="tmdb-close-btn" class="icon-btn" title="Close">
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</button>
</div>
<div class="tmdb-search-bar">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18" fill="currentColor" style="opacity:0.5;flex-shrink:0">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
<input type="text" id="tmdb-search-input" placeholder="Search movies, TV shows, series…" autocomplete="off" />
<button id="tmdb-search-btn" class="btn-primary" style="padding:7px 16px;font-size:0.85rem">Search</button>
</div>
<div class="tmdb-tabs">
<button class="tmdb-tab active" data-tab="trending">🔥 Trending</button>
<button class="tmdb-tab" data-tab="movies">🎬 Movies</button>
<button class="tmdb-tab" data-tab="tv">📺 TV Shows</button>
<button class="tmdb-tab" data-tab="search" id="tmdb-search-tab" style="display:none">🔍 Results</button>
</div>
<div id="tmdb-content" class="tmdb-content">
<div id="tmdb-loader" class="tmdb-loader">
<div class="tmdb-spinner"></div>
<p>Loading…</p>
</div>
<div id="tmdb-grid" class="tmdb-grid"></div>
</div>
</div>
<!-- TMDB Detail Modal -->
<div id="tmdb-detail" class="tmdb-detail-modal">
<button id="tmdb-detail-close" class="tmdb-detail-close">
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20" fill="currentColor">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
</svg>
</button>
<div id="tmdb-detail-content" class="tmdb-detail-content"></div>
</div>
<!-- ===== MAIN CONTENT ===== -->
<div class="main-content">
<!-- Header -->
<div class="header">
<button id="sidebar-toggle-btn" class="icon-btn" title="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</svg>
</button>
<div class="search-bar">
<img src="static/assets/search-icon.svg" alt="Search" />
<form id="search-form">
<input id="file-search" type="text" placeholder="Search files &amp; folders…" autocomplete="off" />
</form>
</div>
<button id="theme-toggle-btn" class="icon-btn" title="Toggle Theme">
<svg id="theme-icon" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20">
<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>
<!-- Toolbar -->
<div class="toolbar" id="toolbar">
<div class="toolbar-left">
<div class="sort-group">
<span class="sort-label">Sort</span>
<select id="sort-field" class="sort-select">
<option value="date">Date</option>
<option value="name">Name</option>
<option value="size">Size</option>
</select>
<button id="sort-dir-btn" class="sort-dir-btn" title="Ascending">
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16">
<path d="M7 14l5-5 5 5z" />
</svg>
</button>
</div>
</div>
<div class="toolbar-right">
<div class="view-group">
<button id="list-view-btn" class="view-btn active" title="List View">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" />
</svg>
</button>
<button id="grid-view-btn" class="view-btn" title="Grid View">
<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 24 24" width="18">
<path d="M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Directory Container -->
<div class="directory-container" id="directory-container">
<!-- Skeleton Loader -->
<div id="skeleton-container"></div>
<!-- List View -->
<table id="list-view" class="list-table">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th class="date-col">Date</th>
<th class="more-col"></th>
</tr>
</thead>
<tbody id="directory-data"></tbody>
</table>
<!-- Grid View -->
<div id="grid-view" class="grid-container" style="display:none"></div>
</div>
</div>
</div>
<!-- Mobile FAB -->
<button class="fab-btn" id="fab-btn" title="New">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
</button>
<!-- More Options Portal (absolutely positioned dropdowns render here) -->
<div id="more-options-portal"></div>
<!-- Scripts -->
<script src="static/js/extra.js?v=5"></script>
<script src="static/js/apiHandler.js?v=5"></script>
<script src="static/js/sidebar.js?v=5"></script>
<script src="static/js/fileClickHandler.js?v=5"></script>
<script src="static/js/main.js?v=5"></script>
<script src="static/js/tmdb.js?v=5"></script>
</body>
</html>