Hugging Face's logo

Spaces:
jrrade
/
3d-geometry-flashcards
Running

App Files Community
jrrade commited on
Commit
3343249
·
verified ·
1 Parent(s): f38622c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +255 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: 3d Geometry Flashcards
3
- emoji: 🌖
4
- colorFrom: red
5
- colorTo: yellow
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: 3d-geometry-flashcards
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,255 @@
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>3D Graphics Flashcards</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .flashcard {
11
+ perspective: 1000px;
12
+ width: 100%;
13
+ height: 300px;
14
+ }
15
+ .flashcard-inner {
16
+ position: relative;
17
+ width: 100%;
18
+ height: 100%;
19
+ transition: transform 0.6s;
20
+ transform-style: preserve-3d;
21
+ }
22
+ .flashcard.flipped .flashcard-inner {
23
+ transform: rotateY(180deg);
24
+ }
25
+ .flashcard-front, .flashcard-back {
26
+ position: absolute;
27
+ width: 100%;
28
+ height: 100%;
29
+ backface-visibility: hidden;
30
+ border-radius: 15px;
31
+ padding: 20px;
32
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
33
+ display: flex;
34
+ flex-direction: column;
35
+ justify-content: center;
36
+ align-items: center;
37
+ }
38
+ .flashcard-back {
39
+ transform: rotateY(180deg);
40
+ }
41
+ .progress-bar {
42
+ transition: width 0.3s ease;
43
+ }
44
+ @keyframes float {
45
+ 0% { transform: translateY(0px); }
46
+ 50% { transform: translateY(-10px); }
47
+ 100% { transform: translateY(0px); }
48
+ }
49
+ .floating {
50
+ animation: float 3s ease-in-out infinite;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
55
+ <div class="container mx-auto px-4 py-12">
56
+ <header class="text-center mb-12">
57
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">
58
+ <i class="fas fa-cube mr-3 text-purple-300 floating"></i>
59
+ 3D Graphics Flashcards
60
+ </h1>
61
+ <p class="text-xl text-purple-200 max-w-2xl mx-auto">
62
+ Interactive learning cards for computer graphics concepts
63
+ </p>
64
+ </header>
65
+
66
+ <div class="flex justify-between items-center mb-8 max-w-2xl mx-auto">
67
+ <div class="w-full bg-gray-700 rounded-full h-4">
68
+ <div id="progress" class="progress-bar h-4 rounded-full bg-gradient-to-r from-blue-400 to-purple-500" style="width: 0%"></div>
69
+ </div>
70
+ <span id="progress-text" class="ml-4 font-bold">0/7</span>
71
+ </div>
72
+
73
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
74
+ <!-- Flashcard 1 -->
75
+ <div class="flashcard" onclick="flipCard(this)">
76
+ <div class="flashcard-inner">
77
+ <div class="flashcard-front bg-gradient-to-br from-blue-500 to-blue-700 flex flex-col items-center justify-center p-6">
78
+ <i class="fas fa-shapes text-5xl mb-4"></i>
79
+ <h2 class="text-2xl font-bold mb-2">3D Geometries</h2>
80
+ <p class="text-center text-blue-100">Click to reveal definition</p>
81
+ </div>
82
+ <div class="flashcard-back bg-gradient-to-br from-blue-600 to-blue-800 p-6">
83
+ <h3 class="text-xl font-bold mb-3">3D Geometries</h3>
84
+ <p class="text-sm mb-4">Mathematical representations of 3D shapes including vertices, edges, and faces. Common types include polygonal meshes, NURBS, and subdivision surfaces.</p>
85
+ <div class="text-xs bg-blue-900 bg-opacity-50 p-2 rounded">
86
+ <p><span class="font-bold">Key Elements:</span> Vertices, Edges, Faces, Normals</p>
87
+ <p><span class="font-bold">Formats:</span> OBJ, FBX, STL, glTF</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Flashcard 2 -->
94
+ <div class="flashcard" onclick="flipCard(this)">
95
+ <div class="flashcard-inner">
96
+ <div class="flashcard-front bg-gradient-to-br from-purple-500 to-purple-700 flex flex-col items-center justify-center p-6">
97
+ <i class="fas fa-desktop text-5xl mb-4"></i>
98
+ <h2 class="text-2xl font-bold mb-2">Computer Graphics</h2>
99
+ <p class="text-center text-purple-100">Click to reveal definition</p>
100
+ </div>
101
+ <div class="flashcard-back bg-gradient-to-br from-purple-600 to-purple-800 p-6">
102
+ <h3 class="text-xl font-bold mb-3">Computer Graphics</h3>
103
+ <p class="text-sm mb-4">The field of visual computing where images and animations are generated using computers. Includes both 2D and 3D graphics, real-time rendering, and offline rendering.</p>
104
+ <div class="text-xs bg-purple-900 bg-opacity-50 p-2 rounded">
105
+ <p><span class="font-bold">Subfields:</span> Rendering, Animation, Modeling, Visualization</p>
106
+ <p><span class="font-bold">APIs:</span> OpenGL, Vulkan, DirectX, WebGL</p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Flashcard 3 -->
113
+ <div class="flashcard" onclick="flipCard(this)">
114
+ <div class="flashcard-inner">
115
+ <div class="flashcard-front bg-gradient-to-br from-green-500 to-green-700 flex flex-col items-center justify-center p-6">
116
+ <i class="fas fa-brain text-5xl mb-4"></i>
117
+ <h2 class="text-2xl font-bold mb-2">NeRFs</h2>
118
+ <p class="text-center text-green-100">Click to reveal definition</p>
119
+ </div>
120
+ <div class="flashcard-back bg-gradient-to-br from-green-600 to-green-800 p-6">
121
+ <h3 class="text-xl font-bold mb-3">Neural Radiance Fields (NeRFs)</h3>
122
+ <p class="text-sm mb-4">A deep learning technique that represents 3D scenes as continuous volumetric functions using neural networks. Can synthesize novel views from sparse input images.</p>
123
+ <div class="text-xs bg-green-900 bg-opacity-50 p-2 rounded">
124
+ <p><span class="font-bold">Key Features:</span> View synthesis, Volume rendering, Neural networks</p>
125
+ <p><span class="font-bold">Applications:</span> VR/AR, 3D reconstruction, Cinematography</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Flashcard 4 -->
132
+ <div class="flashcard" onclick="flipCard(this)">
133
+ <div class="flashcard-inner">
134
+ <div class="flashcard-front bg-gradient-to-br from-red-500 to-red-700 flex flex-col items-center justify-center p-6">
135
+ <i class="fas fa-spray-can text-5xl mb-4"></i>
136
+ <h2 class="text-2xl font-bold mb-2">Gaussian Splats</h2>
137
+ <p class="text-center text-red-100">Click to reveal definition</p>
138
+ </div>
139
+ <div class="flashcard-back bg-gradient-to-br from-red-600 to-red-800 p-6">
140
+ <h3 class="text-xl font-bold mb-3">Gaussian Splatting</h3>
141
+ <p class="text-sm mb-4">A point-based rendering technique where each point is represented as a 3D Gaussian distribution. Enables high-quality rendering with efficient computation.</p>
142
+ <div class="text-xs bg-red-900 bg-opacity-50 p-2 rounded">
143
+ <p><span class="font-bold">Advantages:</span> Real-time rendering, High quality, Memory efficient</p>
144
+ <p><span class="font-bold">Use Cases:</span> Large-scale scenes, Point cloud visualization</p>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Flashcard 5 -->
151
+ <div class="flashcard" onclick="flipCard(this)">
152
+ <div class="flashcard-inner">
153
+ <div class="flashcard-front bg-gradient-to-br from-yellow-500 to-yellow-700 flex flex-col items-center justify-center p-6">
154
+ <i class="fas fa-bullseye text-5xl mb-4"></i>
155
+ <h2 class="text-2xl font-bold mb-2">Ray Casting</h2>
156
+ <p class="text-center text-yellow-100">Click to reveal definition</p>
157
+ </div>
158
+ <div class="flashcard-back bg-gradient-to-br from-yellow-600 to-yellow-800 p-6">
159
+ <h3 class="text-xl font-bold mb-3">Ray Casting</h3>
160
+ <p class="text-sm mb-4">A rendering technique that traces rays from the camera through each pixel to determine visible surfaces. The foundation for ray tracing algorithms.</p>
161
+ <div class="text-xs bg-yellow-900 bg-opacity-50 p-2 rounded">
162
+ <p><span class="font-bold">Characteristics:</span> Simple ray tracing, No secondary rays, Fast</p>
163
+ <p><span class="font-bold">Applications:</span> Early 3D games, Medical imaging</p>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Flashcard 6 -->
170
+ <div class="flashcard" onclick="flipCard(this)">
171
+ <div class="flashcard-inner">
172
+ <div class="flashcard-front bg-gradient-to-br from-pink-500 to-pink-700 flex flex-col items-center justify-center p-6">
173
+ <i class="fas fa-vial text-5xl mb-4"></i>
174
+ <h2 class="text-2xl font-bold mb-2">Volume Rendering</h2>
175
+ <p class="text-center text-pink-100">Click to reveal definition</p>
176
+ </div>
177
+ <div class="flashcard-back bg-gradient-to-br from-pink-600 to-pink-800 p-6">
178
+ <h3 class="text-xl font-bold mb-3">Volume Rendering</h3>
179
+ <p class="text-sm mb-4">Techniques for displaying 2D projections of 3D volumetric data sets, typically used for medical imaging, scientific visualization, and atmospheric data.</p>
180
+ <div class="text-xs bg-pink-900 bg-opacity-50 p-2 rounded">
181
+ <p><span class="font-bold">Methods:</span> Ray casting, Texture slicing, Shear-warp</p>
182
+ <p><span class="font-bold">Data Types:</span> CT scans, MRI, Scientific simulations</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Flashcard 7 -->
189
+ <div class="flashcard" onclick="flipCard(this)">
190
+ <div class="flashcard-inner">
191
+ <div class="flashcard-front bg-gradient-to-br from-indigo-500 to-indigo-700 flex flex-col items-center justify-center p-6">
192
+ <i class="fas fa-border-none text-5xl mb-4"></i>
193
+ <h2 class="text-2xl font-bold mb-2">Rasterization</h2>
194
+ <p class="text-center text-indigo-100">Click to reveal definition</p>
195
+ </div>
196
+ <div class="flashcard-back bg-gradient-to-br from-indigo-600 to-indigo-800 p-6">
197
+ <h3 class="text-xl font-bold mb-3">Rasterization</h3>
198
+ <p class="text-sm mb-4">The process of converting vector graphics (primitives like points, lines, triangles) into a raster image (pixels) for display on a screen.</p>
199
+ <div class="text-xs bg-indigo-900 bg-opacity-50 p-2 rounded">
200
+ <p><span class="font-bold">Features:</span> Real-time performance, Hardware accelerated, Common in GPUs</p>
201
+ <p><span class="font-bold">Pipeline:</span> Vertex processing, Primitive assembly, Fragment processing</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="text-center">
209
+ <button onclick="resetAllCards()" class="bg-white text-purple-900 px-6 py-3 rounded-full font-bold hover:bg-purple-100 transition-all shadow-lg">
210
+ <i class="fas fa-sync-alt mr-2"></i> Reset All Cards
211
+ </button>
212
+ </div>
213
+ </div>
214
+
215
+ <script>
216
+ let flippedCards = 0;
217
+ const totalCards = 7;
218
+
219
+ function flipCard(card) {
220
+ if (!card.classList.contains('flipped')) {
221
+ flippedCards++;
222
+ updateProgress();
223
+ }
224
+ card.classList.toggle('flipped');
225
+ }
226
+
227
+ function resetAllCards() {
228
+ document.querySelectorAll('.flashcard').forEach(card => {
229
+ card.classList.remove('flipped');
230
+ });
231
+ flippedCards = 0;
232
+ updateProgress();
233
+ }
234
+
235
+ function updateProgress() {
236
+ const progress = (flippedCards / totalCards) * 100;
237
+ document.getElementById('progress').style.width = `${progress}%`;
238
+ document.getElementById('progress-text').textContent = `${flippedCards}/${totalCards}`;
239
+ }
240
+
241
+ // Add hover effects to all cards
242
+ document.querySelectorAll('.flashcard').forEach(card => {
243
+ card.addEventListener('mouseenter', function() {
244
+ if (!this.classList.contains('flipped')) {
245
+ this.style.transform = 'translateY(-5px)';
246
+ }
247
+ });
248
+
249
+ card.addEventListener('mouseleave', function() {
250
+ this.style.transform = 'translateY(0)';
251
+ });
252
+ });
253
+ </script>
254
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=jrrade/3d-geometry-flashcards" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
255
+ </html>