Skip to content

Premium Welcome Banner Styling and Enhanced Content #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jonnysol merged 1 commit into from
Jul 13, 2025
Merged

Premium Welcome Banner Styling and Enhanced Content #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 150 additions & 26 deletions src/core/generator.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,62 +347,151 @@ def generate_css(self):
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.95);
background: rgba(0,0,0,0.98);
z-index: 1000000;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', monospace;
backdrop-filter: blur(2px);
}}

background: #111;
border: 2px solid #39ff14;
border-radius: 10px;
padding: 40px;
max-width: 800px;
max-height: 80vh;
#welcome-banner-panel {{
background: linear-gradient(145deg, #0a0a0a, #1a1a1a);
border: 3px solid #39ff14;
border-radius: 15px;
padding: 50px;
max-width: 900px;
max-height: 85vh;
overflow-y: auto;
color: white;
text-align: center;
box-shadow: 0 0 30px rgba(57,255,20,0.3);
box-shadow:
0 0 40px rgba(57,255,20,0.4),
inset 0 0 20px rgba(57,255,20,0.1);
position: relative;
}}

#welcome-banner-panel::before {{
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #39ff14, #00cc00, #39ff14);
border-radius: 17px;
z-index: -1;
animation: borderGlow 2s ease-in-out infinite alternate;
}}

@keyframes borderGlow {{
0% {{ opacity: 0.5; }}
100% {{ opacity: 1; }}
}}

.welcome-content h1 {{
color: #39ff14;
font-size: 32px;
margin-bottom: 20px;
font-size: 36px;
margin-bottom: 25px;
text-shadow: 0 0 15px #39ff14;
text-transform: uppercase;
letter-spacing: 3px;
}}

.welcome-content h2 {{
color: #39ff14;
font-size: 24px;
margin: 25px 0 15px 0;
text-shadow: 0 0 10px #39ff14;
text-transform: uppercase;
letter-spacing: 2px;
}}

.welcome-content p {{
font-size: 18px;
.intro-section, .experience-section {{
margin: 25px 0;
padding: 20px;
background: rgba(57,255,20,0.05);
border-radius: 10px;
border: 1px solid rgba(57,255,20,0.2);
}}

.main-intro {{
font-size: 20px;
line-height: 1.7;
color: #f0f0f0;
margin: 0;
}}

.controls-grid {{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 20px 0;
}}

.control-group {{
background: rgba(0,0,0,0.3);
padding: 15px;
border-radius: 8px;
border: 1px solid rgba(57,255,20,0.3);
font-size: 14px;
line-height: 1.5;
}}

.experience-text {{
font-size: 16px;
line-height: 1.6;
margin-bottom: 30px;
color: #e0e0e0;
margin: 0;
}}

.footer-links {{
margin-top: 20px;
font-size: 14px;
color: #ccc;
}}

.footer-links a {{
color: #39ff14;
text-decoration: none;
}}

.footer-links a:hover {{
text-shadow: 0 0 5px #39ff14;
}}

#time-travel-button {{
background: #39ff14;
background: linear-gradient(145deg, #39ff14, #00cc00);
color: #000;
border: none;
padding: 15px 30px;
font-size: 20px;
padding: 18px 40px;
font-size: 22px;
font-weight: bold;
border-radius: 5px;
border-radius: 8px;
cursor: pointer;
font-family: 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 2px;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(57,255,20,0.5);
box-shadow:
0 0 25px rgba(57,255,20,0.6),
0 4px 15px rgba(0,0,0,0.3);
margin: 25px 0;
position: relative;
overflow: hidden;
}}

#time-travel-button:hover {{
background: #00cc00;
box-shadow: 0 0 30px rgba(57,255,20,0.8);
transform: scale(1.05);
background: linear-gradient(145deg, #00ff00, #39ff14);
box-shadow:
0 0 35px rgba(57,255,20,0.9),
0 6px 20px rgba(0,0,0,0.4);
transform: translateY(-2px) scale(1.05);
}}

#time-travel-button:active {{
transform: translateY(0) scale(1.02);
}}

/* Wormhole Animation Overlay */
Expand All @@ -419,6 +508,7 @@ def generate_css(self):
align-items: center;
}}

#wormhole-gif {{
width: 100vw;
height: 100vh;
object-fit: cover;
Expand Down Expand Up @@ -1582,9 +1672,43 @@ def generate_html(self):
<div id="welcome-banner-overlay">
<div id="welcome-banner-panel">
<div class="welcome-content">
<h1>Welcome to Time Capsule TV</h1>
<p>Hey welcome my name is Jonny welcome to my time capsule TV. You have 222,000 videos to choose from from each decade. These are your shortcuts. Good luck follow me on Instagram and Twitter. This is completely fre completely free API coming soon if you want to deploy this anywhere you want please be able to download my GitHub or something like that but much more like much more like premium.</p>
<button id="time-travel-button">Time Travel</button>
<h1>🕰️ Welcome to TimeCapsuleTV</h1>
<div class="intro-section">
<p class="main-intro">Step into the ultimate nostalgic journey through television history! I'm <strong>Jonny Solomon</strong>, and I've created this immersive retro TV experience featuring <strong>222,219 authentic videos</strong> spanning six incredible decades (1950s-2000s).</p>
</div>

<div class="features-section">
<h2>🎮 Your Time Travel Controls</h2>
<div class="controls-grid">
<div class="control-group">
<strong>📺 Navigation:</strong><br>
↑↓ Categories • ←→ Videos<br>
<strong>🎲 Quick Access:</strong><br>
R = Random • S = Skip • H = Hidden
</div>
<div class="control-group">
<strong>⏰ Decades:</strong><br>
5=50s • 6=60s • 7=70s<br>
8=80s • 9=90s • 0=00s
</div>
<div class="control-group">
<strong>💫 Special:</strong><br>
C = Categorize • X = Favorites<br>
F = Favorites Mode • G = Info
</div>
</div>
</div>

<div class="experience-section">
<p class="experience-text">Experience authentic CRT effects, period-appropriate sound, and seamless decade switching. Built with ❤️ for nostalgia enthusiasts and powered by data from <strong>myretrotvs.com</strong>.</p>
</div>

<button id="time-travel-button">🚀 Begin Time Travel</button>

<div class="footer-links">
<p>Follow the journey: <strong>Instagram & Twitter @JonnySol</strong><br>
<small>Open source • API coming soon • Built by <a href="https://jonny.sh" target="_blank">Jonny.sh</a></small></p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1615,4 +1739,4 @@ def generate_html(self):
{self.generate_javascript()}
</script>
</body>
</html>'''
</html>'''
Loading