Skip to content

Commit 72e9964

Browse files
LavanicLavanic
committed
Color Test
1 parent 9b3f179 commit 72e9964

File tree

1 file changed

+175
-1
lines changed

1 file changed

+175
-1
lines changed

‎src/pages/index.astro‎

Lines changed: 175 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,17 @@
4646
position: relative;
4747
}
4848

49+
.bg-frame-1::before {
50+
content: "";
51+
position: absolute;
52+
top: 0;
53+
left: 50%;
54+
transform: translateX(-50%);
55+
width: 69%;
56+
height: 100%;
57+
background: linear-gradient(180deg, #82AD99 0%, #508C72 57%);
58+
}
59+
4960
.bg-frame-1::after {
5061
content: "";
5162
position: absolute;
@@ -78,13 +89,176 @@
7889
line-height: 1.6;
7990
max-width: 800px;
8091
}
92+
93+
/* Color slider overlay */
94+
.color-slider {
95+
position: fixed;
96+
bottom: 24px;
97+
right: 24px;
98+
z-index: 100;
99+
background: rgba(0, 0, 0, 0.6);
100+
backdrop-filter: blur(12px);
101+
border-radius: 12px;
102+
padding: 16px 20px;
103+
display: flex;
104+
flex-direction: column;
105+
gap: 10px;
106+
font-size: 13px;
107+
color: white;
108+
user-select: none;
109+
transition: opacity 0.2s, transform 0.2s;
110+
}
111+
112+
.color-slider.hidden {
113+
opacity: 0;
114+
transform: translateY(8px) scale(0.95);
115+
pointer-events: none;
116+
}
117+
118+
.color-slider__header {
119+
display: flex;
120+
align-items: center;
121+
justify-content: space-between;
122+
gap: 12px;
123+
}
124+
125+
.color-slider__label {
126+
font-weight: 600;
127+
letter-spacing: 0.02em;
128+
}
129+
130+
.color-slider__swatch {
131+
width: 24px;
132+
height: 24px;
133+
border-radius: 6px;
134+
border: 2px solid rgba(255, 255, 255, 0.3);
135+
background: #508C72;
136+
flex-shrink: 0;
137+
}
138+
139+
.color-slider__range {
140+
-webkit-appearance: none;
141+
appearance: none;
142+
width: 200px;
143+
height: 8px;
144+
border-radius: 4px;
145+
outline: none;
146+
background: linear-gradient(to right,
147+
hsl(0, 27%, 43%),
148+
hsl(60, 27%, 43%),
149+
hsl(120, 27%, 43%),
150+
hsl(180, 27%, 43%),
151+
hsl(240, 27%, 43%),
152+
hsl(300, 27%, 43%),
153+
hsl(360, 27%, 43%)
154+
);
155+
}
156+
157+
.color-slider__range::-webkit-slider-thumb {
158+
-webkit-appearance: none;
159+
width: 18px;
160+
height: 18px;
161+
border-radius: 50%;
162+
background: white;
163+
cursor: pointer;
164+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
165+
}
166+
167+
.color-slider__range::-moz-range-thumb {
168+
width: 18px;
169+
height: 18px;
170+
border-radius: 50%;
171+
background: white;
172+
cursor: pointer;
173+
border: none;
174+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
175+
}
176+
177+
.color-slider__degrees {
178+
font-variant-numeric: tabular-nums;
179+
opacity: 0.7;
180+
min-width: 36px;
181+
text-align: right;
182+
}
183+
184+
.color-slider__toggle {
185+
position: fixed;
186+
bottom: 24px;
187+
right: 24px;
188+
z-index: 99;
189+
width: 40px;
190+
height: 40px;
191+
border-radius: 50%;
192+
border: 2px solid rgba(255, 255, 255, 0.3);
193+
background: rgba(0, 0, 0, 0.5);
194+
backdrop-filter: blur(8px);
195+
color: white;
196+
font-size: 18px;
197+
cursor: pointer;
198+
display: flex;
199+
align-items: center;
200+
justify-content: center;
201+
transition: opacity 0.2s;
202+
}
81203
</style>
82204
</head>
83205

84206
<body>
85-
<div class="scroll-container">
207+
<div class="scroll-container" id="scroll-container">
86208
<div class="bg-frame bg-frame-1"></div>
87209
<div class="bg-frame bg-frame-2"></div>
88210
</div>
211+
212+
<div class="color-slider" id="color-slider">
213+
<div class="color-slider__header">
214+
<span class="color-slider__label">Hue Shift</span>
215+
<div class="color-slider__swatch" id="color-swatch"></div>
216+
</div>
217+
<div style="display: flex; align-items: center; gap: 10px;">
218+
<input
219+
type="range"
220+
class="color-slider__range"
221+
id="hue-range"
222+
min="0"
223+
max="360"
224+
value="0"
225+
/>
226+
<span class="color-slider__degrees" id="hue-degrees">0°</span>
227+
</div>
228+
</div>
229+
230+
<button class="color-slider__toggle" id="color-toggle" style="display: none;" aria-label="Show color slider">&#9672;</button>
231+
232+
<script>
233+
const container = document.getElementById("scroll-container") as HTMLElement;
234+
const slider = document.getElementById("color-slider") as HTMLElement;
235+
const toggle = document.getElementById("color-toggle") as HTMLElement;
236+
const range = document.getElementById("hue-range") as HTMLInputElement;
237+
const degrees = document.getElementById("hue-degrees") as HTMLElement;
238+
const swatch = document.getElementById("color-swatch") as HTMLElement;
239+
240+
// Base hue of #508C72 is ~154°
241+
const BASE_HUE = 154;
242+
243+
range.addEventListener("input", () => {
244+
const val = parseInt(range.value);
245+
container.style.filter = val === 0 ? "" : `hue-rotate(${val}deg)`;
246+
degrees.textContent = `${val}°`;
247+
248+
// Update swatch to show the shifted base color
249+
const newHue = (BASE_HUE + val) % 360;
250+
swatch.style.background = `hsl(${newHue}, 27%, 43%)`;
251+
});
252+
253+
toggle.addEventListener("click", () => {
254+
slider.classList.remove("hidden");
255+
toggle.style.display = "none";
256+
});
257+
258+
slider.addEventListener("dblclick", () => {
259+
slider.classList.add("hidden");
260+
toggle.style.display = "flex";
261+
});
262+
</script>
89263
</body>
90264
</html>

0 commit comments

Comments
 (0)