Skip to content

Commit d656568

Browse files
jackiectl2jackiectl2
committed
Add 2D entry choice and 3D car switch
1 parent 44352d3 commit d656568

3 files changed

Lines changed: 172 additions & 0 deletions

File tree

‎layouts/_partials/hooks/head-end/custom.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,5 @@
126126
}
127127
}
128128
</style>
129+
<link rel="stylesheet" href="/dimension-switch.css">
130+
<script defer src="/dimension-switch.js"></script>

‎static/dimension-switch.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
.dimension-corner-link {
2+
position: fixed;
3+
z-index: 1000;
4+
top: 76px;
5+
right: 20px;
6+
display: inline-flex;
7+
min-height: 38px;
8+
align-items: center;
9+
padding: 0 16px;
10+
border: 1px solid rgba(99, 102, 241, 0.28);
11+
border-radius: 999px;
12+
color: #3730a3;
13+
background: rgba(255, 255, 255, 0.93);
14+
box-shadow: 0 8px 25px rgba(79, 70, 229, 0.14);
15+
font-size: 12px;
16+
font-weight: 700;
17+
text-decoration: none;
18+
backdrop-filter: blur(12px);
19+
}
20+
21+
.dimension-corner-link:hover {
22+
color: #fff;
23+
background: #4f46e5;
24+
}
25+
26+
.dimension-corner-link:focus-visible,
27+
.dimension-choice-action:focus-visible {
28+
outline: 3px solid #4f46e5;
29+
outline-offset: 3px;
30+
}
31+
32+
.dimension-choice {
33+
position: fixed;
34+
inset: 0;
35+
width: min(680px, calc(100% - 32px));
36+
max-width: none;
37+
max-height: calc(100% - 32px);
38+
margin: auto;
39+
padding: clamp(28px, 6vw, 54px);
40+
overflow: auto;
41+
border: 1px solid rgba(255, 255, 255, 0.95);
42+
border-radius: 24px;
43+
color: #252044;
44+
background: linear-gradient(145deg, #fff, #f5f3ff 64%, #e8f5ff);
45+
box-shadow: 0 30px 90px rgba(20, 20, 65, 0.33);
46+
}
47+
48+
.dimension-choice::backdrop {
49+
background: rgba(18, 20, 50, 0.7);
50+
backdrop-filter: blur(8px);
51+
}
52+
53+
.dimension-choice-kicker {
54+
margin: 0 0 24px;
55+
color: #5046bd;
56+
font-size: 11px;
57+
font-weight: 700;
58+
letter-spacing: 0.16em;
59+
}
60+
61+
.dimension-choice h1 {
62+
margin: 0;
63+
color: #251d59;
64+
font-size: clamp(36px, 6vw, 56px);
65+
font-weight: 750;
66+
line-height: 1.08;
67+
}
68+
69+
.dimension-choice-lead {
70+
margin: 22px 0 0;
71+
color: #514d70;
72+
font-size: 17px;
73+
line-height: 1.7;
74+
}
75+
76+
.dimension-choice-actions {
77+
display: grid;
78+
grid-template-columns: repeat(2, minmax(0, 1fr));
79+
gap: 12px;
80+
margin-top: 32px;
81+
}
82+
83+
.dimension-choice-action {
84+
display: flex;
85+
min-height: 58px;
86+
align-items: center;
87+
justify-content: center;
88+
gap: 8px;
89+
padding: 12px 16px;
90+
border-radius: 14px;
91+
font: inherit;
92+
font-size: 14px;
93+
font-weight: 700;
94+
line-height: 1.35;
95+
text-align: center;
96+
text-decoration: none;
97+
cursor: pointer;
98+
}
99+
100+
.dimension-choice-action.primary {
101+
border: 1px solid #4f46e5;
102+
color: #fff;
103+
background: linear-gradient(135deg, #6366f1, #4338ca);
104+
}
105+
106+
.dimension-choice-action.secondary {
107+
border: 1px solid #b8b4df;
108+
color: #3730a3;
109+
background: #fff;
110+
}
111+
112+
.dimension-choice-note {
113+
margin: 22px 0 0;
114+
color: #716c8a;
115+
font-size: 12px;
116+
}
117+
118+
@media (max-width: 600px) {
119+
.dimension-corner-link { top: 68px; right: 12px; padding: 0 12px; }
120+
.dimension-choice-actions { grid-template-columns: 1fr; }
121+
.dimension-choice-lead { font-size: 15px; }
122+
}

‎static/dimension-switch.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
(() => {
2+
const carUrl = "https://car.jackiectl.com/?view=3d";
3+
4+
function init() {
5+
const switchLink = document.createElement("a");
6+
switchLink.className = "dimension-corner-link";
7+
switchLink.href = carUrl;
8+
switchLink.textContent = "3D Car ↗";
9+
switchLink.setAttribute("aria-label", "Switch to the 3D car website");
10+
document.body.appendChild(switchLink);
11+
12+
const url = new URL(window.location.href);
13+
const enter2d = url.searchParams.get("view") === "2d";
14+
if (enter2d) {
15+
url.searchParams.delete("view");
16+
window.history.replaceState(window.history.state, "", url.pathname + url.search + url.hash);
17+
}
18+
19+
const isHome = window.location.pathname === "/" || window.location.pathname === "/index.html";
20+
if (!isHome || enter2d) return;
21+
22+
const dialog = document.createElement("dialog");
23+
dialog.className = "dimension-choice";
24+
dialog.setAttribute("aria-labelledby", "dimension-choice-title");
25+
dialog.innerHTML = `
26+
<p class="dimension-choice-kicker">TIANLANG (JACKIE) CHEN · PERSONAL WEBSITE</p>
27+
<h1 id="dimension-choice-title">Choose your dimension.</h1>
28+
<p class="dimension-choice-lead">Explore the same personal journey in an interactive 3D car ride, or read it here as a 2D website.</p>
29+
<div class="dimension-choice-actions">
30+
<a class="dimension-choice-action primary" href="${carUrl}">Enter the 3D Car Website <span aria-hidden="true">↗</span></a>
31+
<button class="dimension-choice-action secondary" type="button" data-enter-2d>Continue to the 2D Website <span aria-hidden="true">→</span></button>
32+
</div>
33+
<p class="dimension-choice-note">The 3D car ride works best on a desktop browser.</p>
34+
`;
35+
document.body.appendChild(dialog);
36+
dialog.querySelector("[data-enter-2d]").addEventListener("click", () => {
37+
dialog.close();
38+
dialog.remove();
39+
});
40+
dialog.showModal();
41+
}
42+
43+
if (document.readyState === "loading") {
44+
document.addEventListener("DOMContentLoaded", init, { once: true });
45+
} else {
46+
init();
47+
}
48+
})();

0 commit comments

Comments
 (0)