New features

tokgozkerem · Mar 18, 2024 · 5b469a7 · 5b469a7
1 parent a048d37
commit 5b469a7
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 6 deletions.
diff --git a/draw.js b/draw.js
@@ -70,14 +70,11 @@ function createTable(potName, teams) {
 
     // Create image element for logo
     const img = document.createElement("img");
-    img.onload = function () {
-      // Adjust size after image loads
-      this.width = 25;
-      this.height = 25; // Set height to 50 pixels
-    };
     img.src = `images/${teamName.replace(/\s+/g, "_").toLowerCase()}_logo.png`;
     img.alt = `${teamName} Logo`;
     img.classList.add("team-logo");
+    img.width = 25; // Set width to 25 pixels
+    img.height = 25; // Set height to 25 pixels
 
     // Create span element for team name
     const teamNameSpan = document.createElement("span");
@@ -227,6 +224,33 @@ function displayGroups() {
   // Grupları ekrana ekle
   for (let i = 0; i < groups.length; i++) {
     const groupName = `GROUP ${i + 1}`;
-    groupContainer.appendChild(createTable(groupName, groups[i]));
+    const groupTable = createTable(groupName, groups[i]); // Grup tablosunu oluştur
+    groupContainer.appendChild(groupTable); // Grup tablosunu ekrana ekle
+    displayTeams(groupTable); // Takımları göster
   }
 }
+
+// Takımları belirli aralıklarla göster
+function displayTeams(table) {
+  const teams = Array.from(table.querySelectorAll("tbody tr"));
+
+  // İlk takımı görünür yap ve diğerlerini gizle
+  teams.forEach((team, index) => {
+    if (index === 0) {
+      team.style.display = "table-row";
+    } else {
+      team.style.display = "none";
+    }
+  });
+
+  // Her bir takımı belirli aralıklarla göster
+  let index = 1;
+  const interval = setInterval(() => {
+    if (index < teams.length) {
+      teams[index].style.display = "table-row"; // Takımı görünür yap
+      index++;
+    } else {
+      clearInterval(interval); // Tüm takımlar gösterildi, aralığı temizle
+    }
+  }, 850); // Her bir takımın gösterilme zamanı (500 ms aralıkla)
+}
diff --git a/image/ucl-logo.png b/image/ucl-logo.png
diff --git a/image/uclicon.png b/image/uclicon.png
diff --git a/index.html b/index.html
@@ -5,8 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Champions League</title>
     <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" type="image/png" href="image/uclicon.png" />
   </head>
   <body>
+    <img src="image/ucl-logo.png" class="ucllogo" alt="UCL Logo" />
+    <div class="background"></div>
     <div id="drawContainer"></div>
     <!-- Pot tablolarının yerleştirileceği div -->
     <div id="buttonContainer">

diff --git a/styles.css b/styles.css
@@ -1,3 +1,13 @@
+.ucllogo {
+  position: fixed;
+  bottom: 50;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+  opacity: 0.15; /* İstenirse resmin şeffaflığı ayarlanabilir */
+  height: 700px;
+}
+
 body {
   background: linear-gradient(
     to top right,
@@ -108,6 +118,9 @@ body {
   cursor: pointer;
   transition-duration: 0.4s;
 }
+#drawButton:hover {
+  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.2); /* Parlak pembe ışık */
+}
 
 #groupContainer {
   display: flex;