Hugging Face's logo

Spaces:
gopallikehack
/
DatabaseIndian
Running

App Files Community
gopallikehack commited on
Commit
43d9c20
·
verified ·
1 Parent(s): 225be93

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +207 -0
templates/index.html ADDED
@@ -0,0 +1,207 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>{{ video_title }} - Free Python Course</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
17
+ color: white;
18
+ min-height: 100vh;
19
+ padding: 20px;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1100px;
24
+ margin: 0 auto;
25
+ background: rgba(255, 255, 255, 0.1);
26
+ backdrop-filter: blur(10px);
27
+ border-radius: 20px;
28
+ padding: 30px;
29
+ box-shadow: 0 20px 60px rgba(0,0,0,0.5);
30
+ }
31
+
32
+ .header {
33
+ text-align: center;
34
+ margin-bottom: 30px;
35
+ }
36
+
37
+ .header h1 {
38
+ font-size: 2.5em;
39
+ margin-bottom: 10px;
40
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
41
+ }
42
+
43
+ .header .subtitle {
44
+ font-size: 1.2em;
45
+ opacity: 0.9;
46
+ }
47
+
48
+ .header .channel {
49
+ display: inline-block;
50
+ background: #ff6b35;
51
+ padding: 8px 20px;
52
+ border-radius: 50px;
53
+ margin-top: 10px;
54
+ font-weight: bold;
55
+ }
56
+
57
+ .video-container {
58
+ background: #000;
59
+ border-radius: 15px;
60
+ overflow: hidden;
61
+ margin: 20px 0;
62
+ position: relative;
63
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
64
+ }
65
+
66
+ video {
67
+ width: 100%;
68
+ display: block;
69
+ max-height: 70vh;
70
+ }
71
+
72
+ .poster-container {
73
+ text-align: center;
74
+ margin: 20px 0;
75
+ padding: 20px;
76
+ background: rgba(0,0,0,0.3);
77
+ border-radius: 15px;
78
+ }
79
+
80
+ .poster-container img {
81
+ max-width: 200px;
82
+ height: auto;
83
+ filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
84
+ }
85
+
86
+ .info-section {
87
+ display: grid;
88
+ grid-template-columns: 1fr 1fr;
89
+ gap: 20px;
90
+ margin-top: 20px;
91
+ }
92
+
93
+ .info-card {
94
+ background: rgba(255,255,255,0.1);
95
+ padding: 20px;
96
+ border-radius: 15px;
97
+ backdrop-filter: blur(5px);
98
+ }
99
+
100
+ .info-card h3 {
101
+ margin-bottom: 10px;
102
+ color: #ffd700;
103
+ }
104
+
105
+ .status-badge {
106
+ display: inline-block;
107
+ padding: 5px 15px;
108
+ border-radius: 50px;
109
+ font-size: 0.9em;
110
+ font-weight: bold;
111
+ }
112
+
113
+ .status-available {
114
+ background: #4caf50;
115
+ color: white;
116
+ }
117
+
118
+ .status-unavailable {
119
+ background: #f44336;
120
+ color: white;
121
+ }
122
+
123
+ .footer {
124
+ text-align: center;
125
+ margin-top: 30px;
126
+ padding-top: 20px;
127
+ border-top: 1px solid rgba(255,255,255,0.2);
128
+ font-size: 0.9em;
129
+ opacity: 0.8;
130
+ }
131
+
132
+ @media (max-width: 768px) {
133
+ .container {
134
+ padding: 15px;
135
+ }
136
+
137
+ .header h1 {
138
+ font-size: 1.8em;
139
+ }
140
+
141
+ .info-section {
142
+ grid-template-columns: 1fr;
143
+ }
144
+ }
145
+ </style>
146
+ </head>
147
+ <body>
148
+ <div class="container">
149
+ <div class="header">
150
+ <h1>🐍 {{ video_title }}</h1>
151
+ <div class="subtitle">Complete Python Programming Course</div>
152
+ <div class="channel">📺 {{ channel }}</div>
153
+ </div>
154
+
155
+ <div class="video-container">
156
+ {% if video_exists %}
157
+ <video controls autoplay>
158
+ <source src="{{ url_for('stream_video') }}" type="video/mp4">
159
+ Your browser does not support the video tag.
160
+ </video>
161
+ {% else %}
162
+ <div style="padding: 40px; text-align: center; color: #ff6b6b;">
163
+ <h2>⚠️ Video Not Found</h2>
164
+ <p>Please ensure the video file is mounted in /data directory</p>
165
+ <p style="margin-top: 10px; font-size: 0.9em; opacity: 0.7;">
166
+ Expected: /data/{{ video_title }}.mp4
167
+ </p>
168
+ </div>
169
+ {% endif %}
170
+ </div>
171
+
172
+ <div class="poster-container">
173
+ <img src="https://www.python.org/static/img/python-logo.png" alt="Python Logo">
174
+ <p style="margin-top: 10px; opacity: 0.8;">Powered by Python</p>
175
+ </div>
176
+
177
+ <div class="info-section">
178
+ <div class="info-card">
179
+ <h3>📚 Course Info</h3>
180
+ <p><strong>Language:</strong> Hindi</p>
181
+ <p><strong>Instructor:</strong> @GpsirEra</p>
182
+ <p><strong>Level:</strong> Beginner to Advanced</p>
183
+ <p><strong>Status:</strong>
184
+ <span class="status-badge {% if video_exists %}status-available{% else %}status-unavailable{% endif %}">
185
+ {% if video_exists %}✅ Available{% else %}❌ Not Found{% endif %}
186
+ </span>
187
+ </p>
188
+ </div>
189
+ <div class="info-card">
190
+ <h3>📖 Topics Covered</h3>
191
+ <ul style="list-style: none; padding: 0;">
192
+ <li>✓ Python Basics</li>
193
+ <li>✓ Data Structures</li>
194
+ <li>✓ OOP Concepts</li>
195
+ <li>✓ File Handling</li>
196
+ <li>✓ Advanced Python</li>
197
+ </ul>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="footer">
202
+ <p>🌐 Education for Free | Made with ❤️ by @GpsirEra</p>
203
+ <p style="font-size: 0.8em; opacity: 0.6;">All content is free for educational purposes</p>
204
+ </div>
205
+ </div>
206
+ </body>
207
+ </html>