Hugging Face's logo

Spaces:
shady420
/
newsbyte-ninja-chronicles
Running

App Files Community
shady420 commited on
Commit
0521879
·
verified ·
1 Parent(s): 2aee51f

make me a home page where ill host my video catlog of videoss of me talking about the news

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. components/video-card.js +93 -0
  3. index.html +198 -19
  4. style.css +13 -21
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Newsbyte Ninja Chronicles
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: NewsByte Ninja Chronicles 🎥
3
+ colorFrom: purple
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/video-card.js ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class VideoCard extends HTMLElement {
2
+ connectedCallback() {
3
+ const videoId = this.getAttribute('video-id') || 'dQw4w9WgXcQ';
4
+ const title = this.getAttribute('title') || 'News Analysis Video';
5
+ const description = this.getAttribute('description') || 'My take on current events';
6
+ const duration = this.getAttribute('duration') || '10:00';
7
+ const views = this.getAttribute('views') || '1.2k';
8
+ const likes = this.getAttribute('likes') || '150';
9
+
10
+ this.attachShadow({ mode: 'open' });
11
+ this.shadowRoot.innerHTML = `
12
+ <style>
13
+ :host {
14
+ display: block;
15
+ margin-bottom: 1.5rem;
16
+ }
17
+ .card {
18
+ background: white;
19
+ border-radius: 0.5rem;
20
+ overflow: hidden;
21
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
22
+ transition: box-shadow 0.3s ease;
23
+ }
24
+ .card:hover {
25
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
26
+ }
27
+ .video-container {
28
+ position: relative;
29
+ padding-bottom: 56.25%;
30
+ background: #000;
31
+ }
32
+ iframe {
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ border: none;
39
+ }
40
+ .content {
41
+ padding: 1rem;
42
+ }
43
+ .title {
44
+ font-weight: 600;
45
+ font-size: 1.125rem;
46
+ margin-bottom: 0.5rem;
47
+ color: #1f2937;
48
+ }
49
+ .description {
50
+ color: #6b7280;
51
+ font-size: 0.875rem;
52
+ margin-bottom: 1rem;
53
+ }
54
+ .meta {
55
+ display: flex;
56
+ align-items: center;
57
+ color: #6b7280;
58
+ font-size: 0.75rem;
59
+ }
60
+ .meta span {
61
+ display: flex;
62
+ align-items: center;
63
+ margin-right: 1rem;
64
+ }
65
+ i {
66
+ margin-right: 0.25rem;
67
+ width: 1rem;
68
+ height: 1rem;
69
+ }
70
+ </style>
71
+ <div class="card">
72
+ <div class="video-container">
73
+ <iframe src="https://www.youtube.com/embed/${videoId}"
74
+ frameborder="0"
75
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
76
+ allowfullscreen></iframe>
77
+ </div>
78
+ <div class="content">
79
+ <h3 class="title">${title}</h3>
80
+ <p class="description">${description}</p>
81
+ <div class="meta">
82
+ <span><i data-feather="clock"></i> ${duration}</span>
83
+ <span><i data-feather="eye"></i> ${views} views</span>
84
+ <span><i data-feather="thumbs-up"></i> ${likes} likes</span>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ `;
89
+ feather.replace({ class: 'feather', 'stroke-width': 2 });
90
+ }
91
+ }
92
+
93
+ customElements.define('video-card', VideoCard);
index.html CHANGED
@@ -1,19 +1,198 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>NewsByte Ninja - Video News Catalog</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/video-card.js"></script>
13
+ <script src="components/footer.js"></script>
14
+ </head>
15
+ <body class="bg-gray-50">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-8">
19
+ <!-- Video Catalog Hero -->
20
+ <section class="mb-16">
21
+ <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-8 md:p-12 text-white">
22
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">NewsByte Ninja Videos</h1>
23
+ <p class="text-xl mb-8">My take on the latest news stories - straight from the source</p>
24
+ <div class="relative max-w-md">
25
+ <input type="text" placeholder="Search videos..." class="w-full py-3 px-4 rounded-full text-gray-800 focus:outline-none">
26
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-700 text-white p-2 rounded-full">
27
+ <i data-feather="search"></i>
28
+ </button>
29
+ </div>
30
+ </div>
31
+ </section>
32
+ <!-- Video Catalog -->
33
+ <section class="mb-16">
34
+ <div class="flex justify-between items-center mb-8">
35
+ <h2 class="text-2xl font-bold">Latest Videos</h2>
36
+ <a href="#" class="text-blue-600 hover:underline flex items-center">
37
+ View all <i data-feather="chevron-right" class="ml-1"></i>
38
+ </a>
39
+ </div>
40
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
41
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
42
+ <div class="relative pb-[56.25%]">
43
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
44
+ </div>
45
+ <div class="p-6">
46
+ <div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
47
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
48
+ <span>12:34</span>
49
+ </div>
50
+ <h3 class="text-xl font-semibold mb-2">Breaking Down Today's Tech Headlines</h3>
51
+ <p class="text-gray-600">My analysis of the latest tech news and what it means for consumers</p>
52
+ </div>
53
+ </div>
54
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
55
+ <div class="relative pb-[56.25%]">
56
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
57
+ </div>
58
+ <div class="p-6">
59
+ <div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
60
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
61
+ <span>15:22</span>
62
+ </div>
63
+ <h3 class="text-xl font-semibold mb-2">Political Developments Explained</h3>
64
+ <p class="text-gray-600">Breaking down complex political stories into understandable insights</p>
65
+ </div>
66
+ </div>
67
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
68
+ <div class="relative pb-[56.25%]">
69
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
70
+ </div>
71
+ <div class="p-6">
72
+ <div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
73
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
74
+ <span>08:45</span>
75
+ </div>
76
+ <h3 class="text-xl font-semibold mb-2">Market Trends and Analysis</h3>
77
+ <p class="text-gray-600">What today's financial news means for your investments</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </section>
82
+ <!-- Video Playlists -->
83
+ <section class="mb-16">
84
+ <h2 class="text-2xl font-bold mb-8">My Playlists</h2>
85
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
86
+ <a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
87
+ <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2">
88
+ <i data-feather="play-circle" class="text-red-600"></i>
89
+ </div>
90
+ <span class="font-medium">Daily Brief</span>
91
+ </a>
92
+ <a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
93
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
94
+ <i data-feather="play-circle" class="text-blue-600"></i>
95
+ </div>
96
+ <span class="font-medium">Tech Talk</span>
97
+ </a>
98
+ <a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
99
+ <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2">
100
+ <i data-feather="play-circle" class="text-green-600"></i>
101
+ </div>
102
+ <span class="font-medium">Politics</span>
103
+ </a>
104
+ <a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
105
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2">
106
+ <i data-feather="play-circle" class="text-purple-600"></i>
107
+ </div>
108
+ <span class="font-medium">Market Watch</span>
109
+ </a>
110
+ <a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
111
+ <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
112
+ <i data-feather="play-circle" class="text-yellow-600"></i>
113
+ </div>
114
+ <span class="font-medium">Science</span>
115
+ </a>
116
+ <a href="#" class="category-card bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow flex flex-col items-center">
117
+ <div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mb-2">
118
+ <i data-feather="play-circle" class="text-pink-600"></i>
119
+ </div>
120
+ <span class="font-medium">Culture</span>
121
+ </a>
122
+ </div>
123
+ </section>
124
+ <!-- Popular Videos -->
125
+ <section class="mb-16">
126
+ <div class="flex justify-between items-center mb-8">
127
+ <h2 class="text-2xl font-bold">Most Watched</h2>
128
+ <a href="#" class="text-blue-600 hover:underline flex items-center">
129
+ View all <i data-feather="chevron-right" class="ml-1"></i>
130
+ </a>
131
+ </div>
132
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
133
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
134
+ <div class="relative pb-[56.25%]">
135
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
136
+ </div>
137
+ <div class="p-6">
138
+ <div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
139
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
140
+ <span>22:18</span>
141
+ </div>
142
+ <h3 class="text-xl font-semibold mb-2">The Week in Review</h3>
143
+ <p class="text-gray-600 mb-4">Breaking down all the major news stories from this past week</p>
144
+ <div class="flex items-center text-sm text-gray-500">
145
+ <i data-feather="eye" class="mr-1 w-4 h-4"></i>
146
+ <span class="mr-4">54.2k views</span>
147
+ <i data-feather="thumbs-up" class="mr-1 w-4 h-4"></i>
148
+ <span>2.4k likes</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
153
+ <div class="relative pb-[56.25%]">
154
+ <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
155
+ </div>
156
+ <div class="p-6">
157
+ <div class="flex items-center text-sm text-blue-600 font-semibold mb-2">
158
+ <i data-feather="clock" class="mr-2 w-4 h-4"></i>
159
+ <span>18:45</span>
160
+ </div>
161
+ <h3 class="text-xl font-semibold mb-2">Deep Dive: Economic Analysis</h3>
162
+ <p class="text-gray-600 mb-4">A comprehensive look at current economic trends and forecasts</p>
163
+ <div class="flex items-center text-sm text-gray-500">
164
+ <i data-feather="eye" class="mr-1 w-4 h-4"></i>
165
+ <span class="mr-4">42.7k views</span>
166
+ <i data-feather="thumbs-up" class="mr-1 w-4 h-4"></i>
167
+ <span>1.8k likes</span>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </section>
173
+ <!-- Channel Subscription -->
174
+ <section class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl p-8 text-white mb-16">
175
+ <div class="max-w-3xl mx-auto text-center">
176
+ <h2 class="text-2xl md:text-3xl font-bold mb-4">Subscribe to My Channel</h2>
177
+ <p class="mb-6">Get notified when I post new video analyses of the day's top stories</p>
178
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
179
+ <a href="#" class="bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-6 rounded-full transition-colors flex items-center justify-center">
180
+ <i data-feather="youtube" class="mr-2"></i> YouTube
181
+ </a>
182
+ <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-medium py-3 px-6 rounded-full transition-colors flex items-center justify-center">
183
+ <i data-feather="twitter" class="mr-2"></i> Twitter
184
+ </a>
185
+ </div>
186
+ </div>
187
+ </section>
188
+ </main>
189
+
190
+ <custom-footer></custom-footer>
191
+
192
+ <script>
193
+ feather.replace();
194
+ </script>
195
+ <script src="script.js"></script>
196
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
197
+ </body>
198
+ </html>
style.css CHANGED
@@ -1,28 +1,20 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 
 
2
 
3
+ body {
4
+ font-family: 'Inter', sans-serif;
5
+ color: #1f2937;
6
  }
7
 
8
+ .category-card:hover i {
9
+ transform: scale(1.1);
10
+ transition: transform 0.2s ease;
 
 
11
  }
12
 
13
+ .category-card i {
14
+ transition: transform 0.2s ease;
 
 
 
 
15
  }
16
 
17
+ /* Custom scrollbar */
18
+ ::-webkit-scrollbar {
19
+ width: 8px;
20
+ height: 8px;