Update bee animation and dog controls

index.html

@@ -105,9 +105,10 @@
     <div id="displayArea"></div>
     <br />
 
-
+<!-- flying bee -->
 <div class="bee-container">
   <img src="./ASSETS//pics/bee.png" alt="">
+  <div class="speech-bubble" style="display: none;">Hallo</div>
 </div>
 
 
@@ -374,21 +375,26 @@ <h3>Calculator</h3>
       </div>
     </section>
 
-    <!-- DOG -->
-    <img class="ball" src="./ASSETS/ball.png" alt="" />
-    <div class="controls">
-      <label for="animations">Choose</label>
-      <select id="animations" name="animations" id="animations">
-        <option value="idle">idle</option>
-
-        <option value="run">run</option>
-        <option value="dizzy">dizzy</option>
-        <option value="sit">sit</option>
-        <option value="roll">roll</option>
-        <option value="bite">bite</option>
-      </select>
-    </div>
-    <canvas id="canvas1"></canvas>
+<!-- DOG Container -->
+
+  <canvas id="canvas1"></canvas>
+  <img class="ball" src="./ASSETS/ball.png" alt="" />
+
+<div class="controls">
+  <label for="animations">Choose</label>
+  <select id="animations" name="animations">
+    <option value="idle">idle</option>
+    <option value="run">run</option>
+    <option value="dizzy">dizzy</option>
+    <option value="sit">sit</option>
+    <option value="roll">roll</option>
+    <option value="bite">bite</option>
+  </select>
+</div>
+
+
+
+
 
     <!-- FOOTER -->
 

src/script.js

@@ -56,6 +56,31 @@ function displayDateAndChangeFontSize() {
 
 document.addEventListener("DOMContentLoaded", initialize);
 
+// flying bee
+document.addEventListener("DOMContentLoaded", function () {
+  const beeContainer = document.querySelector(".bee-container");
+  const speechBubble = document.querySelector(".speech-bubble");
+
+  let flyingRight = true; // Startet mit dem Flug nach rechts
+
+  // Funktion, um den Text der Sprechblase zu aktualisieren
+  function updateSpeechBubble() {
+    if (flyingRight) {
+      speechBubble.textContent = "Jetzt fliege ich nach rechts!";
+    } else {
+      speechBubble.textContent = "Jetzt fliege ich nach links!";
+    }
+  }
+
+  updateSpeechBubble(); // Initialer Text
+
+  // Interval, um die Richtung basierend auf der Animation zu ändern
+  setInterval(() => {
+    flyingRight = !flyingRight; // Wechselt die Richtung
+    updateSpeechBubble(); // Aktualisiert den Text
+  }, 35000); // Ändert die Richtung alle 35 Sekunden, basierend auf der Animationszeit
+});
+
 // Skills Nav ********************
 
 function myFunction() {

styles/Projects.css

@@ -56,7 +56,7 @@
   }
 
   .card {
-    width: 90%;
+    width: 70%;
     padding: 40px 15px;
     border-radius: 50px;
   }
@@ -74,7 +74,7 @@
   }
 
   .icon-container {
-    margin-left: 25%;
+    margin-left: 15%;
     gap: 15px;
   }
   .img-container {

styles/bee.css

@@ -4,16 +4,39 @@
   position: absolute;
 
   will-change: transform;
-  animation: fly 50s linear infinite, vertical-move 5s ease-in-out infinite;
+  animation: fly 70s linear infinite, vertical-move 8s ease-in-out infinite;
+  cursor: pointer;
 }
 
+.speech-bubble {
+  position: absolute;
+  width: 100px;
+  height: 50px;
+  background-color: white;
+  text-align: center;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid black;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: none;
+}
 @keyframes fly {
-  0%,
-  100% {
-    left: -52px;
+  0% {
+    left: 0;
+    transform: scaleX(-1);
   }
   50% {
-    left: calc(100% + 52px);
+    left: calc(100% - 150px);
+    transform: scaleX(-1);
+  }
+  50.001% {
+    transform: scaleX(1);
+  }
+  100% {
+    left: 0;
+    transform: scaleX(1);
   }
 }
 
@@ -27,3 +50,21 @@
     top: 100px;
   }
 }
+
+/* Media Query f*/
+@media (max-width: 768px) {
+  .bee-container {
+    margin-top: 400px;
+  }
+
+  @keyframes vertical-move {
+    0%,
+    100% {
+      top: 100px;
+    }
+    25%,
+    75% {
+      top: 150px;
+    }
+  }
+}

styles/dog.css

@@ -1,47 +1,59 @@
+#canvas1,
+.ball {
+  position: absolute;
+}
+
 #canvas1 {
-  position: relative;
-  top: 50%;
-  left: 0%;
+  top: 550%;
+  left: 20%;
+  opacity: 10;
+  transform: translate(-50%, -50%); /* Zentriere #canvas1 im Container */
   max-width: 600px;
   max-height: 600px;
-  margin-top: 100px;
-  margin-bottom: 150px;
   cursor: pointer;
 }
+
+.ball {
+  position: absolute;
+  top: 490%;
+  left: 30%;
+  bottom: 20px;
+  right: 20px;
+  width: 100px;
+}
 .controls {
   position: relative;
-  top: 10%;
+  top: 80%;
   left: 10%;
 }
 .controls,
 select,
 option {
-  margin-top: 150px;
+  margin-top: 250px;
   font-size: 25px;
   cursor: pointer;
 }
 
-/* Media Query für kleine Geräte */
+/* Media Query  */
 @media (max-width: 768px) {
   .ball {
     position: absolute;
-    /* Die Größe und Position bleiben gleich */
-    width: 100px;
-    margin-top: 550px;
+    width: 50px;
+    margin-top: 1300px;
     left: 75%;
   }
 
   #canvas1 {
-    /* Die Größe und Position bleiben gleich */
-    width: 500px;
-    height: 500px;
+    margin-top: 900px;
+    margin-left: 150px;
+    width: 400px;
+    height: 400px;
   }
 
   .controls,
   select,
   option {
-    /* Stellen Sie sicher, dass die Steuerelemente sichtbar und zugänglich bleiben */
-    margin-top: 150px;
-    font-size: 25px; /* Optionale Anpassung der Schriftgröße, falls erforderlich */
+    margin-top: 50px;
+    font-size: 25px;
   }
 }