Skip to content

Commit 457709d

Browse files
kiritokatkliankiritokatklian
committed
[Add] Initial commit
0 parents  commit 457709d

File tree

7 files changed

+208
-0
lines changed

7 files changed

+208
-0
lines changed

‎audios/database.webm

457 KB
Binary file not shown.

‎database.html

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Kurozora — Living in the Database</title>
7+
8+
<style>
9+
body, html {
10+
margin: 0;
11+
padding: 0;
12+
height: 100%;
13+
overflow: hidden;
14+
font-family: Arial, sans-serif;
15+
background: black;
16+
}
17+
18+
#background-audio {
19+
display: none;
20+
}
21+
22+
#gif-container {
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
width: 100%;
27+
height: 100%;
28+
}
29+
30+
#counter {
31+
position: fixed;
32+
top: 50%;
33+
left: 50%;
34+
transform: translate(-50%, -50%);
35+
color: white;
36+
font-size: 36px;
37+
font-weight: bold;
38+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
39+
background-color: rgba(0, 0, 0, 0.5);
40+
padding: 10px 20px;
41+
border-radius: 10px;
42+
z-index: 9999;
43+
}
44+
45+
#dim-button {
46+
position: fixed;
47+
top: 10px;
48+
right: 10px;
49+
padding: 10px 20px;
50+
background-color: #FF9300;
51+
color: white;
52+
border: none;
53+
border-radius: 5px;
54+
cursor: pointer;
55+
z-index: 9999;
56+
}
57+
58+
.overlay {
59+
position: absolute;
60+
top: 0;
61+
left: 0;
62+
width: 100%;
63+
height: 100%;
64+
background-color: rgba(0, 0, 0, 0.6);
65+
z-index: 9998;
66+
display: none;
67+
}
68+
69+
.modal {
70+
position: fixed;
71+
top: 50%;
72+
left: 50%;
73+
transform: translate(-50%, -50%);
74+
background-color: white;
75+
padding: 20px;
76+
border-radius: 10px;
77+
text-align: center;
78+
z-index: 9999;
79+
display: none;
80+
}
81+
82+
.modal h2 {
83+
margin-top: 0;
84+
}
85+
86+
.modal button {
87+
padding: 10px 20px;
88+
background-color: #FF9300;
89+
color: white;
90+
border: none;
91+
border-radius: 5px;
92+
cursor: pointer;
93+
}
94+
95+
#logo-container {
96+
position: fixed;
97+
top: 10px;
98+
left: 10px;
99+
z-index: 9999;
100+
}
101+
102+
#logo-link {
103+
text-decoration: none;
104+
}
105+
106+
.gif {
107+
position: absolute;
108+
width: 300px;
109+
height: 169px;
110+
background-size: cover;
111+
object-fit: cover;
112+
}
113+
</style>
114+
</head>
115+
<body>
116+
<audio id="background-audio" autoplay loop>
117+
<source src="database.webm" type="audio/webm">
118+
Your browser does not support the database song.
119+
</audio>
120+
121+
<div id="gif-container"></div>
122+
<div id="counter">You've been in the database for: <span id="timer">0:00</span></div>
123+
124+
<button id="dim-button">Dim</button>
125+
<div class="overlay"></div>
126+
127+
<div class="modal" id="warning-modal">
128+
<h2>Seizure Warning</h2>
129+
<p>This website contains flashing lights that may trigger seizures for people with photosensitive epilepsy. Please use the "Dim" button in the top-right corner before continuing.</p>
130+
<button id="continue-button">Continue</button>
131+
</div>
132+
133+
<div id="logo-container">
134+
<a id="logo-link" href="https://kurozora.app" target="_blank">
135+
<img src="images/static/icon/logo_gray.svg" alt="Kurozora Logo" width="36" height="36">
136+
</a>
137+
</div>
138+
139+
<script>
140+
const gifs = ["images/1.gif", "images/2.gif", "images/3.gif", "images/4.gif", "images/5.gif"];
141+
const gifContainer = document.getElementById("gif-container");
142+
const counter = document.getElementById("timer");
143+
const overlay = document.querySelector(".overlay");
144+
const dimButton = document.getElementById("dim-button");
145+
const warningModal = document.getElementById("warning-modal");
146+
const continueButton = document.getElementById("continue-button");
147+
let seconds = 0;
148+
let isDimmed = false;
149+
150+
// Function to display gifs on the page
151+
function displayGifs() {
152+
const windowHeight = window.innerHeight;
153+
const windowWidth = window.innerWidth;
154+
const numGifs = Math.ceil(windowHeight / 169) * Math.ceil(windowWidth / 300);
155+
156+
for (let i = 0; i < numGifs; i++) {
157+
const randomGif = gifs[Math.floor(Math.random() * gifs.length)];
158+
const gifElement = document.createElement("div");
159+
gifElement.classList.add("gif");
160+
gifElement.style.left = (i % Math.ceil(windowWidth / 300)) * 300 + "px";
161+
gifElement.style.top = Math.floor(i / Math.ceil(windowWidth / 300)) * 169 + "px";
162+
gifElement.style.backgroundImage = `url(${randomGif})`;
163+
gifContainer.appendChild(gifElement);
164+
}
165+
}
166+
167+
// Function to update the timer
168+
function updateTimer() {
169+
seconds++;
170+
const minutes = Math.floor(seconds / 60);
171+
const remainingSeconds = seconds % 60;
172+
counter.textContent = `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
173+
}
174+
175+
// Function to dim GIFs
176+
function dimGifs() {
177+
overlay.style.display = isDimmed ? "none" : "block";
178+
isDimmed = !isDimmed;
179+
dimButton.textContent = isDimmed ? "Undim" : "Dim";
180+
}
181+
182+
// Event listener for dim button
183+
dimButton.addEventListener("click", dimGifs);
184+
185+
// Function to show warning modal
186+
function showWarningModal() {
187+
warningModal.style.display = "block";
188+
}
189+
190+
// Function to hide warning modal and start the page content
191+
function hideWarningModal() {
192+
warningModal.style.display = "none";
193+
// Start playing audio, displaying gifs, and updating timer when the warning is acknowledged
194+
const audio = new Audio("database.webm");
195+
audio.loop = true;
196+
audio.play();
197+
displayGifs();
198+
setInterval(updateTimer, 1000);
199+
}
200+
201+
// Event listener for continue button
202+
continueButton.addEventListener("click", hideWarningModal);
203+
204+
// Show warning modal when the page loads
205+
window.onload = showWarningModal;
206+
</script>
207+
</body>
208+
</html>

‎images/1.gif

996 KB
Loading

‎images/2.gif

161 KB
Loading

‎images/3.gif

1.74 MB
Loading

‎images/4.gif

751 KB
Loading

‎images/5.gif

1.42 MB
Loading

0 commit comments

Comments
 (0)