Update stopwatch-timer.html
This commit is contained in:
FURK4NGG
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user