-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
263 lines (241 loc) · 20.9 KB
/
index.html
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dessert</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/lenis.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="style.css">
<style>
body {
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="main" class="max-w-[100vw] bg-[#020202] w-screen">
<div id="scrollCont" class="w-screen h-[200vh] bg-[#020202] relative">
<div id="pg1cont" class="h-[100vh] sticky top-0 flex flex-col bg-[#020202] justify-center items-center">
<div class="text-container relative">
<div id="heading" class="fonnt text-white text-center relative text-6xl">
<span class="text-[#89CFF0]">Not</span> Just <span class="text-[#48bb78]">Another</span> <span class="text-[#712525]">Cider</span>
</div>
<div id="heading" class="fonnt text-white text-center relative text-6xl opacity-30 translate-y-[10px] blur-[2px]">
<span class="text-[#89CFF0]">Not</span> Just <span class="text-[#48bb78]">Another</span> <span class="text-[#712525]">Cider</span>
</div>
<div class="text-swipe-item text-[#48bb78] orbitron text-6xl text-center absolute top-0 left-0 w-full">
<span class="opacity-0 intros">I</span>
<span class="opacity-0 intros">N</span>
<span class="opacity-0 intros">T</span>
<span class="opacity-0 intros">R</span>
<span class="opacity-0 intros">O</span>
<span class="opacity-0 intros">D</span>
<span class="opacity-0 intros">U</span>
<span class="opacity-0 intros">C</span>
<span class="opacity-0 intros">I</span>
<span class="opacity-0 intros">N</span>
<span class="opacity-0 intros">G</span>
</div>
</div>
<div style="box-shadow: 0px 0px 30px 2px #48bb78;" id="imgcont" class="translate-x-[-50px] translate-y-[5px] z-[3] absolute bg-[#020202] overflow-hidden rounded-3xl border-[12px] border-black w-[10%] flex justify-center items-center h-[0%]">
<div class="absolute top-0 left-0 w-full h-[25px] bg-black flex justify-between items-center px-4 z-20">
<div class="flex items-center gap-2">
<span class="text-white text-xs">9:00</span>
</div>
<div class="flex items-center gap-2">
<span class="text-white text-xs">📶 🔋</span>
</div>
</div>
<div class="absolute inset-0 mt-[25px] flex flex-col items-center justify-start bg-[#020202] overflow-y-auto">
<div class="w-full bg-[#48bb78] py-4 px-2 flex items-center justify-between">
<h2 class="text-black text-2xl font-bold orbitron">Dessert</h2>
<div class="flex gap-2">
<span class="text-black">⋮</span>
</div>
</div>
<div class="w-full p-4 flex flex-col gap-4">
<img src="dessert1(1).png" alt="Dessert Icon" class="w-full h-full object-cover">
<div class="bg-black/30 rounded-xl p-4 border border-[#48bb78]/30">
<p class="text-white text-sm leading-relaxed text-center">
Creating an Android app is like dessert—sweet satisfaction that lasts, unlike cider, and with $25 for your developer license, you get to savor the success by sharing it with the world!
</p>
</div>
<div class="flex gap-2 justify-center mt-2">
<button onclick="window.location.href='https://forms.hackclub.com/dessert'" class="bg-[#48bb78] text-black px-4 py-2 rounded-full text-sm font-medium">
Install
</button>
<button onclick="window.location.href='https://forms.hackclub.com/dessert'" class="border border-[#48bb78] text-[#48bb78] px-4 py-2 rounded-full text-sm font-medium">
Share
</button>
</div>
</div>
</div>
<div class="absolute bottom-0 left-0 w-full h-[48px] bg-black flex justify-center items-center gap-8 z-20">
<button onclick="navigateToCard(1)" class="android-nav-btn w-[20px] h-[20px] border-2 border-[#48bb78] rounded-full cursor-pointer"></button>
<button onclick="navigateToCard(2)" class="android-nav-btn w-[20px] h-[2px] bg-[#48bb78] rounded-full cursor-pointer"></button>
<button onclick="navigateToCard(3)" class="android-nav-btn w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[15px] border-b-[#48bb78] transform rotate-180 cursor-pointer"></button>
</div>
</div>
<div class="text-swipe-container absolute text-6xl" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
</div>
<div id="card1" style="box-shadow: 0px 0px 10px yellow;" class="carad absolute translate-y-[180vh] border-2 border-[yellow] overflow-hidden z-10 rounded-xl w-[780px] h-[680px]">
<div id="card1cont" class="w-full h-full flex flex-col bg-[#020202] items-center">
<div id="cardheaddabba" class="w-full bg-[yellow] flex justify-center items-center"><div id="carhead" class="text-[yellow] bg-black orbitron text-center text-4xl border-2 w-fit border-[yellow] px-5 py-2 rounded-xl">Dessert</div></div>
<div id="img1" class="left-0 border-2 border-[yellow] absolute rounded-xl translate-y-[40%] ml-[5%] flex items-center justify-center translate-x-[-6%] "><img class="rounded-xl" src="https://cdn.freebiesupply.com/logos/large/2x/google-play-store-logo-png-transparent.png" alt="" height="100%" width="40%"></div>
<div class="translate-y-[0%] border-2 border-[yellow] rounded-xl overflow-hidden text-[40px] text-[black] bg-[yellow] absolute top-[20%] orbitron max-w-[30%] mr-[5%] px-4 font-bold py-2 right-0"> What is it?!</div>
<div class="translate-y-[0%] border-2 border-[yellow] rounded-xl overflow-hidden text-[15px] text-[yellow] bg-[#020202] absolute bottom-[10%] orbitron max-w-[30%] mr-[5%] px-4 py-2 right-0"> In Short, when you ship an <span class="text-[#A4C639]">Android</span> App to the play store, you get $25 to go buy a Developer Account, so you can post your amazing creation on the Google Play Store!</div>
</div>
</div>
<div id="card2" style="box-shadow: 0px 0px 10px turquoise;" class="carad absolute translate-y-[180vh] border-2 border-[turquoise] overflow-hidden z-10 rounded-xl w-[780px] h-[680px]">
<div id="card1cont" class="w-full h-full flex flex-col bg-[#020202] items-center">
<div id="cardheaddabba" class="w-full bg-[turquoise] flex justify-center items-center"><div id="carhead" class="text-[turquoise] bg-black orbitron text-center text-4xl border-2 w-fit border-[turquoise] px-5 py-2 rounded-xl">Dessert</div></div>
<div id="img2" class="left-0 border-0 border-[turquoise] absolute rounded-xl max-w-[55%] translate-y-[40%] ml-[5%] flex items-center justify-center translate-x-[-6%] "><img class="rounded-xl" src="istockphoto-2007210476-612x612-removebg-preview.png" alt=""></div>
<div class="translate-y-[0%] border-2 border-[turquoise] rounded-xl overflow-hidden text-[40px] text-[black] bg-[turquoise] absolute top-[20%] orbitron max-w-[30%] mr-[5%] px-4 font-bold py-2 right-0">When is it?!</div>
<div class="translate-y-[0%] border-2 border-[turquoise] rounded-xl overflow-hidden text-[15px] text-[turquoise] bg-[#020202] absolute bottom-[10%] orbitron max-w-[30%] mr-[5%] px-4 py-2 right-0">It's happening right now! Submit your app via the form and get your Developer License now! This event is guaranteed to last for the next month, and possibly longer!</div>
</div>
</div>
<div id="card3" style="box-shadow: 0px 0px 10px lightpink;" class="carad absolute translate-y-[180vh] border-2 border-[lightpink] overflow-hidden z-10 rounded-xl w-[780px] h-[680px]">
<div id="card1cont" class="w-full h-full flex flex-col bg-[#020202] items-center">
<div id="cardheaddabba" class="w-full bg-[lightpink] flex justify-center items-center"><div id="carhead" class="text-[lightpink] bg-black orbitron text-center text-4xl border-2 w-fit border-[lightpink] px-5 py-2 rounded-xl">Dessert</div></div>
<div class="translate-y-[0%] border-2 border-[lightpink] rounded-xl overflow-hidden text-[40px] text-[black] bg-[lightpink] absolute top-[20%] orbitron max-w-[80%] mr-[5%] px-4 font-bold py-2 right-0">It's so simple, you can do it in 4 steps! DARE</div>
<div class="translate-y-[0%] border-2 border-[lightpink] rounded-xl overflow-hidden text-[35px] text-[lightpink] bg-[#020202] absolute bottom-[10%] orbitron max-w-[200%] mr-[15%] px-4 py-2 right-0">Develop, Apply, Review, and Earn!</div>
</div>
</div>
<div id="card4" style="box-shadow: 0px 0px 10px #48bb78;" class="carad absolute translate-y-[180vh] border-2 border-[#48bb78] overflow-hidden z-10 rounded-xl w-[780px] h-[680px]">
<div id="card1cont" class="w-full h-full flex flex-col bg-[#020202] items-center">
<div id="cardheaddabba" class="w-full bg-[#48bb78] flex justify-center items-center"><div id="carhead" class="text-[#48bb78] bg-black orbitron text-center text-4xl border-2 w-fit border-[#48bb78] px-5 py-2 rounded-xl">Dessert</div></div>
<div class="translate-y-[0%] border-2 border-[#48bb78] rounded-xl overflow-hidden text-[48px] text-[black] bg-[#48bb78] absolute top-[20%] orbitron max-w-[80%] mx-auto px-4 font-bold py-2 text-center">What about the rules?</div>
<div class="translate-y-[0%] border-2 border-[#48bb78] rounded-xl overflow-hidden text-[20px] text-[#48bb78] bg-[#020202] absolute bottom-[10%] orbitron max-w-[80%] mx-auto px-4 py-2 text-center">1. All apps must be developed in Java and Kotlin! <br>2. In order to get the $25 for your license you app needs to go through one of these steps <br> 2a. Receive at least 10 downloads on an app store of your choice (Amazon App Store Preffered for ease of use) <br> or <br> 2b. Get your app peer-reviewed by at least 10 people with an average rating of 7/10. <br> 4. Your app must fulfill a goal. It cannot just be a "Hello World" app with 2 pages and a button! <br> 3. You must be a teen 18 or younger. </div>
</div>
</div>
</div>
</div>
<div style="width: 100vw; overflow-x: hidden;">
</div>
<div id="pg-4" hidden class="h-[100vh] w-screen bg-green-500"></div>
</div>
<div id="getstarted" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 pointer-events-none z-50">
<p class="text-white text-sm text-center mb-2">all you need to do is</p>
<h2 class="text-8xl font-[Orbitron] text-red-600 font-bold text-center mb-8">
DARE
</h2>
<div class="flex flex-col gap-6">
<div class="step-item flex items-center gap-4">
<div class="step-number bg-[#48bb78] text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">1</div>
<div class="step-content bg-white text-black p-4 rounded-xl flex-1">
<span class="text-red-600">D</span>evelop your Android app!
</div>
</div>
<div class="step-item flex items-center gap-4">
<div class="step-number bg-[#48bb78] text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">2</div>
<div class="step-content bg-white text-black p-4 rounded-xl flex-1">
<span class="text-red-600">A</span>pply for your app to be on an appstore!
</div>
</div>
<div class="step-item flex items-center gap-4">
<div class="step-number bg-[#48bb78] text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">3</div>
<div class="step-content bg-white text-black p-2 rounded-xl flex-1">
<span class="text-red-600">R</span>eview your app link with us and get feedback! Visit https://bit.ly/hcdessert to submit the form!
</div>
</div>
<div class="step-item flex items-center gap-4">
<div class="step-number bg-[#48bb78] text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">4</div>
<div class="step-content bg-white text-black p-4 rounded-xl flex-1">
<span class="text-red-600">E</span>arn your free Google Play Developer License!
</div>
</div>
</div>
<div class="subpoints-section opacity-0 mt-6 bg-white/90 p-4 rounded-xl">
<h3 class="text-[#48bb78] font-bold mb-4">Step 1:</h3>
<div class="ml-4 text-gray-700">
<div class="subpoint mb-3">• Use Java, Kotlin, or Flutter for your App</div>
<div class="subpoint mb-3">• Choose your IDE: Android Studio, IntelliJ IDEA, or even VS Code!</div>
<div class="subpoint">• Build your amazing app, and get help in the Slack Channel!</div>
</div>
</div>
</div>
<div class="subpoints-section-2 opacity-0 mt-6 bg-white/90 p-4 rounded-xl">
<h3 class="text-[#48bb78] font-bold mb-4">Step 2:</h3>
<div class="ml-4 text-gray-700">
<div class="subpoint mb-3">• Submit your app to an App Store</div>
<div class="subpoint mb-3">• Choose your App Store: Google Play, Amazon App Store, or even AppGallery!</div>
<div class="subpoint">• Get your app reviewed and approved by us!</div>
</div>
</div>
<div class="subpoints-section-3 opacity-0 mt-6 bg-white/90 p-4 rounded-xl">
<h3 class="text-[#48bb78] font-bold mb-4">Step 3:</h3>
<div class="ml-4 text-gray-700">
<div class="subpoint mb-3">• Share your app link with us for review and feedback</div>
<div class="subpoint">• Get help in the Slack Channel!</div>
</div>
</div>
<div class="subpoints-section-4 opacity-0 mt-6 bg-white/90 p-4 rounded-xl">
<h3 class="text-[#48bb78] font-bold mb-4">Step 4:</h3>
<div class="ml-4 text-gray-700">
<div class="subpoint mb-3">• Receive your Google Play Developer License!</div>
</div>
</div>
<div id="pg3_3" class="w-screen flex-grow-0 flex-shrink-0 h-[100vh] overflow-hidden flex items-center justify-center flex-col" style="display: none;">
<div id="pg3_3cont" class="w-full h-full gap-2 p-2 relative">
<div id="headpg3" class="w-full h-[5vh] flex items-center justify-around">
<div id="hd1" class="hds w-[100%] text-4xl max-[540px]:text-2xl text-[#48bb78] kanit h-full bg-black rounded-xl text-center flex items-center justify-center"><a href="https://github.com/pizzalover125/juice-ysws" target="_blank">GitHub</a></div>
</div>
<div id="pg3_3contin" class="w-full mt-[1vh] flex items-center justify-around h-[93vh] relative">
<div id="contin_1" class="w-[59.5%] h-full bg-black rounded-xl">
<div id="namezz" class="text-[#48bb78] h-[30%] m-[3%] max-[540px]:m-[1%] font-bold flex items-center justify-center text-9xl orbitron">
Dessert
</div>
<div id="rowdate" class="w-full h-[5%] flex items-center kanit justify-around text-[#48bb78]">
<span class=" text-center w-[10%]">12/10/2024</span>
<span class="lineee h-[10px] rounded-full w-[70%] bg-[#48bb78]"></span>
<span class=" text-center w-[10%]">1/10/2025</span>
</div>
<div id="slider" class="w-full h-[55%] bg-black p-[30px] max-[540px]:p-[10px] text-white rounded-xl">
<div class="swiper mySwiper w-full h-[90%] min-h-[100px] relative bg-black rounded-xl">
<div class="swiper-wrapper min-h-fit w-full h-full">
<div class="swiper-slide min-h-[100px] bg-[#48bb78] h-full flex items-center text-2xl max-[540px]:text-[11px] text-white justify-center font-[kanit] flex-grow-0 flex-shrink-0 w-full"><span class="mx-3 text-4xl max-[540px]:text-[15px] bg-white text-[#48bb78] rounded-xl px-2 max-[540px]:px-1 py-1 max-[540px]:py-[1px] font-bold">Develop</span> Your App</div>
<div class="swiper-slide min-h-[100px] bg-[#48bb78] h-full flex items-center text-2xl max-[540px]:text-[11px] text-white justify-center font-[kanit] flex-grow-0 flex-shrink-0 w-full"><span class="mx-3 text-4xl max-[540px]:text-[15px] bg-white text-[#48bb78] rounded-xl px-2 max-[540px]:px-1 py-1 max-[540px]:py-[1px] font-bold">Apply</span> For your app to be on an appstore</div>
<div class="swiper-slide min-h-[100px] bg-[#48bb78] h-full flex items-center text-2xl max-[540px]:text-[11px] text-white justify-center font-[kanit] flex-grow-0 flex-shrink-0 w-full"><span class="mx-3 text-4xl max-[540px]:text-[15px] bg-white text-[#48bb78] rounded-xl px-2 max-[540px]:px-1 py-1 max-[540px]:py-[1px] font-bold">Reflect</span> With other Hack Clubbers on your app</div>
<div class="swiper-slide min-h-[100px] bg-[#48bb78] h-full flex items-center text-2xl max-[540px]:text-[11px] text-white justify-center font-[kanit] flex-grow-0 flex-shrink-0 w-full"><span class="mx-3 text-4xl max-[540px]:text-[15px] bg-white text-[#48bb78] rounded-xl px-2 max-[540px]:px-1 py-1 max-[540px]:py-[1px] font-bold">Earn</span> Your Developer License</div>
</div>
<div class="swiper-button-next absolute top-[50%] max-[540px]:top-[70%] right-[5%] max-[540px]:right-[10%] max-[540px]:h-[20px] translate-x-[50%] translate-y-[-50%] text-[white]"></div>
<div class="swiper-button-prev absolute top-[50%] max-[540px]:top-[70%] left-[5%] max-[540px]:left-[10%] max-[540px]:h-[20px] translate-x-[-50%] translate-y-[-50%] text-[white]"></div>
</div>
<div id="slider-in-2" class="w-full mt-[20px] orbitron h-[10%] flex items-center justify-center rounded-xl bg-[#48bb78] text-white">Get Started In 4 Easy Steps</div>
</div>
</div>
<div id="contin_2" class="w-[39.5%] relative text-3xl p-[30px] max-[540px]:min-h-[60vh] max-[540px]:p-[20px] text-white h-full bg-black rounded-xl">
<div id="noteHead" class="text-6xl text-center p-[20px] max-[540px]:p-[10px] bg-[#48bb78] rounded-xl text-white">Rules/Guidelines</div>
<p class="text-white bg-[#48bb78] rounded-xl p-[20px] max-[540px]:leading-none max-[540px]:text-[15px] max-[540px]:p-[8px]">Lorem ipsum</p>
<div id="credits" class="bottom-[4%] absolute">
<div id="friend" class="text-white text-xs mt-4">
Thank you to everyone who helped out, and @Dikshit Jain for making the original concept.
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
</script>
<script src="https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>