mirror of
https://github.com/Rushilwiz/maya.git
synced 2025-04-04 02:30:16 -04:00
220 lines
13 KiB
HTML
220 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>maya</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="mobile-helper">This is best viewed on a mobile device.</div>
|
||
<img src="img/maya.png" class="hero-img" alt="maya" />
|
||
<div class="hero">
|
||
<div class="title-wrapper">
|
||
<svg
|
||
class="maya-title"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 175 60"
|
||
fill="none"
|
||
>
|
||
<path
|
||
d="M133.102 22.5884C133.634 21.9049 133.763 15.8044 133.968 15.0315C134.191 14.1921 134.474 13.0048 134.821 12.1527C135.298 10.982 136.385 9.82319 137.088 8.91401C137.709 8.1099 138.08 7.6114 138.937 6.771C140.468 5.269 142.255 3.13434 144.243 2.6688C144.719 2.55728 145.119 2.5075 145.613 2.42223C147.387 2.11553 148.734 1.67865 150.234 2.36435C150.854 2.64769 151.322 3.05785 151.552 3.34602C152.032 3.94838 152.374 5.46204 152.444 6.7549C152.538 8.51578 152.064 10.4437 151.741 12.1527C151.619 12.798 151.421 13.7066 151.297 14.3118C151.195 14.8102 151.11 15.1853 150.992 15.7512C150.812 16.6137 150.611 18.0442 150.367 18.6201C150.288 18.8076 150.102 19.1288 149.853 19.3092C149.488 19.5737 149.297 19.5959 149.207 19.6324C148.827 19.7846 148.623 19.8199 147.838 20.1365C146.549 20.6565 144.512 22.8154 142.874 23.9639C140.88 25.3616 137.881 26.9453 135.685 27.2423C134.984 27.337 134.005 27.5806 133.513 26.7002C133.123 26.0012 133.139 25.3997 133.12 24.5676C133.101 23.787 133.137 23.1228 133.102 22.5884ZM133.102 22.5884C133.03 21.4775 133.003 19.6534 133.102 18.0902C133.127 17.6939 133.094 16.9689 132.941 16.651L132.262 15.4655M133.923 15.1959C133.916 15.1971 132.27 15.464 132.262 15.4655M113.358 23.5897C114.139 23.327 114.455 22.6253 118.545 20.3077C125.161 17.6154 121.041 19.3116 122.333 18.7732C124.01 18.0749 125.609 17.3583 127.297 16.6508C127.885 16.4044 131.668 15.5675 132.262 15.4655M113.358 23.5897C112.946 23.7286 111.869 24.2934 111.721 24.3202C111.238 24.4073 111.035 24.4378 109.838 24.754C107.914 25.2619 105.978 26.6221 104.189 27.936C99.4005 31.4533 95.7941 35.821 93.2784 41.3007C92.4106 43.1912 92.0817 45.259 91.8734 47.2382C91.6326 49.5262 91.8452 51.7116 92.6375 53.7156C93.0709 54.8119 93.6101 55.9592 94.4393 56.736C94.9057 57.1728 95.5175 57.5365 96.1441 57.7419C96.6907 57.9212 97.0668 58.0329 97.6847 57.9913C98.5905 57.9303 99.6059 57.6747 100.423 57.3269C101.944 56.6798 102.969 55.6327 104.173 54.2553C105.341 52.9203 106.362 51.216 107.097 49.3973C107.546 48.2858 107.806 47.359 108.106 46.1587C109.324 41.2884 110.526 36.1571 111.657 31.4048C111.951 30.169 112.433 27.7488 112.55 26.7267C112.674 25.6415 113.353 24.2146 113.358 23.5897ZM113.358 23.5897L117.527 7.92308C119.054 2 111.853 13.4141 110.203 15.1055C108.216 17.1435 105.547 21.0345 103.324 22.5921C102.361 23.2672 99.9005 24.2316 98.8829 24.4319C98.1561 24.5749 97.0924 25.2315 96.5608 24.3304C96.0659 23.4921 96.3153 22.8853 96.3153 22.0486C96.3153 21.1551 96.2321 20.6752 96.3273 19.8895C96.3877 19.3906 96.5688 18.5295 96.6695 18.1538C96.8442 17.5023 97.2241 16.0077 97.4565 15.275C97.8045 14.1779 98.1797 13.5672 98.6501 12.5125C98.9875 11.7561 99.3459 11.0903 99.6965 10.3534C100.748 8.14281 101.697 5.97501 102.477 4.41586M55.6688 18.0902C55.6045 18.7788 55.8554 19.0125 55.895 19.3497C56.0018 20.2605 56.0194 21.4136 56.0834 22.9482C56.0981 23.3021 56.0747 24.4134 56.0968 24.9274C56.1293 25.6809 55.9809 26.697 56.9687 27.167C57.5142 27.4264 58.0995 27.3154 58.8288 27.2155C59.4108 27.1358 60.1097 26.9581 60.7117 26.7609C62.7149 26.1045 64.6225 24.8229 66.3604 23.5382C67.5351 22.6699 68.9875 21.1249 70.1261 20.444C71.3711 19.6995 71.6432 19.826 72.0088 19.6721C72.1305 19.621 72.2822 19.6144 72.6709 19.3362C72.9808 19.1147 73.2623 18.6122 73.3318 18.4474C73.5294 17.9783 73.7897 16.329 73.9518 15.5713C74.11 14.8315 74.2188 14.3261 74.3695 13.5921C74.827 11.3645 75.2854 9.02135 75.2606 6.7549C75.2443 5.26814 75.0144 3.95493 74.4533 3.29465C74.2243 3.02507 73.7815 2.62434 73.207 2.37892C72.3339 2.00592 70.9241 2.06364 70.2973 2.15333C68.7641 2.3727 68.159 2.14316 66.5315 2.86733C64.9302 3.57985 63.4915 5.16437 62.0811 6.58206C59.7306 8.94463 57.8874 11.1606 56.973 14.6716C56.5396 16.336 56.433 16.5311 56.0454 17.1906C55.9965 17.2741 55.7099 17.6507 55.6688 18.0902ZM55.6688 18.0902C55.6117 18.0902 55.5474 18.1125 53.4018 19.6721C52.7642 20.1355 50.7054 20.9881 50.0837 21.6888C49.6284 22.2019 49.2645 22.5837 48.7297 23.0445C47.9492 23.7172 47.049 24.3634 46.1622 24.8713C44.9708 25.5532 43.7404 25.892 42.3964 25.9908C41.2047 26.0786 40.3122 26.0367 39.4865 25.6943C38.8668 25.4372 38.2561 24.7277 37.9168 23.8479C37.6248 23.0902 37.506 22.5445 37.5341 21.6888C37.6324 18.6977 38.1604 15.6754 38.4304 12.6925C38.5024 11.8968 38.567 10.7576 38.4776 9.99357C38.4148 9.45707 38.3253 9.09097 38.1642 8.55431C38.0403 8.14169 37.9485 7.83946 37.6875 7.55C37.3434 7.16841 36.8968 7.0522 36.4054 6.9376C35.5682 6.74242 34.8503 6.78815 34.009 6.91137C33.1961 7.03042 32.401 7.17154 31.6126 7.56333C30.2785 8.22627 29.1729 9.4516 28.1166 10.7126C27.1105 11.9134 26.0562 12.2871 25.6216 12.4874C25.4816 12.5519 25.3075 12.744 24.7659 12.852C24.457 12.9136 24.281 12.839 24.2624 12.8291C24.0142 12.6976 23.7843 12.7084 23.5638 11.7927C23.3723 10.9967 23.235 9.80511 22.9529 8.91401C22.5945 7.78206 22.1333 6.96971 21 6.51445C20.176 6.18338 19.5979 6.18657 18.6036 6.18792C17.7204 6.18911 17.2887 6.26654 16.3784 6.60759C15.4556 6.9533 14.8339 7.39018 13.982 7.96537C11.5712 9.59319 11.1547 9.24954 10.733 9.51917C10.6003 9.60406 10.3749 9.58924 10.0491 10.1924C9.86285 10.5373 9.84046 10.9942 9.82831 11.0731C9.73992 11.6469 9.709 12.0591 9.55385 13.2322C9.4475 14.0363 8.81352 16.9162 8.50451 17.9103C7.57275 20.9075 6.80337 24.4925 5.93694 26.9066M9.87387 9.81364C7.80828 9.81961 7.91422 10.0833 7.30631 10.279C6.7033 10.4731 5.09022 11.2961 4.3964 11.9221C3.18897 13.0115 2.73223 13.1386 2.17117 13.2322H2M24.2523 13.0523C24.2206 13.8261 23.8661 15.5761 23.6401 16.6508C23.1248 19.1038 22.4702 21.5292 22.0409 24.2077C21.9276 24.915 21.8709 25.2362 21.8559 26.007M150.234 19.3497C150.413 19.7011 150.458 20.5394 150.592 22.5884C150.628 23.1422 150.699 23.5308 150.771 24.0278C150.898 24.9065 151.388 26.0584 152.289 26.3209C153.559 26.6912 154.855 26.4699 156.225 26.2626C157.679 26.0426 159.485 25.3049 160.847 24.614C162.307 23.8732 163.856 23.0139 165.297 22.2751C166.425 21.6976 167.446 21.1209 168.55 20.6097C169.259 20.281 170.383 19.6855 170.946 19.4611C172.609 18.7986 172.592 19.1701 173 19.1698M73.036 19.3497C73.2084 19.6892 73.2859 20.3953 73.3938 22.0486C73.4568 23.017 73.5264 23.6278 73.724 24.3876C74.0602 25.6815 74.8505 26.3451 75.946 26.4948C78.3307 26.8204 80.3954 26.1344 82.6216 25.1788C84.7495 24.2653 86.5998 23.1508 88.6126 22.093C89.8803 21.4268 92.2113 20.1223 93.5766 19.8182C94.8778 19.5284 95.1375 19.2794 96.1442 19.7096"
|
||
stroke="#030303"
|
||
stroke-width="4"
|
||
stroke-linecap="round"
|
||
id="maya-path"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div class="subtitle">
|
||
<h2>thank you.</h2>
|
||
</div>
|
||
</div>
|
||
<div class="poem">
|
||
<div class="poem-title">
|
||
<h1>maya. maya. maya.</h1>
|
||
<h2>by: rushil</h2>
|
||
</div>
|
||
<div class="poem-text">
|
||
<div class="poem-slide" id="slide-1">
|
||
<p>Maya, maya, maya.</p>
|
||
<p>Welcome home,</p>
|
||
<p>it's so nice to meet you.</p>
|
||
<p>This is our family,</p>
|
||
<p>feel free to roam.</p>
|
||
</div>
|
||
<div class="poem-slide hide" id="slide-2">
|
||
<p>Maya, maya, maya.</p>
|
||
<p>Get off the sofa!</p>
|
||
<p>Don't feed her too much!</p>
|
||
<p>What type of dog is she?</p>
|
||
<p>Duck-tolling, nova-scotia?</p>
|
||
</div>
|
||
<div class="poem-slide hide" id="slide-3">
|
||
<p>Maya, maya, maya.</p>
|
||
<p>You're so well-trained and good-mannered.</p>
|
||
<p>It's like you've been here for years,</p>
|
||
<p>blending into our world without a single barrier.</p>
|
||
<p>You've even got Dada enamored.</p>
|
||
</div>
|
||
<div class="poem-slide hide" id="slide-4">
|
||
<p>Maya, maya, maya.</p>
|
||
<p>Jump around, such a lively soul!</p>
|
||
<p>Fetch, wrestle, run.</p>
|
||
<p>Even when you dream,</p>
|
||
<p>still trying to catch that mole.</p>
|
||
</div>
|
||
<div class="poem-slide hide" id="slide-5">
|
||
<p>Maya, maya, maya.</p>
|
||
<p>Everyone got busy or mad or sad!</p>
|
||
<p>You just keep a smile on your face,</p>
|
||
<p>give your tail a little wag.</p>
|
||
<p>To have you, we're so glad.</p>
|
||
</div>
|
||
<div class="poem-slide hide" id="slide-6">
|
||
<p>Maya, maya, maya.</p>
|
||
<p>You fill my memories with fun times.</p>
|
||
<p>Being there with our family,</p>
|
||
<p>laughing long into the night.</p>
|
||
<p>You'll always be there when I close my eyes.</p>
|
||
</div>
|
||
<div class="poem-slide hide" id="slide-7">
|
||
<p>And here we are,</p>
|
||
<p>as my tears blend into the rain.</p>
|
||
<p>I say,</p>
|
||
<p>“Maya, maya, maya,</p>
|
||
<p>Till I see you again”</p>
|
||
</div>
|
||
</div>
|
||
<div class="poem-controls">
|
||
<div class="back">
|
||
<svg
|
||
width="15"
|
||
height="26"
|
||
viewBox="0 0 15 26"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M14 25L1 13.1721L13.9999 1" stroke="black" />
|
||
</svg>
|
||
</div>
|
||
<div class="play-pause">
|
||
<svg
|
||
id="play-icon"
|
||
width="20"
|
||
height="23"
|
||
viewBox="0 0 20 23"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M1 22V1L19 11L1 22Z" stroke="black" />
|
||
</svg>
|
||
<svg
|
||
id="pause-icon"
|
||
class="hide"
|
||
width="20"
|
||
height="21"
|
||
viewBox="-2 0 20 21"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M15 0V21M1 0V21" stroke="black" />
|
||
</svg>
|
||
</div>
|
||
<div class="forward">
|
||
<svg
|
||
width="15"
|
||
height="26"
|
||
viewBox="0 0 15 26"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M0.999974 1L14 12.8279L1.00005 25" stroke="black" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="memorial">
|
||
<img src="img/resting.png" alt="image of maya's final resting place" />
|
||
<div class="name">
|
||
<h1>maya ace-patel</h1>
|
||
<h2>forever - 2024</h2>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<p>shh... she’s sleeping!</p>
|
||
<img src="img/sleeping.png" alt="maya sleeping" />
|
||
</div>
|
||
<script>
|
||
const poemSlides = document.querySelectorAll(".poem-slide");
|
||
const playPause = document.querySelector(".play-pause");
|
||
const playIcon = document.getElementById("play-icon");
|
||
const pauseIcon = document.getElementById("pause-icon");
|
||
const back = document.querySelector(".back");
|
||
const forward = document.querySelector(".forward");
|
||
let currentSlide = 0;
|
||
let isPlaying = false;
|
||
let interval;
|
||
|
||
function play() {
|
||
isPlaying = true;
|
||
playIcon.classList.add("hide");
|
||
pauseIcon.classList.remove("hide");
|
||
interval = setInterval(() => {
|
||
if (currentSlide === poemSlides.length - 1) {
|
||
currentSlide = 0;
|
||
} else {
|
||
currentSlide++;
|
||
}
|
||
updateSlide();
|
||
}, 2000);
|
||
}
|
||
|
||
function pause() {
|
||
isPlaying = false;
|
||
playIcon.classList.remove("hide");
|
||
pauseIcon.classList.add("hide");
|
||
clearInterval(interval);
|
||
}
|
||
|
||
function updateSlide() {
|
||
poemSlides.forEach((slide, index) => {
|
||
if (index === currentSlide) {
|
||
slide.classList.remove("hide");
|
||
} else {
|
||
slide.classList.add("hide");
|
||
}
|
||
});
|
||
}
|
||
|
||
playPause.addEventListener("click", () => {
|
||
if (isPlaying) {
|
||
pause();
|
||
} else {
|
||
play();
|
||
}
|
||
});
|
||
|
||
back.addEventListener("click", () => {
|
||
if (currentSlide === 0) {
|
||
currentSlide = poemSlides.length - 1;
|
||
} else {
|
||
currentSlide--;
|
||
}
|
||
updateSlide();
|
||
});
|
||
|
||
forward.addEventListener("click", () => {
|
||
if (currentSlide === poemSlides.length - 1) {
|
||
currentSlide = 0;
|
||
} else {
|
||
currentSlide++;
|
||
}
|
||
updateSlide();
|
||
});
|
||
|
||
updateSlide();
|
||
</script>
|
||
</body>
|
||
</html>
|