-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (146 loc) · 11.2 KB
/
Copy pathindex.html
File metadata and controls
181 lines (146 loc) · 11.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Indehell</title>
<meta name="description" content="Indehell is one of clothing brand from Magelang.">
<link rel="icon" type="image/x-icon" href="/product/icon/indehell-logo.ico">
<link href="styles.css" rel="stylesheet">
<style>
#webgl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- flex -->
<body class="overflow-hidden">
<div id="bg-wrapper" class="absolute w-full h-full overflow-hidden justify-center items-center">
<div id="bg-old" class="absolute w-full h-full transition-opacity duration-500 opacity-100 bg-gradient-to-bl from-black/90 via-red-950/95 to-black/90"></div>
<div id="bg-new" class="absolute w-full h-full transition-opacity duration-500 opacity-0"></div>
</div>
<div class="z-90 relative bg-black py-2 px-6 md:px-11">
<div class="justify-between flex items-center text-white">
<p class="font-bold text-3xl font-jaini">INDEHELL</p>
<div class="hidden md:flex space-x-3 font-semibold font-raleway text-white">
<a class="cursor-pointer hover:text-red-500 transition-colors duration-400 text-sm" href="https://shopee.co.id/indehellstudio" target="_blank">Shopee</a>
<a class="cursor-pointer hover:text-red-500 transition-colors duration-400 text-sm" href="https://www.instagram.com/indehellstudio/" target="_blank">Instagram</a>
<a class="cursor-pointer hover:text-red-500 transition-colors duration-400 text-sm" href="weblite">WebLite</a>
</div>
<button id="hamburger" class="md:hidden text-white text-3xl focus:outline-none">
☰
</button>
</div>
</div>
<div id="menu" class="text-white z-100 fixed inset-0 bg-black bg-opacity-95 flex flex-col items-center justify-center space-y-6 text-xl font-semibold hidden font-raleway ">
<button id="close" class="absolute top-5 right-6 text-4xl text-white z-10">×</button>
<a class="hover:text-red-500 transition-colors duration-400 z-10" href="https://shopee.co.id/indehellstudio" target="_blank">Shopee</a>
<a class="hover:text-red-500 transition-colors duration-400 z-10" href="https://www.instagram.com/indehellstudio/" target="_blank">Instagram</a>
<a class="hover:text-red-500 transition-colors duration-400 z-10" href="weblite">WebLite</a>
<div class="absolute inset-0 flex items-center justify-center opacity-15 z-5">
<div class="bg-center bg-contain bg-no-repeat h-[20rem] w-[20rem] ml-2" style="background-image: url('product/icon/indehell logo.svg');"></div>
</div>
</div>
<!-- loader screen -->
<div id="load-screen" class="fixed inset-0 z-100 flex flex-col items-center justify-center bg-black text-white transition-opacity duration-500">
<p class="mb-4 text-center px-4 font-raleway">
Loading the web.<br>You will discover a website unlike any you've seen before, please be patient.
<div class="w-12 h-12 border-4 border-red-500 border-t-transparent rounded-full animate-spin"></div><br><br>
<span class="text-[0.7rem] font-sans text-white/50">COPYRIGHT © 2025 INDEHELL, ALL RIGHT RESERVED</span>
</p>
</div>
<!-- alert for waiting animation done -->
<div id="warning-text" class="hidden opacity-0 fixed inset-0 z-100 flex flex-col items-center justify-center transition-all duration-450 pointer-events-none">
<div class="animate-[var(--animate-shake)] font-raleway backdrop-blur-[5px] bg-black/40 text-center p-2 text-sm md:text-base text-red-500 mx-5 border border-red-500/50 pointer-events-none z-100">
Please be patient, wait the animation done!
</div>
</div>
<!-- modal everythiung -->
<div id="modal-text" class="hidden opacity-0 backdrop-blur-[3px] fixed inset-0 z-90 flex flex-col items-center justify-center duration-250 bg-black/50 transition-opacity">
<div class="rounded-xl backdrop-blur-[3px] max-w-md font-raleway bg-[#101010]/20 flex flex-col px-6 pt-4 pb-5 text-sm md:text-base text-white mx-5 border-2 border-white/50 pointer-events-auto relative">
<div class="absolute inset-0 flex items-center justify-center opacity-15 z-5">
<div class="bg-center bg-contain bg-no-repeat h-[90%] w-[90%] ml-2 opacity-25" style="background-image: url('product/icon/indehell logo.svg');"></div>
</div>
<h1 class="text-lg font-semibold mt-3 md:mt-4 mb-5 z-10">Judul</h1>
<p class="z-10 text-sm">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<button class="font-dosis absolute top-2 left-4 text-[0.7rem] md:text-[0.76rem] z-100 text-red-600">*The 3D Object is just an illustration !!!</button>
<button id="close-modal" class="absolute top-0 right-4 text-4xl text-white z-100 cursor-pointer hover:text-red-500">×</button>
</div>
</div>
<!-- scene 1 -->
<div id="text-scene-1" class="transition-all duration-500 relative z-50 w-full flex flex-col items-center text-center justify-between">
<div></div>
<div class="w-full pb-[14dvh] flex flex-col justify-center items-center">
<p class="text-white text-[1.7rem] md:text-3xl xl:text-[2rem] font-jaini">
"Die Once, Live Everyday"
</p>
<p class="text-white text-[0.95rem] md:text-[1.1rem] xl:text-lg mt-0 md:mt-1 max-w-2xl mx-3 font-dosis font-light leading-[1.35rem] md:leading-6">
Please <span class="font-semibold">scroll your mouse</span> or <span class="font-semibold">swipe your screen</span> to continue. You can <span class="font-semibold">interact</span> and <span class="font-semibold">found magical</span> things in this website, thank you for coming.
</p>
</div>
</div>
<!-- Scene 2 -->
<div id="text-scene-2" class="opacity-0 hidden transition-all duration-700 relative z-50 w-full px-4 py-0 lg:py-2 flex flex-col items-center text-center justify-between">
<div class="mt-2">
<p class="text-[6.7rem] md:text-[9rem] leading-tight text-red-700 font-inspiration">
IndehelL
</p>
</div>
<div class="w-full pb-[8dvh] flex flex-col justify-center items-center">
<p class="text-white text-[1.7rem] md:text-3xl xl:text-[2rem] font-jaini">
Grab Our <span class="text-red-500">Limited</span> Product
</p>
<p class="text-white text-[0.95rem] md:text-[1.1rem] xl:text-lg mt-0 md:mt-1 max-w-2xl mx-1 font-dosis font-light leading-5 md:leading-7">
We are passionate about redefining the rules. We all experience a kind of 'death' when we feel lost and see no way forward. But we keep going, because we believe in the hope of a brighter future. Take our products and be part of the spirit that keeps us alive.
</p>
</div>
</div>
<!-- scene 3 -->
<div id="text-scene-3" class="opacity-0 hidden transition-all duration-700 relative z-50 w-full min-h-screen border-2 flex flex-col items-center text-center justify-between">
<div id="product-list-container" class=" text-white w-full pb-5 pt-2 overflow-y-auto overscroll-contain">
<p class="text-3xl leading-tight text-white font-dosis mt-4 mb-3 font-jaini">
Go check our <span class="text-red-500">product</span>
</p>
<div class="flex flex-wrap justify-center">
<div id="product" class="product-container mt-3 h-fit bg-[#555555]/50 flex flex-col border-2 border-[#101010] mx-2 max-w-[10rem] md:max-w-2xs p-3 pb-1 md:p-5 md:pb-2">
<img src="https://placehold.co/500x500" class="h-full rounded-xl" alt="">
<h1 class=" text-white font-dosis font-semibold text-sm md:text-base mt-1 md:mt-2">Head</h1>
<p class=" text-white font-light font-dosis mt-1 text-sm md:text-base leading-[1.1rem] md:leading-5">Desc</p>
<div class="flex items-center justify-center mt-2 gap-x-2">
<a target="_blank" href="" class="link-instagram">
<svg class="fill-white h-[1.8rem] md:h-[2.4rem] hover:fill-red-500 transition-colors" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path d="m128 84a44 44 0 1 0 44 44 44.05 44.05 0 0 0-44-44zm0 80a36 36 0 1 1 36-36 36.041 36.041 0 0 1-36 36zm44-132h-88a52.059 52.059 0 0 0-52 52v88a52.059 52.059 0 0 0 52 52h88a52.059 52.059 0 0 0 52-52v-88a52.059 52.059 0 0 0-52-52zm44 140a44.05 44.05 0 0 1-44 44h-88a44.05 44.05 0 0 1-44-44v-88a44.05 44.05 0 0 1 44-44h88a44.05 44.05 0 0 1 44 44zm-28-96a8 8 0 1 1-8-8 8.0092 8.0092 0 0 1 8 8z"/>
</svg>
</a>
<a target="_blank" href="" class="link-shopee">
<svg class="fill-white h-[1.5rem] mb-[0.1rem] md:h-[2rem] md:mb-[0.14rem] hover:fill-red-500 transition-colors" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path d="m25 1c-5.3271 0-9.3959 4.9531-9.834 11h-10.107c-1.135 0-2.0592 0.981-1.9961 2.1133l1.7246 30.172c0.14948 2.637 2.3498 4.7148 4.9902 4.7148h30.445c2.6412 0 4.8408-2.0782 4.9902-4.7148l1.7246-30.17c0.065143-1.1331-0.86109-2.1152-1.9961-2.1152h-10.107c-0.43811-6.0469-4.5069-11-9.834-11zm0 2c4.0369 0 7.4089 3.8868 7.8359 9h-15.672c0.42701-5.1132 3.799-9 7.8359-9zm-19.941 11h10.773a1.0001 1.0001 0 0 0 0.32617 0h17.674a1.0001 1.0001 0 0 0 0.32617 0h10.783l-1.7246 30.172c-0.090543 1.5973-1.3933 2.8281-2.9941 2.8281h-30.445c-1.5996 0-2.9036-1.2311-2.9941-2.8281l-1.7246-30.17v-0.001953zm20.016 4.002c-4.314 0-7.5664 2.688-7.5664 6.252 0 4.03 3.7477 5.3994 7.0547 6.6074 4.004 1.463 6.4355 2.5802 6.4355 5.7422 0 2.442-2.7309 4.4297-6.0879 4.4297-3.755 0-6.9368-2.7415-6.9688-2.7695l-1.1152 1.6426c0.812 0.658 4.095 3.1016 8.084 3.1016 4.52 1e-6 8.0625-2.8133 8.0605-6.4043 0-4.77-4.1065-6.2727-7.7305-7.5957-3.583-1.311-5.7598-2.2829-5.7598-4.7539 0-2.478 2.3528-4.2773 5.5938-4.2773 2.161 0 4.0415 0.81814 5.0625 1.3691 0.172 0.092 0.62495 0.3642 0.87695 0.5332l1.0215-1.6621c-0.234-0.152-3.1139-2.2148-6.9609-2.2148z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<canvas id="webgl"></canvas>
<footer class="fixed z-60 bottom-0 left-0 w-full bg-black text-white py-3 px-5 md:px-11">
<div class="flex items-center justify-between">
<div id="slide-indicator" class="flex space-x-5 items-center">
<span class="w-3 h-3 bg-white rounded-full transition-all duration-500 shadow-lg"></span>
<span class="w-2 h-2 bg-gray-500 rounded-full transition-all duration-500"></span>
<span class="w-2 h-2 bg-gray-500 rounded-full transition-all duration-500"></span>
</div>
<div class="text-[0.5rem] md:text-[0.6rem] text-right text-gray-400">
<p>THIS WEBSITE MADE BY <a target="_blank" href="https://www.instagram.com/hq.han/" class="underline underline-offset-2 font-bold hover:text-red-500 transition-colors duration-400">@HQ.HAN</a></p>
<p>COPYRIGHT © 2025 INDEHELL, ALL RIGHT RESERVED</p>
</div>
</div>
</footer>
<script type="module" src="main.js" defer></script>
<script src="adjustment.js" defer></script>
</body>
</html>