This commit is contained in:
Dale Twokey 2026-04-14 17:02:35 +03:00
commit fe526a5ad7
17 changed files with 278 additions and 0 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

3
favicon.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg">
<text y="32" font-size="32">🌕</text>
</svg>

After

Width:  |  Height:  |  Size: 90 B

BIN
fonts/noto-sans-cjk.otf Normal file

Binary file not shown.

BIN
img/.DS_Store vendored Normal file

Binary file not shown.

83
img/line.svg Normal file
View file

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
id="Capa_1"
viewBox="0 0 100% 40"
sodipodi:docname="line.svg"
inkscape:version="1.4.2 (ebf0e940, 2025-05-08)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<pattern
inkscape:collect="always"
xlink:href="#Strips1_1"
preserveAspectRatio="xMidYMid"
id="pattern2"
patternTransform="matrix(35.355339,35.355339,-35.355339,35.355339,0,0)"
x="0"
y="0" />
<pattern
inkscape:collect="always"
patternUnits="userSpaceOnUse"
width="2"
height="10"
patternTransform="translate(0,0) scale(2,2)"
preserveAspectRatio="xMidYMid"
id="Strips1_1"
style="fill:#000000"
inkscape:stockid="Stripes 01 (1:1)"
inkscape:isstock="true"
inkscape:label="Stripes 01 (1:1)">
<rect
style="stroke:none"
x="0"
y="-0.5"
width="1"
height="11"
id="rect134" />
</pattern>
</defs>
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="2.8966667"
inkscape:cx="150"
inkscape:cy="75.086306"
inkscape:window-width="1352"
inkscape:window-height="820"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<pattern
id="diagonalHatch"
patternUnits="userSpaceOnUse"
width="4"
height="4"
inkscape:label="diagonalHatch">
<path
d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
style="stroke:black; stroke-width:1"
id="path1" />
</pattern>
<rect
x="0"
y="0"
width="100%"
height="100%"
fill="url(#diagonalHatch)"
id="rect1"
style="fill:url(#pattern2);fill-opacity:1" />
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
img/marisas-peach-thumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
img/marisas-peach.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
img/marisas-peach.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

46
index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>COOL ZONE</title>
<link rel="canonical" href="https://deiru.online" />
<link rel="stylesheet" href="/styles/font.css" />
<link rel="preload" href="/img/marisas-peach.webp" as="image" type="image/avif" />
<meta name="robots" content="noindex" />
<link rel="stylesheet" href="/styles/style.css">
<link rel="icon" href="/favicon.svg" />
<link rel="icon" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="You have reached the cool zone" />
<meta name="author" content="&#x30C7;&#x30A4;&#x30EB;&#x30FB;&#x1F315;&#x30FB;&#x30C4;&#x30AD;" />
<meta charset="UTF-8" />
<meta property="og:title" content="&#x30C7;&#x30A4;&#x30EB;&#x30FB;&#x1F315;&#x30FB;&#x30C4;&#x30AD;" />
<meta property="og:description" content="You have reached the cool zone" />
<meta property="og:image" content="https://deiru.online/img/marisas-peach-thumb-round.webp" />
<meta property="og:author" content="&#x30C7;&#x30A4;&#x30EB;&#x30FB;&#x1F315;&#x30FB;&#x30C4;&#x30AD;" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="https://deiru.online" />
<meta name="twitter:title" content="&#x30C7;&#x30A4;&#x30EB;&#x30FB;&#x1F315;&#x30FB;&#x30C4;&#x30AD;" />
<meta name="twitter:description" content="You have reached the cool zone" />
<meta name="twitter:image" content="https://deiru.online/img/marisas-peach-thumb-round.webp" />
</head>
<!--
You have discovered THE COOL ZONE. You were not supposed to.
For your efforts, you get jack shit and this lovely ass.
-->
<body>
<div class="page-container">
<div class="container">
<h1>&#x30C7;&#x30A4;&#x30EB; &#x1F315; &#x30C4;&#x30AD;</h1>
<label class="img-container" for="marisa">
<input type="checkbox" name="marisa" id="marisa">
<div class="img"></div>
</label>
</div>
</div>
<footer>
<div class="credits left">Image by <a href="https://x.com/notnoe_/status/1660885922064502784">@notnoe</a></div>
<div class="credits right">Website by <a href="https://gensokyo.social/@Deiru">@Deiru</a></div>
</footer>
</body>
</html>

4
styles/font.css Normal file
View file

@ -0,0 +1,4 @@
@font-face {
font-family: "Noto Sans CJK";
src: url("/fonts/noto-sans-cjk.otf") format("opentype");
}

142
styles/style.css Normal file
View file

@ -0,0 +1,142 @@
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
overflow: clip;
}
body:after {
position: absolute;
z-index: -1;
left: 0;
top: 0;
display: block;
content: '';
height: 100%;
width: 100%;
background-image: url('/img/line.svg');
background-repeat: repeat;
background-size: 100%;
}
.page-container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.container h1 {
font-family: "Noto Sans CJK";
text-align: center;
padding: 5px;
flex-grow: 0;
width: fit-content;
background-color: white;
border: 4px dashed #ffea8d;
box-sizing: border-box;
border-radius: 8px;
}
.container .credits a {
text-decoration: none;
}
.container .img-container {
display: flex;
flex-direction: column;
align-items: center;
height: calc(50vh + 16px);
width: calc(50vh + 16px);
background: white;
z-index: 1;
border-radius: 8px;
box-sizing: border-box;
}
.container .img-container input {
height: 0px;
margin: 0px;
}
.container .img-container .img {
height: 100%;
width: 100%;
position: relative;
content: '';
z-index: 2;
border: 8px dashed #ffea8d;
border-radius: 8px;
box-sizing: border-box;
background-image: url(/img/marisas-peach-no-bubble.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.container .img-container input:checked+.img {
background-image: url(/img/marisas-peach.webp);
}
footer {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
bottom: 0;
left: 0;
}
footer .credits {
padding: 4px;
width: fit-content;
background: white;
flex-grow: 0;
text-align: center;
box-sizing: border-box;
}
footer .credits.left {
border-top: 2px dashed #ffea8d;
border-right: 2px dashed #ffea8d;
border-top-right-radius: 8px;
}
footer .credits.right {
border-top: 2px dashed #ffea8d;
border-left: 2px dashed #ffea8d;
border-top-left-radius: 8px;
}
footer .credits a {
text-decoration: none;
}
@media (max-width: 480px) {
.container h1 {
font-size: 24px;
}
.container .img-container {
width: calc(85vw + 16px);
height: calc(85vw + 16px);
}
footer .credits {
font-size: 10px;
}
}