🔥 YazKonus Sohbet Giriş Formu ve Radyo Player - ÜCRETSİZ KOD! 🔥 - IRCRehberi.Net- Türkiyenin En iyi IRC ve Genel Forum Sitesi

**ExCaLuBuR** · 07 Ağustos 2025, 22:14

Modern, Animasyonlu ve Profesyonel Sohbet Giriş Formu

Arkadaşlar, YazKonus FM için hazırladığımız bu muhteşem sohbet giriş sayfası kodunu sizlerle paylaşıyorum! Tamamen ücretsiz alabilir ve kendi sitenize uyarlayabilirsiniz.

🎯 Kodun Özellikleri:

✨ Canlı gradient animasyonlar
🎵 Entegre radyo çalar
📱 Tam responsive tasarım
🔐 Form doğrulama sistemi
🎨 Glassmorphism efektleri

🛠️ SİTENİZE NASIL UYARLAYACAKSINIZ?

1️⃣ Site Adını Değiştirin (Satır 8-10):

Kod

html<!-- BURALAR DEĞİŞTİRİLECEK -->
<title>BURAYA SİTE ADINIZ - Sohbet Giriş</title>

2️⃣ Marka/Logo Bilgilerini Güncelleyin (Satır 18-21):

Kod

html<h1 class="brand-logo">BURAYA SİTE ADINIZ</h1>
<p class="brand-tagline">BURAYA SLOGAN YAZIN</p>

3️⃣ Sohbet Giriş Adresini Ayarlayın (Satır 28):

Kod

html<!-- Sohbet sisteminizin giriş adresini buraya yazın -->
<form class="login-form" method="post" action="/BURAYA-SOHBET-GİRİŞ-ADRESİ">

Örnekler:

Kod

action="/chat/login.php"
action="/sohbet-giris"
action="/members/chat-login"

4️⃣ Radyo Stream Adresini Değiştirin (Satır 52):

Kod

html<!-- RADYO STREAM URL'İNİZİ BURAYA -->
<button class="play-button" onclick="togglePlay(this, 'BURAYA-RADYO-STREAM-URL')">

Stream URL Örnekleri:

Kod

http://siteadınız.com:8000/stream
https://radyo.siteadınız.com/canli
Shoutcast/Icecast server adresiniz

5️⃣ Kayıt ve Şifre Sıfırlama Linklerini Ayarlayın (Satır 40-41):

Kod

html<a href="/KAYIT-SAYFANIZ" class="form-link">Kayıt Ol</a>
<a href="/ŞİFRE-SIFIRLAMA-SAYFANIZ" class="form-link">Şifremi Unuttum</a>

6️⃣ "Şimdi Çalıyor" Metnini Özelleştirin (Satır 62):

htmlŞimdi Çalıyor: SİTENİZ - SLOGAN/AÇIKLAMA

🔧 İleri Düzey Özelleştirmeler:

🎨 Renk Temasını Değiştirin:

CSS'teki gradient renklerini değiştirebilirsiniz (Satır 75-82):

cssbackground: linear-gradient(135deg,

#ff6b35 0%, /* Bu renkleri değiştirin */
#ff8c42 20%,
#f7931e 40%,
#ff4757 60%,
#ff3838 80%,
#ff7675 100%
);

📝 Form Alanlarını Özelleştirin:

Input placeholder metinlerini değiştirin (Satır 34-35):

htmlplaceholder="Kullanıcı adınızı giriniz" 

placeholder="Şifrenizi giriniz" 

🎵 Radyo Özelliklerini Kapatma:

Radyo bölümünü istemiyorsanız, player-section div'ini silin (Satır 45-65).

📋 KURULUM ADIMLARı:

HTML dosyasını sitenizin root klasörüne kaydedin
Yukarıdaki değişiklikleri yapın
Sohbet sisteminizle bağlantıyı test edin
Stream URL'nizi kontrol edin
Mobil uyumluluğunu test edin

⚠️ ÖNEMLİ NOTLAR:

HTTPS kullanın - Modern tarayıcılar için gerekli
Stream URL'niz CORS ayarlarını kontrol edin
Form action adresiniz POST metodunu desteklemeli
Mobile responsive tamamen hazır

🎁 BONUS İPUCU:

JavaScript kısmındaki form doğrulama ayarlarını değiştirebilirsiniz (Satır 480-490):

javascriptif (username.length < 3) { // Minimum karakter sayısını değiştirin

if (password.length < 6) { // Şifre minimum uzunluğunu değiştirin

Bu kodu beğendiyseniz beğeni butonuna basmayı unutmayın! 👍

#WebTasarım #SohbetSitesi #HTMLTemplate #ÜcretsizKod #ResponsiveDesign

🔥 YazKonus Sohbet Giriş Formu ve Radyo Player - ÜCRETSİZ KOD! 🔥

Kod

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YazKonus FM - Sohbet Giriş</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</head>
<body>

<div class="container">
    <div class="chat-form">
        <div class="brand-section">
            <h1 class="brand-logo">YazKonus FM</h1>
            <p class="brand-tagline">Türkiye'nin En Sıcak Sohbet Radyosu</p>
        </div>
        
        <div class="form-header">
            <h2 class="form-title"><i class="fas fa-comments"></i> Sohbet Odası</h2>
            <p class="form-subtitle">Dostane sohbetlerin adresi!</p>
        </div>
        
        <form class="login-form" method="post" action="/chat-login">
            <div class="form-group">
                <label for="username"><i class="fas fa-user"></i> Kullanıcı Adı</label>
                <div class="input-wrapper">
                    <input type="text" id="username" name="username" placeholder="Kullanıcı adınızı giriniz" required>
                    <i class="fas fa-user input-icon"></i>
                </div>
            </div>
            
            <div class="form-group">
                <label for="password"><i class="fas fa-lock"></i> Şifre</label>
                <div class="input-wrapper">
                    <input type="password" id="password" name="password" placeholder="Şifrenizi giriniz" required>
                    <i class="fas fa-lock input-icon"></i>
                </div>
            </div>
            
            <button type="submit" class="login-button">
                <i class="fas fa-sign-in-alt"></i> YazKonus Sohbetine Gir
            </button>
            
            <div class="form-links">
                <a href="/register" class="form-link"><i class="fas fa-user-plus"></i> Kayıt Ol</a>
                <a href="/forgot-password" class="form-link"><i class="fas fa-key"></i> Şifremi Unuttum</a>
            </div>
        </form>
        
        <div class="player-section">
            <div class="player-header">
                <h3 class="player-title"><i class="fas fa-radio"></i> YazKonus FM Canlı</h3>
                <div class="player-status">
                    <i class="fas fa-circle live-indicator"></i>
                    CANLI
                </div>
            </div>
            <div class="player-controls">
                <button class="play-button" onclick="togglePlay(this, 'http://yazkonu.com:8000/stream')">
                    <i class="fas fa-play"></i>
                </button>
                <div class="volume-control">
                    <i class="fas fa-volume-down"></i>
                    <input type="range" class="volume-slider" min="0" max="100" value="70" onchange="setVolume(this.value)">
                    <i class="fas fa-volume-up"></i>
                </div>
            </div>
            <div class="now-playing">
                <i class="fas fa-music"></i> Şimdi Çalıyor: YazKonus FM - En İyi Türkçe Müzikler
            </div>
        </div>
    </div>
</div>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: transparent;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container {
    max-width: 450px;
    width: 100%;
}

.chat-form {
    background: linear-gradient(135deg, 
        #ff6b35 0%, 
        #ff8c42 20%,
        #f7931e 40%,
        #ff4757 60%,
        #ff3838 80%,
        #ff7675 100%
    );
    padding: 35px;
    border-radius: 30px;
    box-shadow: 
        0 25px 50px rgba(255, 0, 110, 0.4),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 2px 0 rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
    animation: formGlow 4s ease-in-out infinite, formFloat 6s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames formGlow {
    0%, 100% { 
        box-shadow: 
            0 25px 50px rgba(255, 107, 53, 0.4),
            0 0 0 1px rgba(255,255,255,0.2),
            inset 0 2px 0 rgba(255,255,255,0.3);
    }
    50% { 
        box-shadow: 
            0 30px 60px rgba(255, 71, 87, 0.5),
            0 0 0 2px rgba(255,255,255,0.3),
            inset 0 2px 0 rgba(255,255,255,0.4);
        transform: translateY(-5px);
    }
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames formFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(0.5deg); }
    66% { transform: translateY(-4px) rotate(-0.5deg); }
}

.chat-form::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,107,53,0.1) 0%, transparent 50%);
    animation: shimmer 3s ease-in-out infinite, rotate 8s linear infinite;
    pointer-events: none;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames shimmer {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.4; 
    }
    33% { 
        transform: translateY(-20px) rotate(120deg); 
        opacity: 0.7; 
    }
    66% { 
        transform: translateY(-10px) rotate(240deg); 
        opacity: 0.5; 
    }
}

.brand-section {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(255,255,255,0.2);
    border-radius: 25px;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255,255,255,0.3);
    position: relative;
    z-index: 2;
    animation: brandPulse 3s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames brandPulse {
    0%, 100% { 
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.3);
    }
    50% { 
        background: rgba(255,255,255,0.25);
        border-color: rgba(255,255,255,0.4);
        transform: scale(1.02);
    }
}

.brand-logo {
    font-size: 2.3rem;
    font-weight: 800;
    color: white;
    margin: 0 0 8px 0;
    text-shadow: 3px 3px 8px rgba(0,0,0,0.7);
    letter-spacing: -1px;
    background: linear-gradient(45deg, #fff, #ffffff, #fff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    background-clip: text;
    animation: textGlow 2s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames textGlow {
    0%, 100% { 
        text-shadow: 3px 3px 8px rgba(0,0,0,0.7);
    }
    50% { 
        text-shadow: 3px 3px 12px rgba(0,0,0,0.8), 0 0 15px rgba(255,255,255,0.3);
    }
}

.brand-tagline {
    color: rgba(255,255,255,0.95);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    animation: taglinePulse 2s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames taglinePulse {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 1; text-shadow: 2px 2px 6px rgba(0,0,0,0.7); }
}

.form-header {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.form-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
}

.form-subtitle {
    color: rgba(255,255,255,0.95);
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.login-form {
    position: relative;
    z-index: 2;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    color: white;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.input-wrapper {
    position: relative;
}

.input-wrapper input {
    width: 100%;
    padding: 18px 25px 18px 55px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    background: rgba(255,255,255,0.95);
    color: #333;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.input-wrapper input:focus {
    outline: none;
    background: white;
    box-shadow: 
        0 0 0 3px rgba(255,255,255,0.3),
        inset 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6b35;
    font-size: 1.1rem;
    animation: iconBounce 2s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames iconBounce {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.1); color: #ff4757; }
}

.login-button {
    width: 100%;
    padding: 18px;
    background: rgba(255,255,255,0.25);
    color: white;
    border: 3px solid rgba(255,255,255,0.4);
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: buttonGlow 3s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames buttonGlow {
    0%, 100% { 
        box-shadow: 0 10px 25px rgba(255,107,53,0.3);
    }
    50% { 
        box-shadow: 0 15px 35px rgba(255,71,87,0.4);
    }
}

.login-button:hover {
    background: rgba(255,255,255,0.4);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(255,107,53,0.5);
    border-color: rgba(255,255,255,0.6);
}

.login-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.login-button:hover::before {
    left: 100%;
}

.form-links {
    text-align: center;
    margin-bottom: 25px;
}

.form-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0 15px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.form-link:hover {
    color: white;
    text-decoration: underline;
}

.player-section {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 22px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 2;
}

.player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.player-title, .now-playing {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.player-status {
    color: rgba(255,255,255,0.9);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.live-indicator {
    color: #4ade80;
    font-size: 0.6rem;
    animation: livePulse 1.5s infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames livePulse {
    0% { opacity: 1; color: #4ade80; }
    33% { opacity: 0.7; color: #ff6b35; }
    66% { opacity: 1; color: #f7931e; }
    100% { opacity: 1; color: #4ade80; }
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.play-button {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 3px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: playButtonPulse 2s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames playButtonPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(255,107,53,0.4);
    }
    50% { 
        box-shadow: 0 0 25px rgba(255,71,87,0.6);
        transform: scale(1.05);
    }
}

.play-button:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(255,107,53,0.7);
}

.play-button i {
    animation: iconSpin 1s ease-in-out infinite;
}

 @[Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]
rames iconSpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(5deg); }
}

.volume-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.volume-control i {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
}

.volume-slider {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.now-playing {
    margin-top: 18px;
    text-align: center;
    color: rgba(255,255,255,0.95);
    font-size: 0.9rem;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-form {
        padding: 25px;
        border-radius: 20px;
    }
    
    .brand-logo {
        font-size: 2rem;
    }
    
    .form-title {
        font-size: 1.5rem;
    }
    
    .input-wrapper input {
        padding: 15px 20px 15px 45px;
        font-size: 0.95rem;
    }
    
    .input-icon {
        left: 16px;
        font-size: 1rem;
    }
    
    .login-button {
        padding: 15px;
        font-size: 1rem;
    }
    
    .play-button {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .player-section {
        padding: 18px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 15px;
    }
    
    .chat-form {
        padding: 20px;
    }
    
    .brand-section {
        padding: 15px;
    }
    
    .brand-logo {
        font-size: 1.8rem;
    }
    
    .form-title {
        font-size: 1.3rem;
    }
    
    .form-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .player-controls {
        gap: 10px;
    }
}
</style>

<script>
let currentAudio = null;
let isPlaying = false;

function togglePlay(button, streamUrl) {
    const icon = button.querySelector('i');
    
    if (isPlaying && currentAudio) {
        // Stop current stream
        currentAudio.pause();
        currentAudio = null;
        isPlaying = false;
        icon.className = 'fas fa-play';
        updateNowPlaying('YazKonus FM - Bağlantı Kesildi');
    } else {
        // Stop any currently playing audio
        if (currentAudio) {
            currentAudio.pause();
        }
        
        // Start new stream
        try {
            currentAudio = new Audio(streamUrl);
            currentAudio.crossOrigin = "anonymous";
            currentAudio.volume = 0.7;
            
            currentAudio.addEventListener('loadstart', () => {
                updateNowPlaying('YazKonus FM - Bağlanıyor...');
            });
            
            currentAudio.addEventListener('canplay', () => {
                updateNowPlaying('YazKonus FM - Canlı Yayın');
            });
            
            currentAudio.addEventListener('error', (e) => {
                console.error('Audio error:', e);
                updateNowPlaying('YazKonus FM - Bağlantı Hatası');
                isPlaying = false;
                icon.className = 'fas fa-play';
            });
            
            currentAudio.play().then(() => {
                isPlaying = true;
                icon.className = 'fas fa-pause';
                updateNowPlaying('YazKonus FM - Şimdi Çalıyor');
            }).catch(error => {
                console.error('Play error:', error);
                updateNowPlaying('YazKonus FM - Çalma Hatası');
            });
            
        } catch (error) {
            console.error('Stream error:', error);
            updateNowPlaying('YazKonus FM - Stream Hatası');
        }
    }
}

function setVolume(value) {
    if (currentAudio) {
        currentAudio.volume = value / 100;
    }
}

function updateNowPlaying(text) {
    const nowPlayingElement = document.querySelector('.now-playing');
    if (nowPlayingElement) {
        nowPlayingElement.innerHTML = `<i class="fas fa-music"></i> ${text}`;
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    document.querySelector('.login-form').addEventListener('submit', function(e) {
        const username = this.querySelector('input[name="username"]').value.trim();
        const password = this.querySelector('input[name="password"]').value.trim();
        
        if (username.length < 3) {
            e.preventDefault();
            alert('Kullanıcı adı en az 3 karakter olmalıdır.');
            return false;
        }
        
        if (password.length < 6) {
            e.preventDefault();
            alert('Şifre en az 6 karakter olmalıdır.');
            return false;
        }
    });
});

// Handle page unload
window.addEventListener('beforeunload', function() {
    if (currentAudio) {
        currentAudio.pause();
    }
});
</script>

</body>
</html>

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal gösterime geğ Hybrid-Şeklinde gösterime geç Ağaç şeklinde

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)