diff --git a/events/32bit-cafe/v-day-25/img/background.webp b/events/32bit-cafe/v-day-25/img/background.webp new file mode 100644 index 0000000..d39d872 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/background.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-five.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-five.webp new file mode 100644 index 0000000..2722f22 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-five.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-four.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-four.webp new file mode 100644 index 0000000..be56e34 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-four.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-one.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-one.webp new file mode 100644 index 0000000..bb3f93e Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-one.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-seven.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-seven.webp new file mode 100644 index 0000000..3caca60 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-seven.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-six.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-six.webp new file mode 100644 index 0000000..eb0ac05 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-six.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-three.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-three.webp new file mode 100644 index 0000000..e4f823a Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-three.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-two.webp b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-two.webp new file mode 100644 index 0000000..ef3b4ee Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter-thoughts/baxter-thought-two.webp differ diff --git a/events/32bit-cafe/v-day-25/img/baxter.webp b/events/32bit-cafe/v-day-25/img/baxter.webp new file mode 100644 index 0000000..a9490be Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/baxter.webp differ diff --git a/events/32bit-cafe/v-day-25/img/notebook-paper.webp b/events/32bit-cafe/v-day-25/img/notebook-paper.webp new file mode 100644 index 0000000..c0c41f5 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/notebook-paper.webp differ diff --git a/events/32bit-cafe/v-day-25/img/pink-paper.webp b/events/32bit-cafe/v-day-25/img/pink-paper.webp new file mode 100644 index 0000000..c2add56 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/pink-paper.webp differ diff --git a/events/32bit-cafe/v-day-25/img/read.webp b/events/32bit-cafe/v-day-25/img/read.webp new file mode 100644 index 0000000..ad85ada Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/read.webp differ diff --git a/events/32bit-cafe/v-day-25/img/sweets.webp b/events/32bit-cafe/v-day-25/img/sweets.webp new file mode 100644 index 0000000..5a37a44 Binary files /dev/null and b/events/32bit-cafe/v-day-25/img/sweets.webp differ diff --git a/events/32bit-cafe/v-day-25/img/transgender-pride-flag.svg b/events/32bit-cafe/v-day-25/img/transgender-pride-flag.svg new file mode 100644 index 0000000..508feff --- /dev/null +++ b/events/32bit-cafe/v-day-25/img/transgender-pride-flag.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/events/32bit-cafe/v-day-25/index.html b/events/32bit-cafe/v-day-25/index.html new file mode 100644 index 0000000..cffb7af --- /dev/null +++ b/events/32bit-cafe/v-day-25/index.html @@ -0,0 +1,81 @@ + + + + + + For you, Emma + + + + +
+

For you, Emma

+
+ +
+
+ a piece of note paper that must be clicked on to read +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + a box of chocolate cupcakes +
+ +
+ +
+ + +
+ + + the trans pride flag +
+
+ + + + + + + \ No newline at end of file diff --git a/events/32bit-cafe/v-day-25/js/script.js b/events/32bit-cafe/v-day-25/js/script.js new file mode 100644 index 0000000..031c1c6 --- /dev/null +++ b/events/32bit-cafe/v-day-25/js/script.js @@ -0,0 +1,194 @@ +const notesForEmma = { + tileOne: ` +

Love the woman you are. All of her, genuinely. + Don't be afraid of yourself. Don't be afraid to seek help. + Don't be afraid to share yourself with others

`, + tileTwo: ` +

How happy you are to be surrounded by people who understand you. + Who support you. Who love seeing you at your best

`, + tileThree: ` +

You are getting better. + The best part is you can tell you are getting better. + Keep working hard. This story has a happy ending. I promise

`, + tileFour: ` +

Embrace the part of you that is quite simply a goofball. + You don't have to do it just to fit in any more. + You can be silly because quite simply you are sometimes, + and that's a lovely thing about you

`, + tileFive: ` +

You've been taking care of yourself and you are noticing. + How pretty did you think you looked in the mirror with those lashes? + The answer is very. With time all the work you are putting into yourself + will show. You're doing a good job, keep it up

`, + tileSix: ` +

When depression tried to isolate you even further, + you stood up for yourself. You took action. You made friends at one + of your loneliest points. How brave you are to take that risk. + How happy you are to know friendship again

`, + tileSeven: ` +

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. + The only two important things in that moment was the music + and what you felt in your heart

+ + `, + tileEight: ` +

When you're ready, you'll know love again. + True love this time. What you are working on now is true love of + yourself. Romance can wait for you this time

`, + tileNine: ` +

Current times are all but certain. + It is important you don't let your anxiety get the best of you. + Do not doubt yourself, you are capable of so much. + You have been through so much and made it out okay. You can do this

`, + tileTen: ` +

You need to stop drinking coffee. + I know you love it, but you have medication that interacts poorly with + it. Right now you can't handle the potential anxiety that caffeine + introduces. You can't afford to be drinking a pot of coffee at 11 PM. + Please do this for yourself, it will help

`, + tileEleven: ` +

Even though sometimes it feels like they aren't helping. + The things you have started doing to take care of yourself are + objectively good things. They are important for your physical + and mental health. This will take time, but i am so proud of + you for continuing to do these very important things even when + they don't bring you happiness. Because you know they are + important to do regardless

`, + tileTwelve: ` +

Don't run away any more Emma. Don't let depression have that over you. + You have people that care about you. Every day you work so hard on + caring for yourself and doing the things you need to, even if you + still feel like shit at the end of the day. You're in the thick of + it now, you've got depression on the run and it wants to make + one more push to try and take you in the hole with it. + Don't let it. Don't run away

`, +}; + +const readThisMessage = ` +

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."

+ +

"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.

+ +

Any ways you wrote this down in your journal so you'd believe yourself. + Maybe don't stay up so late anymore, hm?

+ +

(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).

+ + `; + +const creditNote = ` +

credits for resources used to make this event entry

+ + `; + +const baxterThoughtImgSrc = [ + "./img/baxter-thoughts/baxter-thought-one.webp", + "./img/baxter-thoughts/baxter-thought-two.webp", + "./img/baxter-thoughts/baxter-thought-three.webp", + "./img/baxter-thoughts/baxter-thought-four.webp", + "./img/baxter-thoughts/baxter-thought-five.webp", + "./img/baxter-thoughts/baxter-thought-six.webp", + "./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) => { + const loveNote = document.querySelector(".love-note"); + loveNote.style.display = "block"; + 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 '; + + const transHeart = document.querySelector(".trans-pride-heart"); + transHeart.style.cursor = "default"; + transHeart.removeEventListener("click", extraLove); +} + +const baxterHeadPat = () => { + const imgSrcArrayNo = Math.floor(Math.random() * 7); + const thoughtBubble = document.querySelector(".baxter-thought"); + + thoughtBubble.src = baxterThoughtImgSrc[imgSrcArrayNo]; +}; + +const closeLoveLetter = () => { + const loveNote = document.querySelector(".love-note"); + loveNote.style.display = "none"; +}; + +const main = () => { + displayReadThisNote(); + + const tiles = document.querySelectorAll(".tile"); + + tiles.forEach((tile) => { + tile.style.cursor = "pointer"; + tile.addEventListener("click", () => { + displayNote(tile); + }); + }); + + const headPats = document.querySelector(".headpats"); + headPats.style.cursor = "pointer"; + headPats.addEventListener("click", baxterHeadPat); + + const transHeart = document.querySelector(".trans-pride-heart"); + transHeart.style.cursor = "pointer"; + transHeart.addEventListener("click", extraLove); + + const readThis = document.querySelector(".read-this"); + readThis.style.cursor = "default"; + readThis.removeEventListener("click", main); +}; + +const credits = document.querySelector(".credits"); +credits.addEventListener("click", displayCredits); + +const readThis = document.querySelector(".read-this"); +readThis.addEventListener("click", main); \ No newline at end of file diff --git a/events/32bit-cafe/v-day-25/site/resources/fonts/alwaysinmyheart.woff2 b/events/32bit-cafe/v-day-25/site/resources/fonts/alwaysinmyheart.woff2 new file mode 100644 index 0000000..2988ce9 Binary files /dev/null and b/events/32bit-cafe/v-day-25/site/resources/fonts/alwaysinmyheart.woff2 differ diff --git a/events/32bit-cafe/v-day-25/site/resources/fonts/learning-curve-regular.woff2 b/events/32bit-cafe/v-day-25/site/resources/fonts/learning-curve-regular.woff2 new file mode 100644 index 0000000..519b120 Binary files /dev/null and b/events/32bit-cafe/v-day-25/site/resources/fonts/learning-curve-regular.woff2 differ diff --git a/events/32bit-cafe/v-day-25/style/style.css b/events/32bit-cafe/v-day-25/style/style.css new file mode 100644 index 0000000..6b14319 --- /dev/null +++ b/events/32bit-cafe/v-day-25/style/style.css @@ -0,0 +1,320 @@ +:root { + --header-footer-color: #BFD9C6CC; + --text-color-light-red: #E94E77; + --link-color: #E94E77; + --link-hover-color: #664625; +} + +@font-face { + font-family: alwaysinmyheart; + src: url("../site/resources/fonts/alwaysinmyheart.woff2"); +} + +@font-face { + font-family: learning-curve-regular; + src: url("../site/resources/fonts/learning-curve-regular.woff2"); +} + +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + height: 100vh; + width: auto; + background-image: url("../img/background.webp"); + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.container { + height: 80vh; + width: auto; + position: relative; + z-index: 0; +} + +img { + max-height: 100%; + width: auto; + object-fit: contain; +} + +header { + width: 100vw; + height: 8vh; + display: flex; + justify-content: center; + align-items: center; + background: var(--header-footer-color); +} + +footer { + width: 100vw; + height: 8vh; + background: var(--header-footer-color); + padding: 0 2rem; +} + +section { + display: flex; + width: 100vw; + height: auto; +} + +a { + text-decoration: none; + color: var(--link-color); +} + +a:hover { + color: var(--link-hover-color); +} + +ul { + list-style-type: none; +} + +li { + padding: 0.25rem; +} + +.footer-container { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; +} + +.cafe { + font-size: 1.25rem; +} + +.message { + margin-left: -15vw; + font-size: 3rem; + font-family: alwaysinmyheart; + color: var(--text-color-light-red); +} + +.credits { + font-size: 1.25rem; +} + +.header-text { + font-family: alwaysinmyheart; + font-size: 3.25rem; + color: var(--text-color-light-red); +} + +.fa-solid.fa-heart { + color: var(--text-color-light-red); +} + +.tileOne { + position: absolute; + left: 26.61%; + top: 25.78%; + width: 10.05%; + height: 16.25%; + z-index: 2; +} + +.tileTwo { + position: absolute; + left: 38.39%; + top: 25.94%; + width: 11.2%; + height: 16.64%; + z-index: 2; +} + +.tileThree { + position: absolute; + left: 50.52%; + top: 25.78%; + width: 11.88%; + height: 17.34%; + z-index: 2; +} + +.tileFour { + position: absolute; + left: 63.44%; + top: 25.94%; + width: 10.89%; + height: 17.27%; + z-index: 2; +} + +.tileFive { + position: absolute; + left: 25.68%; + top: 43.05%; + width: 10.94%; + height: 17.27%; + z-index: 2; +} + +.tileSix { + position: absolute; + left: 37.81%; + top: 43.59%; + width: 11.41%; + height: 17.03%; + z-index: 2; +} + +.tileSeven { + position: absolute; + left: 49.74%; + top: 43.44%; + width: 12.5%; + height: 17.73%; + z-index: 2; +} + +.tileEight { + position: absolute; + left: 62.76%; + top: 43.52%; + width: 12.4%; + height: 17.73%; + z-index: 2; +} + +.tileNine { + position: absolute; + left: 24.74%; + top: 60.94%; + width: 10.57%; + height: 16.48%; + z-index: 2; +} + +.tileTen { + position: absolute; + left: 37.03%; + top: 61.33%; + width: 11.77%; + height: 16.56%; + z-index: 2; +} + +.tileEleven { + position: absolute; + left: 49.64%; + top: 61.64%; + width: 12.03%; + height: 17.19%; + z-index: 2; +} + +.tileTwelve { + position: absolute; + left: 62.55%; + top: 61.8%; + width: 13.07%; + height: 17.11%; + z-index: 2; +} + +.visitor-note { + margin: 0 2rem; + margin-top: 3rem; +} + +.read-this { + cursor: pointer; + height: 250px; + width: auto; +} + +.love-note { + height: 80vh; + width: 40vw; + background-image: url(../img/pink-paper.webp); + padding: 3rem; + z-index: 3; + position: absolute; + left: 25%; + display: none; +} + +.note { + font-size: 1.75rem; + line-height: 2rem; + margin-bottom: 1rem; + font-family: learning-curve-regular; +} + +.close-note { + height: 2vh; + width: 2vw; + background-color: #00000000; + border: none; + font-size: 2rem; + display: none; +} + +.close-note::after { + display: inline-block; + content: "\00d7"; +} + +.items { + display: flex; + flex-direction: column; +} + +.baxter { + width: 300px; + height: auto; + position: absolute; + top: 20%; + z-index: 1; +} + +.headpats { + position: absolute; + left: 86.12%; + top: 23.2%; + width: 3%; + height: 3.03%; + transform: rotate(17deg); + z-index: 2; +} + +.baxter-thought { + position: relative; + top: -2%; + left: 85%; + width: 20%; + height: 20%; + width: 150px; + height: 125px; +} + +.trans-pride-heart { + width: 200px; + margin-left: 3rem; + aspect-ratio: 1; + object-fit: cover; + mask: + radial-gradient(at 70% 31%,#000 29%,#0000 30%), + radial-gradient(at 30% 31%,#000 29%,#0000 30%), + linear-gradient(#000 0 0) bottom/100% 50% no-repeat; + clip-path: polygon(-41% 0,50% 91%, 141% 0); + position: relative; + top: 40%; + left: 15%; + transform: rotate(-15deg); +} \ No newline at end of file