zepp
/
my-cafe-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

event entry complete 

display note to read and credits
This commit is contained in:
emma 2025-02-09 21:31:17 -05:00
parent 264cd663bf
commit 2e861d8154
2 changed files with 74 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
valentines-day-25/js/script.js
View File

@ -26,7 +26,7 @@ const notesForEmma = {
of your loneliest points. How brave you are to take that risk.
How happy you are to know friendship again</p>`,
tileSeven: `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
<p class="note" style="margin-bottom: 2rem;">There's a song i want you to listen to.
<p class="note">There's a song i want you to listen to.
You haven't listened to it in a long time.
I want you to remember the times you used to dream of dancing
and twirling in your apartment with the stereo on.
@ -72,7 +72,46 @@ const notesForEmma = {
Don't let it. Don't run away</p>`,
};
const creditNote = ``;
const readThisMessage = `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
<p class="note">You were out late last night, again. A craving for chocolate
had sent you on a quest late at night. You needed something special. This was
no time for a Hershey's bar. You took the bus into the city, and found a specialty
shop. Quite odd, when did this show up? You entered and a woman behind the counter
said "You need these, i can tell."</p>
<p class="note">"Honey, quite simply, you look like you've seen some shit" she said in
a playful, yet caring tone. "This box here, each item comes with a note, the notes all
have something you've desperately needed to hear. Take them, no charge." Free candy?
Who could resist? Certainly not me.</p>
<p class="note">Any ways you wrote this down in your journal so you'd believe yourself.
Maybe don't stay up so late anymore, hm?</p>
<p>(a note to the visitor - other items on the page are clickable! Baxter however may
have a bit of a preference on where he wants pets).</p>
`;
const creditNote = `<button class="close-note" style="display: inline-block; margin-left: 30vw; cursor: pointer;" onclick="closeLoveLetter()"></button>
<h1>credits for resources used to make this event entry</h1>
<ul>
<li><a href="https://www.pexels.com/photo/sweets-on-brown-box-6441133/" target="_blank">sweets in brown box</a> - Gustavo Peres</li>
<li><a href="https://pixabay.com/photos/paper-stationery-old-grunge-7834713/" target="_blank">paper stationary old</a> - flutie8211</li>
<li><a href="https://pixabay.com/illustrations/paper-lines-background-template-878964/" target="_blank">paper lines background</a> - geralt</li>
<li><a href="https://zaneray.com/responsive-image-map/" target="_blank">responsive image map maker</a> - The ZoneRay Group</li>
<li><a href="https://commons.wikimedia.org/wiki/File:Transgender_Pride_flag.svg" target="_blank">transgender pride flag</a> - wikimedia commons</li>
<li><a href="https://css-tip.com/image-heart-shape/" target="_blank">turn an image into a heart</a> - CSS Tip</li>
<li><a href="https://www.remove.bg/" target="_blank">Remove Background from Image</a> - remove.bg</li>
<li><a href="https://www.colourlovers.com/pattern/1748168/Love_Me" target="_blank">Love me - Pattern</a> - Zinebski</li>
<li><a href="https://www.colourlovers.com/palette/2285499/Nestled" target="_blank">Nestled - palette</a> - museshand</li>
<li><a href="https://www.colourlovers.com/palette/867235/LoversInJapan" target=_blank">Lovers in Japan - palette</a> - lovelyrita</li>
<li><a href="https://bvfonts.com/fonts/details.php?id=76" target="_blank">Learning Curve Pro - font</a></li>
<li><a href="https://www.fontspace.com/always-in-my-heart-font-f16367" target="_blank">Always In My Heart - font</a> - ByTheButterfly</li>
<li><a href="https://fontawesome.com/" target="_blank">fontawesome - heart icon</a></li>
<li><a href="https://tirifto.xwx.moe/en/emoji/blobcats.html" target="_blank">blobcats</a> - Tirifto</li>
<li><a href="https://pixabay.com/illustrations/thought-bubble-thoughts-think-7791595/" target="_blank">Thought bubble</a> - einsichtsweise</li>
</ul>
`;
const baxterThoughtImgSrc = [
"../img/baxter-thoughts/baxter-thought-one.webp",
@ -84,17 +123,24 @@ const baxterThoughtImgSrc = [
"../img/baxter-thoughts/baxter-thought-seven.webp"
];
const displayReadThisNote = () => {
const readNote = document.querySelector(".love-note");
readNote.style.display = "block";
readNote.innerHTML = readThisMessage;
};
const displayNote = (noteName) => {
// console.log(`${notesForEmma[noteName.className.split(' ')[0]]}`);
const loveNote = document.querySelector(".love-note");
loveNote.style.display = "block";
loveNote.style.backgroundImage = "url(../img/pink-paper.webp)";
loveNote.style.height = "80vh";
loveNote.style.width = "40vw";
loveNote.style.padding = "3rem";
loveNote.innerHTML = notesForEmma[noteName.className.split(' ')[0]];
};
const displayCredits = () => {
const credits = document.querySelector(".love-note");
credits.style.display = "block";
credits.innerHTML = creditNote;
};
const extraLove = () => {
const header = document.querySelector(".header-text");
header.innerHTML += '. Always <i class="fa-solid fa-heart"></i>';
@ -117,6 +163,8 @@ const closeLoveLetter = () => {
};
const main = () => {
displayReadThisNote();
const tiles = document.querySelectorAll(".tile");
tiles.forEach((tile) => {
@ -139,5 +187,8 @@ const main = () => {
readThis.removeEventListener("click", main);
};
const credits = document.querySelector(".credits");
credits.addEventListener("click", displayCredits);
const readThis = document.querySelector(".read-this");
readThis.addEventListener("click", main);

18
valentines-day-25/style/style.css
View File

@ -79,6 +79,14 @@ a:hover {
color: var(--link-hover-color);
}
ul {
list-style-type: none;
}
li {
padding: 0.5rem;
}
.footer-container {
display: flex;
width: 100%;
@ -231,6 +239,10 @@ a:hover {
}
.love-note {
height: 80vh;
width: 40vw;
background-image: url(../img/pink-paper.webp);
padding: 3rem;
z-index: 3;
position: absolute;
left: 25%;
@ -239,12 +251,14 @@ a:hover {
.note {
font-size: 1.75rem;
line-height: 2rem;
margin-bottom: 1rem;
font-family: learning-curve-regular;
}
.close-note {
height: 4vh;
width: 4vw;
height: 2vh;
width: 2vw;
background-color: #00000000;
border: none;
font-size: 2rem;