yeah
This commit is contained in:
177
res/index.html
Normal file
177
res/index.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>MIKU EXPO 2026 Time Tracker</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
:root {
|
||||
--gray: rgb(89, 89, 89);
|
||||
--white: rgb(202, 202, 202);
|
||||
--half: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 16vw 0 16vw;
|
||||
background-color: rgb(34, 34, 34);
|
||||
color: var(--white);
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.t {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.c {
|
||||
padding: 3px;
|
||||
background-color: rgb(16, 16, 16);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fit {
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center;">
|
||||
<a href="https://mikuexpo.com/na2026/" target="_blank"><img src="https://mikuexpo.com/na2026/images/main_logo.webp" style="max-width: 32vw;"></a>
|
||||
<h1 class="fit" style="margin-top: 0;">go go gadget unofficial countdown</h1>
|
||||
</div>
|
||||
|
||||
<div id="items">
|
||||
<h1 id="loading-text">loading!!!</h1>
|
||||
</div>
|
||||
|
||||
<hr style="opacity: var(--half);">
|
||||
|
||||
<div style="display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin-top: 25px;">
|
||||
<p class="fit" style="margin-left: 8px;"><span class="c" id="visits">3939</span> visits</p>
|
||||
</div>
|
||||
|
||||
<footer style="text-align: center; margin: 0; color: var(--gray)">
|
||||
<h6>
|
||||
Made by @zombieb (Discord).<br>
|
||||
<a href="https://gitea.proxnet.dev/zombieb/literally-miku-expo" target="_blank" style="color: var(--gray)">Open Source.</a><br>
|
||||
Times may not be completely accurate. They're <span style="font-style: italic;">close enough.</span>
|
||||
</h6>
|
||||
</footer>
|
||||
|
||||
<script type="module">
|
||||
|
||||
/**
|
||||
* @type {{time:string,area:string,venue:string}[]}
|
||||
*/
|
||||
const times = [
|
||||
{"time":"2026-04-14T00:00:00.000Z","area":"Chicago, IL","venue":"The Auditorium Theatre"},
|
||||
{"time":"2026-04-16T00:00:00.000Z","area":"Denver, CO","venue":"Mission Ballroom"},
|
||||
{"time":"2026-04-19T00:00:00.000Z","area":"Vancouver, BC","venue":"Doug Mitchell Thunderbird Sports Centre"},
|
||||
{"time":"2026-04-21T00:00:00.000Z","area":"Seattle, WA","venue":"WAMU Theater"},
|
||||
{"time":"2026-04-23T00:00:00.000Z","area":"San Jose, CA","venue":"San Jose Civic"},
|
||||
{"time":"2026-04-26T00:00:00.000Z","area":"Los Angeles, CA","venue":"Peacock Theater"},
|
||||
{"time":"2026-04-29T00:00:00.000Z","area":"Glendale, AZ","venue":"Desert Diamond Arena"},
|
||||
{"time":"2026-04-31T00:00:00.000Z","area":"Grand Prairie, TX","venue":"Texas Trust CU Theatre"},
|
||||
{"time":"2026-05-02T00:00:00.000Z","area":"Cedar Park, TX","venue":"H-E-B Center at Cedar Park"},
|
||||
{"time":"2026-05-04T00:00:00.000Z","area":"Duluth, GA","venue":"Gas South Arena"},
|
||||
{"time":"2026-05-06T00:00:00.000Z","area":"Washington, DC","venue":"The Anthem"},
|
||||
{"time":"2026-05-08T00:00:00.000Z","area":"Newark, NJ","venue":"Prudential Center"},
|
||||
{"time":"2026-05-11T00:00:00.000Z","area":"Boston, MA","venue":"Wang Theatre At The Boch Center"},
|
||||
{"time":"2026-05-14T00:00:00.000Z","area":"Hamilton, ON","venue":"TD Coliseum"},
|
||||
{"time":"2026-05-20T00:00:00.000Z","area":"Mexico City","venue":"Pepsi Center WTC"}
|
||||
];
|
||||
|
||||
/**
|
||||
* @param d {Date}
|
||||
*/
|
||||
function hoursUntil(d) {
|
||||
return Math.ceil((d.getTime() - Date.now()) / 1000 / 60 / 60);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param d {Date}
|
||||
*/
|
||||
function daysUntil(d) {
|
||||
return Math.ceil((d.getTime() - Date.now()) / 1000 / 60 / 60 / 24);
|
||||
}
|
||||
|
||||
const itemsContainer = document.getElementById("items");
|
||||
|
||||
for (const time of times) {
|
||||
const venue = time.venue;
|
||||
const area = time.area;
|
||||
|
||||
const hr = document.createElement("hr");
|
||||
hr.style.opacity = "var(--half)";
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.style.display = "flex";
|
||||
|
||||
const infoContainer = document.createElement("div");
|
||||
const timeContainer = document.createElement("div");
|
||||
|
||||
infoContainer.style.flexGrow = "1";
|
||||
|
||||
timeContainer.style.textAlign = "right";
|
||||
timeContainer.style.alignContent = "center";
|
||||
timeContainer.style.maxWidth = "var(--half)";
|
||||
|
||||
const areaText = document.createElement("h2");
|
||||
const venueText = document.createElement("h4");
|
||||
areaText.innerText = area.toUpperCase();
|
||||
areaText.classList.add("t");
|
||||
areaText.classList.add("fit");
|
||||
venueText.innerText = venue;
|
||||
venueText.classList.add("t");
|
||||
venueText.classList.add("fit");
|
||||
|
||||
const timeText = document.createElement("h3");
|
||||
timeText.innerHTML = "loading time.";
|
||||
timeText.classList.add("fit");
|
||||
|
||||
infoContainer.appendChild(areaText);
|
||||
infoContainer.appendChild(venueText);
|
||||
|
||||
timeContainer.appendChild(timeText);
|
||||
|
||||
container.appendChild(infoContainer);
|
||||
container.appendChild(timeContainer);
|
||||
|
||||
itemsContainer.appendChild(hr);
|
||||
itemsContainer.appendChild(container);
|
||||
|
||||
const setTime = () => {
|
||||
const d = new Date(time.time);
|
||||
const hours = hoursUntil(d);
|
||||
const days = daysUntil(d);
|
||||
|
||||
if (hours > 5) timeText.innerHTML = `<span class="c">${days} DAY(S)</span> <span class="t">REMAINING</span>`;
|
||||
else if (hours <= 0) timeText.innerHTML = "FINISHED";
|
||||
else timeText.innerText = "RIGHT NOW";
|
||||
};
|
||||
setInterval(setTime, 1000);
|
||||
setTime(); // immediately initialize times
|
||||
}
|
||||
|
||||
|
||||
fetch('/hit').then(async res => {
|
||||
if (!(res.status >= 200 && res.status < 400)) {
|
||||
document.getElementById("visits").innerText = "fetch failed";
|
||||
} else {
|
||||
/**
|
||||
* @type {number}
|
||||
*/
|
||||
const parsed = await res.json();
|
||||
|
||||
document.getElementById("visits").innerText = parsed;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
document.getElementById("loading-text").remove();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user