<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kekemelik Şiddeti Ölçme Yardımcı Aracı</title>
    <link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    
    <div class="container">
        <div class="header">
            <img src="images/LingoLogo.png" alt="Logo" class="logo"> 
            <h1>Kekemelik Siddeti Ölçme Yardımcı Aracı</h1>
        </div>
        <textarea id="inputText" rows="6" placeholder="Konuşma metni buraya girilecektir. Otomatik transkripsyon işlemi %100 doğruluk ile çalışmaz! Gerekli durumlarda transkript metninizi manuel olarak düzeltin."></textarea>
        
        <button id="speechToggle" onclick="toggleSpeech()">Konuşmayı Başlat</button>
        <label class="auto-analyze-label">
            <input type="checkbox" id="autoAnalyzeCheckbox">
            <span class="auto-analyze-text">Otomatik Analiz</span>
        </label>
    </div>

    <div class="container">
        <div class="takilma-sections">
            <div class="takilma-section">
                <p>Toplam Takılma Sayısı:</p>
                <div class="takilma-controls">
                    <input type="text" id="takilmaCount" placeholder="Takılma sayısını manuel olarak girin" value="0" oninput="validateNumber(this)" />
                    <button 
                        id="GenelTakılma"
                        onmousedown="startTimer('GenelTakılma')" 
                        onmouseup="stopTimer('GenelTakılma')" 
                        ontouchstart="startTimer('GenelTakılma')" 
                        ontouchend="stopTimer('GenelTakılma')" 
                        onclick="incrementTakilma()">+</button>
                    <button onclick="azaltTakilma()">-</button>
                </div>
            </div>
    
            <div class="takilma-section">
                <p>Tekrar:</p>
                <div class="takilma-controls">
                    <input type="text" id="tekrarCount" placeholder="Tekrar sayısını manuel olarak girin" value="0" oninput="validateNumber(this)" />
                    <button 
                        id="Tekrar"
                        onmousedown="startTimer('Tekrar')" 
                        onmouseup="stopTimer('Tekrar')" 
                        ontouchstart="startTimer('Tekrar')" 
                        ontouchend="stopTimer('Tekrar')" 
                        onclick="increment('tekrarCount')">+</button>
                    <button onclick="decrement('tekrarCount')">-</button>
                </div>
            </div>
        </div>
    
        <div class="takilma-sections">
            <div class="takilma-section">
                <p>Blok:</p>
                <div class="takilma-controls">
                    <input type="text" id="blokCount" placeholder="Blok sayısını manuel olarak girin" value="0" oninput="validateNumber(this)" />
                    <button 
                        id="Blok"
                        onmousedown="startTimer('Blok')" 
                        onmouseup="stopTimer('Blok')" 
                        ontouchstart="startTimer('Blok')" 
                        ontouchend="stopTimer('Blok')" 
                        onclick="increment('blokCount')">+</button>
                    <button onclick="decrement('blokCount')">-</button>
                </div>
            </div>
    
            <div class="takilma-section">
                <p>Uzatma:</p>
                <div class="takilma-controls">
                    <input type="text" id="uzatmaCount" placeholder="Uzatma sayısını manuel olarak girin" value="0" oninput="validateNumber(this)" />
                    <button 
                        id="Uzatma"
                        onmousedown="startTimer('Uzatma')" 
                        onmouseup="stopTimer('Uzatma')" 
                        ontouchstart="startTimer('Uzatma')" 
                        ontouchend="stopTimer('Uzatma')" 
                        onclick="increment('uzatmaCount')">+</button>
                    <button onclick="decrement('uzatmaCount')">-</button>
                </div>
            </div>
        </div>
    
        <p>Konuşma Süresi (saniye): 
            <input type="text" id="elapsedTime" value="0" oninput="validateNumber(this)" />
        </p>
    </div>
    

    <div class="container">  
        <button onclick="analyzeText()">Analiz Et</button>        
        <button onclick="clearAll()">Her Şeyi Temizle</button>
        
        <div class="results">
            <h2>Analiz Sonuçları</h2>

            <p id="wordCount">Sözcük Sayısı: 0</p>
            <p id="syllableCount">Hece Sayısı: 0</p>


            
           

            
           
            <div class="takilma">
                <h3>Kekemelik Şiddeti</h3>
            </div>
            <div id="takilmaMessage" class="status"></div>
            
            <div class="konusma">
                <h3>Konuşma Hızı</h3>
            </div>
            <div id="konusmaMessage" class="status"></div>
           
        </div>
        
      
    </div>
    <footer class="site-footer">
        <div class="footer-content">
            <p>&copy; 2024 Lingo Dil ve Konuşma. Tüm hakları saklıdır.</p>
            <p>Bu site, dil ve konuşma terapisi ile ilgili yardımcı araçlar ve kaynaklar sunmak amacıyla oluşturulmuştur.</p>
            <p><a href="https://www.lingo.com" target="_blank">Lingo DKT Resmi Web Sitesi</a></p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
