Odaklanma sorunları mı yaşıyorsunuz? Özellikle ADHD ile mücadelenizde zamanı yönetmek bir meydan okuma haline mi geliyor? Sıkıcı, tekdüze zamanlayıcılar yerine, sizi motive edecek, Kiroween temalı, ADHD dostu bir Pomodoro zamanlayıcıyı nasıl inşa edebileceğimizi keşfedin ve öğrenme sürecinizi eğlenceli hale getirin!

Dikkat Eksikliği ve Hiperaktivite Bozukluğu (ADHD) ile yaşamak, genellikle zamanı algılama, görevleri başlatma ve sürdürme gibi yürütücü işlevlerde zorluklar anlamına gelir. Zaman körlüğü, dikkat dağınıklığı ve hiperfokus arasında gidip gelme gibi durumlar, günlük üretkenliği ciddi şekilde etkileyebilir. Bu noktada, Pomodoro Tekniği gibi zaman yönetimi araçları devreye girer. Geleneksel Pomodoro, 25 dakikalık odaklanma periyotları (pomodoro) ve ardından 5 dakikalık kısa molalar üzerine kuruludur. Her dört pomodorodan sonra ise 15-30 dakikalık daha uzun bir mola verilir. Bu yapı, birçok insan için oldukça etkilidir; ancak ADHD’li bireyler için bazen fazla monoton veya ilgi çekicilikten uzak kalabilir.

Peki, bu durumda ne yapmalıyız? Cevap basit: Sıkıcılığı ortadan kaldırmalı ve odaklanma sürecini bir oyuna dönüştürmeliyiz! İşte tam da burada “cosplay” kavramı devreye giriyor. Bir Pomodoro zamanlayıcısının cosplay yapması ne anlama gelir? Bu, zamanlayıcınıza sadece fonksiyonellik değil, aynı zamanda kişiliğinizi, ilgi alanlarınızı yansıtan görsel ve işitsel bir tema giydirmek demektir. Geleneksel bir zamanlayıcı sadece sayıları gösterirken, cosplaying bir zamanlayıcı ruhunuzu yansıtır. Örneğin, benim “Kiroween Journey” adını verdiğim bu projede, Cadılar Bayramı’nın o mistik ve eğlenceli atmosferini, yani “Kiroween” temasını zamanlayıcıya entegre ediyoruz. Böylece, zamanlayıcınız sadece bir araç olmaktan çıkıp, sizinle birlikte görevlerinize eşlik eden bir karaktere veya ortama dönüşüyor. Bu durum, ADHD’li beyinler için vazgeçilmez bir motivasyon kaynağıdır çünkü yenilik, görsel stimülasyon ve kişisel ilgi, görevlere başlamayı ve odaklanmayı çok daha kolay hale getirir. Normalde ertelediğiniz veya sıkıcı bulduğunuz bir görevi, favori temanızla donatılmış, interaktif bir zamanlayıcının rehberliğinde yapmak, adeta bir maceraya atılmak gibidir. Bu kişiselleştirme, sadece estetik bir tercih değil, aynı zamanda nörolojik ihtiyaçlara yönelik stratejik bir yaklaşımdır. Ayrıca, zamanlayıcının sunduğu görsel ve işitsel ipuçları, zamanın nasıl geçtiğini daha somut hale getirerek zaman körlüğü sorununa da bir nebze çözüm sunar. Bu şekilde, Pomodoro tekniğinin esnekliği ve kişiselleştirme potansiyeli sayesinde, sıkıcı bir görev yönetimi aracı olmaktan çıkarak, odaklanmayı keyifli bir deneyime dönüştürebiliriz.

• Görsel Teşvik: Kişisel zevklere uygun bir tema, arayüzün daha çekici olmasını sağlar.
• İşitsel Uyaranlar: Tema ile uyumlu sesler, mola ve başlangıç anlarını daha keyifli hale getirir.
• Esneklik: Süreleri ve temaları kişiselleştirme yeteneği, ADHD’li bireylerin kendi ritimlerine göre ayarlama yapmasına olanak tanır.
• Novelti ve Eğlence: Sürekli yenilik ve oyunlaştırma unsurları, motivasyonu yüksek tutar.

Kiroween Temalı Pomodoro Timer’ı Oluşturmanın Temelleri: HTML Yapısı Nasıl Kurulur?

Şimdi sıra geldi bu sihirli zamanlayıcının temelini atmaya. Her web projesinde olduğu gibi, iskeletimizi HTML ile oluşturacağız. Bu kısımda, zamanlayıcımızın ekranda neyin nerede duracağını belirleyeceğiz. Amacımız, hem fonksiyonel hem de temaya uygun bir yapı kurmak. Öncelikle, basit bir web sayfası oluşturmak için gerekli olan temel HTML etiketleriyle başlayacağız. Ardından, zamanı gösterecek, başlat/durdur/sıfırla düğmelerini içerecek ve belki de tema değiştirme seçenekleri sunacak ana bileşenleri tanımlayacağız.

Bir Pomodoro zamanlayıcısı için ana elementler şunlardır:

1. Zaman Göstergesi: Geri sayımı gösterecek büyük bir alan.
2. Kontrol Düğmeleri: Başlat, Duraklat, Sıfırla gibi temel işlevler için düğmeler.
3. Durum Göstergesi: Çalışma mı, mola mı olduğunu belirten küçük bir metin.
4. Tema Seçici (isteğe bağlı ama bizim için önemli): Farklı “cosplay” temaları arasında geçiş yapma düğmeleri veya açılır menüler.

Aşağıda, bu bileşenleri içeren basit bir HTML yapısı bulacaksınız. Bu yapı, projemizin temelini oluşturacak ve ilerleyen aşamalarda CSS ile şekillendirilip JavaScript ile işlevsel hale getirilecek.

    
    
    
    


    

        
Kiroween Pomodoro Zamanlayıcı
        

            25:00
        
        

            Başlat
            Duraklat
            Sıfırla
        
        

            
Hazır: Çalışma Zamanı!
        
        

            Kiroween
            Orman
            
        
    
    

Yukarıdaki HTML yapısında:

• : Tüm zamanlayıcıyı saran ana taşıyıcıdır. Bu, ortalama web sayfalarında merkezi bir görünüm elde etmemize yardımcı olur.
• 


  : Zamanlayıcının başlığını içerir. Bu, Kiroween temasını açıkça belirtmek için kullanılır.

• : Dakika ve saniyelerin görüntülendiği alandır. etiketleri, JavaScript ile zamanı dinamik olarak güncellememizi kolaylaştırır.
• : Başlat, Duraklat ve Sıfırla düğmelerini içerir. disabled özelliği, düğmelerin belirli durumlarda kullanılamaz hale gelmesini sağlar, bu da kullanıcı deneyimini iyileştirir.
• : Kullanıcının mevcut durumu (örn. "Çalışma Zamanı", "Mola Zamanı") hakkında bilgi veren bir paragraf içerir.
• : Farklı temalar arasında geçiş yapmamızı sağlayan düğmeleri barındırır. Kiroween teması varsayılan olarak aktiftir.

Bu temel yapı, zamanlayıcımızın görsel iskeletini oluşturur. Ardından, bu iskelete bir Kiroween ruhu katmak için CSS ile stil verecek ve JavaScript ile ona işlevsellik kazandıracağız. Bu katmanlı yaklaşım, karmaşık projeleri yönetilebilir parçalara ayırmanın ve her adımı adım adım geliştirmenin harika bir yoludur.

Karakterine Bürünmek: CSS ile Kiroween Estetiği Nasıl Yansıtılır?

HTML iskeletimiz hazır olduğuna göre, şimdi sıra geldi zamanlayıcımıza o eşsiz Kiroween ruhunu katmaya. CSS (Cascading Style Sheets) ile zamanlayıcımızın görünümünü şekillendirecek, renkleri, fontları ve hatta animasyonları kullanarak Cadılar Bayramı'nın mistik atmosferini yaratacağız. Bu adımda, yalnızca zamanlayıcının güzel görünmesini sağlamakla kalmayacak, aynı zamanda ADHD'li kullanıcılar için dikkat dağıtıcı unsurları en aza indiren ve odaklanmayı destekleyen bir tasarım dilini de benimseyeceğiz.

Kiroween teması için belirgin özellikler şunlar olabilir:

• Renk Paleti: Koyu morlar, turuncular, parlak yeşiller, siyahlar ve gri tonları.
• Fontlar: Gotik veya el yazısı tarzı fontlar, okunabilirliği bozmadan temayı destekler.
• Arka Plan: Loş bir orman, balkabağı veya hayalet silüetleri gibi detaylar.
• Animasyonlar: Hafif parlamalar, düğme geçiş efektleri veya hayaletimsi hareketler.

Aşağıdaki CSS kod bloğu, Kiroween temasının temelini atmanıza yardımcı olacaktır. Duyarlı tasarım (responsive design) ilkelerini de göz önünde bulundurarak, zamanlayıcımızın farklı ekran boyutlarında (mobil, tablet, masaüstü) iyi görünmesini sağlayacağız.

body {
    font-family: 'Creepster', cursive; /* Google Fonts'tan uygun bir font */
    background-color: #1a1a2e; /* Koyu morumsu arka plan */
    color: #e0e0e0; /* Açık gri metin rengi */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden; /* Taşmaları engelle */
    transition: background-color 0.5s ease;
}

/* Kiroween Teması Özellikleri */
body.kiroween-theme {
    background-image: url('kiroween-background.jpg'); /* Kiroween temalı arka plan görseli */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.container {
    background-color: rgba(0, 0, 0, 0.7); /* Şeffaf siyah kutu */
    padding: 30px 40px;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(128, 0, 128, 0.7); /* Mor bir parlama efekti */
    text-align: center;
    backdrop-filter: blur(5px); /* Hafif bulanıklık efekti */
}

h1 {
    color: #ff7f50; /* Canlı turuncu başlık */
    font-size: 2.8em;
    margin-bottom: 25px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.timer-display {
    font-family: 'Digital-7', monospace; /* Dijital saat fontu */
    font-size: 8em;
    margin-bottom: 30px;
    color: #9acd32; /* Parlak yeşil zaman */
    text-shadow: 0 0 20px rgba(154, 205, 50, 0.7); /* Yeşil parlama */
}

.controls button {
    background-color: #6a0dad; /* Koyu mor düğmeler */
    color: white;
    border: none;
    padding: 12px 25px;
    margin: 0 10px;
    border-radius: 8px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.controls button:hover:not(:disabled) {
    background-color: #8a2be2; /* Açık mor hover efekti */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(138, 43, 226, 0.5);
}

.controls button:disabled {
    background-color: #505050;
    cursor: not-allowed;
    opacity: 0.7;
}

.status p {
    font-size: 1.3em;
    margin-top: 25px;
    color: #ffd700; /* Altın sarısı durum metni */
}

.theme-switcher button {
    background-color: #3e275f;
    color: #f0f0f0;
    border: 1px solid #6a0dad;
    padding: 8px 15px;
    margin: 15px 5px 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.theme-switcher button.active {
    background-color: #8a2be2;
    border-color: #ff7f50;
    font-weight: bold;
}

/* İleri düzey: Animasyon örnekleri */
@keyframes glow {
    0% { box-shadow: 0 0 10px rgba(154, 205, 50, 0.4); }
    50% { box-shadow: 0 0 20px rgba(154, 205, 50, 0.8); }
    100% { box-shadow: 0 0 10px rgba(154, 205, 50, 0.4); }
}

.timer-display.active-pomodoro {
    animation: glow 1.5s infinite alternate;
}

/* Mobil uyumluluk: Media Queries */
@media (max-width: 768px) {
    .container {
        padding: 20px 25px;
        width: 90%;
    }
    h1 {
        font-size: 2em;
    }
    .timer-display {
        font-size: 5em;
    }
    .controls button {
        font-size: 1em;
        padding: 10px 20px;
        margin: 5px;
        display: block; /* Küçük ekranlarda düğmeleri alt alta sırala */
        width: calc(100% - 20px);
    }
    .theme-switcher button {
        display: block;
        width: calc(100% - 10px);
        margin: 5px auto;
    }
}

@media (max-width: 480px) {
    .timer-display {
        font-size: 4em;
    }
    h1 {
        font-size: 1.8em;
    }
}

Yukarıdaki CSS kodunda dikkat çeken bazı noktalar:

• Genel Stil (body): Sayfanın genel arka plan rengini, fontunu ve içeriği ortalamayı sağlar. transition özelliği, tema değişikliklerinin yumuşak geçişli olmasını garantiler.
• Kiroween Teması (body.kiroween-theme): Bu sınıf, Kiroween temasına özgü arka plan görselini ve rengini uygular. JavaScript ile bu sınıfı dinamik olarak değiştirebiliriz.
• Konteyner (.container): Zamanlayıcının ana kutusunu stilize eder. Yarı şeffaf arka plan, yuvarlak kenarlar ve mor bir parlama efekti, Cadılar Bayramı'nın mistik havasını yansıtır. backdrop-filter: blur(5px); modern tarayıcılarda arkaplandaki görüntüyü bulanıklaştırarak derinlik hissi verir.
• Zaman Göstergesi (.timer-display): Büyük, dijital görünümlü bir font ve parlak yeşil bir renk seçimiyle zamanın kolayca okunabilmesini sağlar. Yeşil parlama, zamanlayıcıya enerji katar.
• Kontrol Düğmeleri (.controls button): Koyu mor renkler, hover efektleri ve hafif bir transformasyon, düğmelere interaktif bir his verir. :disabled durumu, kullanılamayan düğmelerin nasıl görüneceğini belirler.
• Durum Metni (.status p): Altın sarısı rengi, önemli bilgilerin dikkat çekici olmasını sağlar.
• Tema Değiştirici (.theme-switcher button): Temalar arası geçiş düğmelerini stilize eder. Aktif temanın düğmesi farklı bir renk ve kenarlık ile vurgulanır.
• Animasyon (@keyframes glow): .timer-display.active-pomodoro sınıfına uygulanan glow animasyonu, çalışma zamanı geldiğinde zaman göstergesinin hafifçe parlamasını sağlar. Bu, ADHD'li bireyler için görsel bir uyaran ve odaklanma işaretçisi olabilir.
• Duyarlı Tasarım (@media): Bu sorgular, zamanlayıcımızın farklı ekran boyutlarında nasıl görüneceğini belirler. Örneğin, küçük ekranlarda düğmeler alt alta sıralanır ve metin boyutları küçültülür. Bu sayede, zamanlayıcınız hem bilgisayarda hem de mobil cihazlarda sorunsuz bir kullanıcı deneyimi sunar.

Bu CSS kodları ile zamanlayıcımız artık sadece işlevsel bir araç olmaktan çıkıp, göz alıcı ve tema odaklı bir görsel şölene dönüşüyor. Bir sonraki adımda, JavaScript ile bu görsel şölene hayat verecek ve onu tamamen interaktif hale getireceğiz.

Zamanın Büyüsü: JavaScript ile Pomodoro Mantığı Nasıl Hayat Bulur?

HTML iskeletimiz ve CSS ile şekillendirdiğimiz Kiroween temalı dış görünümümüz hazır. Şimdi sıra, bu güzel kabuğun içine ruh üflemeye geldi: JavaScript ile zamanlayıcımıza işlevsellik kazandıracağız. Bu bölümde, geri sayım mantığını, düğme etkileşimlerini, sesli bildirimleri ve tema değiştirme işlevselliğini adım adım nasıl entegre edeceğimizi göreceğiz. JavaScript, kullanıcının zamanlayıcıyla etkileşim kurmasını sağlayan dinamik bir katmandır.

Temel JavaScript işlevleri şunları içerecektir:

• Zamanlayıcı Durumu Yönetimi: Çalışıyor mu, duraklatıldı mı, mola mı, çalışma zamanı mı?
• Geri Sayım Mantığı: Saniyeleri ve dakikaları güncelleme.
• Düğme Olay Dinleyicileri: Başlat, Duraklat, Sıfırla düğmelerine tıklanınca ne olacağını belirleme.
• Sesli Bildirimler: Pomodoro veya molanın sona erdiğini kullanıcıya bildirme. Bu, ADHD'li kullanıcılar için dikkat çekici ve hatırlatıcı bir özellik olacaktır.
• Tema Değiştirme: Farklı Kiroween alt temaları veya başka temalar arasında geçiş yapma.

Aşağıda, temel zamanlayıcı mantığını ve tema değiştirme işlevini içeren bir JavaScript kod bloğu bulunmaktadır:

// HTML elementlerini seçme
const minutesDisplay = document.getElementById('minutes');
const secondsDisplay = document.getElementById('seconds');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const resetBtn = document.getElementById('reset-btn');
const statusText = document.getElementById('current-status');
const kiroweenThemeBtn = document.getElementById('kiroween-theme-btn');
const forestThemeBtn = document.getElementById('forest-theme-btn');
const body = document.body;

// Sesler
const workEndSound = new Audio('bell.mp3'); // Çalışma bitiş sesi
const breakEndSound = new Audio('spooky_chime.mp3'); // Mola bitiş sesi (Kiroween'e özel)

let timerInterval;
let totalSeconds = 25 * 60; // Varsayılan çalışma süresi (25 dakika)
let isPaused = true;
let isWorking = true; // Şu an çalışma mı, mola mı

const WORK_TIME = 25 * 60; // 25 dakika
const SHORT_BREAK_TIME = 5 * 60; // 5 dakika
const LONG_BREAK_TIME = 15 * 60; // 15 dakika
let pomodoroCount = 0; // Pomodoro döngüsü sayacı

// Zamanı ekranda güncelleme fonksiyonu
function updateDisplay() {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    minutesDisplay.textContent = String(minutes).padStart(2, '0');
    secondsDisplay.textContent = String(seconds).padStart(2, '0');

    // Zamanlayıcı çalışırken display'e aktif sınıfı ekle
    if (!isPaused && totalSeconds > 0) {
        minutesDisplay.parentElement.classList.add('active-pomodoro');
    } else {
        minutesDisplay.parentElement.classList.remove('active-pomodoro');
    }
}

// Geri sayım mantığı
function startTimer() {
    if (!isPaused) return; // Zaten çalışıyorsa tekrar başlatma

    isPaused = false;
    startBtn.disabled = true;
    pauseBtn.disabled = false;
    resetBtn.disabled = false;

    timerInterval = setInterval(() => {
        if (totalSeconds <= 0) {
            clearInterval(timerInterval);
            handleTimerEnd();
        } else {
            totalSeconds--;
            updateDisplay();
        }
    }, 1000); // Her saniye güncelle
}

// Zamanlayıcıyı duraklatma
function pauseTimer() {
    isPaused = true;
    clearInterval(timerInterval);
    startBtn.disabled = false;
    pauseBtn.disabled = true;
}

// Zamanlayıcıyı sıfırlama
function resetTimer() {
    pauseTimer();
    isWorking = true;
    totalSeconds = WORK_TIME;
    updateDisplay();
    statusText.textContent = 'Hazır: Çalışma Zamanı!';
    startBtn.disabled = false;
    resetBtn.disabled = false;
    // pomodoroCount = 0; // Döngüyü tamamen sıfırlamak isterseniz
}

// Zamanlayıcı bittiğinde ne olacağını yönetme
function handleTimerEnd() {
    if (isWorking) {
        workEndSound.play();
        pomodoroCount++;
        if (pomodoroCount % 4 === 0) {
            // Uzun mola
            totalSeconds = LONG_BREAK_TIME;
            statusText.textContent = 'Uzun Mola Zamanı!';
        } else {
            // Kısa mola
            totalSeconds = SHORT_BREAK_TIME;
            statusText.textContent = 'Kısa Mola Zamanı!';
        }
        isWorking = false;
    } else {
        breakEndSound.play(); // Mola bitiş sesi
        totalSeconds = WORK_TIME;
        statusText.textContent = 'Çalışma Zamanı!';
        isWorking = true;
    }
    isPaused = true;
    updateDisplay();
    startBtn.disabled = false;
    pauseBtn.disabled = true;
    // Otomatik başlatma için: startTimer();
}

// Tema değiştirme fonksiyonu
function changeTheme(themeName) {
    // Tüm tema sınıflarını kaldır
    body.classList.remove('kiroween-theme', 'forest-theme');
    // Yeni temayı ekle
    body.classList.add(themeName + '-theme');

    // Aktif düğmeyi güncelle
    document.querySelectorAll('.theme-switcher button').forEach(btn => {
        btn.classList.remove('active');
    });
    document.getElementById(themeName + '-theme-btn').classList.add('active');
}


// Olay dinleyicileri
startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);
kiroweenThemeBtn.addEventListener('click', () => changeTheme('kiroween'));
forestThemeBtn.addEventListener('click', () => changeTheme('forest')); // Diğer temalar için

// Başlangıçta ekranı güncelle
updateDisplay();

Yukarıdaki JavaScript kodu, zamanlayıcımızın temel mantığını oluşturur:

• Element Seçimi: İlk olarak, HTML belgesindeki ilgili elementleri getElementById ile seçiyoruz. Bu, JavaScript'in bu elementlerle etkileşim kurmasını sağlar.
• Ses Nesneleri: new Audio() ile çalışma ve mola bitiş seslerini tanımlıyoruz. Bu sesler, zamanlayıcı bittiğinde çalacak ve kullanıcıya durumu işitsel olarak bildirecektir.
• Değişkenler: timerInterval (setInterval için), totalSeconds (geri sayım için), isPaused (duraklatma durumu) ve isWorking (çalışma/mola durumu) gibi değişkenler, zamanlayıcının mevcut durumunu tutar.
• updateDisplay(): Bu fonksiyon, totalSeconds değişkenini alarak dakikaları ve saniyeleri hesaplar ve bunları HTML'deki ilgili elementlerine yazar. padStart(2, '0') ile tek haneli sayıların başına sıfır ekleyerek (örn. 5 yerine 05) daha düzenli bir görünüm sağlar. Ayrıca, zamanlayıcı aktifken CSS'teki active-pomodoro sınıfını ekleyerek parlayan bir efekt yaratır.
• startTimer(): Geri sayımı başlatan ana fonksiyondur. setInterval kullanarak her saniye totalSeconds değerini azaltır ve updateDisplay()'i çağırır. Zamanlayıcı sıfıra ulaştığında handleTimerEnd() fonksiyonunu çağırır.
• pauseTimer(): clearInterval kullanarak geri sayımı durdurur ve isPaused değişkenini true yapar.
• resetTimer(): Zamanlayıcıyı başlangıç değerlerine döndürür ve durdurur.
• handleTimerEnd(): Bir Pomodoro veya mola süresi bittiğinde çağrılan fonksiyondur. Hangi sürenin bittiğine göre (çalışma veya mola) ses çalar, durumu günceller ve bir sonraki döngüye geçiş için totalSeconds değerini ayarlar. Pomodoro sayacını da bu fonksiyon içinde artırıyoruz.
• changeTheme(themeName): Bu fonksiyon, body etiketinin sınıfını değiştirerek farklı CSS temalarının uygulanmasını sağlar. Örneğin, 'kiroween' veya 'forest' temaları arasında geçiş yapabilir.
• Olay Dinleyicileri: Son olarak, düğmelere tıklama olaylarını dinlemek için addEventListener kullanırız. Bu, kullanıcının düğmelere tıkladığında ilgili JavaScript fonksiyonlarının çalışmasını sağlar.

Bu JavaScript kodları ile Kiroween temalı Pomodoro zamanlayıcımız artık sadece güzel görünmekle kalmıyor, aynı zamanda tamamen işlevsel hale geliyor. Kullanıcılar zamanlayıcıyı başlatabilir, duraklatabilir, sıfırlayabilir ve temalar arasında geçiş yapabilirler. Bu dinamik yapı, ADHD'li kullanıcılar için odaklanma sürecini daha kontrol edilebilir ve eğlenceli hale getiren etkileşimli bir deneyim sunar.

Kişiselleştirme ve Gelişmiş Özellikler: Zamanlayıcınızı Daha Akıllı Hale Getirmek

Temel Pomodoro zamanlayıcımız Kiroween temasıyla hayat buldu ve işlevsel hale geldi. Ancak bir aracı gerçekten "ADHD dostu" yapmak ve "cosplay" ruhunu tam anlamıyla yansıtmak için daha fazla kişiselleştirme ve akıllı özellikler eklememiz gerekiyor. Bu bölümde, kullanıcı deneyimini zenginleştirecek ileri düzey ipuçları ve özellikler üzerinde duracağız. Bu geliştirmeler, zamanlayıcının sadece görevleri yönetmesine yardımcı olmakla kalmayacak, aynı zamanda kullanıcının özel ihtiyaçlarına daha iyi uyum sağlamasına olanak tanıyacak.

1. Ayarları Yerel Depolamada Saklama (Local Storage):

   Kullanıcıların belirlediği çalışma/mola süreleri veya seçtikleri tema gibi tercihleri her sayfa yenilemede kaybolmasın. Tarayıcının localStorage özelliğini kullanarak bu bilgileri kaydedebilir ve her ziyaretinde geri yükleyebiliriz. Bu, sürekli ayar yapma zahmetinden kurtarır ve tutarlı bir deneyim sunar.

   // Ayarları kaydetme fonksiyonu
   function saveSettings() {
       localStorage.setItem('pomodoroWorkTime', WORK_TIME / 60); // Dakika olarak kaydet
       localStorage.setItem('pomodoroShortBreakTime', SHORT_BREAK_TIME / 60);
       localStorage.setItem('pomodoroLongBreakTime', LONG_BREAK_TIME / 60);
       localStorage.setItem('selectedTheme', body.classList.item(0)); // Aktif temayı kaydet
   }
   
   // Ayarları yükleme fonksiyonu
   function loadSettings() {
       const savedWorkTime = localStorage.getItem('pomodoroWorkTime');
       const savedTheme = localStorage.getItem('selectedTheme');
   
       if (savedWorkTime) {
           // Gerekirse WORK_TIME, SHORT_BREAK_TIME vb. global değişkenleri buradan güncelleyebilirsiniz.
           // totalSeconds = savedWorkTime * 60; // Başlangıç süresini kaydettiğiniz süreden başlat
           // updateDisplay();
       }
       if (savedTheme) {
           changeTheme(savedTheme.replace('-theme', '')); // 'kiroween-theme' -> 'kiroween'
       } else {
           changeTheme('kiroween'); // Varsayılan tema
       }
   }
   
   // Sayfa yüklendiğinde ayarları yükle
   document.addEventListener('DOMContentLoaded', loadSettings);
   
   // Ayar değiştirildiğinde veya zamanlayıcı durduğunda ayarları kaydet
   // Örneğin, resetTimer() veya handleTimerEnd() içinde saveSettings() çağrılabilir.
   

2. Tarayıcı Bildirimleri (Browser Notifications):

   Zamanlayıcı sona erdiğinde, kullanıcı başka bir sekmedeyken veya farklı bir uygulamayla meşgulken dahi bildirim almasını sağlamak, dikkati tekrar zamanlayıcıya çekmek için harika bir yoldur. Kullanıcıdan bildirim izni istemeniz gerekecektir.

   function sendNotification(title, body) {
       if (Notification.permission === 'granted') {
           new Notification(title, { body: body, icon: 'icon.png' });
       } else if (Notification.permission !== 'denied') {
           Notification.requestPermission().then(permission => {
               if (permission === 'granted') {
                   new Notification(title, { body: body, icon: 'icon.png' });
               }
           });
       }
   }
   
   // handleTimerEnd() içinde çağırın
   // if (isWorking) { ... sendNotification('Pomodoro Bitti!', 'Kısa bir mola ver.'); }
   // else { ... sendNotification('Mola Bitti!', 'Tekrar çalışmaya başla!'); }
   

3. Görev Listesi Entegrasyonu:

   Basit bir görev listesi ekleyerek, kullanıcıların o an üzerinde çalıştıkları görevi yazmalarını sağlayabiliriz. Bu, odaklanmayı artırır ve bağlam değişimlerini azaltır. Aktif görevi zamanlayıcının altında gösterebilirsiniz.

   JavaScript ile bu input'un değerini alıp statusText gibi bir yerde gösterebilirsiniz.

4. Farklı Temalar ve Kişiselleştirme Seçenekleri:

   Sadece Kiroween temasıyla sınırlı kalmayın! Kullanıcıların kendi görsel veya ses dosyalarını yükleyebilecekleri bir "Custom Theme" (Özel Tema) seçeneği sunabilirsiniz. Bu, zamanlayıcıyı gerçekten "onların" yapmalarını sağlar.

   • Yeni CSS Temaları: forest-theme gibi yeni temalar için CSS dosyasına ek stil blokları tanımlayın ve JavaScript'teki changeTheme fonksiyonunu güncelleyin.
   • Görsel Yükleyici: Kullanıcıların arka plan görseli yüklemesini sağlayacak bir elementi ekleyip, seçilen görseli JavaScript ile body'nin arka planına uygulamak.
   • Ses Yükleyici: Aynı mantıkla, özel bitiş sesleri için.
5. Pomodoro Sürelerini Ayarlama:

   Kullanıcılara kendi çalışma ve mola sürelerini belirleme esnekliği tanıyın. ADHD'li bireylerin odaklanma süreleri değişebilir, bu yüzden 25 dakika herkese uymayabilir. Ayarlar için basit bir form veya kaydırıcılar (sliders) ekleyebilirsiniz.

Bu gelişmiş özellikler, Kiroween temalı Pomodoro zamanlayıcınızı sıradan bir araçtan, kullanıcının kişisel yardımcısına dönüştürecektir. Her eklenen özellik, deneyimi daha kişisel, daha motive edici ve dolayısıyla ADHD'li bireyler için daha etkili hale getirecektir.

Sonuç: Kiroween ile Odaklanmanın Keyfi

Bu "ADHD-Fueled Kiroween Journey" boyunca, sadece bir Pomodoro zamanlayıcı inşa etmekle kalmadık; aynı zamanda odaklanma ve üretkenlik araçlarına farklı bir bakış açısı getirdik. Geleneksel, sıkıcı zamanlayıcıların aksine, Kiroween temalı bu proje, görsel ve işitsel stimülasyon ile kişiselleştirmeyi birleştirerek ADHD'li bireyler için öğrenmeyi ve görev yönetimini daha eğlenceli ve erişilebilir hale getirmeyi hedefledi. HTML ile temel yapıyı kurduk, CSS ile mistik Kiroween estetiğini yansıttık ve JavaScript ile zamanlayıcımıza hayat verdik. Dahası, yerel depolama, tarayıcı bildirimleri ve görev listesi entegrasyonu gibi ileri düzey özelliklerle, zamanlayıcımızı gerçekten kullanıcı odaklı ve akıllı bir araca dönüştürdük. Unutmayın, üretkenlik her zaman gri ve monoton olmak zorunda değil; bazen tek ihtiyacımız olan, içimizdeki o meraklı çocuğu uyandıracak, rengarenk ve interaktif bir araçtır. Kendi "cosplay" zamanlayıcınızı inşa ederek, odaklanmayı keyifli bir maceraya dönüştürün!

Sıkça Sorulan Sorular

1. Pomodoro zamanlayıcıyı mobil cihazlarda kullanabilir miyim?

   Evet, medya sorgularını (media queries) doğru bir şekilde uyguladığımız sürece, zamanlayıcımız farklı ekran boyutlarına uyum sağlayacak ve mobil cihazlarda da sorunsuz bir kullanıcı deneyimi sunacaktır. Projenin web tabanlı olması, çoğu modern tarayıcıda çalışabileceği anlamına gelir.

2. Kendi tema görsellerimi ve seslerimi nasıl ekleyebilirim?

   Kendi görsel ve ses dosyalarınızı eklemek için JavaScript'te changeTheme fonksiyonunu veya benzer bir mekanizmayı özelleştirebilirsiniz. Dosyaları projenizin klasörüne ekleyip, JavaScript'te bu dosyalara giden yolları tanımlayarak (örneğin new Audio('my_custom_sound.mp3') veya body.style.backgroundImage = "url('my_custom_bg.jpg')") kolayca entegre edebilirsiniz.

3. ADHD'li kişiler için bu zamanlayıcıyı daha etkili hale getirecek başka neler yapabilirim?

   Görsel ve işitsel uyaranları artırmak, Pomodoro sürelerini esnek hale getirmek, küçük oyunlaştırma ödülleri eklemek ve düzenli aralıklarla "hatırlatıcı bildirimler" göndermek (örn. "Su iç", "Kısa bir ara ver ve esne") gibi özellikler eklemek, zamanlayıcının etkinliğini artıracaktır. Ayrıca, basit bir "distraction tracker" (dikkat dağıtıcı takibi) ile kullanıcının ne zaman ve neyle dikkatini dağıttığını kaydetmek de farkındalığı artırabilir.