181 lines
7.5 KiB
HTML
181 lines
7.5 KiB
HTML
<!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-13T00:00:00.000Z","area":"Chicago, IL (Sun)","venue":"The Auditorium Theatre"},
|
|
{"time":"2026-04-14T00:00:00.000Z","area":"Chicago, IL (Mon)","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 (Wed)","venue":"San Jose Civic"},
|
|
{"time":"2026-04-24T00:00:00.000Z","area":"San Jose, CA (Thu)","venue":"San Jose Civic"},
|
|
{"time":"2026-04-26T00:00:00.000Z","area":"Los Angeles, CA","venue":"Peacock Theater"},
|
|
{"time":"2026-04-27T00: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 (Sun)","venue":"Wang Theatre At The Boch Center"},
|
|
{"time":"2026-05-12T00:00:00.000Z","area":"Boston, MA (Mon)","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> |