-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (248 loc) · 19.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Late Nights</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="tailwind.config.js"></script>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<script type="text/javascript">
!(function(o, c) {
var n = c.documentElement
, t = " w-mod-";
(n.className += t + "js"),
("ontouchstart"in o || (o.DocumentTouch && c instanceof DocumentTouch)) && (n.className += t + "touch");
}
)(window, document);
</script>
<link rel="icon" type="image/png" sizes="32x32" href="assets/icon.ico">
<style>
::-webkit-scrollbar {
width: 0px;
}
</style>
</head>
<body class="bg-gray-950 text-base h-full w-full overflow-x-hidden" style="font-family: Arial, Helvetica, sans-serif;">
<nav class="shadow-md shadow-blue-500/40 sticky top-0 bg-black/10 p-5 border-b backdrop-blur-xl border-gray-400/20 z-50 w-full">
<div class="container mx-auto px-4 flex justify-between items-center max-w-full">
<div class="flex items-center md:justify-between space-x-4">
<a href="https://discord.gg/bPU929gDUr" target="_blank" class="text-white focus:outline-none md:hidden">
<img src="https://img.icons8.com/ios-filled/50/ffffff/discord-logo.png" alt="Discord" width="24" height="24">
</a>
<a href="/LateNights.github.io/" class="hidden md:block">
<img src="assets/128.png" width="50" alt="Logo">
</a>
</div>
<div id="menu" class="hidden md:flex md:space-x-10">
<a href="/LateNights.github.io/" class="font-semibold text-blue-100 hover:text-blue-400 transition-all duration-200">Home</a>
<a href="/LateNights.github.io/policy/" class="font-semibold text-blue-100 hover:text-blue-400 transition-all duration-200">Privacy Policy</a>
<a href="#faq" class="font-semibold text-blue-100 hover:text-blue-400 transition-all duration-200">FAQ</a>
<a href="https://discord.gg/bPU929gDUr" target="_blank" class="font-semibold text-blue-100 hover:text-blue-400 transition-all duration-200">Discord</a>
</div>
<div>
<button hidden onclick="location.href='https://'" class="bg-white text-black/90 border border-transparent font-semibold px-8 py-1 rounded-full transition-all duration-300 hover:bg-blue-700 hover:text-white">Login</button>
</div>
</div>
</nav>
<div class="relative z-10">
<div class="absolute inset-0 z-0">
<img class="blur w-full h-full object-cover opacity-20 skew-y-12 rounded-2xl" src="assets/BackgroundMain.jpg" alt="BackgroundMain">
</div>
<div id="home" class="relative z-10 flex items-center justify-center text-white w-full" style="height: 850px;">
<div class="text-center">
<div class="py-3">
<div class="text-7xl py-3">Late Nights</div>
<div class="text-2xl p-3 text-gray-300">Game Development</div>
<div class="text-lg p-3 text-gray-400">
Late Nights is a Small group of People making their Dream Games<br/>
</div>
</div>
<button href="https://discord.gg/bPU929gDUr" target="_blank" class="opacity-95 bg-blue-700 text-white border border-transparent font-semibold shadow-lg shadow-indigo-500/40 px-12 py-4 rounded-full transition-all duration-100 hover:bg-blue-600">Discord </button>
</div>
</div>
</div>
<div x-data="{ isOpen: false }" class="hidden" id="modal-div">
<div x-show="isOpen" class="fixed inset-0 z-10 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="relative inline-block p-4 border-2 border-blue-400 overflow-hidden text-left align-middle transition-all transform shadow-xl sm:max-w-sm rounded-xl bg-gray-950 sm:my-8 sm:w-full sm:p-6">
<div class="flex items-center justify-center mx-auto"></div>
<div class="mt-5 text-center">
<h3 class="text-4xl font-medium text-white mb-6" id="modal-title">Join the Discord</h3>
<p class="mt-2 text-gray-400">
This opens a new tab
</p>
</div>
<div class="flex items-center justify-between w-full mt-5 gap-x-2">
<input type="text" id="modal-input" value="" class="flex-1 block h-10 px-4 text-sm border rounded-md bg-gray-950 text-gray-300 border-gray-700 focus:ring-blue-300 focus:ring-opacity-40 focus:border-blue-300 focus:outline-none focus:ring"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg></div>
<div class="mt-4 sm:flex sm:items-center sm:justify-between sm:mt-6 sm:-mx-2">
<button id="cancel-button" class="px-4 sm:mx-2 w-full py-2.5 text-sm font-medium text-gray-200 border-gray-700 hover:bg-gray-800 tracking-wide capitalize transition-colors duration-300 transform border rounded-md focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-40">Cancel </button>
<button class="px-4 sm:mx-2 w-full py-2.5 mt-3 sm:mt-0 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40" onclick="download(document.getElementById('modal-input').value)">Download </button>
</div>
</div></div></div></div>
<div class="container mx-auto p-4 md:p-8 lg:p-12 text-center">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8 lg:gap-12 justify-center">
<div class="text-slate-100 w-auto h-auto mx-4 mb-4 flex flex-col items-center overflow-hidden relative">
<div class="w-20 h-20 mb-0 mt-5 ml-5">
<!-- img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAACe0lEQVR4nO2aPWsUQRiAJ39Am5iAxOY6PzpBuU5sFEWUwFmGIHJEiIQLikQRrCQEr/cfBFLnLyQSsEojSBLENFoJpkvzyHAbGGc3t7Ozu3cze+8DbzW3M7vP7r6z884pJQiCIAhCHQDLwHfg0CM+q9gBjijHrIoZ4LikgDkVM0yaAOAB8MaIj8B6iViz+suLp8DUuC6+XfUd9HyCOtVdVQH0wIEIWC0zpjfAfA0CfsQkYAb4VrGAD8BpFAJKPsInwGOH/labKkCzOekCtpoo4EvFAjqxCZgDVhw/Yt5bH0H3M/qbSiSYx4UroAgZd1dn/wsOxzVWgNM0SpqJE3AarQBgFmglsZhRFLlltF8c8rF0YBzz2jjmsgoVBklv6CxgTaP6Tt9z6Ldv9RtmZQnYKShA88lDwE8VIsCuh4C+h4BjFSJMmgDglb5II5aSzH8WPatdx4L1m3dG2ybwJAoBwA3StItOgxlrgb+xCGjXJICmC5iOVgBwDbiZhL64r1Z0jHYdXaNtD3ib0WccAhgkPJNdn1kgZgFbIuB/5AlQ+a9AL9pXgMHCZs9IYl0rweUlwauO44QnAJjO255ymQYdx3rpIeCo7DW61P1GJeBKsoo0awYtKzaMNv3njBdFxxmVgOsVjc9IK0IMKrN3jQXKQsYipmctYpbs9grPZ+QCunlJxuU7IGYB/cAE2Buyqf2EEATs1Hg+l5Ktef2q3a5rnLICUgubaAAeAfvnlJ1bSenaLmcvGu0zKmaA38OSjMs0GDXkZFkRQOYTcEc1BdJsW9vTa9a29nPVJMhn/EXHOkEE8CfHwb5qMsAzzpfwC3g47nMUBEEQBEFQHvwD1IblGFwBsgYAAAAASUVORK5CYII=" -->
</div>
<div class="flex-grow flex flex-col justify-center p-5">
<div class="text-4xl mb-10">About Us:</div>
<div class="text-zinc-400 text-lg mb-24">At Late Nights, we are passionate creators and innovators in the world of gaming, dedicated to crafting unique and unforgettable experiences. Our team thrives on pushing the boundaries of imagination, blending art, technology, and storytelling to create games that captivate and inspire players around the globe.</div>
<div class="absolute bottom-2.5 left-6">
<!-- <a href="#prices" class="text-white no-underline text-base mt-2.5">Learn More</a>-->
</div>
</div>
</div>
<div class="text-slate-100 w-auto h-auto mx-4 mb-4 flex flex-col items-center overflow-hidden relative transition duration-300 ease-in-out">
<!--div class="text-2xl mt-12 text-red-500">Soon</div-->
<div class="flex-grow flex flex-col justify-center p-5">
<div class="text-4xl mb-10">Our Vision and Approach:</div>
<div class="text-zinc-400 text-lg mb-24">To create immersive and innovative gaming experiences that inspire and connect players worldwide. We strive to push the boundaries of storytelling, technology, and creativity, crafting games that not only entertain but also leave a lasting impact. Our vision is to be a leader in the industry, known for delivering high-quality, engaging games that resonate with players of all ages and backgrounds.</div>
<div class="absolute bottom-2.5 left-6">
<!-- <a href="#prices" class="text-white no-underline text-base mt-2.5">Learn More</a> -->
</div>
</div>
</div>
<div class="text-slate-100 w-auto h-auto mx-4 mb-4 flex flex-col items-center overflow-hidden relative transition duration-300 ease-in-out">
<div class="w-20 h-20 mb-0 mt-5 ml-5">
<!-- img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABHUlEQVR4nO3ZMW7CQBCF4QkE6nAArkCPOQ5nISQH4BTJEaCBPopEamhwzpBUfzRojFwYKhbPkvkkS0a7mH16KxesSAjhfwD6wCvwTX5KYK4ZNMgL+XsWS6XGkhmgsLWX+uFIMkW1/gjiBNGIM0QjzhCNOEM04gzRiDNEI84QjThDNOIM0YgzRCPOcLeN5E64E3K6SVd9T6+Ez08fxP7p3wO7VGG4YZDdrYKUdl/ktrWAia39IHZQkrtZVf+81kxODhrieGKVoO53+5Fpw9jUxt7EO+Dr3AlY7YRpK54BXeDHFjtoGH+ysV/gUbwCRtXevTBH97UaiUfAEFjZIhcX5i1szlK/Ix4AD8DnFd4+m7aDdICPKwRZtxokBDnrD5xstUOHlb0NAAAAAElFTkSuQmCC" -->
</div>
<div class="flex-grow flex flex-col justify-center p-5">
<div class="text-4xl mb-10">Contact and Community:</div>
<div class="text-zinc-400 text-lg mb-24">We love connecting with our players and the gaming community. Whether you have questions, feedback, or just want to chat about games, we're here to listen. Reach out to us at our <a href="https://discord.gg/bPU929gDUr">Discord</a></div>
<div class="absolute bottom-2.5 left-6">
<!-- <a href="#prices" class="text-white no-underline text-base mt-2.5">Learn More</a> -->
</div>
</div>
</div>
</div>
</div>
<div id="prices" class="intro-header items-center flex flex-col md:flex-row text-white bg-auto justify-center mb-2 relative video-container p-20">
<div class="absolute inset-0 z-0 flex">
<img class="blur-sm w-6/12 h-full object-cover opacity-20 skew-y-12 rounded-2xl" src="assets/BackgroundLeft.jpg" alt="BackgroundLeft">
<img class="blur-sm w-6/12 h-full object-cover opacity-20 -skew-y-12 rounded-2xl" src="assets/BackgroundRight.jpg" alt="BackgroundLeft">
</div>
<div class="text-center relative z-10">
<div class="block md:hidden m-4">
<div class="text-4xl p-3">Donations</div>
<div class="text-lg p-8 opacity-50">
There is no Donations<br>Right now
</div>
</div>
<div class="hidden md:block m-80">
<div class="text-4xl p-3">Donations soon</div>
<div class="text-lg p-8 opacity-50">
There is no Donations<br>Right now
</div>
<button class="hidden bg-gray-200 text-black border border-transparent font-semibold px-9 py-4 rounded-full transitions-all duration-100 hover:bg-red-500 hover:text-white">soon </button>
</div>
</div>
<div id="faq" class="relative w-screen px-6 pt-10 pb-8 mt-8 sm:mx-auto sm:max-w-2xl sm:rounded-lg sm:px-10">
<div class="mx-0 px-0">
<div class="flex flex-col items-center">
<h2 class="mt-5 text-center text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl ">FAQ</h2>
<p class="mt-3 text-sm text-neutral-500 sm:text-base md:text-lg ">Frequently asked questions</p>
</div>
<div class="mx-auto mt-8 grid max-w-xl divide-y divide-neutral-200">
<div class="py-5">
<details class="group">
<summary class="flex list-none items-center justify-between font-medium cursor-pointer">
<span class="text-base sm:text-lg">What is Late Nights?</span>
<span class="transition-transform group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-neutral-400 animate-fadeIn text-xs sm:text-sm">[Your Company Name] is a creative collective dedicated to the joy of game development. We are a team of passionate individuals who come together to design and build games that we find fun and exciting. Our focus is on enjoying the process and delivering unique experiences that resonate with players.</p>
</details>
</div>
<div class="py-5">
<details class="group">
<summary class="flex list-none items-center justify-between font-medium cursor-pointer">
<span class="text-base sm:text-lg">What type of games do you create?</span>
<span class="transition-transform group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-neutral-400 animate-fadeIn text-xs sm:text-sm">
We create the games we're passionate about, exploring a variety of genres and styles. Our focus is on crafting unique and engaging experiences, allowing our creativity and imagination to guide each project. Whether it's an action-packed adventure or a thought-provoking puzzle game, we love experimenting with different ideas to bring fresh, exciting games to life.
</p>
</details>
</div>
<div class="py-5">
<details class="group">
<summary class="flex list-none items-center justify-between font-medium cursor-pointer">
<span class="text-base sm:text-lg">I’m having technical issues with a game. What should I do?</span>
<span class="transition-transform group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-neutral-400 animate-fadeIn text-xs sm:text-sm">If you're experiencing technical issues with one of our games, please join our Discord community. Our support team and fellow players are there to help troubleshoot and provide assistance. We look forward to resolving any issues you may have and improving your gaming experience.</p>
</details>
</div>
<div class="py-5">
<details class="group">
<summary class="flex list-none items-center justify-between font-medium cursor-pointer">
<span class="text-base sm:text-lg">Are your games available on multiple platforms?</span>
<span class="transition-transform group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-neutral-400 animate-fadeIn text-xs sm:text-sm">
Currently, our games are available exclusively on Windows. However, we are actively working on expanding our reach and plan to support Linux and macOS in the near future. Stay tuned for updates on additional platform availability!</a>
</p>
</details>
</div>
<div class="py-5">
<details class="group">
<summary class="flex list-none items-center justify-between font-medium cursor-pointer">
<span class="text-base sm:text-lg">What projects are you working on next?</span>
<span class="transition-transform group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-neutral-400 animate-fadeIn text-xs sm:text-sm">We're excited to share that our next project is an anime-inspired RPG MMO. This ambitious game will feature rich, immersive worlds and deep, engaging gameplay, combining elements of classic RPGs with the expansive experience of an MMO. Stay tuned for more updates as we continue to develop and refine this exciting new title!</p>
</details>
</div>
</div>
</div>
</div>
</div>
<div class="relative text-white lg:p-12 w-full h-16 opacity-25">
<div class="absolute inset-0 flex justify-center items-center">
<p class="font-medium text-sm text-gray-300">
2024 <span id="hoverText" class="text-gray-400 transition duration-1000" onmouseover="this.innerText='Made by Aphexi'" onmouseout="this.innerText='Late Nights'">Late Nights </span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500 ml-1 bottom-1"></span>
</p>
</div>
</div>
<script>
document.querySelectorAll('details').forEach(detail => {
detail.addEventListener('toggle', (event) => {
if (detail.open) {
document.querySelectorAll('details').forEach(otherDetail => {
if (otherDetail !== detail) {
otherDetail.open = false;
}
}
);
}
}
);
}
);
</script>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=662ff817ffae75d95d2a93e4" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</body></html>