Hugging Face's logo

Spaces:
sreelekhaputta2
/
Learning
Running

App Files Community
sreelekhaputta2 commited on
Commit
f59e9e3
·
verified ·
1 Parent(s): 59349f4

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +32 -31
app.py CHANGED
@@ -13,17 +13,20 @@ css_code = """
13
  padding: 20px;
14
  }
15
 
16
- /* Glowing header box */
17
- #box {
18
  animation: glow 2s infinite alternate;
19
  padding: 20px;
20
- border-radius: 12px;
21
  background: linear-gradient(135deg, #1e1e2f, #3f3f5f);
22
  color: white;
23
- font-size: 20px;
24
- text-align: center;
25
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
26
  margin-bottom: 20px;
 
 
 
 
 
27
  }
28
 
29
  /* Glow animation */
@@ -43,10 +46,6 @@ css_code = """
43
  /* Each tutorial section */
44
  .tutorial-section {
45
  flex: 1 1 45%;
46
- background: rgba(0,0,0,0.5);
47
- padding: 15px;
48
- border-radius: 12px;
49
- margin-bottom: 20px;
50
  }
51
 
52
  /* Section headings */
@@ -60,7 +59,7 @@ css_code = """
60
  .link-box {
61
  animation: glow 2s infinite alternate;
62
  background: linear-gradient(135deg, #2a2a3f, #4f4f6f);
63
- padding: 10px 15px;
64
  margin: 8px 0;
65
  border-radius: 10px;
66
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
@@ -80,9 +79,9 @@ css_code = """
80
  text-decoration: underline;
81
  }
82
 
83
- /* Responsive adjustments for mobile */
84
  @media screen and (max-width: 768px) {
85
- #box {
86
  font-size: 18px;
87
  padding: 15px;
88
  }
@@ -92,7 +91,6 @@ css_code = """
92
  }
93
  .tutorial-section {
94
  flex: 1 1 100%;
95
- padding: 10px;
96
  }
97
  .link-box a {
98
  font-size: 16px;
@@ -101,29 +99,32 @@ css_code = """
101
  """
102
 
103
  with gr.Blocks(css=css_code) as demo:
104
- gr.Markdown("## 🌌 Welcome to AR/VR Learning Portal")
105
- gr.HTML('<div id="box">✨ Click a link below to explore immersive tech ✨</div>')
106
  gr.HTML("""
107
  <div class="tutorials">
108
  <div class="tutorial-section">
109
- <h3>🔮 AR Tutorials</h3>
110
- <div class="link-box"><a href="https://youtu.be/WzfDo2Wpxks?si=46aXUUDbDa3MxCgu" target="_blank">Augmented Reality for Everyone – Full Course</a></div>
111
- <div class="link-box"><a href="https://www.youtube.com/watch?v=iqjcNRJf-Nc" target="_blank">Immersive Learning with AR/VR</a></div>
112
- <div class="link-box"><a href="https://www.youtube.com/watch?v=9NmDP8PNCPs" target="_blank">AR/VR Development & Design Workshop</a></div>
113
- <div class="link-box"><a href="https://www.youtube.com/watch?v=wyxI10Et_q4" target="_blank">Intro to AR/VR Development – Industry Workshop</a></div>
114
- <div class="link-box"><a href="https://www.youtube.com/watch?v=EVIDMRayeT0" target="_blank">Beginner’s Guide to AR/VR – XR Terms & Tools</a></div>
115
- <div class="link-box"><a href="https://www.youtube.com/watch?v=JYqG1gqzFZQ" target="_blank">Unity AR Foundation Tutorial</a></div>
116
- <div class="link-box"><a href="https://www.youtube.com/watch?v=ZVJ3asMoZ18" target="_blank">Spark AR Studio Basics</a></div>
 
 
117
  </div>
118
  <div class="tutorial-section">
119
- <h3>🧠 VR Tutorials</h3>
120
- <div class="link-box"><a href="https://youtu.be/wqjJU4V6bGM?si=yfX7n32whAdEePuk" target="_blank">VR Game Development Tutorial</a></div>
121
- <div class="link-box"><a href="https://www.youtube.com/watch?v=YBQ_ps6e71k" target="_blank">Learn VR Development in 3 Hours</a></div>
122
- <div class="link-box"><a href="https://www.youtube.com/watch?v=X13ZXd-2CHI" target="_blank">Learning Science in VR</a></div>
123
- <div class="link-box"><a href="https://www.youtube.com/watch?v=JYqG1gqzFZQ" target="_blank">Unity VR Setup & Interaction</a></div>
124
- <div class="link-box"><a href="https://www.youtube.com/watch?v=ZVJ3asMoZ18" target="_blank">VR UI/UX Design Principles</a></div>
125
- <div class="link-box"><a href="https://www.youtube.com/watch?v=JZ6z5J5pU3g" target="_blank">VR in Education & Training</a></div>
126
- <div class="link-box"><a href="https://www.youtube.com/watch?v=KJz5J5pU3g" target="_blank">Building VR Worlds with Unity</a></div>
 
 
127
  </div>
128
  </div>
129
  """)
 
13
  padding: 20px;
14
  }
15
 
16
+ /* Common animation box style */
17
+ .animated-box {
18
  animation: glow 2s infinite alternate;
19
  padding: 20px;
20
+ border-radius: 15px;
21
  background: linear-gradient(135deg, #1e1e2f, #3f3f5f);
22
  color: white;
 
 
23
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
24
  margin-bottom: 20px;
25
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
26
+ }
27
+ .animated-box:hover {
28
+ transform: scale(1.03);
29
+ box-shadow: 0 0 30px #0ff;
30
  }
31
 
32
  /* Glow animation */
 
46
  /* Each tutorial section */
47
  .tutorial-section {
48
  flex: 1 1 45%;
 
 
 
 
49
  }
50
 
51
  /* Section headings */
 
59
  .link-box {
60
  animation: glow 2s infinite alternate;
61
  background: linear-gradient(135deg, #2a2a3f, #4f4f6f);
62
+ padding: 12px 15px;
63
  margin: 8px 0;
64
  border-radius: 10px;
65
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
 
79
  text-decoration: underline;
80
  }
81
 
82
+ /* Responsive adjustments */
83
  @media screen and (max-width: 768px) {
84
+ .animated-box {
85
  font-size: 18px;
86
  padding: 15px;
87
  }
 
91
  }
92
  .tutorial-section {
93
  flex: 1 1 100%;
 
94
  }
95
  .link-box a {
96
  font-size: 16px;
 
99
  """
100
 
101
  with gr.Blocks(css=css_code) as demo:
102
+ gr.HTML('<div class="animated-box">🌌 Welcome to AR/VR Learning Portal<br>✨ Click a link below to explore immersive tech ✨</div>')
 
103
  gr.HTML("""
104
  <div class="tutorials">
105
  <div class="tutorial-section">
106
+ <div class="animated-box">
107
+ <h3>🔮 AR Tutorials</h3>
108
+ <div class="link-box"><a href="https://youtu.be/WzfDo2Wpxks?si=46aXUUDbDa3MxCgu" target="_blank">Augmented Reality for Everyone – Full Course</a></div>
109
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=iqjcNRJf-Nc" target="_blank">Immersive Learning with AR/VR</a></div>
110
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=9NmDP8PNCPs" target="_blank">AR/VR Development & Design Workshop</a></div>
111
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=wyxI10Et_q4" target="_blank">Intro to AR/VR Development – Industry Workshop</a></div>
112
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=EVIDMRayeT0" target="_blank">Beginner’s Guide to AR/VR – XR Terms & Tools</a></div>
113
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=JYqG1gqzFZQ" target="_blank">Unity AR Foundation Tutorial</a></div>
114
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=ZVJ3asMoZ18" target="_blank">Spark AR Studio Basics</a></div>
115
+ </div>
116
  </div>
117
  <div class="tutorial-section">
118
+ <div class="animated-box">
119
+ <h3>🧠 VR Tutorials</h3>
120
+ <div class="link-box"><a href="https://youtu.be/wqjJU4V6bGM?si=yfX7n32whAdEePuk" target="_blank">VR Game Development Tutorial</a></div>
121
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=YBQ_ps6e71k" target="_blank">Learn VR Development in 3 Hours</a></div>
122
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=X13ZXd-2CHI" target="_blank">Learning Science in VR</a></div>
123
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=JYqG1gqzFZQ" target="_blank">Unity VR Setup & Interaction</a></div>
124
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=ZVJ3asMoZ18" target="_blank">VR UI/UX Design Principles</a></div>
125
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=JZ6z5J5pU3g" target="_blank">VR in Education & Training</a></div>
126
+ <div class="link-box"><a href="https://www.youtube.com/watch?v=KJz5J5pU3g" target="_blank">Building VR Worlds with Unity</a></div>
127
+ </div>
128
  </div>
129
  </div>
130
  """)