diff --git a/stopwatch-timer.html b/stopwatch-timer.html
index 8b13789..dd647b9 100644
--- a/stopwatch-timer.html
+++ b/stopwatch-timer.html
@@ -1 +1,725 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8">
+    <link id="favicon" href="img/icon.ico" rel="shortcut icon" type="image/x-icon">
+    <title>Stopwatch Timer App</title>
+    <style>
+@font-face{font-family:'JetBrains Mono';src:url('/FONTS/JetBrains.woff2')format('woff2');font-style:normal;}
+@font-face {font-family: 'Teko'; src: url('/FONTS/Teko.woff2') format('woff2'); font-style: normal;}
+:root{
+  --light: #F8F6E3;
+  --dark: #0C0C0C;
+  margin:0;
+  padding:0;
+  box-sizing:border-box}
+  
+  body{
+    overflow-y: hidden;
+    height:100vh;
+    display:flex;
+    flex-direction: column;
+    align-items:center;
+    justify-content:center;
+    background:var(--dark)}
 
+    .wrapper .wrapper2{
+  user-select: none !important;
+  overflow: hidden;
+  position: relative;
+  flex: 0 1 auto;
+  height: auto;
+  background: var(--dark);
+  width: calc(100% - 4.5rem);
+  max-width: 27rem;}
+
+  .wrapper2{
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem;}
+  
+.wrapper .time{
+  -webkit-user-select: none !important;
+  font-family: "JetBrains Mono";
+  height: 6.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+  font-size: clamp(1rem, 9vw, 3rem) !important;}
+
+.wrapper .time span{
+  width: auto;
+  text-align: center;
+  font-weight: 500;
+  color: var(--light);}
+
+.wrapper .buttons{
+  -webkit-user-select: none !important;
+  text-align:center;
+  margin-top:1.25rem}
+
+.buttons button{
+  font-family: "JetBrains Mono";
+  padding: .375rem 1rem;
+  outline: none;
+  border: none;
+  color: var(--dark);
+  background: var(--light);
+  font-size: 17px;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  box-shadow: 10px 10px 20px rgb(0 0 0 / .09);
+  width: 5rem;
+  margin: .2rem .2rem;}
+
+.buttons button.active,.buttons button.stopActive{
+  pointer-events:none;
+  opacity:.7}
+
+.laps-container{
+  margin-top:1.25rem;
+  max-height:9.375rem;
+  background:transparent;
+  padding: 0 2.8rem;}
+
+.laps {
+  height: 9.375rem; /* örnek sınır */
+  list-style: none;
+  padding: 0;
+  overflow-y: auto;}
+
+.laps li{
+  font-size:16px;
+  color: var(--light);
+  text-align: center;
+  border-bottom:1px solid #ddd;
+  font-family: "JetBrains Mono";
+  padding:.25rem 0;}
+
+.circle {
+  position: relative;}
+
+.display-remain-time {
+  position: absolute;
+  top: 44%;
+  left: 50%;
+  transform: translate(-50%, -50%);}
+
+#set{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 .3rem;}
+
+button[data-setter], .controls button {
+  outline: none;
+  background: transparent;
+  border: none;
+  font-family: "JetBrains Mono";
+  font-weight: 300;
+  font-size: 18px;
+  width: 2.1875rem;
+  height: 2.17rem;
+  color: var(--light);
+  cursor: pointer;}
+
+button[data-setter]:hover, .controls button:hover {
+  opacity: 0.7;}
+
+.setters {
+  display: flex;
+  justify-content: center;
+  font-family: "JetBrains Mono";
+  color: var(--light);
+  margin-top: 1.25rem;}
+
+.setters .value {
+  font-size: 20px;
+  margin: 0 5px;
+  display: inline-block;}
+
+.display-remain-time {
+  font-family: "JetBrains Mono";
+  font-weight: 100;
+  font-size: 50px;
+  color: var(--light);
+  margin-top: 1.25rem;
+  width: fit-content;}
+
+.e-c-base {
+  fill: none;
+  stroke: var(--light);
+  stroke-width: 5px;}
+  
+.e-c-progress {
+  fill: none;
+  stroke: var(--dark);
+  stroke-width: 3px;
+  transition: stroke-dashoffset 0.5s linear;}
+
+.e-c-pointer {
+  fill: #FFF;
+  stroke: var(--light);
+  stroke-width: 2px;}
+
+#e-pointer {
+  transition: transform 0.5s linear;}
+
+.controls {
+  display: flex;
+  align-items: center;
+}
+
+.controls button {
+  margin: 10px 5px;
+  font-size: 16px;
+  color: var(--light);}
+
+#toggleBtn {
+  outline: none;
+  background: transparent;
+  border: none;
+  width: 50px;
+  height: 50px;
+  position: relative;
+  cursor: pointer;}
+
+/* Play ikon (üçgen) */
+.play::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: 16px;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 22px solid var(--light);}
+
+/* Pause ikon (iki dikdörtgen) */
+.pause::after {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: 12px;
+  width: 15px;
+  height: 30px;
+  background-color: transparent;
+  border-radius: 1px;
+  border: 5px solid var(--light);
+  border-top: none;
+  border-bottom: none;}
+
+#resetBttn {
+  width: 75px;}
+
+input[type="color"] {
+    width: 2.5rem;
+    height: 2.5rem;
+    position: fixed;
+    bottom: 32px;
+    left: unset;
+    right: 15px;
+    border: none;
+    cursor: pointer;}
+
+.theme-toggle {
+      width: 2.5rem;
+      height: 2.5rem;
+      position: fixed;
+      bottom: 32px;
+      left: 15px;
+      right:unset;
+      background: var(--light);
+      color: var(--dark);
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      justify-content: center;
+      align-items: center;
+      transition: background 0.3s ease, color 0.3s ease;
+      z-index: 10;}
+
+.nav {
+  position: relative;
+  display: flex;}
+
+.nav__item {
+  position: relative;
+  display: flex;
+  width: 7rem;
+  height: 2rem;
+  text-decoration: none;
+  align-items: center;
+  justify-content: center;}
+
+.nav__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 1rem;
+  background: var(--light);
+  transition: all 0.3s ease;
+  border-radius: 9px;}
+
+.custom-alert {
+    position: fixed;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 6.25rem;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--dark);
+    background: var(--light);
+    animation: blinkBg 1s infinite;
+    z-index: 9999;}
+
+  /* blink efekti */
+  @keyframes blinkBg {
+    0%, 50%, 100% { background: var(--light);color: var(--dark); }
+    25%, 75% { background: var(--dark); color: var(--light); border: 2px solid var(--light); }
+  }
+
+  /* buton blinkten etkilenmesin */
+  .custom-alert button {
+    margin-top: 1rem;
+    padding: .5rem 1rem;
+    background: var(--dark);
+    color: var(--light);
+    font-size: 16px;
+    font-weight: bold;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    animation: none !important; /* blink’i devre dışı bırak */}
+
+  .elapsed-time {
+    margin-top: .625rem;
+    font-size: 18px;
+    font-weight: normal;
+    color: var(--dark);}
+  </style>
+  </head>
+  <body>
+  <nav class="nav">
+  <div class="nav__indicator"></div>
+  <a href="#" id="item_1" class="nav__item">Stopwatch</a>
+  <a href="#" id="item_2" class="nav__item">Timers</a>
+</nav><div class="wrapper"><div class="time"><span class="hour">00</span><span class="colon">:</span><span class="minute">00</span><span class="colon">:</span><span class="second">00</span><span class="colon ms-colon">:</span><span class="millisecond">00</span></div><div class="buttons"><button class="start">Start</button><button class="stop">Stop</button><button class="reset">Reset</button><button class="lap">Lap</button></div><div class="laps-container"><ul class="laps"></ul></div></div>
+<div class="wrapper2">
+  <!-- Dairesel Gösterge -->
+  <div class="circle">
+  <svg width="300" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(110,110)">
+      <circle r="100" class="e-c-base"/>
+      <g transform="rotate(-90)">
+        <circle r="100" class="e-c-progress"/>
+        <g id="e-pointer">
+          <circle cx="100" cy="0" r="8" class="e-c-pointer"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+  <div class="display-remain-time">00:00:00</div>
+</div>
+
+  <div class="controls">
+    <button id="toggleBtn" class="play"></button>
+    <button id="resetBttn" class="reset">Reset</button>
+  </div>
+
+  <div class="setters">
+    <div id="set" class="hours-set">
+      <button data-setter="hours-plus">+</button>
+      <div class="value hours">00</div>
+      <button data-setter="hours-minus">-</button>
+    </div>
+    <div id="set" class="minutes-set">
+      <button data-setter="minutes-plus">+</button>
+      <div class="value minutes">00</div>
+      <button data-setter="minutes-minus">-</button>
+    </div>
+    <div id="set" class="seconds-set">
+      <button data-setter="seconds-plus">+</button>
+      <div class="value seconds">00</div>
+      <button data-setter="seconds-minus">-</button>
+    </div>
+  </div>
+</div>
+<button class="theme-toggle" id="themeToggle">◐</button>
+<input type="color" id="colorPicker" value="#ffffff">
+<script>
+document.addEventListener("dblclick", function(e) {
+      e.preventDefault();
+    });
+
+let startTimer,
+  hr = (min = sec = ms = "00");
+const startBtn = document.querySelector(".start"),
+  stopBtn = document.querySelector(".stop"),
+  resetBtn = document.querySelector(".reset"),
+  lapBtn = document.querySelector(".lap"),
+  lapsList = document.querySelector(".laps");
+
+let lapCount = 0; // global değişken
+let lastLapTime = ""; // son eklenen lap zamanı
+
+const body = document.body;
+const themeToggle = document.getElementById('themeToggle');
+let clicked = false;
+let lightMode = false;
+
+function start() {
+  startBtn.classList.add("active");
+  stopBtn.classList.remove("stopActive");
+  startTimer = setInterval(() => {
+    ms++;
+    ms = ms < 10 ? "0" + ms : ms;
+    if (ms == 100) {
+      sec++;
+      sec = sec < 10 ? "0" + sec : sec;
+      ms = "00";
+    }
+    if (sec == 60) {
+      min++;
+      min = min < 10 ? "0" + min : min;
+      sec = "00";
+    }
+    if (min == 60) {
+      hr++;
+      hr = hr < 10 ? "0" + hr : hr;
+      min = "00";
+    }
+    putValue();
+  }, 10);
+}
+
+function stop() {
+  startBtn.classList.remove("active");
+  stopBtn.classList.add("stopActive");
+  clearInterval(startTimer);
+}
+
+function reset() {
+  startBtn.classList.remove("active");
+  stopBtn.classList.remove("stopActive");
+  clearInterval(startTimer);
+  hr = min = sec = ms = "00";
+  lastLapTime = "";
+  lapsList.innerHTML = "";
+  lapCount = 0;
+  putValue();
+}
+
+function lap() {
+
+  if (hr === "00" && min === "00" && sec === "00" && ms === "00") return;
+
+  const currentTime = `${hr}:${min}:${sec}:${ms}`;
+
+  // Son lap ile aynıysa ekleme
+  if (currentTime === lastLapTime) return;
+
+  lapCount++; // her yeni lap için sayacı artır
+  const li = document.createElement("li");
+  li.textContent = `Lap ${lapCount}: ${currentTime}`;
+  lapsList.appendChild(li);
+  lastLapTime = currentTime;
+
+  // DOM güncellendikten sonra en alta kaydır
+  setTimeout(() => {
+    lapsList.scrollTop = lapsList.scrollHeight;
+  }, 0);
+}
+
+function putValue() {
+  document.querySelector(".millisecond").innerText = ms;
+  document.querySelector(".second").innerText = sec;
+  document.querySelector(".minute").innerText = min;
+  document.querySelector(".hour").innerText = hr;
+}
+
+startBtn.addEventListener("click", start);
+stopBtn.addEventListener("click", stop);
+resetBtn.addEventListener("click", reset);
+lapBtn.addEventListener("click", lap);
+
+ // === CIRCLE SETUP ===
+const progressBar = document.querySelector('.e-c-progress');
+const pointer = document.getElementById('e-pointer');
+const displayOutput = document.querySelector('.display-remain-time');
+
+const toggleBtn = document.getElementById('toggleBtn'); // play/pause tek buton
+const resetBttn = document.getElementById('resetBttn');
+
+const setterBtns = document.querySelectorAll('button[data-setter]');
+const hoursDiv = document.querySelector('.hours');
+const minutesDiv = document.querySelector('.minutes');
+const secondsDiv = document.querySelector('.seconds');
+
+let totalSeconds = 0;
+let remainingSeconds = 0;
+let timerInterval = null;
+let isRunning = false;
+
+// circle setup
+const circleLength = 2 * Math.PI * 100;
+progressBar.style.strokeDasharray = circleLength;
+progressBar.style.strokeDashoffset = circleLength;
+
+// update circle and pointer
+function updateCircle() {
+  if (totalSeconds === 0) {
+    progressBar.style.strokeDashoffset = circleLength;  // TAM çember → 100%
+  pointer.style.transform = 'rotate(0deg)';
+    return};
+  const percent = remainingSeconds / totalSeconds;
+  progressBar.style.strokeDashoffset = circleLength * (1 - percent);
+  pointer.style.transform = `rotate(${360 * percent}deg)`; // saat yönünde
+}
+
+// update display
+function updateDisplay() {
+  let h = Math.floor(remainingSeconds / 3600);
+  let m = Math.floor((remainingSeconds % 3600) / 60);
+  let s = remainingSeconds % 60;
+  displayOutput.textContent =
+    `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
+  hoursDiv.textContent = h.toString().padStart(2,'0');
+  minutesDiv.textContent = m.toString().padStart(2,'0');
+  secondsDiv.textContent = s.toString().padStart(2,'0');
+  updateCircle();
+}
+
+// setter buttons
+setterBtns.forEach(btn => {
+  btn.addEventListener('click', () => {
+    const type = btn.dataset.setter;
+    if (type.includes('hours')) {
+      let val = parseInt(hoursDiv.textContent);
+      if (type.endsWith('plus')) val = (val + 1) % 24;
+      else val = (val - 1 + 24) % 24;
+      hoursDiv.textContent = val.toString().padStart(2,'0');
+    } else if (type.includes('minutes')) {
+      let val = parseInt(minutesDiv.textContent);
+      if (type.endsWith('plus')) val = (val + 1) % 60;
+      else val = (val - 1 + 60) % 60;
+      minutesDiv.textContent = val.toString().padStart(2,'0');
+    } else if (type.includes('seconds')) {
+      let val = parseInt(secondsDiv.textContent);
+      if (type.endsWith('plus')) val = (val + 1) % 60;
+      else val = (val - 1 + 60) % 60;
+      secondsDiv.textContent = val.toString().padStart(2,'0');
+    }
+
+    totalSeconds =
+      parseInt(hoursDiv.textContent) * 3600 +
+      parseInt(minutesDiv.textContent) * 60 +
+      parseInt(secondsDiv.textContent);
+    remainingSeconds = totalSeconds;
+    updateDisplay();
+  });
+});
+
+const control_Setters = document.querySelector(".setters");
+// toggle play/pause
+toggleBtn.addEventListener('click', () => {
+  if (!isRunning) {
+    if (totalSeconds === 0) return; // süre yoksa başlatma
+    toggleBtn.classList.remove("play");
+    toggleBtn.classList.add("pause");
+    control_Setters.style.display = "none";
+
+    if (!timerInterval) {
+      timerInterval = setInterval(() => {
+        remainingSeconds--;
+        updateDisplay();
+        if (remainingSeconds <= 0) {
+          clearInterval(timerInterval);
+          timerInterval = null;
+          showTimerAlert();
+          toggleBtn.classList.remove("pause");
+          toggleBtn.classList.add("play");
+          control_Setters.style.display = "flex";
+          isRunning = false;
+        }
+      }, 1000);
+    }
+    isRunning = true;
+  } else {
+    toggleBtn.classList.remove("pause");
+    toggleBtn.classList.add("play");
+    control_Setters.style.display = "flex";
+    clearInterval(timerInterval);
+    timerInterval = null;
+    isRunning = false;
+  }
+});
+
+// reset
+resetBttn.addEventListener('click', () => {
+  clearInterval(timerInterval);
+  control_Setters.style.display = "flex";
+  timerInterval = null;
+  isRunning = false;
+  remainingSeconds = 0;
+  totalSeconds = 0;
+
+  // Saat, dakika ve saniyeyi sıfırla
+  hoursDiv.textContent = '00';
+  minutesDiv.textContent = '00';
+  secondsDiv.textContent = '00';
+  displayOutput.textContent = '00:00:00';
+
+  // progress bar ve pointer sıfırla
+  progressBar.style.strokeDashoffset = circleLength;  // TAM çember → 100%
+  pointer.style.transform = 'rotate(0deg)';
+
+  // buton reset → play
+  toggleBtn.classList.remove("pause");
+  toggleBtn.classList.add("play");
+});
+
+
+let faviconBlinkInterval = null;
+let elapsedInterval = null;
+let elapsedSeconds = 0;
+
+function showTimerAlert() {
+  const alertBox = document.createElement("div");
+  alertBox.className = "custom-alert";
+  alertBox.innerHTML = `
+    <p>Time is up!</p>
+    <div class="elapsed-time" id="elapsedTime">+00:00</div>
+    <button id="muteBtn">Ignore</button>
+  `;
+  document.body.appendChild(alertBox);
+
+  // favicon blink başlat
+  startFaviconBlink();
+
+  // kronometre başlat
+  startElapsedTime();
+
+  // mute/durdur
+  document.getElementById("muteBtn").addEventListener("click", () => {
+    stopAlert(alertBox);
+  });
+}
+
+function startFaviconBlink() {
+  const favicon = document.getElementById("favicon");
+  let isRed = false;
+
+  faviconBlinkInterval = setInterval(() => {
+    favicon.href = isRed ? "img/icon.ico" : "img/black.ico";
+    isRed = !isRed;
+  }, 800);
+}
+
+function startElapsedTime() {
+  const display = document.getElementById("elapsedTime");
+  elapsedSeconds = 0;
+
+  elapsedInterval = setInterval(() => {
+    elapsedSeconds++;
+    let minutes = Math.floor(elapsedSeconds / 60);
+    let seconds = elapsedSeconds % 60;
+    display.textContent = `+${minutes.toString().padStart(2,"0")}:${seconds.toString().padStart(2,"0")}`;
+  }, 1000);
+}
+
+function stopAlert(alertBox) {
+  // alert kutusunu kapat
+  alertBox.remove();
+
+  // favicon blink durdur
+  clearInterval(faviconBlinkInterval);
+  faviconBlinkInterval = null;
+
+  // favicon resetle
+  document.getElementById("favicon").href = "img/icon.ico";
+
+  // kronometre durdur
+  clearInterval(elapsedInterval);
+  elapsedInterval = null;
+  elapsedSeconds = 0;
+}
+
+
+// Tema değiştirme
+  themeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('light-mode');
+    /*lightMode = !lightMode;*/
+    const darkColor = getComputedStyle(document.documentElement)
+                    .getPropertyValue('--dark').trim();
+const lightColor = getComputedStyle(document.documentElement)
+                    .getPropertyValue('--light').trim();
+
+// Toggle işlemi
+document.documentElement.style.setProperty('--dark', lightColor);
+document.documentElement.style.setProperty('--light', darkColor);
+  });
+
+const colorInput = document.getElementById("colorPicker");
+
+  colorInput.addEventListener("input", function() {
+    if (body.className === "") {
+        // Light mode aktif ediliyor
+        document.documentElement.style.setProperty("--dark", this.value);
+
+      } else {
+        // Light mode kapatılıyor (dark mode'a dön)
+        document.documentElement.style.setProperty("--dark", this.value);
+      }
+  });
+
+
+const indicator = document.querySelector('.nav__indicator');
+const items = document.querySelectorAll('.nav__item');
+
+const gameSection = document.querySelector('.wrapper');
+const webSection = document.querySelector('.wrapper2');
+const item1 = document.getElementById('item_1');
+const item2 = document.getElementById('item_2');
+
+let activeItem = items[0]; // açılışta ilk item seçili
+moveIndicator(activeItem);
+updateVisibility(0); // ilk item açık
+
+items.forEach((item, index) => {
+  item.addEventListener('click', e => {
+    e.preventDefault();
+    activeItem = item;
+    moveIndicator(activeItem);
+    updateVisibility(index);
+  });
+});
+
+function moveIndicator(target) {
+  const { offsetLeft: left, offsetTop: top, offsetWidth: width, offsetHeight: height } = target;
+  indicator.style.left = `${left - 4}px`;  // biraz dışarı taşsın
+  indicator.style.top = `${top - 4}px`;
+  indicator.style.width = `7.5rem`;
+  indicator.style.height = `2.5rem`;
+}
+
+function updateVisibility(index) {
+  if (index === 0) {
+    gameSection.style.display = 'block';
+    webSection.style.display = 'none';
+    item1.style.color = "var(--dark)";
+    item2.style.color = "var(--light)";
+  } else if (index === 1) {
+    gameSection.style.display = 'none';
+    webSection.style.display = 'flex';
+    item1.style.color = "var(--light)";
+    item2.style.color = "var(--dark)";
+  }
+}
+</script></body></html>
