Fix.

demo/index.html

@@ -35,13 +35,17 @@
     .header {
       width: 100%;
       min-height: 500px;
-      background-color: #485bff;
+      background-color: #eee;
     }
 
     .header-container {
       max-width: 650px;
       margin: auto;
       padding-top: 200px;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
     }
 
     .header-container-image {
@@ -51,24 +55,32 @@
     }
 
     h1 {
-      color: #fff;
+      color: #000;
       font-size: 32px;
       font-weight: 900;
+      background-color: #000;
+      border-radius: 5px;
+      opacity: 0.8;
     }
 
     .sub-headline {
       font-size: 16px;
-      color: #ffffff88;
+      color: transparent;
       font-weight: 500;
-      margin-top: 5px;
+      margin-top: 8px;
+      background-color: #00000088;
+      border-radius: 5px;
+      min-width: 350px;
+      height: 30px;
+      opacity: 0.4;
     }
 
     .sub-headline i {
       color: red;
     }
 
     .sub-headline a {
-      color: #ffffff88;
+      color: #00000088;
       display: inline;
       text-decoration: underline;
     }
@@ -91,6 +103,7 @@
       max-height: 450px;
       border-radius: 10px;
       object-fit: cover;
+      object-position: top center;
     }
 
     .content {
@@ -125,7 +138,7 @@
       font-size: 16px;
       font-weight: 600;
       color: rgb(255, 255, 255);
-      background-color: #485bff;
+      background-color: #2142e7;
       border-style: solid;
       border-width: 0px;
       border-radius: 10px;
@@ -155,6 +168,26 @@
       }
     }
 
+    .skeleton-text {
+      width: 100%;
+      height: 0.7rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.25rem;
+      background-color: #eee;
+    }
+
+    .skeleton-text:nth-child(2) {
+      max-width: 95%;
+    }
+
+    .skeleton-text:nth-child(3) {
+      max-width: 90%;
+    }
+
+    .skeleton-text:nth-child(4) {
+      max-width: 95%;
+    }
+
     video {
       border: 1px solid lightgray;
       width: 100%;
@@ -169,112 +202,20 @@
     <div class="header-container">
       <h1>Off-Grid-it-Haus</h1>
       <h2 class="sub-headline">
-        <i class="fa-solid fa-star"></i> 4,93 · 308 ratings ·
-        <a href="#">Pioneertown, Kalifornien, USA</a>
       </h2>
     </div>
   </div>
   <div class="header-container-image">
-    <img class="head-image" src="./pexels-clayton-bunn-5524336.jpg" />
+    <img class="head-image" src="./pexels-niklas-jeromin-12734294.jpg" />
   </div>
   <div class="content" id="haha">
-    The Off-grid itHouse is an architecturally significant house, recently
-    noted by Dwell as one of the 'Best Homes in America' and in the Los
-    Angeles Times as one of the best houses of all time in Southern
-    California. The Off-grid itHouse is one of 10 IT Houses built in
-    California, which have received much acclaim such as the Western Home
-    award sponsored by Sunset magazine. Also noted as one of the top 10 airbnb
-    rentals worldwide. This is the prototype for the pre-engineered system
-    known as the IT House.
-    <br /><br />
-    <div class="buttonlink" onclick='console.error("Failt to book...");'>
-      Book now
-    </div>
-    <canvas id="animationCanvas" style="border:1px solid #d3d3d3; width: 100%; height: 600px;">
-      Your browser does not support the HTML5 canvas tag.
-    </canvas>
-    <script>
-      var canvas = document.getElementById("animationCanvas");
-      var ctx = canvas.getContext("2d");
-
-      var x = canvas.width / 2;
-      var y = canvas.height / 2;
-      var dx = 2;
-      var dy = -2;
-      var radius = 20;
-
-      function drawCircle() {
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-        ctx.fillStyle = "#0095DD";
-        ctx.fill();
-        ctx.closePath();
-      }
-
-      function draw() {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        drawCircle();
-        x += dx;
-        y += dy;
-
-        // Bounce the ball off the edges
-        if (x + dx > canvas.width - radius || x + dx < radius) {
-          dx = -dx;
-        }
-
-        if (y + dy > canvas.height - radius || y + dy < radius) {
-          dy = -dy;
-        }
-      }
-
-      setInterval(draw, 10);
-    </script>
-    <br /><br />
-    The house is 100% off-grid, powered by solar panels for energy and hot
-    water, and is located in a pristine remote valley in the beautiful
-    California high desert. The house observes key green principals of smaller
-    footprint, minimal disturbance to the natural beauty of the surrounding
-    landscape, use of renewable resources, and living simply and minimally.
-    <br /><br />
-    The setting of the house is remote and serene, a quiet refuge from
-    everything, free from distractions. Amazing views and vistas in all
-    directions.
-    <br /><br />
-    Perfect for design or green aficionados, writers or those needing a
-    secluded quiet getaway.
-    <br /><br />
-    <video width="320" height="240" controls>
-      <source src="movie.mp4" type="video/mp4" />
-      Your browser does not support the video tag.
-    </video>
-    <br />
-    <br />
-    <b>Access for guests</b><br />
-    <br />
-    Intentionally there is no television and only satellite wifi for emergency
-    communication so that one can truly experience being in a place of extreme
-    natural beauty, and take note of the play of light and shadow, and other
-    natural phenomena.
-    <br /><br />
-    The house is 100% off grid with no municipal services. All the water is
-    brought to the site and powered by the sun. Please expect that due to the
-    off grid nature of the home you should be prepared that power may not
-    always be available. Please plan meals to not use excessive energy.
-    <br /><br />
-    The house has two new Casper mattresses and pillows for ultimate comfort
-    and relaxation during your stay (queen and king).
-    <br /><br />
-    It is recommended that guests arrive before sundown in order to find the
-    house. The house is in a remote location.
-    <br /><br />
-    <b>More information</b><br />
-    <br />
-    Holiday weekend 3 day minimum applies to Presidents Day weekend,
-    Valentines Day, Memorial Day Weekend, Independence Day weekend, Labor Day
-    Weekend, Thanksgiving, Christmas and New Years. WE DO NOT ALLOW EVENTS OR
-    SHOOTS OF ANY KIND TO BE BOOKED THROUGH AIRBNB. WE ARE NO LONGER ALLOWING
-    WEDDINGS. FOR INQUIRIES BEYOND VACATION RENTAL PLEASE CONTACT LOCATIONS
-    UNLIMITED.
+    <div class="skeleton-text"></div>
+    <div class="skeleton-text"></div>
+    <div class="skeleton-text"></div>
+    <div class="skeleton-text"></div>
+    <div class="skeleton-text"></div>
+    <div class="skeleton-text"></div>
+    <div class="skeleton-text"></div>
   </div>
 </body>
 

demo/main.js

@@ -1,13 +1,13 @@
 const Gleap = window.Gleap;
 
-Gleap.setFrameUrl("http://0.0.0.0:3001");
-Gleap.setApiUrl("http://0.0.0.0:9000");
+// Gleap.setFrameUrl("http://0.0.0.0:3001");
+// Gleap.setApiUrl("http://0.0.0.0:9000");
 
 Gleap.setDisablePageTracking(true);
 
 Gleap.setLanguage("en");
 
-Gleap.initialize("hciNpT8z64tsHATINYZjWBvbirVWCKWt");
+Gleap.initialize("ogWhNhuiZcGWrva5nlDS8l7a78OfaLlV");
 
 /*Gleap.setUrlHandler((url, newTab) => {
   alert("URL: " + url + " newTab: " + newTab);