Spaces:
Running
Running
File size: 4,607 Bytes
76990ca 59349f4 76990ca 59349f4 76990ca 59349f4 f59e9e3 76990ca f59e9e3 76990ca f59e9e3 76990ca 59349f4 76990ca 59349f4 f59e9e3 59349f4 76990ca 59349f4 76990ca 59349f4 f59e9e3 59349f4 f59e9e3 59349f4 76990ca f59e9e3 76990ca 59349f4 f59e9e3 59349f4 f59e9e3 59349f4 76990ca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
import gradio as gr
css_code = """
/* Full-screen background */
.gradio-container {
background-image: url('https://img.freepik.com/premium-photo/abstract-black-gold-lines-background-with-light-effect_760214-2131.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: 'Segoe UI', sans-serif;
color: white;
margin: 0;
padding: 20px;
}
/* Common animation box style */
.animated-box {
animation: glow 2s infinite alternate;
padding: 20px;
border-radius: 15px;
background: linear-gradient(135deg, #1e1e2f, #3f3f5f);
color: white;
box-shadow: 0 0 20px rgba(255,255,255,0.2);
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.animated-box:hover {
transform: scale(1.03);
box-shadow: 0 0 30px #0ff;
}
/* Glow animation */
@keyframes glow {
from { box-shadow: 0 0 10px #00f; }
to { box-shadow: 0 0 20px #0ff; }
}
/* Tutorials container */
.tutorials {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: space-between;
}
/* Each tutorial section */
.tutorial-section {
flex: 1 1 45%;
}
/* Section headings */
.tutorial-section h3 {
text-align: center;
color: #FFD700;
margin-bottom: 10px;
}
/* Each link box */
.link-box {
animation: glow 2s infinite alternate;
background: linear-gradient(135deg, #2a2a3f, #4f4f6f);
padding: 12px 15px;
margin: 8px 0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,255,255,0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.link-box:hover {
transform: scale(1.05);
box-shadow: 0 0 25px #0ff;
}
.link-box a {
color: #00ffff;
text-decoration: none;
font-weight: bold;
}
.link-box a:hover {
color: #ffffff;
text-decoration: underline;
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.animated-box {
font-size: 18px;
padding: 15px;
}
.tutorials {
flex-direction: column;
gap: 15px;
}
.tutorial-section {
flex: 1 1 100%;
}
.link-box a {
font-size: 16px;
}
}
"""
with gr.Blocks(css=css_code) as demo:
gr.HTML('<div class="animated-box">🌌 Welcome to AR/VR Learning Portal<br>✨ Click a link below to explore immersive tech ✨</div>')
gr.HTML("""
<div class="tutorials">
<div class="tutorial-section">
<div class="animated-box">
<h3>🔮 AR Tutorials</h3>
<div class="link-box"><a href="https://youtu.be/WzfDo2Wpxks?si=46aXUUDbDa3MxCgu" target="_blank">Augmented Reality for Everyone – Full Course</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=iqjcNRJf-Nc" target="_blank">Immersive Learning with AR/VR</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=9NmDP8PNCPs" target="_blank">AR/VR Development & Design Workshop</a></div>
<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>
<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>
<div class="link-box"><a href="https://www.youtube.com/watch?v=JYqG1gqzFZQ" target="_blank">Unity AR Foundation Tutorial</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=ZVJ3asMoZ18" target="_blank">Spark AR Studio Basics</a></div>
</div>
</div>
<div class="tutorial-section">
<div class="animated-box">
<h3>🧠 VR Tutorials</h3>
<div class="link-box"><a href="https://youtu.be/wqjJU4V6bGM?si=yfX7n32whAdEePuk" target="_blank">VR Game Development Tutorial</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=YBQ_ps6e71k" target="_blank">Learn VR Development in 3 Hours</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=X13ZXd-2CHI" target="_blank">Learning Science in VR</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=JYqG1gqzFZQ" target="_blank">Unity VR Setup & Interaction</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=ZVJ3asMoZ18" target="_blank">VR UI/UX Design Principles</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=JZ6z5J5pU3g" target="_blank">VR in Education & Training</a></div>
<div class="link-box"><a href="https://www.youtube.com/watch?v=KJz5J5pU3g" target="_blank">Building VR Worlds with Unity</a></div>
</div>
</div>
</div>
""")
demo.launch()
|