![]() |
|
|||||||
| Webmaster Forumu Webmasterlar için dersler, makaleler, paylaşımlar ve beyin fırtınası bölümü. |
|
|
Konu Araçları |
|
|
||
İçeriği görmek için buraya tıklayarak kaydolunuz.
Konuya @ImOriqinaL ve @immortaL'in de yorumlarını bekliyorum. Webmaster olmaları, teknik bakış açısıyla ufuk katacaktır.
__________________
![]() |
||
|
|
||
İçeriği görmek için buraya tıklayarak kaydolunuz.
Elinize sağlık, güzel görünüyor.
|
||
|
|
||
İçeriği görmek için buraya tıklayarak kaydolunuz.
Eline sağlık, İlk fırsatta kullanacağım.
|
||
|
|
||
İçeriği görmek için buraya tıklayarak kaydolunuz. |
||
|
|
|||||||
İçeriği görmek için buraya tıklayarak kaydolunuz. Alıntı:
Alıntı:
Alıntı:
Alıntı:
Alıntı:
Alıntı:
Merhaba, ilgi gösteren herkese çok teşekkür ederim. Boş vaktimde, basit bir arayüz çıktı ortaya. Wordpress giydirme konusunda, bilgim yok. Basit html altyapılı sayfa arayanlar var. Onlar için kullanılabilir diye düşündüm.
__________________
|
|||||||
|
|
|||
İçeriği görmek için buraya tıklayarak kaydolunuz. Alıntı:
Alıntı:
Eline sağlık @[Only registered and activated users can see links. ] modern tasarım modu olmuş biraz yapay zeka ile dokunus ve bazı düzenlemeler ile az daha değişiklik yaptık görünüm açısından.. radyo url ve port değerleri girildiğinde ( genelde sonicpanel kullanılıyor o panel verisine göre hazır yapıdır) radyo aktif sekilde ve bir kaç renk değişimi mevcut kodlarda.. HTML Code:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IRCdForum - Profesyonel Sohbet & Radyo</title> <style> /* --- AYARLAR --- */ :root { --radyo-host: "yayin.radyosistem.com"; --radyo-port: "8002"; --primary: #ff4ecd; --secondary: #6a5cff; --glass: rgba(255,255,255,0.15); --text: #fff; --cta-start: #ffb347; --cta-end: #ffcc33; --hero-bg: url('https://images.unsplash.com/photo-1531497865144-8a0f46d2e16c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1080') center/cover no-repeat; } * { box-sizing: border-box; } body { margin:0; font-family:'Segoe UI',sans-serif; color:var(--text); background: linear-gradient(135deg, var(--primary), var(--secondary)); min-height: 100vh; overflow-x: hidden; } /* Header */ header { display:flex; justify-content:space-between; align-items:center; padding:15px 5%; background: rgba(0,0,0,0.2); border-bottom:1px solid rgba(255,255,255,0.1); } .logo img{ height:35px; width:auto; } .toggle-mode { cursor:pointer; font-size:12px; border:1px solid currentColor; padding:6px 12px; border-radius:20px; transition: 0.3s; } .toggle-mode:hover { background: rgba(255,255,255,0.2); } /* Navigasyon */ .room-menu{ display:flex; justify-content:center; gap:10px; margin:20px 0; flex-wrap: wrap; padding: 0 15px; } .room-menu a{ background: rgba(255,255,255,0.1); padding:10px 18px; border-radius:25px; text-decoration:none; color:#fff; font-size: 13px; font-weight:bold; transition:0.3s; border: 1px solid rgba(255,255,255,0.15); } .room-menu a:hover{ background: var(--primary); transform:translateY(-2px); } /* Hero ve Kart Yapısı */ .hero{ display:flex; justify-content:center; align-items:center; padding:40px 15px; position:relative; min-height: calc(100vh - 200px); } .hero::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: var(--hero-bg); filter:blur(3px) brightness(0.4); z-index:0; } .card { backdrop-filter: blur(25px); background: var(--glass); padding: 35px; border-radius: 25px; width: 100%; max-width: 950px; position: relative; z-index: 1; box-shadow: 0 25px 50px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; } /* Sütun Düzenleri */ .login-side, .radio-side { display: flex; flex-direction: column; justify-content: center; width: 100%; } .login-side { border-right: 1px solid rgba(255,255,255,0.1); padding-right: 15px; } /* Form */ .login-side h1 { margin: 0 0 10px 0; font-size: 28px; text-align: center; } .login-side p { font-size: 14px; opacity: 0.8; margin-bottom: 20px; text-align: center; } input { width: 100%; padding: 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: #fff; outline: none; transition: 0.3s; } input:focus { background: rgba(255,255,255,0.2); border-color: var(--cta-start); } .cta-btn { width: 100%; padding: 15px; border: none; border-radius: 12px; background: linear-gradient(45deg, var(--cta-start), var(--cta-end)); color: #000; font-weight: 800; cursor: pointer; transition: 0.3s; text-transform: uppercase; } /* Radyo */ .radio-player { background: rgba(0, 0, 0, 0.3); padding: 20px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); height: 100%; display: flex; flex-direction: column; justify-content: center; } .player-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 15px; } #djBadge { background: var(--primary); padding: 3px 8px; border-radius: 6px; font-weight: bold; } .player-info { display: flex; align-items: center; gap: 15px; } .art-container { position: relative; width: 80px; height: 80px; flex-shrink: 0; } #trackArt { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; } .play-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; border-radius: 12px; font-size: 24px; cursor: pointer; } .track-details { flex: 1; overflow: hidden; } #trackName { font-weight: bold; font-size: 14px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bitrateInfo { font-size: 12px; color: var(--cta-start); font-weight: bold; } .volume-control { margin-top: 15px; display: flex; align-items: center; gap: 10px; } #volumeSlider { flex: 1; cursor: pointer; accent-color: var(--primary); } /* Footer & Backlink */ footer { text-align: center; padding: 40px 20px; font-size: 13px; opacity: 0.8; } footer a { color: var(--cta-start); text-decoration: none; font-weight: bold; transition: 0.3s; } footer a:hover { color: #fff; text-shadow: 0 0 10px var(--cta-start); } /* Mobil Uyumluluk */ @media(max-width: 768px) { .card { grid-template-columns: 1fr; padding: 25px 20px; } .login-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-right: 0; padding-bottom: 25px; margin-bottom: 10px; } } </style> </head> <body> <header> <div class="logo"><img src="https://www.ircdforum.net/images/logo.png" alt="IRCdForum Logo"></div> <div class="toggle-mode" id="toggleMode">Görünümü Değiştir</div> </header> <nav class="room-menu"> <a href="#">Genel Sohbet</a> <a href="#">Eğlence</a> <a href="#">Oyun Odası</a> <a href="#">Müzik & Radyo</a> <a href="#">Mobil Sohbet</a> </nav> <section class="hero"> <div class="card"> <div class="login-side"> <h1>Sohbete Katıl</h1> <p>Rumuzunu yaz ve hemen eğlenceye başla!</p> <form action="/chat" method="POST"> <input type="text" name="nickname" placeholder="Rumuzunuz (Örn: Misafir)" required> <input type="password" name="password" placeholder="Şifre (Opsiyonel)"> <button type="submit" class="cta-btn">HEMEN SOHBET ET</button> </form> <small style="display:block; margin-top:10px; opacity:0.6; font-size:11px; text-align: center;">* Kayıtlı bir nickiniz yoksa şifreyi boş bırakın.</small> </div> <div class="radio-side"> <div class="radio-player"> <div class="player-header"> <div id="djBadge">YAYINDA: <span id="djName">AUTO DJ</span></div> <div class="live-listeners">👥 <span id="listenerCount">0</span> Dinleyici</div> </div> <div class="player-info"> <div class="art-container"> <img src="https://via.placeholder.com/80" id="trackArt" alt="Kapak"> <div class="play-overlay" id="playPauseBtn">▶</div> </div> <div class="track-details"> <p id="trackName">Yükleniyor...</p> <div id="bitrateInfo">128 kbps HD</div> </div> </div> <div class="volume-control"> <span>🔈</span> <input type="range" id="volumeSlider" min="0" max="1" step="0.05" value="0.5"> <span>🔊</span> </div> </div> </div> </div> </section> <audio id="mainAudio"></audio> <footer> <p>© 2026 IRCdForum Mor HTML Sohbet Teması - Tüm Hakları Saklıdır.</p> <p>Türkiye'nin en kaliteli <a href="https://www.ircdforum.net" target="_blank" title="IRC Forumları">IRC forumları</a> ve sohbet platformu.</p> </footer> <script> const rRoot = document.querySelector(':root'); const rStyle = getComputedStyle(rRoot); const HOST = rStyle.getPropertyValue('--radyo-host').trim().replace(/"/g, ''); const PORT = rStyle.getPropertyValue('--radyo-port').trim().replace(/"/g, ''); const audio = document.getElementById('mainAudio'); audio.src = `https://${HOST}:${PORT}/;`; const playPauseBtn = document.getElementById('playPauseBtn'); const volumeSlider = document.getElementById('volumeSlider'); const trackName = document.getElementById('trackName'); const trackArt = document.getElementById('trackArt'); const listenerCount = document.getElementById('listenerCount'); const djName = document.getElementById('djName'); async function fetchRadioStats() { try { const response = await fetch(`https://${HOST}/cp/get_info.php?p=${PORT}`); const data = await response.json(); trackName.textContent = data.title || "Radyo Keyfi..."; if (data.art) trackArt.src = data.art; listenerCount.textContent = data.listeners || 0; djName.textContent = (data.djusername && data.djusername !== "") ? data.djusername.toUpperCase() : "AUTO DJ"; } catch (e) { console.error("API Error"); } } playPauseBtn.onclick = () => { if (audio.paused) { audio.play(); playPauseBtn.textContent = '⏸'; } else { audio.pause(); playPauseBtn.textContent = '▶'; } }; volumeSlider.oninput = (e) => { audio.volume = e.target.value; }; document.getElementById('toggleMode').onclick = () => { const themes = [{p:'#ff4ecd', s:'#6a5cff'}, {p:'#33ccff', s:'#33ff77'}, {p:'#ff9933', s:'#ff3399'}]; const t = themes[Math.floor(Math.random()*themes.length)]; document.documentElement.style.setProperty('--primary', t.p); document.documentElement.style.setProperty('--secondary', t.s); }; setInterval(fetchRadioStats, 10000); fetchRadioStats(); </script> </body> </html> ![]() ![]() ![]()
|
|||
|
|
||
İçeriği görmek için buraya tıklayarak kaydolunuz.
Evet eline sağlık bu hali biraz daha güzel oldu. Gelişim sürecini takip edebiliyoruz. Biraz daha olgunlaştırdıktan sonra, belki wordpress olarak yazılır, kim bilir
Ama altta makale kısmı eklemek lazım en azından yukarıda olan butonları arttırıp aşağıya çektiğinde makale gözükürse daha güzel olabilir.
__________________
Son düzenleyen: eQuaL; 03 Mart 2026, 23:32. |
||
|
|
||
İçeriği görmek için buraya tıklayarak kaydolunuz. |
||
| Yer İmleri |
| Şu anda bu konuyu görüntüleyen etkin kullanıcılar: 2 (0 üye ve 2 konuk) | |
| Konu Araçları | |
| Görünüm Modları | |
|
|
Benzer Konular
|
||||
| Konu | Konuyu Başlatan | Forum | Yanıtlar | Son Mesaj |
| Efsane forum zamanları | Rorschach | IdF Sözlük | 13 | 31 Mart 2026 17:43 |
| IRCD Forum Nedir? IRC Sunucuları ve Topluluk Yönetimi Hakkında Kapsamlı Rehber | AyKuT | IRCd Makaleler | 6 | 23 Mart 2026 18:40 |
| IRCd Nedir? Kurulumu ve Temel Yapılandırma Rehberi (Başlangıç Seviyesi) | PrenS | IRCd Makaleler | 2 | 15 Mart 2026 16:56 |
| Son Harften IRCd Üyesi Bulma | Mazikeen | Forum Oyunları | 2 | 05 Mart 2026 21:59 |