Fat ass
BIN
.DS_Store
vendored
Normal file
BIN
favicon.png
Normal file
|
After Width: | Height: | Size: 123 KiB |
3
favicon.svg
Normal 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
BIN
img/.DS_Store
vendored
Normal file
83
img/line.svg
Normal 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 |
BIN
img/marisas-peach-no-bubble.png
Normal file
|
After Width: | Height: | Size: 116 KiB |
BIN
img/marisas-peach-no-bubble.webp
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
img/marisas-peach-thumb-round.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
img/marisas-peach-thumb-round.webp
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
img/marisas-peach-thumb.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
img/marisas-peach-thumb.webp
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
img/marisas-peach.png
Normal file
|
After Width: | Height: | Size: 111 KiB |
BIN
img/marisas-peach.webp
Normal file
|
After Width: | Height: | Size: 96 KiB |
46
index.html
Normal 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="デイル・🌕・ツキ" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta property="og:title" content="デイル・🌕・ツキ" />
|
||||
<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="デイル・🌕・ツキ" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="https://deiru.online" />
|
||||
<meta name="twitter:title" content="デイル・🌕・ツキ" />
|
||||
<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>デイル 🌕 ツキ</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
|
|
@ -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
|
|
@ -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;
|
||||
}
|
||||
}
|
||||