450 lines
18 KiB
HTML
450 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Timeline of Mew</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0b0510;
|
|
--surface: #1a1025;
|
|
--accent: #ffcc66;
|
|
--text: #f7f2ff;
|
|
--text-dim: #b8afcd;
|
|
--line: #4a3b69;
|
|
--window-border: 2px outset #5e4a8a;
|
|
--window-border-inner: 1px inset #3a2a5a;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg) url('bg.png') repeat;
|
|
background-size: 128px;
|
|
color: var(--text);
|
|
font-family: 'Verdana', 'Tahoma', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
header {
|
|
padding: 4rem 1rem;
|
|
text-align: center;
|
|
border-bottom: 2px solid var(--accent);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Times New Roman', Times, serif;
|
|
font-size: 3.5rem;
|
|
color: var(--accent);
|
|
text-shadow: 2px 2px 0px #000;
|
|
margin: 0;
|
|
}
|
|
|
|
.tagline {
|
|
font-family: 'Times New Roman', Times, serif;
|
|
font-size: 1.2rem;
|
|
font-style: italic;
|
|
color: var(--text-dim);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
#title-screen {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
#title-screen img {
|
|
width: 100%;
|
|
max-height: 500px;
|
|
object-fit: contain;
|
|
border: var(--window-border);
|
|
background: #000;
|
|
padding: 4px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.year-section {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.year-header {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
border-bottom: 1px dashed var(--line);
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.photo-card {
|
|
background: var(--surface);
|
|
border: var(--window-border);
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.photo-card:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.photo-card img,
|
|
.photo-card video {
|
|
width: 100%;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.photo-card .label {
|
|
font-size: 10px;
|
|
color: var(--text-dim);
|
|
padding-top: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
#lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.95);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#lightbox img,
|
|
#lightbox video {
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
border: var(--window-border);
|
|
}
|
|
|
|
#lightbox .lb-caption {
|
|
margin-top: 1rem;
|
|
color: var(--accent);
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.9rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 4rem 1rem;
|
|
background: #0d0616;
|
|
border-top: 4px double var(--line);
|
|
}
|
|
|
|
.webring-title {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
color: #ff9af2;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.stamps-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stamp {
|
|
width: 88px;
|
|
height: 31px;
|
|
background: #201135;
|
|
border: 1px outset #5e4a8a;
|
|
color: var(--accent);
|
|
font-family: monospace;
|
|
font-size: 9px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stamp:hover {
|
|
border-style: inset;
|
|
filter: brightness(1.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Timeline of Mew</h1>
|
|
<p class="tagline">Brightest Smile, Bestest Buddy (2013—2026)</p>
|
|
</header>
|
|
|
|
<section id="title-screen">
|
|
<img id="featured-image" src="./library/2013-11-16_04-43-24.jpg" alt="Mew">
|
|
</section>
|
|
|
|
<div class="container" id="timeline">
|
|
</div>
|
|
|
|
<div id="lightbox" onclick="this.style.display='none'">
|
|
<div id="lb-content"></div>
|
|
<div class="lb-caption" id="lb-caption"></div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="webring-title">~*~ MOAR CATS ~*~</div>
|
|
<div class="stamps-grid">
|
|
<a href="https://bigmomo.neocities.org/" target="_blank" class="stamp">BIG MOMO</a>
|
|
<a href="https://allthesecatstho.neocities.org/" target="_blank" class="stamp"
|
|
style="background: #351120;">KEVIN</a>
|
|
<a href="https://graceries.neocities.org/" target="_blank" class="stamp"
|
|
style="background: #112035;">GRACERIES</a>
|
|
</div>
|
|
<p style="font-size: 11px; margin-top: 2rem; color: var(--text-dim); opacity: 0.6;">
|
|
Forever Loved
|
|
</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const MEDIA = [
|
|
{ file: "2013-10-04_11-32-51.jpg", type: "img" },
|
|
{ file: "2013-10-04_11-34-12.jpg", type: "img" },
|
|
{ file: "2013-10-04_11-44-25.jpg", type: "img" },
|
|
{ file: "2013-10-04_11-54-42.jpg", type: "img" },
|
|
{ file: "2013-10-04_21-36-05.jpg", type: "img" },
|
|
{ file: "2013-10-05_01-04-33.jpg", type: "img" },
|
|
{ file: "2013-10-05_01-05-44.jpg", type: "img" },
|
|
{ file: "2013-10-05_01-07-04.jpg", type: "img" },
|
|
{ file: "2013-10-05_18-16-39.jpg", type: "img" },
|
|
{ file: "2013-10-06_12-39-45.jpg", type: "img" },
|
|
{ file: "2013-10-06_16-51-58.jpg", type: "img" },
|
|
{ file: "2013-10-08_14-03-20.jpg", type: "img" },
|
|
{ file: "2013-10-08_14-03-32.jpg", type: "img" },
|
|
{ file: "2013-10-08_14-50-05.jpg", type: "img" },
|
|
{ file: "2013-10-13_13-48-50.jpg", type: "img" },
|
|
{ file: "2013-11-10_04-22-11.jpg", type: "img" },
|
|
{ file: "2013-11-16_04-43-24.jpg", type: "img" },
|
|
{ file: "2013-11-16_04-43-56.jpg", type: "img" },
|
|
{ file: "2013-11-16_04-45-41.jpg", type: "img" },
|
|
{ file: "2013-11-16_04-49-32.jpg", type: "img" },
|
|
{ file: "2013-11-16_04-50-16.jpg", type: "img" },
|
|
{ file: "2013-11-20_10-03-56.jpg", type: "img" },
|
|
{ file: "2013-11-20_10-04-22.jpg", type: "img" },
|
|
{ file: "2013-11-23_21-07-53.jpg", type: "img" },
|
|
{ file: "2013-12-24_09-52-36.jpg", type: "img" },
|
|
{ file: "2014-01-14_23-46-24.jpg", type: "img" },
|
|
{ file: "2014-01-15_13-59-21.jpg", type: "img" },
|
|
{ file: "2014-10-05_17-27-34.jpg", type: "img" },
|
|
{ file: "2014-12-04_18-18-14.jpg", type: "img" },
|
|
{ file: "2015-08-23_19-05-48.jpg", type: "img" },
|
|
{ file: "2015-09-19_03-39-04.jpg", type: "img" },
|
|
{ file: "2015-12-24_11-28-52.jpg", type: "img" },
|
|
{ file: "2016-08-13_16-40-49.jpg", type: "img" },
|
|
{ file: "2016-08-29_22-02-56.jpg", type: "img" },
|
|
{ file: "2016-09-08_21-14-59.jpg", type: "img" },
|
|
{ file: "2016-10-23_23-10-23.jpg", type: "img" },
|
|
{ file: "2016-10-23_23-34-19.jpg", type: "img" },
|
|
{ file: "2016-12-09_10-02-08.jpg", type: "img" },
|
|
{ file: "2016-12-10_21-58-17.jpg", type: "img" },
|
|
{ file: "2016-12-10_21-58-22.jpg", type: "img" },
|
|
{ file: "2016-12-10_21-58-33.jpg", type: "img" },
|
|
{ file: "2016-12-10_22-40-32.jpg", type: "img" },
|
|
{ file: "2016-12-11_06-03-13.jpg", type: "img" },
|
|
{ file: "2016-12-17_22-42-58.gif", type: "img" },
|
|
{ file: "2016-12-18_21-03-31.jpg", type: "img" },
|
|
{ file: "2017-03-08_08-52-13.jpg", type: "img" },
|
|
{ file: "2017-03-15_16-14-27.jpg", type: "img" },
|
|
{ file: "2017-03-31_17-20-19.jpg", type: "img" },
|
|
{ file: "2017-04-01_00-14-00.gif", type: "img" },
|
|
{ file: "2017-04-19_01-50-02.jpg", type: "img" },
|
|
{ file: "2017-06-14_09-51-56.jpg", type: "img" },
|
|
{ file: "2018-01-21_18-02-00.jpg", type: "img" },
|
|
{ file: "2018-01-21_18-04-03.jpg", type: "img" },
|
|
{ file: "2018-01-21_18-23-41_2.jpg", type: "img" },
|
|
{ file: "2018-01-22_02-26-40.jpg", type: "img" },
|
|
{ file: "2018-01-22_10-15-08.jpg", type: "img" },
|
|
{ file: "2018-03-22_12-42-32.jpg", type: "img" },
|
|
{ file: "2018-06-17_00-26-43.jpg", type: "img" },
|
|
{ file: "2018-06-19_06-20-25.gif", type: "img" },
|
|
{ file: "2018-06-19_06-24-35.jpg", type: "img" },
|
|
{ file: "2019-03-24_13-26-19.jpg", type: "img" },
|
|
{ file: "2019-03-24_13-29-40.jpg", type: "img" },
|
|
{ file: "2019-03-24_13-29-45.jpg", type: "img" },
|
|
{ file: "2019-04-06_22-09-24.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-42-51.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-43-14.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-43-26.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-44-49.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-45-05.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-45-15.jpg", type: "img" },
|
|
{ file: "2019-06-26_16-45-30.jpg", type: "img" },
|
|
{ file: "2019-08-13_22-25-52.jpg", type: "img" },
|
|
{ file: "2019-08-13_22-25-54.jpg", type: "img" },
|
|
{ file: "2019-08-13_22-26-16.jpg", type: "img" },
|
|
{ file: "2019-08-30_00-30-01.jpg", type: "img" },
|
|
{ file: "2019-09-02_23-22-36.jpg", type: "img" },
|
|
{ file: "2019-09-04_14-44-02.jpg", type: "img" },
|
|
{ file: "2019-09-09_13-43-30.jpg", type: "img" },
|
|
{ file: "2019-09-09_13-43-34.jpg", type: "img" },
|
|
{ file: "2019-09-09_13-43-45.jpg", type: "img" },
|
|
{ file: "2019-09-10_03-28-24.jpg", type: "img" },
|
|
{ file: "2019-10-21_19-40-51.jpg", type: "img" },
|
|
{ file: "2019-10-21_19-40-55.jpg", type: "img" },
|
|
{ file: "2019-11-29_10-37-37.jpg", type: "img" },
|
|
{ file: "2019-11-29_10-37-46.jpg", type: "img" },
|
|
{ file: "2019-11-29_10-38-17.jpg", type: "img" },
|
|
{ file: "2019-11-29_10-38-30.jpg", type: "img" },
|
|
{ file: "2019-11-29_10-38-33.jpg", type: "img" },
|
|
{ file: "2020-03-01_20-38-41.jpg", type: "img" },
|
|
{ file: "2020-03-01_20-38-43.jpg", type: "img" },
|
|
{ file: "2020-04-04_21-31-48.jpg", type: "img" },
|
|
{ file: "2020-04-13_07-47-36.jpg", type: "img" },
|
|
{ file: "2020-10-22_18-02-17.jpg", type: "img" },
|
|
{ file: "2022-02-09_10-09-03.jpg", type: "img" },
|
|
{ file: "2022-02-09_10-09-26.jpg", type: "img" },
|
|
{ file: "2022-02-09_10-09-53.jpg", type: "img" },
|
|
{ file: "2022-02-09_10-10-09.jpg", type: "img" },
|
|
{ file: "2022-02-09_10-10-29.jpg", type: "img" },
|
|
{ file: "2022-06-27_02-30-51.jpg", type: "img" },
|
|
{ file: "2022-07-17_13-51-33.jpg", type: "img" },
|
|
{ file: "2022-09-20_17-01-50.jpg", type: "img" },
|
|
{ file: "2024-09-27_14-19-30.jpg", type: "img" },
|
|
{ file: "2024-12-26_00-42-51.jpg", type: "img" },
|
|
{ file: "2025-03-19_11-19-46.jpg", type: "img" },
|
|
{ file: "2025-03-19_11-19-46_1.jpg", type: "img" },
|
|
{ file: "2025-03-19_11-19-52.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-08.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-08_1.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-08_4.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-08_6.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-10.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-10_1.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-10_3.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-10_5.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-10_7.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-12.jpg", type: "img" },
|
|
{ file: "2025-03-19_12-07-14_1.jpg", type: "img" },
|
|
{ file: "2025-03-21_03-25-56.jpg", type: "img" },
|
|
{ file: "2025-03-21_03-26-06.jpg", type: "img" },
|
|
{ file: "2025-03-21_03-26-22.jpg", type: "img" },
|
|
{ file: "2025-03-25_20-37-12.jpg", type: "img" },
|
|
{ file: "2025-04-09_01-28-26.jpg", type: "img" },
|
|
{ file: "2025-04-09_01-28-32.jpg", type: "img" },
|
|
{ file: "2025-04-27_22-31-02.jpg", type: "img" },
|
|
{ file: "2025-04-27_22-31-02_1.jpg", type: "img" },
|
|
{ file: "2025-06-22_05-33-20.jpg", type: "img" },
|
|
{ file: "2025-06-22_05-33-42.jpg", type: "img" },
|
|
{ file: "2025-09-03_01-42-43.jpg", type: "img" },
|
|
{ file: "2025-09-03_04-33-34.jpg", type: "img" },
|
|
{ file: "2025-09-03_08-42-26.jpg", type: "img" },
|
|
{ file: "2025-10-16_16-07-12.jpg", type: "img" },
|
|
{ file: "2025-11-02_05-22-30.jpg", type: "img" },
|
|
{ file: "2025-11-20_19-10-28.jpg", type: "img" },
|
|
{ file: "2025-11-29_23-05-00.jpg", type: "img" },
|
|
{ file: "2025-11-29_23-05-02.jpg", type: "img" },
|
|
{ file: "2025-11-29_23-05-04.jpg", type: "img" },
|
|
{ file: "2025-12-01_05-01-50.jpg", type: "img" },
|
|
{ file: "2025-12-01_05-02-00.jpg", type: "img" },
|
|
{ file: "2025-12-01_05-02-08.jpg", type: "img" },
|
|
{ file: "2025-12-01_05-02-10.jpg", type: "img" },
|
|
{ file: "2025-12-08_03-52-02.jpg", type: "img" },
|
|
{ file: "2025-12-08_03-52-12.jpg", type: "img" },
|
|
{ file: "2025-12-15_18-54-22.jpg", type: "img" },
|
|
{ file: "2025-12-15_18-54-28.jpg", type: "img" },
|
|
{ file: "2025-12-19_02-17-50.jpg", type: "img" },
|
|
{ file: "2025-12-23_10-36-00.jpg", type: "img" },
|
|
{ file: "2025-12-23_10-36-14.jpg", type: "img" },
|
|
{ file: "2025-12-23_10-36-16.jpg", type: "img" },
|
|
{ file: "2025-12-28_01-29-12.jpg", type: "img" },
|
|
{ file: "2026-01-03_11-49-00.jpg", type: "img" },
|
|
{ file: "2026-01-17_16-17-34.jpg", type: "img" },
|
|
{ file: "2026-02-13_14-55-30.jpg", type: "img" },
|
|
{ file: "2026-02-13_14-55-48.jpg", type: "img" },
|
|
{ file: "2026-02-20_11-14-05.jpg", type: "img" },
|
|
{ file: "2026-02-20_11-14-15.jpg", type: "img" },
|
|
{ file: "2026-02-20_11-14-18.jpg", type: "img" },
|
|
{ file: "2026-02-20_11-14-23.jpg", type: "img" },
|
|
{ file: "2026-02-20_11-14-26.jpg", type: "img" },
|
|
{ file: "2026-02-20_13-11-03.jpg", type: "img" },
|
|
{ file: "2026-02-20_14-29-46.jpg", type: "img" },
|
|
{ file: "2026-02-22_08-01-22.jpg", type: "img" },
|
|
{ file: "2026-02-22_08-47-23.jpg", type: "img" },
|
|
];
|
|
|
|
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
const timeline = document.getElementById('timeline');
|
|
const lb = document.getElementById('lightbox');
|
|
const lbContent = document.getElementById('lb-content');
|
|
const lbCaption = document.getElementById('lb-caption');
|
|
|
|
function parseDate(file) {
|
|
const m = file.match(/^(\d{4})-(\d{2})-(\d{2})/);
|
|
return m ? { year: m[1], disp: `${MONTHS[parseInt(m[2]) - 1]} ${parseInt(m[3])}, ${m[1]}` } : { year: '?', disp: file };
|
|
}
|
|
|
|
|
|
function init() {
|
|
let currentYear = null;
|
|
let grid = null;
|
|
|
|
MEDIA.forEach(item => {
|
|
const date = parseDate(item.file);
|
|
if (date.year !== currentYear) {
|
|
currentYear = date.year;
|
|
const section = document.createElement('div');
|
|
section.className = 'year-section';
|
|
section.innerHTML = `<div class="year-header"><span>${currentYear}</span></div>`;
|
|
grid = document.createElement('div');
|
|
grid.className = 'grid';
|
|
section.appendChild(grid);
|
|
timeline.appendChild(section);
|
|
}
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'photo-card';
|
|
const src = `./library/${item.file}`;
|
|
|
|
if (item.type === 'video') {
|
|
card.innerHTML = `<video src="${src}" muted loop onmouseenter="this.play()" onmouseleave="this.pause();this.currentTime=0;"></video><div class="label">${date.disp}</div>`;
|
|
} else {
|
|
card.innerHTML = `<img src="${src}" alt="${date.disp}" loading="lazy"><div class="label">${date.disp}</div>`;
|
|
}
|
|
|
|
card.onclick = (e) => {
|
|
e.stopPropagation();
|
|
lbContent.innerHTML = item.type === 'video' ? `<video src="${src}" controls autoplay loop></video>` : `<img src="${src}">`;
|
|
lbCaption.innerText = date.disp;
|
|
lb.style.display = 'flex';
|
|
};
|
|
grid.appendChild(card);
|
|
});
|
|
}
|
|
|
|
init();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |