Skip to content

Commit 1196110

Browse files
martrappmartrapp
committed
Add images and create hotel overview page with interactive elements
1 parent cb74e83 commit 1196110

5 files changed

Lines changed: 374 additions & 0 deletions

File tree

‎src/assets/hotel.jpg‎

11.6 MB
Loading

‎src/assets/map.png‎

367 KB
Loading

‎src/assets/room1.jpg‎

2.6 MB
Loading

‎src/assets/room2.jpg‎

1.73 MB
Loading

‎src/pages/basics/pseudos-hidden-names-example.astro‎

Lines changed: 374 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
---
2+
import room1 from "@/assets/room1.jpg";
3+
import room2 from "@/assets/room2.jpg";
4+
import hotel from "@/assets/hotel.jpg";
5+
import map from "@/assets/map.png";
6+
---
7+
8+
<!doctype html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8" />
12+
<meta name="viewport" content="width=device-width" />
13+
<meta name="color-scheme" content="light dark" />
14+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
15+
<title>Grand Hotel</title>
16+
</head>
17+
<body>
18+
<div class="container" data-state="1">
19+
<div class="grid">
20+
<!-- Panel A: Hotel Info -->
21+
<div class="panel panel-a">
22+
<h1>Grand Hotel</h1>
23+
<img
24+
src={hotel.src}
25+
alt="Grand Hotel exterior"
26+
class="hotel-image"
27+
/>
28+
</div>
29+
30+
<!-- Panel B: Map or Directions -->
31+
<div class="panel panel-b" >
32+
<div class="view-state-1" style="view-transition-name: map">
33+
<img
34+
src={map.src}
35+
alt="Hotel location map"
36+
class="small-map"
37+
/>
38+
<p class="location-text" style="view-transition-name: addr">123 Oceanview Boulevard</p>
39+
</div>
40+
<div class="view-state-2" style="view-transition-name: directions;">
41+
<ol class="directions">
42+
<li>Head east on Oceanview Boulevard</li>
43+
<li>Turn left onto Harbor Avenue</li>
44+
<li>Continue straight for 2.5 km</li>
45+
<li>Turn right at the lighthouse</li>
46+
</ol>
47+
</div>
48+
</div>
49+
50+
<!-- Panel C: Rooms or Large Map -->
51+
<div class="panel panel-c">
52+
<div class="view-state-1" style="view-transition-name: rooms">
53+
<div class="rooms-grid">
54+
<div class="room-card">
55+
<img src={room1.src} alt="Standard room" class="room-image" />
56+
<h3>Standard Room</h3>
57+
<p>
58+
Comfortable 30 m² room with ocean views and modern amenities.
59+
</p>
60+
<span class="price">$129/night</span>
61+
</div>
62+
<div class="room-card">
63+
<img src={room2.src} alt="Deluxe room" class="room-image" />
64+
<h3>Deluxe Suite</h3>
65+
<p>
66+
Spacious 50 m² suite with king bed, sofa, and panoramic views.
67+
</p>
68+
</div>
69+
</div>
70+
</div>
71+
<div class="view-state-2" style="view-transition-name: map;">
72+
<img
73+
src={map.src}
74+
alt="Hotel and surrounding area"
75+
class="large-map"
76+
/>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<script>
83+
import { mayStartViewTransition } from "@vtbag/utensil-drawer/may-start-view-transition";
84+
85+
const container = document.querySelector("[data-state]");
86+
if (container) {
87+
document.addEventListener("click", () => {
88+
const current = container.getAttribute("data-state");
89+
mayStartViewTransition(() => {
90+
container.setAttribute("data-state", current === "1" ? "2" : "1");
91+
});
92+
});
93+
}
94+
</script>
95+
</body>
96+
</html>
97+
98+
<style is:global>
99+
:root {
100+
--bg-primary: light-dark(#fafaf8, #0f0f0d);
101+
--bg-secondary: light-dark(#f5f5f3, #1a1a18);
102+
--bg-tertiary: light-dark(#efefed, #242422);
103+
--text-primary: light-dark(#1a1a18, #fafaf8);
104+
--text-secondary: light-dark(#6b7280, #a1a99f);
105+
--border: light-dark(#e5e5e3, #333331);
106+
--accent: light-dark(#0d6e6e, #4ecdc4);
107+
--accent-dark: light-dark(#075555, #3ab5b0);
108+
109+
font-family:
110+
system-ui,
111+
-apple-system,
112+
sans-serif;
113+
-webkit-font-smoothing: antialiased;
114+
}
115+
116+
html,
117+
body {
118+
margin: 0;
119+
padding: 0;
120+
width: 100%;
121+
height: 100%;
122+
background: var(--bg-primary);
123+
color: var(--text-primary);
124+
}
125+
126+
* {
127+
box-sizing: border-box;
128+
}
129+
130+
.container {
131+
display: flex;
132+
flex-direction: column;
133+
align-items: center;
134+
justify-content: center;
135+
min-height: 100vh;
136+
padding: 16px;
137+
gap: 12px;
138+
}
139+
140+
.grid {
141+
display: grid;
142+
grid-template-columns: 1fr 2fr;
143+
grid-template-rows: auto auto;
144+
gap: 0;
145+
width: 100%;
146+
max-width: 950px;
147+
height: 420px;
148+
border: 1px solid var(--border);
149+
background: var(--bg-secondary);
150+
border-radius: 8px;
151+
overflow: hidden;
152+
}
153+
154+
.panel {
155+
display: flex;
156+
flex-direction: column;
157+
padding: 20px;
158+
border: 1px solid var(--border);
159+
position: relative;
160+
}
161+
162+
.panel-a {
163+
grid-row: 1 / 3;
164+
grid-column: 1;
165+
border-right: none;
166+
border-bottom: none;
167+
}
168+
169+
.panel-b {
170+
grid-row: 2;
171+
grid-column: 1;
172+
border-right: none;
173+
border-top: none;
174+
}
175+
176+
.panel-c {
177+
grid-row: 1 / 3;
178+
grid-column: 2;
179+
border-left: none;
180+
overflow: clip;
181+
}
182+
183+
h1 {
184+
margin: 0 0 12px 0;
185+
font-size: 24px;
186+
font-weight: 600;
187+
line-height: 1.2;
188+
color: var(--text-primary);
189+
}
190+
191+
.hotel-image {
192+
width: 100%;
193+
height: 140px;
194+
object-fit: cover;
195+
border-radius: 4px;
196+
margin-bottom: 12px;
197+
}
198+
199+
.address {
200+
margin: 0;
201+
font-size: 13px;
202+
color: var(--text-secondary);
203+
line-height: 1.5;
204+
}
205+
206+
.location-text {
207+
margin: 0;
208+
font-size: 12px;
209+
color: var(--text-secondary);
210+
}
211+
.small-map {
212+
width: 100%;
213+
height: 180px;
214+
object-fit: cover;
215+
border: 1px solid var(--border);
216+
border-radius: 4px;
217+
margin-bottom: 12px;
218+
}
219+
220+
.large-map {
221+
width: 100%;
222+
height: 100%;
223+
object-fit: cover;
224+
border: none;
225+
min-height: 380px;
226+
}
227+
228+
.view-state-2 {
229+
display: none;
230+
}
231+
232+
[data-state="2"] .view-state-1 {
233+
display: none;
234+
}
235+
236+
[data-state="2"] .view-state-2 {
237+
display: block;
238+
}
239+
240+
.directions {
241+
margin: 0;
242+
padding-left: 20px;
243+
list-style: decimal;
244+
font-size: 13px;
245+
color: var(--text-primary);
246+
line-height: 1.6;
247+
}
248+
249+
.directions li {
250+
margin-bottom: 8px;
251+
}
252+
253+
.rooms-grid {
254+
display: flex;
255+
flex-direction: column;
256+
gap: 12px;
257+
height: 100%;
258+
overflow-y: auto;
259+
}
260+
261+
.room-card {
262+
display: flex;
263+
flex-direction: column;
264+
background: var(--bg-primary);
265+
border: 1px solid var(--border);
266+
border-radius: 4px;
267+
overflow: hidden;
268+
flex-shrink: 0;
269+
}
270+
271+
.room-image {
272+
width: 100%;
273+
height: 100px;
274+
object-fit: cover;
275+
}
276+
277+
.room-card h3 {
278+
margin: 8px 12px 4px;
279+
font-size: 14px;
280+
font-weight: 600;
281+
color: var(--text-primary);
282+
}
283+
284+
.room-card p {
285+
margin: 0 12px 8px;
286+
font-size: 12px;
287+
color: var(--text-secondary);
288+
line-height: 1.4;
289+
}
290+
291+
.price {
292+
display: inline-block;
293+
margin: 0 12px 12px;
294+
padding: 4px 10px;
295+
background: var(--accent);
296+
color: white;
297+
font-size: 11px;
298+
font-weight: 600;
299+
border-radius: 3px;
300+
}
301+
302+
.toggle-hint {
303+
font-size: 12px;
304+
color: var(--text-secondary);
305+
margin: 0;
306+
user-select: none;
307+
cursor: pointer;
308+
}
309+
310+
@media (max-width: 512px) {
311+
.grid {
312+
grid-template-columns: 1fr;
313+
grid-template-rows: auto auto auto;
314+
max-width: 100%;
315+
height: auto;
316+
}
317+
318+
.panel-a {
319+
grid-row: 1;
320+
grid-column: 1;
321+
border-right: 1px solid var(--border);
322+
border-bottom: 1px solid var(--border);
323+
}
324+
325+
.panel-b {
326+
grid-row: 2;
327+
grid-column: 1;
328+
border-right: 1px solid var(--border);
329+
border-top: 1px solid var(--border);
330+
}
331+
332+
.panel-c {
333+
grid-row: 3;
334+
grid-column: 1;
335+
border-left: 1px solid var(--border);
336+
border-top: 1px solid var(--border);
337+
max-height: 300px;
338+
}
339+
340+
.small-map {
341+
height: 150px;
342+
}
343+
344+
.hotel-image {
345+
height: 120px;
346+
}
347+
}
348+
349+
:root {
350+
view-transition-name: none;
351+
}
352+
::view-transition-group(map){
353+
z-index: 1;
354+
}
355+
::view-transition-old(*):only-child {
356+
animation-name: slide-out;
357+
}
358+
::view-transition-new(*):only-child {
359+
animation-name: slide-in;
360+
}
361+
362+
@keyframes slide-out {
363+
to {
364+
transform: translateY(150px);
365+
opacity: 0;
366+
}
367+
}
368+
@keyframes slide-in {
369+
from {
370+
transform: translateY(-150px);
371+
opacity: 0;
372+
}
373+
}
374+
</style>

0 commit comments

Comments
 (0)