Merge pull request fac29b#64 from fac29b/landscape-orientation

Landscape orientation

Author: josueJURE

public/index.css

@@ -4,6 +4,12 @@
   font-weight: 200;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
+
+
 :root {
   --green: rgb(183, 235, 183);
   --black: rgb(67, 63, 63);
@@ -66,7 +72,13 @@ body.dark-mode .slider:before {
 
 .parent-container {
   height: 100vh;
-  width: 100vw;
+  width: 500px;
+  border: red 1px solid;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .recording {
@@ -592,23 +604,22 @@ input:checked+.slider:before {
 }
 
 .navigation {
-  position: fixed;
-  top: 5px;
-  left: 56%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: 340px;
-  height: 100vh;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  /* transform: translateX(-50%); */
+  width: 50%;
+  height: 200vh;
   /* Updated height to match the wrapper/container */
   background-color: var(--green);
   z-index: 100;
   display: none;
-  align-items: center;
   padding-left: 1rem;
   border-radius: 1px;
   border: black 3px solid;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
+  
 }
 
 .change .navigation {
@@ -626,9 +637,14 @@ input:checked+.slider:before {
   justify-content: center;
   align-items: center;
   margin: 0 auto;
+  /* transform: rotateZ(-15deg); */
+  transition: all 1s;
 }
 
 .nav-items {
+  width: 250px;
+  margin-top: 325px;
+  position: fixed;
   display: flex;
   flex-direction: column;
   opacity: 1;
@@ -651,7 +667,7 @@ input:checked+.slider:before {
 }
 
 /* Media Queries */
-@media only screen and (max-width: 768px) {
+/* @media only screen and (max-width: 768px) {
   .menu-icon {
     right: 2rem;
     margin-right: 0;
@@ -663,7 +679,7 @@ input:checked+.slider:before {
     width: 100%;
     max-width: 340px;
   }
-}
+} */
 
 @keyframes fadeIn {
   from { opacity: 0; }
@@ -672,4 +688,17 @@ input:checked+.slider:before {
 
 .fade-in {
   animation: fadeIn 1s ease-in;
-}
+}
+
+/* 
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+  .navigation {
+    transform: translateX(-10%) translateY(-20px);
+  }
+  .main-element {
+    overflow: hidden;
+  }
+} */

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,16 @@ import {
   previousPage,
   sendToUserInbox,
   wrapper,
+  non_picture_section,
+  menuIcon
 } 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 +159,8 @@ recipeButtons.forEach((button) => {
   console.log(userText.value);
   button.addEventListener("click", async () => {
     displayElements([loadingContainer]);
-    removeElements([mainElement]);
+    removeElements([mainElement])
+ 
     const userRecipe = createUserRecipe(button, dietaryRequirements, userText);
     console.log(userRecipe);
 
@@ -166,6 +171,7 @@ recipeButtons.forEach((button) => {
     eventSource.onmessage = async function (event) {
       let eventData = JSON.parse(event.data);
       if (eventData.message) {
+       
         if (eventData.message === "stop") {
           eventSource.close();
           return;
@@ -193,6 +199,7 @@ recipeButtons.forEach((button) => {
       console.log("data.image", eventData.image);
 
       if (data.audio && data.image) {
+  
         createImage(data);
 
         const { speedBtn, speechBtns } = createTextToSpeech(data);
@@ -231,6 +238,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;
 }
@@ -335,7 +345,7 @@ takePicture.addEventListener("click", () => {
 });
 
 // Menu icon toggle
-const menuIcon = document.querySelector(".menu-icon");
+
 
 menuIcon.addEventListener("click", () => {
   wrapper.classList.toggle("change");

public/js_utilities/query_selector.js

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

public/url_folder.txt

@@ -1 +1 @@
-https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-ovb7qD0yHMLLx0Ooe4iCpSOE.png?st=2024-08-03T13%3A22%3A53Z&se=2024-08-03T15%3A22%3A53Z&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-03T04%3A05%3A06Z&ske=2024-08-04T04%3A05%3A06Z&sks=b&skv=2023-11-03&sig=bDE%2Bp86dJ7jZ6nydnnnKPumw/XA0M1VaghM8Bm5XY5E%3D
+https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-pcWHShzpudjH6x44lw83bfXs.png?st=2024-08-06T11%3A59%3A19Z&se=2024-08-06T13%3A59%3A19Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=d505667d-d6c1-4a0a-bac7-5c84a87759f8&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-08-06T01%3A32%3A40Z&ske=2024-08-07T01%3A32%3A40Z&sks=b&skv=2023-11-03&sig=mm024hTeLnC1DhKflMqRX11qYYCY1T4RuP1UDFnMJt4%3D