Merge pull request #27 from cse110-sp23-group20/zodiac-compatibility

Zodiac compatibility
cse110-sp23-group20 · Jun 2, 2023 · 96a8ef0 · 96a8ef0
2 parents 667a3a2 + dee511e
commit 96a8ef0
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 25 deletions.
diff --git a/source/Zodiac_compatibility/images/hollow.png b/source/Zodiac_compatibility/images/hollow.png
diff --git a/source/Zodiac_compatibility/images/pngwing.com.png b/source/Zodiac_compatibility/images/pngwing.com.png
diff --git a/source/Zodiac_compatibility/index.html b/source/Zodiac_compatibility/index.html
@@ -3,12 +3,63 @@
   <head>
     <title>Scrollable Wheel</title>
     <link rel="stylesheet" href="styles.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Oswald&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <div id="container">
-      <img src="images/old_2.png" class="wheel" id="wheel1" alt="idk" />
-      <button id="find-out">Find Out!</button>
-      <img src="images/old_2.png" class="wheel" id="wheel2" alt="idk" />
+    <div class="container">
+      <div class="relationship">
+        <form>
+          <label for="relationship">What is your relationship with them?:</label
+          ><br />
+          <select name="relationship" id="relationship">
+            <option value="volvo">Romantic</option>
+            <option value="saab">Friendship</option>
+            <option value="mercedes">Professional</option></select
+          ><br />
+        </form>
+      </div>
+      <div class="wheel_field" id="left_wheel_field">
+        <div class="wheel" id="left_wheel">
+          <img
+            src="images/hollow.png"
+            class="wheel_img"
+            id="left_wheel_img"
+            alt="idk"
+          />
+        </div>
+      </div>
+      <div class="bday_input" id="left_bday_input">
+        <form>
+          <label for="left_birthday">YOUR DATE OF BIRTH:</label><br />
+          <input type="date" id="left_birthday" name="left_birthday" /><br />
+        </form>
+      </div>
+
+      <div class="middle">
+        <button id="find-out">Find Out!</button>
+      </div>
+
+      <div class="wheel_field" id="right_wheel_field">
+        <div class="wheel" id="right_wheel">
+          <img
+            src="images/hollow.png"
+            class="wheel_img"
+            id="right_wheel_img"
+            alt="idk"
+          />
+        </div>
+      </div>
+      <div class="bday_input" id="right_bday_input">
+        <form>
+          <label for="right_birthday">THEIR DATE OF BIRTH:</label><br />
+          <input type="date" id="right_birthday" name="right_birthday" /><br />
+        </form>
+      </div>
     </div>
 
     <div id="pop-up">

diff --git a/source/Zodiac_compatibility/script.js b/source/Zodiac_compatibility/script.js
@@ -46,7 +46,7 @@ function roundAngle(angle) {
 }
 
 // Function to handle the mouseout event
-function stopRotation() {
+function stopRotation(event) {
   // Round the current angle of the wheels to the nearest multiple of 30
   const target1 = roundAngle(w1anglereal);
   const target2 = roundAngle(w2anglereal);

diff --git a/source/Zodiac_compatibility/styles.css b/source/Zodiac_compatibility/styles.css
@@ -1,30 +1,129 @@
-#wheel1,
-#wheel2 {
-  width: 40%;
-  margin: 1%;
+* {
+  color: white;
+  font-family: "Oswald", sans-serif;
+}
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  justify-content: center;
+  align-content: center;
+}
+
+.container > * {
+  aspect-ratio: 1/1;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  transition: 0.5s ease;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+}
+
+.relationship {
+  grid-area: 1 / 2 / 6 / 7;
+  text-align: center;
+  background-color: transparent;
+  z-index: 0;
+}
+
+select:hover {
+  filter: brightness(10000%) drop-shadow(0px 0px 10px white);
+}
+
+option {
+  background-color: transparent;
+  color: white;
+  background: rgb(5, 0, 46);
+}
+
+.wheel_img {
+  filter: brightness(10000%) drop-shadow(0px 0px 10px white);
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+  transition: 0.5s ease;
+}
+
+.wheel_img:hover {
+  filter: brightness(10000%) drop-shadow(0px 0px 10px rgb(255, 242, 0));
+}
+
+#left_wheel_field {
+  grid-area: 2 / 1 / 5 / 4;
+}
+
+#right_wheel_field {
+  grid-area: 2 / 5 / 5 / 8;
+}
+
+input {
+  color-scheme: dark;
+}
+
+.bday_input {
+  font-family: "Oswald", sans-serif;
+  ccolor: white;
+  z-index: 1;
+  align-content: center;
+  justify-self: stretch;
+  display: flex; /* Enable flexbox */
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  filter: brightness(10000%) drop-shadow(0px 0px 10px white);
+  font-size: 0.8em;
+}
+
+.bday_input:hover {
+  filter: brightness(10000%) drop-shadow(0px 0px 10px rgb(255, 251, 0));
+}
+#left_bday_input {
+  grid-area: 3 / 2 / 4 / 3;
 }
 
-#wheel2 {
-  float: right;
+#right_bday_input {
+  grid-area: 3 / 6 / 4 / 7;
 }
 
-#container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100vh;
+.middle {
+  grid-area: 3 / 4 / 4 / 5;
+  align-self: center;
+  text-align: center;
 }
 
-#container button {
-  margin-top: 35%;
+input[type="date"] {
+  font-family: "Oswald", sans-serif;
+  border: none;
+  color: white;
+  background-color: rgba(0, 0, 0, 0);
+  font-size: 2vw;
 }
 
 #find-out {
   padding: 10px 20px;
   border-radius: 20px;
-  font-size: 1.5vw;
-  background-color: #f1c86c;
+  font-size: 2vw;
+  border-color: white;
+  background-color: transparent;
+  color: white;
+  filter: brightness(10000%) drop-shadow(0px 0px 10px white);
+  font-family: "Oswald", sans-serif;
+}
+
+#find-out:hover {
+  filter: brightness(10000%) drop-shadow(0px 0px 10px yellow);
 }
+
 body {
   background-image: url("images/background.jpg");
   background-repeat: no-repeat;
@@ -100,8 +199,3 @@ body {
     opacity: 1;
   }
 }
-
-/* .wheel{ ADD BACK LATER
-  filter: brightness(10000%) drop-shadow(0px 0px 10px white);
-}
-*/
diff --git a/specs/brainstorm/Round 1 Week 5/adrs/adr1.md b/specs/brainstorm/Round 1 Week 5/adrs/adr1.md
@@ -0,0 +1,15 @@
+# Store all zodiac combination responses locally
+
+## Context and Problem Statement
+
+When the user selects a zodiac pairing, we need to serve them a compatibility response. The issue however is if we should serve them the same response each time or try to give them a different, but similar response each time because getting the same response can be quite boring.
+
+## Considered Options
+
+- One response for all 33 unique combinations
+- Make 1 or 2 more custom responses and pick a random one to serve each time
+- Use some kind of API (maybe ChatGPT) to deliver a custom response
+
+## Decision Outcome
+
+Chosen option: For now we will just stick to using one response for all 33 unique combinations. Considering the time that we have left, adding extra features/complexity to our mini-app is not what we are trying to do. Once we have all 33 unique responses hard coded we can think about adding more or using an API to give us responses. We will reconsider this decision again once we have our mini-app completed and have the opportunity to add extra features.