diff --git a/source/8ball/docs/demo-video/2023-04-25 23-26-25.mp4 b/source/8ball/docs/demo-video/2023-04-25 23-26-25.mp4 deleted file mode 100644 index 63538a99..00000000 Binary files a/source/8ball/docs/demo-video/2023-04-25 23-26-25.mp4 and /dev/null differ diff --git a/source/8ball/docs/documentation/documentation.md b/source/8ball/docs/documentation/documentation.md deleted file mode 100644 index 0dbbb67f..00000000 --- a/source/8ball/docs/documentation/documentation.md +++ /dev/null @@ -1,35 +0,0 @@ -# Documentation -This document contains a list of the decisions made during the development of the magic 8 ball application. - -# Get 8-ball responses -``` -A magic 8 ball needs to have a pool of responses to randomly output. So we just googled a list of some sample magic 8 ball responses and used that as the answer bank for our application. -``` -# Add an 8 ball picture -``` -A magic 8 ball application would not be a magic 8 ball app if there was no magic 8 ball icon anywhere. So we decided to stick one in the middle of the page to communicate that this really is a magic 8 ball application. -``` -# Add a form -``` -The user needs a way to ask the magic 8 ball something and a way to "submit" it for "processing" so we made an form that allows the user to do just that. We added an input that allows the user to type a question and a submit button so they can "submit" it to the 8-ball. -``` -# Style the "ASK!" button -``` -The "ASK!" button looked kind of boring so we looked up some cool buttons styled using CSS and chose one with on-hover particle effects that we all liked to make the button stand out. -``` -# Add animation to 8 ball after "ASK!" button is pressed -``` -The motive behind this is to give the user a visual indicator that their request/question has gone through and is being processed by the magic 8 ball. It also gives us an opportunity to add a delay before giving the user a response, just like how a magic 8 ball would in real life (responses are not instant). -``` -# Add sound effect to 8 ball after "ASK!" button is pressed -``` -From the 8-ball demos in class, we found the ones that had sound effects to be the most fun and engaging. Thus, we decided to make it so that when the "ASK!" button is pressed a sound effect would play along with the animation to make it "cooler". -``` -# Add narration to the response -``` -Like what we mentioned above, the 8-balls that had sound effects seemed better than the others so we decided to extend that a bit by having the 8-ball narrate the response out loud to us. Plus, this serves as an accessibility feature for those who are visually impaired. -``` -# Add a background image -``` -We got tired of staring at a white background and thought we should change it up a bit. So we had an image generation AI create us a "fortune telling, mysterious background" and made it the background of our website. The sizing/scaling is not perfect, but that can be addressed in future iterations of the product. -``` diff --git a/source/8ball/docs/img/background.png b/source/8ball/docs/img/background.png deleted file mode 100644 index 03af2147..00000000 Binary files a/source/8ball/docs/img/background.png and /dev/null differ diff --git a/source/8ball/docs/img/eightball.gif b/source/8ball/docs/img/eightball.gif deleted file mode 100644 index 927a830c..00000000 Binary files a/source/8ball/docs/img/eightball.gif and /dev/null differ diff --git a/source/8ball/docs/index.html b/source/8ball/docs/index.html deleted file mode 100644 index 0a7c6174..00000000 --- a/source/8ball/docs/index.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - - - - Document - - - - -

Magic 8 Ball

-

Ask a yes or no question, and the Magic 8 Ball will answer.

-
- - -
-
 
-
- - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - \ No newline at end of file diff --git a/source/8ball/docs/presentation-slides/Magic 8 Ball Group 20.pdf b/source/8ball/docs/presentation-slides/Magic 8 Ball Group 20.pdf deleted file mode 100644 index c887b745..00000000 Binary files a/source/8ball/docs/presentation-slides/Magic 8 Ball Group 20.pdf and /dev/null differ diff --git a/source/8ball/docs/presentation-slides/Magic 8 Ball Group 20.pptx b/source/8ball/docs/presentation-slides/Magic 8 Ball Group 20.pptx deleted file mode 100644 index 165f4ccc..00000000 Binary files a/source/8ball/docs/presentation-slides/Magic 8 Ball Group 20.pptx and /dev/null differ diff --git a/source/8ball/docs/queries.txt b/source/8ball/docs/queries.txt deleted file mode 100644 index d50f26ed..00000000 --- a/source/8ball/docs/queries.txt +++ /dev/null @@ -1,52 +0,0 @@ -Initial query to ChatGPT 3.5 - Write the HTML, CSS, and Javascript to build a website that has a magic 8ball. This magic 8ball will give the user a prompt to ask it a question. The website will then output one of these answers: It is certain. - ● It is decidedly so. - ● Without a doubt. - ● Yes definitely. - ● You may rely on it. - - ● As I see it, yes. - ● Most likely. - ● Outlook good. - ● Yes. - ● Signs point to yes. - - ● Reply hazy, try again. - ● Ask again later. - ● Better not tell you now. - ● Cannot predict now. - ● Concentrate and ask again. - - ● Don't count on it. - ● My reply is no. - ● My sources say no. - ● Outlook not so good. - ● Very doubtful. - -Query 2 to ChatGPT 3.5 - Now write an animation for an 8ball gif. - The middle of the 8ball gif should spin and eventually output the random answer from var answers - -Query 3 to ChatGPT 3.5 - Now rewrite this code so that the animation does 1 complete rotation - only after the submit button is pressed. - -Query 4 to ChatGPT 3.5 - Now add an audio clip called magic-8-ball-sound.wav that plays when the submit button is pressed. - - - -Query 5 to ChatGPT 3.5 - Now rewrite this code so that it includes an image called background.png as the background for the website. Make all the text on the website white. - -Query 6 to Lovo - Generate audio based on the text of each possible answer. - -Query 7 to ChatGPT 3.5 -write code to set a timeout on the submit button so that it cannot be pressed for 5 seconds after it has been pressed. - -Query 8 to ChatGPT 3.5 (https://platform.openai.com/playground) - Write code to change the font to Enchanted Land.otf - -Query 9 to ChatGPT 3.5 (https://platform.openai.com/playground) - Rewrite code so that the font of the whole website is Enchanted Land.otf diff --git a/source/8ball/docs/script.js b/source/8ball/docs/script.js deleted file mode 100644 index f91422c2..00000000 --- a/source/8ball/docs/script.js +++ /dev/null @@ -1,174 +0,0 @@ -document.getElementById('question-form').onsubmit = function(event) { - // Prevent actually submitting the form, which will leave the page - event.preventDefault(); - - // Set a 5 second timeout - document.getElementById('submit').disabled = true; - setTimeout(function() { - document.getElementById('submit').disabled = false; - }, 5000); - // Get the user's question - var question = document.getElementById('question').value; - - // List of possible answers - var answers = [ - 'It is certain.', - 'It is decidedly so.', - 'Without a doubt.', - 'Yes definitely.', - 'You may rely on it.', - 'As I see it, yes.', - 'Most likely.', - 'Yes.', - 'Signs point to yes.', - 'Outlook good.', - 'Reply hazy, try again.', - 'Ask again later.', - 'Better not tell you now.', - 'Cannot predict now.', - 'Concentrate and ask again.', - 'Don\'t count on it.', - 'My reply is no.', - 'My sources say no.', - 'Outlook not so good.', - 'Very doubtful.' - ]; - - // List of possible voices - var voices = [ - 'sound1', - 'sound2', - 'sound3', - 'sound4', - 'sound5', - 'sound6', - 'sound7', - 'sound8', - 'sound9', - 'sound10', - 'sound11', - 'sound12', - 'sound13', - 'sound14', - 'sound15', - 'sound16', - 'sound17', - 'sound18', - 'sound19', - 'sound20' - ] - - // Generate a random number between 0 and the length of the answers array - var randomNumber = Math.floor(Math.random() * answers.length); - - // Play the sound - document.getElementById('eightball-sound').play(); - - // Animate the 8Ball - document.getElementById('eightball-wrapper').className = 'spinning'; - - // Reset the answer animation - document.getElementById('answer').style.animation = 'none'; - - // Change the particles to red - document.body.classList.add('thinking'); - - // Display the answer - setTimeout(function() { - document.getElementById('eightball-wrapper').className = ''; - document.getElementById('answer').textContent = answers[randomNumber]; - document.getElementById('answer').style.animation = null; - document.body.classList.remove('thinking'); - document.getElementById(voices[randomNumber]).play(); - }, 3000); - -}; - -document.getElementById('eightball').addEventListener('click', () => { - document.getElementById('submit').click(); -}); - -const runTests = false; - -if (runTests) { - // Test that the Magic 8 Ball page loads successfully - (function() { - var magic8BallPage = document.getElementsByTagName('html')[0]; - if (magic8BallPage) { - console.log('Magic 8 Ball page loaded successfully'); - } else { - console.error('Error: Magic 8 Ball page did not load'); - } - })(); - - // Test that the question input and submit button exist - (function() { - var questionInput = document.getElementById('question'); - var submitButton = document.getElementById('submit'); - if (questionInput && submitButton) { - console.log('Question input and submit button exist on the page'); - } else { - console.error('Error: Question input or submit button does not exist'); - } - })(); - - // Test that the Magic 8 Ball gives a response to a question - (function() { - var questionInput = document.getElementById('question'); - var submitButton = document.getElementById('submit'); - var answerDiv = document.getElementById('answer'); - - // Set a question and click the submit button - questionInput.value = 'Will it rain today?'; - submitButton.click(); - - // Wait for the response to be displayed - setTimeout(function() { - if (answerDiv.textContent.trim()) { - console.log('Magic 8 Ball gave a response'); - } else { - console.error('Error: Magic 8 Ball did not give a response'); - } - }, 4000); - })(); -} - -const TIME_PER_PARTICLE = 100; -let particles = []; -let lastParticleTime = 0; -const PARTICLE_LIFETIME = 5000; - -function frame () { - const now = Date.now(); - - if (now - lastParticleTime > TIME_PER_PARTICLE) { - lastParticleTime = now; - const element = Object.assign(document.createElement('div'), { - className: 'particle' - }); - element.style.opacity = Math.random() * 0.5 + 0.2; - element.style.transform = `scale(${Math.random() * 0.2 + 0.9})`; - document.getElementById('particles').append(element); - particles.push({ - element, - x: Math.random(), - dx: Math.random() * 0.4 - 0.2, - birth: now - }); - } - - for (const particle of particles) { - const t = (now - particle.birth) / PARTICLE_LIFETIME; - if (t > 1) { - particle.dead = true; - particle.element.remove(); - continue; - } - particle.element.style.left = `${(particle.x + particle.dx * t) * 100}%`; - particle.element.style.bottom = `${t * 100}%`; - } - particles = particles.filter(particle => !particle.dead); - - window.requestAnimationFrame(frame); -} -frame(); diff --git a/source/8ball/docs/sounds/magic-8-ball-sound.wav b/source/8ball/docs/sounds/magic-8-ball-sound.wav deleted file mode 100644 index e0fb3ec9..00000000 Binary files a/source/8ball/docs/sounds/magic-8-ball-sound.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource1.wav b/source/8ball/docs/sounds/soundsource1.wav deleted file mode 100644 index 1af03af5..00000000 Binary files a/source/8ball/docs/sounds/soundsource1.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource10.wav b/source/8ball/docs/sounds/soundsource10.wav deleted file mode 100644 index b23d934d..00000000 Binary files a/source/8ball/docs/sounds/soundsource10.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource11.wav b/source/8ball/docs/sounds/soundsource11.wav deleted file mode 100644 index 60103a0b..00000000 Binary files a/source/8ball/docs/sounds/soundsource11.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource12.wav b/source/8ball/docs/sounds/soundsource12.wav deleted file mode 100644 index 44730882..00000000 Binary files a/source/8ball/docs/sounds/soundsource12.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource13.wav b/source/8ball/docs/sounds/soundsource13.wav deleted file mode 100644 index e691361e..00000000 Binary files a/source/8ball/docs/sounds/soundsource13.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource14.wav b/source/8ball/docs/sounds/soundsource14.wav deleted file mode 100644 index 88943638..00000000 Binary files a/source/8ball/docs/sounds/soundsource14.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource15.wav b/source/8ball/docs/sounds/soundsource15.wav deleted file mode 100644 index e8d548ba..00000000 Binary files a/source/8ball/docs/sounds/soundsource15.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource16.wav b/source/8ball/docs/sounds/soundsource16.wav deleted file mode 100644 index a96c0c22..00000000 Binary files a/source/8ball/docs/sounds/soundsource16.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource17.wav b/source/8ball/docs/sounds/soundsource17.wav deleted file mode 100644 index 718c9f39..00000000 Binary files a/source/8ball/docs/sounds/soundsource17.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource18.wav b/source/8ball/docs/sounds/soundsource18.wav deleted file mode 100644 index e79ebdcb..00000000 Binary files a/source/8ball/docs/sounds/soundsource18.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource19.wav b/source/8ball/docs/sounds/soundsource19.wav deleted file mode 100644 index a51454a1..00000000 Binary files a/source/8ball/docs/sounds/soundsource19.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource2.wav b/source/8ball/docs/sounds/soundsource2.wav deleted file mode 100644 index 05d2cc40..00000000 Binary files a/source/8ball/docs/sounds/soundsource2.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource20.wav b/source/8ball/docs/sounds/soundsource20.wav deleted file mode 100644 index ea720ae0..00000000 Binary files a/source/8ball/docs/sounds/soundsource20.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource3.wav b/source/8ball/docs/sounds/soundsource3.wav deleted file mode 100644 index 6ee5369a..00000000 Binary files a/source/8ball/docs/sounds/soundsource3.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource4.wav b/source/8ball/docs/sounds/soundsource4.wav deleted file mode 100644 index ae4392ed..00000000 Binary files a/source/8ball/docs/sounds/soundsource4.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource5.wav b/source/8ball/docs/sounds/soundsource5.wav deleted file mode 100644 index d0d326df..00000000 Binary files a/source/8ball/docs/sounds/soundsource5.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource6.wav b/source/8ball/docs/sounds/soundsource6.wav deleted file mode 100644 index a058e706..00000000 Binary files a/source/8ball/docs/sounds/soundsource6.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource7.wav b/source/8ball/docs/sounds/soundsource7.wav deleted file mode 100644 index d7a352b1..00000000 Binary files a/source/8ball/docs/sounds/soundsource7.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource8.wav b/source/8ball/docs/sounds/soundsource8.wav deleted file mode 100644 index 0aa7fcf8..00000000 Binary files a/source/8ball/docs/sounds/soundsource8.wav and /dev/null differ diff --git a/source/8ball/docs/sounds/soundsource9.wav b/source/8ball/docs/sounds/soundsource9.wav deleted file mode 100644 index 50127e48..00000000 Binary files a/source/8ball/docs/sounds/soundsource9.wav and /dev/null differ diff --git a/source/8ball/docs/style.css b/source/8ball/docs/style.css deleted file mode 100644 index d2c4456e..00000000 --- a/source/8ball/docs/style.css +++ /dev/null @@ -1,242 +0,0 @@ -html, -body { - height: 100%; -} -body { - font-family: 'Arial'; - font-size: 20px; - text-align: center; - background-image: url(img/background.png); - background-position: center; - background-size: cover; - color: #ffffff; - margin: 0; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - box-sizing: border-box; - padding: 20px; -} -input, -button { - -webkit-appearance: none; - appearance: none; - border: none; - background: none; - color: inherit; - font: inherit; -} -h1 { - font-size: 80px; - margin: 0; - animation: shimmer linear 5s infinite; - background-size: 2000px; - -webkit-background-clip: text; - background-clip: text; - color: transparent; - background-image: linear-gradient(95deg, #ffccf3 50%, white 52%, #ffccf3 54%); - text-shadow: 0 0 20px #ffccf385; -} -@keyframes shimmer { - from { - background-position: 2000px; - } - to { - background-position: 0; - } -} -#answer { - font-size: 40px; - margin: 20px auto; - font-weight: bold; - -webkit-background-clip: text; - background-clip: text; - color: transparent; - background-image: linear-gradient(90deg,transparent, transparent, rgb(255, 0, 221), white, white); - background-size: 1200px; - max-width: 300px; - background-position: right; - transition: background-position 1s; -} -.thinking #answer { - background-position: left; -} -#eightball-wrapper { - font-size: 0; -} -#eightball { - height: 150px; - width: 150px; - position: relative; - margin: 0 auto; - cursor: pointer; - transition: transform .2s; -} -#eightball-wrapper:not(.spinning) #eightball:hover { - transform: scale(1.1) rotate(5deg); -} -.spinning { - animation-name: spin; - animation-iteration-count: 1; - animation-duration: 3s; -} - -#question-form { - display: flex; - height: 60px; - background-color: #0d031f; - border-radius: 999px; - position: relative; - margin: 30px 0; - max-width: 500px; - width: 100%; -} -#question-form::before { - content: ''; - display: block; - position: absolute; - z-index: -1; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 999px; - background-image: linear-gradient(95deg, #ed36c9, #6b08d8); - filter: blur(10px); - opacity: 0.5; - transition: all 0.5s; -} -#question-form:focus-within:before { - filter: blur(30px); - opacity: 1; -} -#question, -#submit { - height: 100%; - font-size: 24px; -} -#question { - border-top-left-radius: 999px; - border-bottom-left-radius: 999px; - padding: 0 25px; - flex: 3 0 0; -} -#question::placeholder { - color: #ff7af34a; -} -#submit { - flex: 2 0 0; - background-color: rgba(255, 255, 255, 1); - background-image: linear-gradient(95deg, transparent, transparent, #ed36c9, #6b08d8); - background-position: right; - background-repeat: no-repeat; - background-size: 600px; - border-top-right-radius: 999px; - border-bottom-right-radius: 999px; - border-left: 1px solid rgba(255, 255, 255, 0.1); - transition: background-color 0s 1s, background-position 1s, color 1s; - } - #submit:not(:disabled) { - cursor: pointer; - } - #submit:disabled { - background-position: left; - background-color: transparent; - color: #8e5c8e; - transition: background-position .5s, color .5s; - } - #submit:not(:disabled):hover { - animation: burn 1000ms ease-out forwards; - - } - #submit:before { - position: absolute; - left: 40px; - width: 100px; - height: 40px; - background: rgba(255, 230, 110, 1); - border-radius: 100%; - animation: flare 1000ms ease-out forwards; - } - - #submit:after { - right: 40px; - width: 100px; - height: 40px; - background: rgba(255, 230, 110, 1); - border-radius: 100%; - animation: flare 1000ms ease-out forwards; - } - - @keyframes flare { - 100% { - transform: translateY(-20px) scale(1.5); - filter: blur(10px); - opacity: 0; - } - } - - @keyframes burn { - 0% { - color: rgba(255, 130, 110, 1); - background-position: left; - box-shadow: - 0 0 5px 0 rgb(51,0,51), - 0 0 5px 0 rgba(230, 30, 10, 0.8), - 0 0 5px 0 rgba(230, 230, 10, 0.6); - } - - 100% { - color: white; - background-position: right; - box-shadow: - 0 -35px 40px 30px rgba(255, 130, 10, 0), - 0 -30px 30px 10px rgba(230, 30, 10, 0), - 0 -20px 10px 0 rgba(255, 255, 10, 0); - } - } -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} -@font-face { - font-family: 'Enchanted Land'; - src: url('Font/Enchanted Land.otf') format('opentype'); - } - * { - font-family: 'Enchanted Land'; - } - -#bottom-glow { - position: fixed; - bottom: 0; - left: 0; - width: 100%; - height: 200px; - color: rgba(128, 0, 128, 0.521); - background-image: linear-gradient(to top, currentColor, transparent); - z-index: -1; - pointer-events: none; - transition: color .5s; -} -.particle { - position: fixed; - width: 5px; - height: 5px; - background-color: rgba(239, 58, 239, 0.7); - border-radius: 50%; - pointer-events: none; - z-index: -1; - transition: background-color .5s; -} -.thinking #bottom-glow { - color: rgba(255, 0, 0, 0.521); -} -.thinking .particle { - background-color: rgba(255, 50, 50, 0.8); -} diff --git a/source/home-page/Fonts/enchanted_land/Enchanted Land II.png b/source/home-page/Fonts/enchanted_land/Enchanted Land II.png new file mode 100644 index 00000000..eb0773a4 Binary files /dev/null and b/source/home-page/Fonts/enchanted_land/Enchanted Land II.png differ diff --git a/source/8ball/docs/Font/Enchanted Land.otf b/source/home-page/Fonts/enchanted_land/Enchanted Land.otf similarity index 100% rename from source/8ball/docs/Font/Enchanted Land.otf rename to source/home-page/Fonts/enchanted_land/Enchanted Land.otf diff --git a/source/home-page/Fonts/enchanted_land/readme.txt b/source/home-page/Fonts/enchanted_land/readme.txt new file mode 100644 index 00000000..67e06a06 --- /dev/null +++ b/source/home-page/Fonts/enchanted_land/readme.txt @@ -0,0 +1,19 @@ +OTF and TTF: Enchanted Land +Dennis Ludlow 2016 all rights reserved +by Sharkshock +dennis@sharkshock.net + + +Welcome to the Enchanted Land where fun has no age limit! This display font borrows obvious inspiration from the classic signage used by the famous west coast amusement park. There are several others floating out there but this one features a clean glyph set with many European characters +and diacritic support for extended latin. The whimsical style of the caps flow with consistency and shows up in the numbers and many other marks as well. OTF features like kerning, ordinals, fractions, ligatures, alternates, and proportional numbers and punctuation for uppercase characters are +all included. All caps are NOT recommended. Use Enchanted Land for a children's project, book title, or anywhere you'd like a little magic. + + +This font like my others are free for personal use only as long as this readme file stays intact. For commercial use please contact me at dennis@sharkshock.net to discuss an end user license agreement. You can also visit www.sharkshock.net/license for more info. I also design custom fonts for +businesses, logos, and many other things. If you'd like to leave me a PayPal donation you can use my email address above. Your generosity will be most appreciated! + +tags: book, children, kids, script, amusement, park, fun, magic, serif, magical, publishing, display, font, typeface, fancy, whimsical, fantasy, enchanting, kid, rides, vacation, characters, Disney, land, logo + + +visit www.sharkshock.net for more and take a bite out of BORING design! + diff --git a/source/home-page/Images/Background.png b/source/home-page/Images/Background.png new file mode 100644 index 00000000..aaa2b893 Binary files /dev/null and b/source/home-page/Images/Background.png differ diff --git a/source/home-page/Images/craiyon_115136_tarot_card_with_fortune_cookie.png b/source/home-page/Images/craiyon_115136_tarot_card_with_fortune_cookie.png new file mode 100644 index 00000000..8e6b792f Binary files /dev/null and b/source/home-page/Images/craiyon_115136_tarot_card_with_fortune_cookie.png differ diff --git a/source/home-page/Images/craiyon_142342_zodiac_wheel_tarot_card.png b/source/home-page/Images/craiyon_142342_zodiac_wheel_tarot_card.png new file mode 100644 index 00000000..a0c19621 Binary files /dev/null and b/source/home-page/Images/craiyon_142342_zodiac_wheel_tarot_card.png differ diff --git a/source/home-page/Images/craiyon_144054_a_tarot_card_depicting_palmistry.png b/source/home-page/Images/craiyon_144054_a_tarot_card_depicting_palmistry.png new file mode 100644 index 00000000..1f472072 Binary files /dev/null and b/source/home-page/Images/craiyon_144054_a_tarot_card_depicting_palmistry.png differ diff --git a/source/home-page/index.html b/source/home-page/index.html new file mode 100644 index 00000000..213716f3 --- /dev/null +++ b/source/home-page/index.html @@ -0,0 +1,52 @@ + + + + + + Fortune Telling App + + + +
+

Welcome to our Fortune Telling App

+

Improving the student experience by alleviating decision-making anxiety

+
+
+
+ + Love Compatibility Card + +

Love Compatibility

+
+
+ + Fortune Cookie Card + +

Fortune Cookie

+
+
+ + Palm Reading Card + +

Palm Reading

+
+
+
+ +

Your destiny is in our hands

+
+
+

Sign In

+ +
+ + + \ No newline at end of file diff --git a/source/home-page/script.js b/source/home-page/script.js new file mode 100644 index 00000000..38be1864 --- /dev/null +++ b/source/home-page/script.js @@ -0,0 +1,41 @@ +const cardContainers = document.querySelectorAll('.card-container'); + +// Add click event listener to each card container +cardContainers.forEach((cardContainer, index) => { +cardContainer.addEventListener('click', () => { + // Determine the subpage URL based on the card index + let subpageURL; + switch (index) { + case 0: + subpageURL = 'love-compatibility.html'; + break; + case 1: + subpageURL = 'fortune-cookie.html'; + break; + case 2: + subpageURL = 'palm-reading.html'; + break; + // Add more cases for additional card containers if needed + default: + subpageURL = 'default.html'; + break; + } + // Navigate to the subpage + window.location.href = subpageURL; + }); +}); + +// Get the "Randomize" button element +const randomizeButton = document.querySelector('.randomize-button'); + +// Add click event listener to the "Randomize" button +randomizeButton.addEventListener('click', () => { + // Get a random index for the card containers + const randomIndex = Math.floor(Math.random() * cardContainers.length); + + // Retrieve the corresponding card container element + const randomCardContainer = cardContainers[randomIndex]; + + // Trigger the click event on the random card container + randomCardContainer.click(); +}); diff --git a/source/home-page/styles.css b/source/home-page/styles.css new file mode 100644 index 00000000..2e11cee0 --- /dev/null +++ b/source/home-page/styles.css @@ -0,0 +1,139 @@ +/* used to set background image*/ + +@font-face { + font-family: "Enchanted Land"; + src: url("Fonts/enchanted_land/Enchanted\ Land.otf") format("woff2"), url("Fonts/enchanted_land/Enchanted\ Land.otf") format("woff"); +} + +body { + font-family: "Enchanted Land", cursive; + background-image: url("Images/Background.png"); + background-repeat: no-repeat; + background-size: cover; +} + + +/*used to style our "welcome to our Fortune Telling App" section */ + + +/* .welcome-section { + text-align: center; + background-color: #F1C86C; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-bottom:50px; + } */ + + +/* smaller version of the welcome section */ + +.welcome-section { + text-align: center; + background-color: #F1C86C; + padding: 20px; + margin-bottom: 20px; + max-width: 800px; + margin: 0 auto; +} + +.welcome-section h1 { + font-size: 24px; + margin-bottom: 10px; +} + +.welcome-section h2 { + font-size: 18px; + font-style: italic; +} + + +/*used to center all of the image cards */ + +.card-container { + text-align: center; + display: inline-block; + margin-right: 80px; + margin-bottom: 10px; + padding: 30px; +} + + +/*used to adjust the alignment of the "3 fortune telling cards" and their size */ + +.card-container img { + text-align: center; + display: block; + margin: 0 auto; + width: 300px; + height: 300px; +} + + +/*used to style the text under each card */ + +.card-container p { + font-size: 18px; + background-color: #36394D; + color: #191A25; + margin-top: 10px; + padding: 8px; + border-radius: 5px; +} + + +/*used to style the randomzier button */ + +.randomize-button { + font-family: "Enchanted Land", cursive; + background-color: #F1C86C; + color: #191A25; + padding: 10px 20px; + border: none; + border-radius: 5px; + font-size: 18px; + cursor: pointer; +} + +.randomize-button:hover { + background-color: #EBAF3E; +} + +.sign-in-form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border-radius: 5px; +} + +.sign-in-form label { + display: block; + margin-bottom: 10px; +} + +.sign-in-form input[type="text"], +.sign-in-form input[type="date"], +.sign-in-form input[type="number"] { + width: 100%; + padding: 8px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +.sign-in-form input[type="submit"] { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.sign-in-form input[type="submit"]:hover { + background-color: #45a049; +} \ No newline at end of file