just some bugfixes nothing special like eastereggs

Author: erpicoding

index.html

@@ -50,7 +50,11 @@ <h2 class="sectionHeading">Über Mich</h2>
         <h2>Programmiersprachen und andere Technologien</h2>
         <div class="technologies">
           <div class="technology">
-            <img class="logo scratch" src="./img/logos/scratch.png" />
+            <img
+              id="scratch"
+              class="logo scratch"
+              src="./img/logos/scratch.png"
+            />
             <div class="line"></div>
             <p>Scratch<br /><span>seit 2020</span></p>
           </div>
@@ -70,7 +74,7 @@ <h2>Programmiersprachen und andere Technologien</h2>
             <p>SCSS<br /><span>seit 2025</span></p>
           </div>
           <div class="technology">
-            <img class="logo" src="./img/logos/js.svg" />
+            <img class="logo js" src="./img/logos/js.svg" />
             <div class="line"></div>
             <p>JavaScript<br /><span>seit 2024</span></p>
           </div>
@@ -118,6 +122,13 @@ <h3>Verschlüsselungs Programm</h3>
         </div>
       </div>
     </section>
+
+    <dialog id="newRecord" class="newRecord">
+      <h1>Neuer Rekord:</h1>
+      <div><h1 id="recordField"></h1></div>
+      <p>Versuche: <span id="trysField"></span></p>
+      <button onclick="newRecord.close()">Fertig</button>
+    </dialog>
     <script src="./script.js"></script>
   </body>
 </html>

script.js

@@ -3,6 +3,12 @@ const navbar = document.querySelector(".navbar");
 const body = document.querySelector("body");
 const linkContainer = document.getElementById("linkContainer");
 
+const scratch = document.getElementById("scratch");
+const scratchStartRect = scratch.getBoundingClientRect();
+if (localStorage.getItem("scratchRecordHeight") == null) {
+  localStorage.setItem("scratchRecordHeight", 0);
+  localStorage.setItem("scratchTrys", 0);
+}
 // const ha = document.getElementById("ha");
 // if (localStorage.getItem("openHA") == null) {
 //   ha.showModal();
@@ -15,8 +21,6 @@ window.addEventListener("scroll", function () {
   const scrollHeight = window.pageYOffset;
   const navbarHeight = navbar.getBoundingClientRect().height;
   const bodyHeight = body.getBoundingClientRect().height;
-  console.log(bodyHeight);
-  console.log(scrollHeight);
 
   if (scrollHeight > navbarHeight) {
     navbar.classList.add("navbarFixed");
@@ -41,3 +45,23 @@ function navbarToggle() {
   linkContainer.classList.toggle("showLinks");
   navbar.classList.toggle("showLinks");
 }
+
+scratch.addEventListener("mouseout", () => {
+  const scratchRect = scratch.getBoundingClientRect();
+  const scratchHeight = Math.abs(scratchRect.top - scratchStartRect.top);
+  const scratchRecordHeight = localStorage.getItem("scratchRecordHeight");
+  let scratchTrys = localStorage.getItem("scratchTrys");
+  scratchTrys++;
+  console.log("scratchHeight: " + scratchHeight);
+
+  //Versuche counter
+  localStorage.setItem("scratchTrys", scratchTrys);
+  trysField.innerHTML = scratchTrys;
+
+  if (scratchHeight > scratchRecordHeight) {
+    localStorage.setItem("scratchRecordHeight", scratchHeight);
+    console.log("NEUER REKORD");
+    recordField.innerHTML = parseInt(scratchHeight);
+    newRecord.showModal();
+  }
+});

style.css

@@ -281,15 +281,18 @@ h6 {
   margin: 10px;
   margin-right: 0px;
 }
+.technology .js {
+  border-radius: 8px;
+}
 .technology .scratch {
-  transition: ease-out all 60s;
+  transition: ease-out all 600s;
 }
 .technology .scratch:hover {
-  transform: translateY(-3000px);
+  transform: translateY(-30000px);
 }
 .technology .react {
   transform: rotate(var(--angle));
-  animation: 30s linear rotation infinite;
+  animation: 60s linear rotation infinite;
 }
 
 @media (max-width: 900px) {
@@ -376,4 +379,56 @@ h6 {
 .projektContainer .projekt:hover a {
   z-index: 10;
   transition: 500ms;
+}
+
+dialog.newRecord {
+  padding: 40px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  background: linear-gradient(0deg, hsl(0, 0%, 10%), hsl(0, 0%, 15%));
+  box-shadow: inset 0 2px 4px hsl(0, 0%, 30%);
+  border-radius: 20px;
+  border: none;
+}
+dialog.newRecord:not([open]) {
+  display: none;
+}
+dialog.newRecord::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+}
+dialog.newRecord div {
+  min-width: 120px;
+  height: 60px;
+  padding: 10px;
+  margin: auto;
+  margin-top: 20px;
+  background: linear-gradient(0deg, hsl(120, 100%, 30%), hsl(120, 100%, 40%));
+  box-shadow: inset 0 2px 4px hsl(120, 100%, 50%);
+  border-radius: 20px;
+}
+dialog.newRecord div h1 {
+  line-height: 60px;
+  font-size: 60px;
+}
+dialog.newRecord p {
+  padding: 8px;
+  margin-top: 20px;
+  text-align: center;
+  color: red;
+}
+dialog.newRecord p span {
+  color: red;
+}
+dialog.newRecord button {
+  height: 40px;
+  width: 200px;
+  margin: auto;
+  background: linear-gradient(0deg, hsl(0, 0%, 20%), hsl(0, 0%, 25%));
+  box-shadow: inset 0 1px 2px hsl(0, 0%, 40%);
+  border: none;
+  border-radius: 20px;
 }/*# sourceMappingURL=style.css.map */

style.css.map

@@ -343,15 +343,18 @@ h6 {
     margin: 10px;
     margin-right: 0px;
   }
+  .js {
+    border-radius: 8px;
+  }
   .scratch {
-    transition: ease-out all 60s;
+    transition: ease-out all 600s;
     &:hover {
-      transform: translateY(-3000px);
+      transform: translateY(-30000px);
     }
   }
   .react {
     transform: rotate(var(--angle));
-    animation: 30s linear rotation infinite;
+    animation: 60s linear rotation infinite;
   }
 }
 @media (max-width: 900px) {
@@ -454,3 +457,62 @@ h6 {
     }
   }
 }
+
+dialog.newRecord {
+  // height: 200px;
+  // width: 320px;
+  padding: 40px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+
+  &:not([open]) {
+    display: none;
+  }
+
+  background: linear-gradient(0deg, hsl(0, 0%, 10%), hsl(0, 0%, 15%));
+  box-shadow: inset 0 2px 4px hsl(0, 0%, 30%);
+  border-radius: 20px;
+  border: none;
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  div {
+    min-width: 120px;
+    height: 60px;
+    padding: 10px;
+    margin: auto;
+    margin-top: 20px;
+
+    background: linear-gradient(0deg, hsl(120, 100%, 30%), hsl(120, 100%, 40%));
+    box-shadow: inset 0 2px 4px hsl(120, 100%, 50%);
+    border-radius: 20px;
+
+    h1 {
+      line-height: 60px;
+      font-size: 60px;
+    }
+  }
+  p {
+    padding: 8px;
+    margin-top: 20px;
+    text-align: center;
+    color: red;
+    span {
+      color: red;
+    }
+  }
+  button {
+    height: 40px;
+    width: 200px;
+    margin: auto;
+
+    background: linear-gradient(0deg, hsl(0, 0%, 20%), hsl(0, 0%, 25%));
+    box-shadow: inset 0 1px 2px hsl(0, 0%, 40%);
+    border: none;
+    border-radius: 20px;
+  }
+}