-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (151 loc) · 12.1 KB
/
index.html
File metadata and controls
151 lines (151 loc) · 12.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!--
============================================================
ZenView — Open Source · Made with ❤️
https://github.com/zenview
index.html — Main entry point
Labels & text are configurable via labels.json
============================================================
-->
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZenView - The Focused Viewer</title>
<meta name="description" content="ZenView is a focused, open-source video viewer that enhances your YouTube experience by removing distractions.">
<meta name="theme-color" content="#000000">
<meta property="og:title" content="ZenView — The Focused Viewer">
<meta property="og:description" content="Experience YouTube distraction-free with ZenView.">
<link rel="icon" type="image" href="favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app-loader" style="text-align:center;">
<div class="loader-ring" style="margin:0 auto 2rem;"></div>
<h2 style="font-size:1.5rem;font-weight:900;letter-spacing:0.2em;color:#fff;margin-bottom:0.5rem;">ZenView</h2>
<p style="color:#555;font-size:0.875rem;">Loading your focused experience...</p>
</div>
<div id="app" class="min-h-screen flex flex-col" style="display:none;">
<header>
<nav style="max-width:1280px;margin:0 auto;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:1rem;">
<a href="#" onclick="navigate('/')" class="logo" style="flex-shrink:0;">ZenView</a>
<div class="nav-search-wrap" id="nav-search-container" style="display:none;">
<svg class="nav-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" id="nav-search-input" class="nav-search-input" placeholder="Search YouTube...">
<div id="nav-suggestions" class="suggestions-list hidden"></div>
</div>
<div style="flex:1;"></div>
<div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;">
<button onclick="navigate('saved')" class="btn-icon" title="Saved Videos">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
</button>
<button id="settings-btn" class="btn-icon" title="Settings">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
</button>
<button id="mode-toggle" class="btn-icon" title="Toggle theme">
<svg id="theme-icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
<svg id="theme-icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
</button>
</div>
</nav>
</header>
<main id="main-content-container" style="flex:1;max-width:1280px;width:100%;margin:0 auto;padding:2rem 1.25rem;">
<div id="content-root"></div>
</main>
<footer style="border-top:1px solid var(--border);padding:2rem 1.25rem;margin-top:3rem;">
<div style="max-width:1280px;margin:0 auto;text-align:center;">
<p style="font-weight:700;font-size:0.875rem;color:var(--text-primary);margin-bottom:0.25rem;">ZenView — The Focused Viewer</p>
<p style="font-size:0.75rem;color:var(--text-muted);margin-bottom:0.5rem;">Open source · Made with ❤️</p>
<p style="font-size:0.7rem;color:var(--text-muted);max-width:700px;margin:0 auto;">Legal Disclaimer: This site is a non-monetized, open-source prototype for educational purposes. We do not generate revenue from embedded content or host any videos directly. All content rights belong to their respective creators on YouTube.</p>
<p style="font-size:0.7rem;color:var(--text-muted);margin-top:0.5rem;">© 2025 ZenView Project. All rights reserved.</p>
</div>
</footer>
</div>
<div id="settings-modal" class="modal-backdrop hidden">
<div class="modal-box">
<div class="modal-header">
<h2 class="modal-title">Settings</h2>
<button onclick="closeSettingsModal()" class="btn-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
</div>
<div style="margin-bottom:2rem;">
<h3 style="font-weight:700;font-size:0.9375rem;color:var(--text-primary);margin-bottom:0.375rem;">YouTube API Key</h3>
<p style="font-size:0.8125rem;color:var(--text-muted);margin-bottom:1rem;">
Required for search, trending, and video details.
<a href="#" onclick="closeSettingsModal();openDocsModal('youtube-api')" style="color:var(--text-secondary);text-decoration:underline;margin-left:4px;">How to get a key?</a>
</p>
<div class="input-wrapper" style="margin-bottom:0.75rem;">
<input type="password" id="yt-api-key-input" class="input-field" placeholder="YouTube Data API Key" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('yt-api-key-input',this)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
</span>
</div>
<div style="display:flex;gap:0.5rem;">
<button onclick="saveYouTubeKey()" class="btn btn-primary" style="flex:1;justify-content:center;">Save YouTube Key</button>
</div>
</div>
<div style="margin-bottom:2rem;">
<h3 style="font-weight:700;font-size:0.9375rem;color:var(--text-primary);margin-bottom:0.375rem;">Firebase Configuration</h3>
<p style="font-size:0.8125rem;color:var(--text-muted);margin-bottom:1rem;">
Optional — enables cloud save features.
<a href="#" onclick="closeSettingsModal();openDocsModal('firebase')" style="color:var(--text-secondary);text-decoration:underline;margin-left:4px;">How to set up?</a>
</p>
<div style="display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem;">
<div class="input-wrapper">
<input type="password" id="fb-apiKey" class="input-field" placeholder="API Key" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('fb-apiKey',this)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></span>
</div>
<div class="input-wrapper">
<input type="password" id="fb-authDomain" class="input-field" placeholder="Auth Domain" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('fb-authDomain',this)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></span>
</div>
<div class="input-wrapper">
<input type="password" id="fb-projectId" class="input-field" placeholder="Project ID" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('fb-projectId',this)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></span>
</div>
<div class="input-wrapper">
<input type="password" id="fb-storageBucket" class="input-field" placeholder="Storage Bucket" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('fb-storageBucket',this)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></span>
</div>
<div class="input-wrapper">
<input type="password" id="fb-messagingSenderId" class="input-field" placeholder="Messaging Sender ID" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('fb-messagingSenderId',this)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></span>
</div>
<div class="input-wrapper">
<input type="password" id="fb-appId" class="input-field" placeholder="App ID" style="padding-right:3rem;">
<span class="eye-icon" onclick="togglePwVis('fb-appId',this)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></span>
</div>
</div>
<div style="display:flex;gap:0.5rem;">
<button onclick="saveFirebaseConfig()" class="btn btn-primary" style="flex:1;justify-content:center;">Save Firebase Config</button>
<button onclick="clearFirebaseConfig()" class="btn btn-ghost">Clear</button>
</div>
</div>
<div class="danger-zone">
<h3 style="font-weight:700;font-size:0.9375rem;color:#ff6b6b;margin-bottom:0.5rem;">Danger Zone</h3>
<p style="font-size:0.8125rem;color:var(--text-muted);margin-bottom:1rem;">Permanently delete all local data including watch history and saved videos.</p>
<button onclick="clearAllData()" class="btn-danger">Clear All Local Data</button>
</div>
</div>
</div>
<div id="docs-modal" class="modal-backdrop hidden">
<div class="modal-box" style="max-width:720px;">
<div class="modal-header">
<h2 class="modal-title" id="docs-modal-title">Documentation</h2>
<button onclick="closeDocsModal()" class="btn-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
</div>
<div id="docs-modal-content"></div>
</div>
</div>
<div id="toast-container"></div>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
<script src="config.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>