Skip to content

Commit 710ef27

Browse files
WoodwardIII-HSWoodwardIII-HS
authored
Update index.html
1 parent 9ea15c3 commit 710ef27

File tree

1 file changed

+77
-134
lines changed

1 file changed

+77
-134
lines changed

‎index.html‎

Lines changed: 77 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -8,168 +8,111 @@
88
window.dataLayer = window.dataLayer || [];
99
function gtag(){dataLayer.push(arguments);}
1010
gtag('js', new Date());
11-
1211
gtag('config', 'G-BRSYR7JD2Y');
1312
</script>
13+
1414
<meta charset="UTF-8">
1515
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1616
<title>236 Technoticks</title>
1717
<link rel="icon" type="image/x-icon" href="favicon.ico">
1818
<script src="https://cdn.tailwindcss.com"></script>
1919
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
20+
<script>
21+
function toggleTheme() {
22+
const body = document.body;
23+
const btn = document.querySelector('.theme-toggle');
24+
if (body.classList.contains('theme-coolLook')) {
25+
body.classList.remove('theme-coolLook');
26+
body.classList.add('theme-easyRead');
27+
btn.textContent = 'Switch to CoolLook';
28+
} else {
29+
body.classList.remove('theme-easyRead');
30+
body.classList.add('theme-coolLook');
31+
btn.textContent = 'Switch to EasyRead';
32+
}
33+
}
34+
</script>
35+
<button class="theme-toggle" onclick="toggleTheme()">Switch to EasyRead</button>
2036
<style>
21-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
22-
2337
body {
24-
font-family: 'Roboto', sans-serif;
25-
margin: 0;
26-
height: 100%;
27-
background: #0a0a1a; /* dark base */
28-
background-image:
29-
radial-gradient(circle at 20% 30%, rgba(128, 0, 255, 0.4), transparent 50%),
30-
radial-gradient(circle at 80% 20%, rgba(0, 0, 255, 0.35), transparent 50%),
31-
radial-gradient(circle at 70% 80%, rgba(255, 0, 255, 0.25), transparent 50%),
32-
radial-gradient(circle at 30% 70%, rgba(0, 0, 128, 0.3), transparent 50%);
33-
background-blend-mode: screen;
34-
background-attachment: fixed;
35-
opacity: 0;
36-
animation: fadeInBg 2s ease forwards, moveBlobs 60s ease-in-out infinite alternate;
37-
}
38-
39-
/* Fade-in stays the same */
40-
@keyframes fadeInBg {
41-
from { opacity: 0; }
42-
to { opacity: 1; }
43-
}
44-
45-
/* Subtle blob drift */
46-
@keyframes moveBlobs {
47-
0% {
48-
background-position: 20% 30%, 80% 20%, 70% 80%, 30% 70%;
38+
font-family: 'Roboto', sans-serif;
39+
margin: 0;
40+
height: 100%;
41+
transition: background 0.8s ease, color 0.8s ease;
4942
}
50-
50% {
51-
background-position: 22% 32%, 78% 22%, 68% 78%, 32% 68%;
43+
44+
/* ===== EASY READ THEME ===== */
45+
body.theme-easyRead {
46+
background: #f5f5f5;
47+
color: #222;
5248
}
53-
100% {
54-
background-position: 20% 30%, 80% 20%, 70% 80%, 30% 70%;
49+
body.theme-easyRead header,
50+
body.theme-easyRead nav,
51+
body.theme-easyRead footer {
52+
background: #ddd;
53+
color: #111;
5554
}
56-
}
5755

56+
/* ===== COOL LOOK THEME ===== */
57+
body.theme-coolLook {
58+
background: #0a0a1a;
59+
background-image:
60+
radial-gradient(circle at 20% 30%, rgba(128, 0, 255, 0.4), transparent 50%),
61+
radial-gradient(circle at 80% 20%, rgba(0, 0, 255, 0.35), transparent 50%),
62+
radial-gradient(circle at 70% 80%, rgba(255, 0, 255, 0.25), transparent 50%),
63+
radial-gradient(circle at 30% 70%, rgba(0, 0, 128, 0.3), transparent 50%);
64+
background-blend-mode: screen;
65+
background-attachment: fixed;
66+
color: white;
67+
animation: fadeInBg 2s ease forwards, moveBlobs 60s ease-in-out infinite alternate;
68+
}
5869

59-
/* 🌌 Header (modified for frosted look) */
60-
header.gradient-bg {
70+
body.theme-coolLook header.gradient-bg {
6171
background: rgba(20, 20, 60, 0.85);
6272
backdrop-filter: blur(6px);
6373
}
64-
65-
.gradient-bg {
66-
background: linear-gradient(135deg, #8ca7fa 0%, #5a7df5 100%);
67-
}
68-
69-
.nav-btn {
70-
transition: all 0.3s ease;
71-
}
72-
73-
.nav-btn:hover {
74-
transform: translateY(-2px);
75-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
76-
}
77-
78-
.footer-icon {
79-
transition: all 0.3s ease;
80-
}
81-
82-
.footer-icon:hover {
83-
transform: scale(1.1);
74+
body.theme-coolLook nav {
75+
background: rgba(10, 10, 20, 0.55);
76+
border-radius: 12px;
77+
padding: 1rem;
78+
margin-top: 2rem;
79+
backdrop-filter: blur(6px);
8480
}
85-
86-
/* 🌌 Robot Slideshow (frosted panel) */
87-
.robot-slideshow {
81+
body.theme-coolLook .robot-slideshow {
8882
background: rgba(15, 15, 30, 0.75);
8983
backdrop-filter: blur(4px);
9084
padding: 1rem;
9185
border-radius: 0.75rem;
92-
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
93-
0 4px 6px -2px rgba(0, 0, 0, 0.05);
9486
}
95-
96-
.header-banner {
97-
max-height: 180px;
98-
object-fit: contain;
99-
border-radius: 24px;
100-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
101-
transition: all 0.3s ease;
102-
cursor: pointer;
103-
}
104-
105-
.header-banner:hover {
106-
transform: scale(1.02);
107-
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
108-
}
109-
110-
.disney-border {
111-
position: relative;
112-
overflow: hidden;
113-
}
114-
115-
.disney-border::after {
116-
content: '';
117-
position: absolute;
118-
top: 0;
119-
left: 0;
120-
right: 0;
121-
bottom: 0;
122-
border: 4px solid rgba(255, 255, 255, 0.3);
123-
border-radius: 24px;
124-
pointer-events: none;
125-
}
126-
127-
/* DeepSite disclaimer styles */
128-
.deepsite-badge {
129-
background: linear-gradient(135deg, #6e48aa 0%, #9d50bb 100%);
130-
border-radius: 9999px;
131-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
132-
transition: all 0.3s ease;
133-
padding: 8px 16px;
134-
display: inline-flex;
135-
align-items: center;
136-
gap: 8px;
137-
text-decoration: none;
138-
}
139-
140-
.deepsite-badge:hover {
141-
transform: translateY(-2px);
142-
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
87+
body.theme-coolLook footer {
88+
background: rgba(20, 20, 40, 0.85);
89+
backdrop-filter: blur(8px);
14390
}
144-
145-
.deepsite-logo {
146-
width: 20px;
147-
height: 20px;
91+
92+
/* Animations for coolLook */
93+
@keyframes fadeInBg {
94+
from { opacity: 0; }
95+
to { opacity: 1; }
14896
}
149-
150-
.pulse {
151-
animation: pulse 2s infinite;
97+
@keyframes moveBlobs {
98+
0% { background-position: 20% 30%, 80% 20%, 70% 80%, 30% 70%; }
99+
50% { background-position: 22% 32%, 78% 22%, 68% 78%, 32% 68%; }
100+
100% { background-position: 20% 30%, 80% 20%, 70% 80%, 30% 70%; }
152101
}
153-
154-
@keyframes pulse {
155-
0% { transform: scale(1); }
156-
50% { transform: scale(1.05); }
157-
100% { transform: scale(1); }
158-
}
159-
160-
/* 🌌 NEW: Nav frosted panel */
161-
nav {
162-
background: rgba(10, 10, 20, 0.55); /* lowered opacity */
163-
border-radius: 12px;
164-
padding: 1rem;
165-
margin-top: 2rem;
166-
backdrop-filter: blur(6px);
167-
}
168102

169-
/* 🌌 Footer (frosted look) */
170-
footer {
171-
background: rgba(20, 20, 40, 0.85);
172-
backdrop-filter: blur(8px);
103+
/* ===== TOGGLE BUTTON ===== */
104+
.theme-toggle {
105+
position: fixed;
106+
top: 1rem;
107+
right: 1rem;
108+
padding: 0.5rem 1rem;
109+
border: none;
110+
border-radius: 8px;
111+
cursor: pointer;
112+
background: #444;
113+
color: white;
114+
z-index: 999;
115+
font-weight: bold;
173116
}
174117
</style>
175118

0 commit comments

Comments
 (0)