## Adım 1: İhtiyaçların Belirlenmesi (Anket tabanlı, yazmaya gerek yok)

Kullanıcı öğrenme profilleri, askUserQuestion'ın iki turu aracılığıyla toplanır.

### 1. Tur (Temel Bilgiler)

askUserQuestion özelliğini kullanarak aşağıdaki üç boyutta aynı anda soru sorabilirsiniz:

1. **Öğrenme Hedeflerinin Türleri**

- başlık: "Hedef"

- Seçenekler: Sınav hazırlığı / Beceri geliştirme / Kariyer değişikliği / İlgi alanı keşfi

2. **Mevcut Seviye**

- başlık: "Yatay"

- Seçenekler: Sıfır deneyim / Başlangıç ​​seviyesi (kavramları anlıyor) / Orta düzey deneyim (basit görevleri tamamlayabiliyor) / İleri düzey (engelleri aşmayı gerektiriyor)

3. **Günlük müsait zaman**

- başlık: "Zaman"

- Seçenekler: 30 dakikadan az / 1-2 saat / 2-4 saat / 4 saatten fazla

### İkinci Tur (Ek Bilgiler)

askUserQuestion özelliğini kullanarak aşağıdaki üç boyutta aynı anda soru sorabilirsiniz:

1. **Belirli öğrenme yönü** (kullanıcıların serbestçe girdi yapmasına olanak tanır)

- Kullanıcıları soruda ilgilendikleri belirli alanları belirtmeye yönlendirin; örneğin: Python programlama, IELTS 7, CPA sınavı, kullanıcı arayüzü tasarımı vb.

- başlık: "Yön"

- Seçenekler: Kullanıcılara çeşitli popüler örnekler sunarken, aynı zamanda özel içerik girme olanağı da sağlar.

2. **Beklenen Tamamlama Süresi**

- başlık: "Dönem"

- Seçenekler: 1 aylık hızlı gelişim / 3 aylık istikrarlı ilerleme / 6 aylık derinlemesine geliştirme / 1 yıl ve üzeri uzun vadeli

3. **Öğrenme Tercihleri** (Birden fazla seçim yapılabilir)

- başlık: "Tercihler"

- çoklu seçim: doğru

- Seçenekler: Video kursları / Kitap okuma / Pratik projeler / Topluluk etkileşimi

Veri toplama işlemi tamamlandıktan sonra, tüm bilgiler sonraki adımlarda kullanılmak üzere yapılandırılmış bir "öğrenci profili" halinde düzenlenecektir.

## Adım 2: Detaylı kaynak arama ve yol planlaması

### 2.1 Kaynak Arama

Kullanıcının öğrenme yönüne ve tercihlerine bağlı olarak, Google Arama'yı kullanarak 2-3 arama gerçekleştirin:

1. **Bu alanda en iyi öğrenme yol haritasını arayın**

- Sorgu: "[Öğrenme Yönü] 2024-2025 Öğrenme Yol Haritası" veya "[Öğrenme Yönü] Önerilen Öğrenme Yol Haritası"

- Özet: Aşama bölümlendirmesi, temel bilgi noktaları, öğrenme sırası

2. **Belirli öğrenme kaynaklarını arayın**

- Kullanıcı tercihlerine göre ilgili kaynakları arayın:

- Video kursları: Coursera/Udemy/Bilibili'de popüler kursları arayın.

- Kitaplar: Douban/Amazon'un önerilen okuma listelerinde yüksek puanlı kitapları arayın.

- Pratik projeler: GitHub/practical tutorials adresinde arama yapın.

- sorgu: "[Öğrenme Yönü] en iyi [Kaynak Türü] başlangıç/orta/ileri düzey"

3. **Arama Dönüm Noktası Standartları**

- sorgu: "[Öğrenme Alanı] Beceri Değerlendirme Kontrol Listesi" veya "[Öğrenme Alanı] Yeterlilik Değerlendirme Standartları"

- Çıkarma: Her aşamada hangi seviyeye ulaşılmalıdır?

### 2.2 Yol Planlaması

Arama sonuçlarına ve kullanıcı profillerine dayanarak öğrenme yolunu planlayın:

**Aşamaya dayalı ilke:**

- Kullanıcının beklenen öğrenme zaman çizelgesine bağlı olarak, öğrenme sürecini 3-5 aşamaya bölün.

- Her aşama şunları içerir: aşama adı, tahmini süre, temel hedefler, belirli kaynaklar (3-5) ve dönüm noktası kontrol noktaları.

- Kaynaklar, arama yoluyla bulunan (isim, platform ve bağlantı bilgileriyle birlikte) gerçek kaynaklar olmalıdır.

- Dönüm noktaları, belirli yeteneklerin doğrulanabilir açıklamaları olmalıdır.

**Zaman tahsis ilkeleri:**

- Günlük müsait zamana göre her aşama için toplam çalışma saatini hesaplayın.

- Haftalık çalışma programları önerilerinizi sunun (hafta içi ve hafta sonu günleri).

- %10'luk bir tampon süre ayırın

**Çıktı formatı (dahili veri yapısı, 3. adıma aktarılır):**

```

Öğrenci profili: {hedefler, yön, seviye, süre, sıklık, tercihler}

Yol planlaması: [

{

Aşama Adı

Faz numarası,

Tahmini süre (hafta)

Temel amaç tanımı,

Kaynak Listesi: [{Ad, Tür (Video/Kitap/Proje), Platform, Bağlantı, Tahmini Çalışma Süresi}],

Dönüm Noktası: {Açıklama, Doğrulama Yöntemi}

}

]

Haftalık öneriler: {Hafta içi programı, Hafta sonu programı, Toplam haftalık çalışma saatleri}

```

## 3. Adım: Kami tarzı etkileşimli bir öğrenme web sitesi oluşturun

generateWebpage aracını kullanarak etkileşimli bir öğrenme yolu web sitesi oluşturun.

Talimat parametresi, 2. adımda oluşturulan belirli öğrenme yolu verilerine ek olarak aşağıdaki eksiksiz özellikleri içerir:

### Tasarım Sistemi Özellikleri (Öğrenme senaryolarına uyarlanmış Kami Tasarım Sistemi):

**Renk Şeması:**

- Sayfa arka planı: #f5f4ed (sıcak bej parşömen)

- Kart arka planı: #FAF9F5 (Fildişi)

- Vurgu rengi/marka rengi: #1B365D (Mürekkep Mavisi)

- Metin rengi: #141413 (Siyaha yakın)

- Alt yazı rengi: #4D4C48 (Kömür grisi)

- Renk notu: #87867F (Taş)

- Kenar rengi: #D6D5CE (sıcak gri kenar)

- İlerleme çubuğu tamamlandı: #1B365D (marka rengi)

- İlerleme çubuğu tamamlanmadı: #E8E7E2

- Başarı/Tamamlama Durumu: #2D5016 (Koyu Zeytin Yeşili)

- Devam ediyor: #1B365D (marka rengi)

- Başlatılmadı: #87867F (Taş)

- Etiket Arka Planı: #E4ECF5

- Tüm gri tonları sıcak tonlu olmalıdır (Kırmızı≈Yeşil>Mavi), soğuk mavi-gri tonları yasaktır.

**Yazı Tipi Sistemi:**

- Noto Serif SC ve Noto Sans SC yazı tiplerini Google Fonts üzerinden yükleyin.

- Başlık: font-family: 'Noto Serif SC', Charter, Georgia, serif; font-weight: 500

- Metin: font-family: 'Noto Sans SC', 'PingFang SC', sans-serif; font-weight: 400

- Veri/Sayısal Vurgu: font-family: Charter, Georgia, serif

- Yazı tipi kalınlığını devre dışı bırak: 700/kalın

**Dizgi:**

- Satır aralığı: Başlık 1.2 / Gövde metni 1.5

- Çince harf aralığı: 0,3pt

- Sayfa maksimum genişliği: 800 piksel, ortalanmış

- Duyarlı, mobil uyumlu

**Görsel Kurallar:**

- Gölge: halka gölge (0 0 0 1px rgba(0,0,0,0.05)) veya fısıltı gölge (0 1px 3px rgba(0,0,0,0.04))

- Yuvarlak köşeler: 8 piksel (varsayılan) / 12 piksel (büyük kart)

- Ayırıcı: 0,5 piksel düz renk #D6D5CE veya 2,5 piksel düz renk #1B365D (marka dikey çizgisi)

- Vurgulama yöntemi: Solda mavi mürekkeple yazılmış metin veya dikey marka çizgisi

Sayfa Yapısı Gereksinimleri:

**1. En İyi Kahraman Alanı:**

- Öğrenme Hedefleri Başlığı (Serif 28px)

- Temel bilgi etiketleri tek satırda: Hedef türü | Tahmini süre | Günlük zaman

- Genel ilerleme çubuğu (yüzde rakamlarıyla birlikte)

- İstatistik kartı satırı: Toplam kaynaklar / Tamamlananlar / Mevcut aşama

**2. Aşama Kart Alanı (Çekirdek):**

- Her aşama için bir büyük kart

- Kart başlığı: Aşama numarası + Ad + Durum etiketi (✅ Tamamlandı / 🔄 Devam ediyor / ⬜ Başlanmadı) + Tahmini süre

- Kart içeriği:

- Temel amaç açıklaması (1-2 cümle)

- Kaynak Listesi: Her kaynak ayrı bir satırda listelenir ve bir simge (📚Kitap/🎬Video/💻Proje/👥Topluluk) + Ad (tıklanabilir bağlantı) + Platform Etiketi + Onay kutusu içerir.

- Dönüm noktası alanı: Standartlara ulaşılmasını tanımlamak için marka dikey çizgileri ve özel bir stille vurgulanmıştır.

- Kartlar katlanabilir/açılabilir (varsayılan olarak mevcut aşama için açılır, tamamlanan aşama için katlanır).

**3. Haftalık Öğrenme Önerisi Alanı:**

- Kısa ve öz zaman planlama önerileri

- Hafta içi ve Hafta sonu programı

**4. Alt kısım:**

- Kısa bir metin satırı: Öğrenme Yolu Planlama Master tarafından desteklenmektedir · Kami Tasarım Sistemi ile tasarlanmıştır

### Etkileşimli İşlevsellik Gereksinimleri (Saf Ön Uç JavaScript + localStorage):

1. **Onay kutusu durumunun değiştirilmesi**:

- Tamamlama durumunu değiştirmek için kaynağın önündeki onay kutusuna tıklayın.

- Durumu localStorage'a kaydedin (anahtar, öğrenme yönü + kaynak adı karma değerini kullanır).

- Tamamlanmış kaynaklar üstü çizili olarak ve azaltılmış şeffaflıkla görüntülenecektir.

2. **Otomatik ilerleme hesaplaması:**

- Genel ilerleme = (Seçilen kaynak sayısı / Toplam kaynak sayısı) × 100%

- Aşama ilerlemesi = Seçilen aşama sayısı / Toplam aşama sayısı

- İlerleme çubuğu animasyon geçişi (geçiş: genişlik 0,3s, yumuşaklık)

3. **Aşama Durumunun Otomatik Güncellenmesi**:

- Aşama içindeki tüm kaynakları seçin → Durum ✅ Tamamlandı olarak değişir, otomatik olarak gizlenir.

- Aşama sırasında herhangi bir öğe işaretlenirse → durum 🔄Devam Ediyor olarak değişir.

- Onay işareti yok → ⬜ Başlamadı

4. **Katla/Aç**:

- Kart başlığına tıklamak kartı daraltır/genişletir.

- Akıcı animasyon ile

5. **Dönüm Noktası Kontrolü Açılır Penceresi**:

- Bir aşamaya ait tüm kaynaklar tamamlandığında bir kilometre taşı kontrolü uyarısı açılacaktır.

- Bu aşama için dönüm noktası standartlarını görüntüleyin

Kullanıcılar, işlemi onaylamak için "Başarıldı" seçeneğine tıklayabilir veya tamamlandığını belirtmek için "Daha Fazla Geliştirme Gerekiyor" seçeneğini işaretleyebilir.

6. **Veri Kalıcılığı**:

- Tüm durumlar localStorage'da saklanır.

- Sayfa yenilendikten sonra durumu geri yükle

- "İlerlemeyi Sıfırla" düğmesi sağlar (ikinci bir onay gerektirir).

### İçerik Doldurma:

Yukarıdaki yapıyı, 2. adımda planlanan tüm öğrenme yolu verileriyle doldurun. Şunlardan emin olun:

- Her kaynağın bağlantısı gerçek ve erişilebilir bir URL'dir.

- Kaynak türü simgeleri doğru şekilde eşleştirildi.

- Her aşamanın süresi, toplam döngünün mantığıyla tutarlıdır.

- Dönüm noktası açıklamaları spesifik ve doğrulanabilir niteliktedir.

### Teknik Gereksinimler:

- Tamamen HTML + CSS + JavaScript, tek dosya

- Harici bağımlılık yok (Google Font'lar hariç)

- Mobil uyumlu

- Yazdırılabilir

- Açıklamalar içeren temiz kod