modify css to make app more visually appealing

Author: josueJURE

public/index.css

@@ -65,7 +65,7 @@ body.dark-mode .slider:before {
 
 
 .parent-container {
-  height: 200vh;
+  height: 100vh;
   width: 500px;
   border: red 1px solid;
   display: flex;
@@ -114,7 +114,7 @@ body.dark-mode .slider:before {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -100%);
+  transform: translate(-50%, -50%);
   margin: 0 auto;
 }
 
@@ -614,6 +614,7 @@ input:checked+.slider:before {
   border: black 3px solid;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
+  
 }
 
 .change .navigation {
@@ -631,6 +632,8 @@ input:checked+.slider:before {
   justify-content: center;
   align-items: center;
   margin: 0 auto;
+  /* transform: rotateZ(-15deg); */
+  transition: all 1s;
 }
 
 .nav-items {

public/index.html

@@ -44,7 +44,9 @@
           <input type="checkbox" class="dark-light-button" />
           <span class="slider round"></span>
         </label>
+        <div class="non-picture-section">
 
+       
         <h1 aria-label="app text" class="headline">
          Unsure What to Cook? Let Recipe for Success Inspire Your Next Meal!
 
@@ -113,6 +115,7 @@ <h1 aria-label="app text" class="headline">
             Random
           </button>
         </section>
+      </div>
 
         <!-- <label for="user-email">Enter you email address</label> -->
 

public/index.js

@@ -48,12 +48,15 @@ import {
   previousPage,
   sendToUserInbox,
   wrapper,
+  non_picture_section
 } from "./js_utilities/query_selector.js";
 
 let currentCameraIndex = 0;
 const switchCameraButton = document.getElementById("switchCamera");
 let emailObject;
 
+console.log(non_picture_section)
+
 wantToTakeAPicture.addEventListener("click", () => {
   removeElements([pictureSectionHeadline, wantToTakeAPicture]);
   displayElementsFlex([videoBtnCanvas]);
@@ -155,7 +158,10 @@ recipeButtons.forEach((button) => {
   console.log(userText.value);
   button.addEventListener("click", async () => {
     displayElements([loadingContainer]);
-    removeElements([mainElement]);
+    // removeElements([headline, allergies, ...recipeButtons]);
+    // removeElements([non_picture_section]);
+    removeElements([mainElement])
+ 
     const userRecipe = createUserRecipe(button, dietaryRequirements, userText);
     console.log(userRecipe);
 
@@ -166,10 +172,12 @@ recipeButtons.forEach((button) => {
     eventSource.onmessage = async function (event) {
       let eventData = JSON.parse(event.data);
       if (eventData.message) {
+       
         if (eventData.message === "stop") {
           eventSource.close();
           return;
         }
+        // removeElements([headline, allergies, ...recipeButtons]);
         displayElements([gptResponseElement]);
         gptResponseElement.textContent += eventData.message;
         return;
@@ -193,6 +201,7 @@ recipeButtons.forEach((button) => {
       console.log("data.image", eventData.image);
 
       if (data.audio && data.image) {
+  
         createImage(data);
 
         const { speedBtn, speechBtns } = createTextToSpeech(data);
@@ -231,6 +240,9 @@ recipeButtons.forEach((button) => {
 function createImage(param) {
   removeElements([loadingContainer]);
   const imageUrl = param.image.data[0].url;
+  backgroundImg.style.backgroundSize = "cover";
+
+  
   backgroundImg.src = imageUrl;
   return backgroundImg;
 }

public/js_utilities/query_selector.js

@@ -38,6 +38,7 @@ const dietaryRequirements = Array.from(
 const otherDietaryRequirements = document.querySelector(
   "#other-dietary-requirements"
 );
+const non_picture_section = document.querySelector(".non-picture-section")
 const userText = document.querySelector("#user-text");
 const constraint = {
   audio: false,
@@ -87,7 +88,8 @@ export {
   previousPage,
   sendToUserInbox,
   emailUserRecipeSection,
-  wrapper
+  wrapper,
+  non_picture_section
 };
 
 

public/url_folder.txt

@@ -1 +1 @@
-https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-ZDEHIyYgxZXddehWZlOH32YF.png?st=2024-08-04T13%3A59%3A15Z&se=2024-08-04T15%3A59%3A15Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-08-03T23%3A15%3A03Z&ske=2024-08-04T23%3A15%3A03Z&sks=b&skv=2023-11-03&sig=jH%2BPKxVQeeEi6/oD%2Bwa6IArvHeVfTMYbUSxM1ZH2A3Y%3D
+https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-6czcfIXCtLDVdFppthCKO8RC.png?st=2024-08-05T14%3A21%3A04Z&se=2024-08-05T16%3A21%3A04Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-08-04T19%3A39%3A37Z&ske=2024-08-05T19%3A39%3A37Z&sks=b&skv=2023-11-03&sig=yUad5ESQqpw%2BNTr2XDH5athOTZhGSxV/v6ETPwcfD74%3D