Hugging Face's logo

Spaces:
CosmickVisions
/
Cosmick-Gallery
Running

App Files Community
CosmickVisions commited on
Commit
c84456d
·
verified ·
1 Parent(s): ed6f7f6

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +57 -17
index.html CHANGED
@@ -11,19 +11,37 @@
11
  margin: 0;
12
  padding: 0;
13
  background-color: #f4f4f4;
14
- background: url('/videos/bg-video.mp4'), linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(228, 232, 240, 0.8) 100%);
15
- background-size: cover;
16
- background-position: center;
17
  color: var(--text-color);
18
  line-height: 1.6;
19
  }
20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  header {
22
  text-align: center;
23
  padding: 20px;
24
  background-color: #333;
25
  color: white;
26
  }
 
27
  .filters button {
28
  margin: 5px;
29
  padding: 10px 20px;
@@ -32,15 +50,18 @@
32
  color: white;
33
  cursor: pointer;
34
  }
 
35
  .filters button:hover {
36
  background-color: #777;
37
  }
 
38
  .gallery {
39
  display: flex;
40
  flex-wrap: wrap;
41
  justify-content: center;
42
  padding: 20px;
43
  }
 
44
  .video-card {
45
  margin: 10px;
46
  width: 300px;
@@ -49,18 +70,35 @@
49
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
50
  overflow: hidden;
51
  }
 
52
  .video-card video {
53
  width: 100%;
54
  height: auto;
55
  }
 
56
  .video-card p {
57
  padding: 10px;
58
  text-align: center;
59
  margin: 0;
60
  }
 
 
 
 
 
 
61
  </style>
62
  </head>
63
  <body>
 
 
 
 
 
 
 
 
 
64
  <!-- Root div for React -->
65
  <div id="root"></div>
66
 
@@ -76,14 +114,14 @@
76
  const App = () => {
77
  // Local video data
78
  const videos = [
79
- { src: 'videos/Insta-VID1 (1).mp4', tag: 'Gen AI','Pika', 'Ai Art' },
80
- { src: 'videos/Insta-VID1 (2).mp4', tag: 'After Effects' },
81
- { src: 'videos/Insta-VID1 (3).mp4', tag: 'After Effects' },
82
- { src: 'videos/Insta-VID1 (4).mp4', tag: 'Twin Motion' },
83
- { src: 'videos/Insta-VID1 (5).mp4', tag: 'Pika','Gen AI' },
84
- { src: 'videos/Insta-VID1 (6).mp4', tag: 'Ai Art' },
85
- { src: 'videos/Insta-VID1 (7).mp4', tag: 'Ai Art', 'Pika Art' },
86
- { src: 'videos/Insta-VID1 (8).mp4', tag: 'After Effects' },
87
  ];
88
 
89
  // State for filter
@@ -92,7 +130,7 @@
92
  // Filter videos based on tag
93
  const filteredVideos = filter === 'all'
94
  ? videos
95
- : videos.filter(video => video.tag === filter);
96
 
97
  return (
98
  <div>
@@ -100,9 +138,11 @@
100
  <h1>My Video Gallery</h1>
101
  <div className="filters">
102
  <button onClick={() => setFilter('all')}>All</button>
103
- <button onClick={() => setFilter('nature')}>Nature</button>
104
- <button onClick={() => setFilter('travel')}>Travel</button>
105
- <button onClick={() => setFilter('tech')}>Tech</button>
 
 
106
  </div>
107
  </header>
108
  <main>
@@ -113,7 +153,7 @@
113
  <source src={video.src} type="video/mp4" />
114
  Your browser does not support the video tag.
115
  </video>
116
- <p>{video.tag}</p>
117
  </div>
118
  ))}
119
  </div>
@@ -126,4 +166,4 @@
126
  ReactDOM.render(<App />, document.getElementById('root'));
127
  </script>
128
  </body>
129
- </html>
 
11
  margin: 0;
12
  padding: 0;
13
  background-color: #f4f4f4;
 
 
 
14
  color: var(--text-color);
15
  line-height: 1.6;
16
  }
17
 
18
+ .video-background video {
19
+ position: fixed;
20
+ top: 0;
21
+ left: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ object-fit: cover;
25
+ z-index: -1;
26
+ }
27
+
28
+ .gradient-overlay {
29
+ position: fixed;
30
+ top: 0;
31
+ left: 0;
32
+ width: 100%;
33
+ height: 100%;
34
+ background: linear-gradient(135deg, rgba(245, 247, 250, 0.8) 0%, rgba(228, 232, 240, 0.8) 100%);
35
+ z-index: -1;
36
+ }
37
+
38
  header {
39
  text-align: center;
40
  padding: 20px;
41
  background-color: #333;
42
  color: white;
43
  }
44
+
45
  .filters button {
46
  margin: 5px;
47
  padding: 10px 20px;
 
50
  color: white;
51
  cursor: pointer;
52
  }
53
+
54
  .filters button:hover {
55
  background-color: #777;
56
  }
57
+
58
  .gallery {
59
  display: flex;
60
  flex-wrap: wrap;
61
  justify-content: center;
62
  padding: 20px;
63
  }
64
+
65
  .video-card {
66
  margin: 10px;
67
  width: 300px;
 
70
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
71
  overflow: hidden;
72
  }
73
+
74
  .video-card video {
75
  width: 100%;
76
  height: auto;
77
  }
78
+
79
  .video-card p {
80
  padding: 10px;
81
  text-align: center;
82
  margin: 0;
83
  }
84
+
85
+ @media (max-width: 600px) {
86
+ .video-card {
87
+ width: 100%;
88
+ }
89
+ }
90
  </style>
91
  </head>
92
  <body>
93
+ <!-- Video Background -->
94
+ <div class="video-background">
95
+ <video autoplay muted loop>
96
+ <source src="videos/bg-video.mp4" type="video/mp4">
97
+ Your browser does not support the video tag.
98
+ </video>
99
+ </div>
100
+ <div class="gradient-overlay"></div>
101
+
102
  <!-- Root div for React -->
103
  <div id="root"></div>
104
 
 
114
  const App = () => {
115
  // Local video data
116
  const videos = [
117
+ { src: 'videos/Insta-VID1 (1).mp4', tag: ['Gen AI', 'Pika', 'Ai Art'] },
118
+ { src: 'videos/Insta-VID1 (2).mp4', tag: ['After Effects'] },
119
+ { src: 'videos/Insta-VID1 (3).mp4', tag: ['After Effects'] },
120
+ { src: 'videos/Insta-VID1 (4).mp4', tag: ['Twin Motion'] },
121
+ { src: 'videos/Insta-VID1 (5).mp4', tag: ['Pika', 'Gen AI'] },
122
+ { src: 'videos/Insta-VID1 (6).mp4', tag: ['Ai Art'] },
123
+ { src: 'videos/Insta-VID1 (7).mp4', tag: ['Ai Art', 'Pika Art'] },
124
+ { src: 'videos/Insta-VID1 (8).mp4', tag: ['After Effects'] },
125
  ];
126
 
127
  // State for filter
 
130
  // Filter videos based on tag
131
  const filteredVideos = filter === 'all'
132
  ? videos
133
+ : videos.filter(video => video.tag.includes(filter));
134
 
135
  return (
136
  <div>
 
138
  <h1>My Video Gallery</h1>
139
  <div className="filters">
140
  <button onClick={() => setFilter('all')}>All</button>
141
+ <button onClick={() => setFilter('Gen AI')}>Gen AI</button>
142
+ <button onClick={() => setFilter('Pika')}>Pika</button>
143
+ <button onClick={() => setFilter('Ai Art')}>Ai Art</button>
144
+ <button onClick={() => setFilter('After Effects')}>After Effects</button>
145
+ <button onClick={() => setFilter('Twin Motion')}>Twin Motion</button>
146
  </div>
147
  </header>
148
  <main>
 
153
  <source src={video.src} type="video/mp4" />
154
  Your browser does not support the video tag.
155
  </video>
156
+ <p>{video.tag.join(', ')}</p>
157
  </div>
158
  ))}
159
  </div>
 
166
  ReactDOM.render(<App />, document.getElementById('root'));
167
  </script>
168
  </body>
169
+ </html>