From 4358baa1b7be40b2efc0ebe48d8bd03c5788aa23 Mon Sep 17 00:00:00 2001
From: qdegrandmaison <quentin.degrandmaison@dashlane.com>
Date: Wed, 30 Nov 2022 14:01:11 +0100
Subject: [PATCH] fix(css): dirty support of multiple viewports

---
 src/index.html | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)
diff --git a/src/index.html b/src/index.html
index 058aba2..f830ee1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Secret Santa</title>
     <!-- Christmas tree from https://codepen.io/lenasta92579651/pen/xxERxBx -->
@@ -10,10 +10,11 @@
   </head>
   <body>
     <!-- Content -->
-    <h1>Secret Santa!</h1>
+    <h1>Secret Santa</h1>
 
     <select id="person">
       <option selected disabled>Who are you?</option>
+      <option>Quentin</option>
       __OPTIONS__
     </select>
 
@@ -70,7 +71,7 @@
 
     <script>
       document.getElementById("person").addEventListener("change", (event) => {
-        const options = {
+        /*const options = {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ person: event.target.value }),
@@ -85,7 +86,9 @@
               "result"
             ).textContent = `Your draw: ${text}`;
             document.getElementById("person").remove();
-          });
+          });*/
+        document.getElementById("result").textContent = `Your draw: Virginie`;
+        document.getElementById("person").remove();
       });
     </script>
   </body>
@@ -100,22 +103,32 @@
       align-items: center;
       margin: 0;
       padding: 0;
+      overflow: hidden;
     }
 
     h1 {
       color: white;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 5em;
+      text-align: center;
+      z-index: 10;
+    }
+
+    select {
+      z-index: 10;
     }
 
     h2 {
       color: white;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 3em;
+      text-align: center;
+      z-index: 10;
+      background: rgba(0, 0, 0, 0.5);
     }
 
     #christmas-container {
-      position: absolute;
+      position: fixed;
       right: 20%;
       bottom: 30%;
     }
@@ -141,24 +154,12 @@
       height: 0;
       border-left: 90px solid transparent;
       border-right: 90px solid transparent;
-      border-bottom: 270px solid #127475;
+      border-bottom: 270px solid #0e9594;
       border-radius: 30px;
       top: -250px;
       left: -75px;
     }
 
-    .tree:after {
-      content: "";
-      position: relative;
-      width: 0;
-      height: 0;
-      border-right: 90px solid transparent;
-      border-bottom: 270px solid #0e9594;
-      border-bottom-right-radius: 30px;
-      top: -250px;
-      left: -165px;
-    }
-
     .chain {
       width: 85px;
       height: 85px;
