161 lines
4.8 KiB
HTML
Executable File
161 lines
4.8 KiB
HTML
Executable File
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>CASTAD</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
bg: '#011c1e',
|
|
card: '#083336',
|
|
cardHover: '#0b3f42',
|
|
accent: '#94FBE0',
|
|
purple: '#a855f7',
|
|
purpleHover: '#9333ea',
|
|
text: '#e2e8f0',
|
|
muted: '#94a3b8'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--app-height: 100%;
|
|
}
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #121a1d;
|
|
}
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.font-serif-logo {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
/* Full-page snap scroll container */
|
|
.snap-container {
|
|
height: 100dvh;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
scroll-snap-type: y mandatory;
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
}
|
|
.snap-container::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.snap-section {
|
|
height: 100dvh;
|
|
width: 100%;
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
/* Utility to ensure content fits without vertical overflow */
|
|
.content-safe-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2rem 1rem;
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
}
|
|
/* Floating heart animation */
|
|
@keyframes floatUp {
|
|
0% { transform: translateY(0) scale(0.5) translateX(0); opacity: 1; }
|
|
100% { transform: translateY(-160px) scale(1.6) translateX(var(--tx, 20px)); opacity: 0; }
|
|
}
|
|
.floating-heart {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
animation: floatUp 2s ease-out forwards;
|
|
color: #ff4d4d;
|
|
font-size: 24px;
|
|
z-index: 50;
|
|
}
|
|
/* Custom scrollbar styling */
|
|
.custom-scrollbar {
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(166, 255, 234, 0.3) transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(166, 255, 234, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(166, 255, 234, 0.5);
|
|
}
|
|
/* No scrollbar utility */
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
/* Slide in animation - 오른쪽에서 왼쪽으로 */
|
|
@keyframes slideInFromRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
max-width: 0;
|
|
}
|
|
50% {
|
|
max-width: 500px;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
max-width: 600px;
|
|
}
|
|
}
|
|
.animate-slide-in {
|
|
animation: slideInFromRight 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react/": "https://esm.sh/react@^19.2.3/",
|
|
"react": "https://esm.sh/react@^19.2.3",
|
|
"react-dom/": "https://esm.sh/react-dom@^19.2.3/"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body class="bg-[#121a1d]">
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/index.tsx"></script>
|
|
</body>
|
|
</html>
|