event entry complete

display note to read and credits

valentines-day-25/js/script.js

@@ -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);

valentines-day-25/style/style.css

@@ -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;
+    height: 2vh;
-    width: 4vw;
+    width: 2vw;
     background-color: #00000000;
     border: none;
     font-size: 2rem;