<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord Lite Demo</title>
<style>
/* CSS Başlangıcı */
body {
font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
height: 100vh;
overflow: hidden;
background-color: #36393f; /* Discord arka plan rengi */
color: #dcddde; /* Genel metin rengi */
}
/* Sunucu Simgeleri Menüsü */
.server-sidebar {
width: 72px;
background-color: #202225;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 12px;
overflow-y: auto;
flex-shrink: 0;
}
.server-icon {
width: 48px;
height: 48px;
background-color: #36393f;
border-radius: 50%;
margin-bottom: 8px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #dcddde;
cursor: pointer;
transition: border-radius 0.2s, background-color 0.2s;
position: relative;
font-size: 16px;
text-decoration: none; /* A etiketi için */
}
.server-icon:hover {
border-radius: 25%;
background-color: #5865f2;
}
.server-icon.active {
border-radius: 25%;
background-color: #5865f2;
}
.server-icon.add-server {
background-color: #3ba55c;
font-size: 24px;
}
.server-icon.active::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 40px;
background-color: #ffffff;
border-radius: 0 4px 4px 0;
}
/* Kanal Listesi Menüsü */
.channel-sidebar {
width: 240px;
background-color: #2f3136;
display: flex;
flex-direction: column;
flex-shrink: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Hafif gölge */
z-index: 1; /* Diğer elementlerin üzerinde olması için */
}
.server-name {
color: #ffffff;
font-weight: bold;
padding: 18px 16px;
border-bottom: 1px solid rgba(32, 34, 37, 0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.channel-list {
flex-grow: 1;
padding: 8px 0;
overflow-y: auto;
}
.channel-category {
color: #96989d;
font-size: 12px;
font-weight: bold;
padding: 8px 16px;
text-transform: uppercase;
}
.channel-item {
display: flex;
align-items: center;
padding: 6px 16px;
margin: 0 8px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s;
}
.channel-item:hover, .channel-item.active {
background-color: #393c43;
color: #ffffff;
}
.channel-item i {
margin-right: 8px;
color: #8e9297;
}
.channel-item.active i {
color: #dcddde;
}
.channel-item span {
font-weight: 500;
}
/* Kullanıcı Alanı */
.user-panel {
background-color: #292b2f;
padding: 10px 16px;
display: flex;
align-items: center;
border-top: 1px solid rgba(32, 34, 37, 0.6);
flex-shrink: 0;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #5865f2;
margin-right: 8px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.user-info strong {
display: block;
color: #ffffff;
font-size: 14px;
}
.user-info span {
color: #8e9297;
font-size: 12px;
}
.user-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.user-action-icon {
width: 20px;
height: 20px;
color: #b9bbbe;
cursor: pointer;
transition: color 0.15s;
}
.user-action-icon:hover {
color: #dcddde;
}
/* Ana Sohbet Alanı */
.chat-area {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #36393f;
overflow: hidden;
}
.chat-header {
background-color: #36393f;
padding: 10px 16px;
border-bottom: 1px solid rgba(32, 34, 37, 0.6);
display: flex;
align-items: center;
color: #ffffff;
font-weight: bold;
flex-shrink: 0;
}
.chat-header i {
margin-right: 8px;
color: #8e9297;
}
#current-channel-name { /* JavaScript ile güncellenecek */
margin-left: 8px;
}
.message-container {
flex-grow: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column; /* Mesajları normal sırada tutmak için */
}
.message {
display: flex;
margin-bottom: 16px;
align-items: flex-start; /* Mesaj içeriği üstte başlasın */
}
.message-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #7289da;
margin-right: 12px;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #ffffff;
text-transform: capitalize;
}
.message-content {
flex-grow: 1;
}
.message-author {
font-weight: bold;
color: #ffffff;
margin-bottom: 4px;
}
.message-author span {
color: #8e9297;
font-size: 12px;
font-weight: normal;
margin-left: 8px;
}
.message-text {
color: #dcddde;
line-height: 1.5;
word-wrap: break-word; /* Uzun kelimeleri kırmak için */
white-space: pre-wrap; /* Satır sonlarını korumak için */
}
.message-input-area {
background-color: #36393f;
padding: 16px;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
}
.message-input {
flex-grow: 1;
background-color: #40444b;
border: none;
border-radius: 8px;
padding: 10px 16px;
color: #dcddde;
font-size: 15px;
outline: none;
}
.message-input::placeholder {
color: #72767d;
}
.send-button {
background-color: #5865f2;
color: white;
border: none;
border-radius: 8px;
padding: 10px 15px;
cursor: pointer;
font-size: 15px;
font-weight: bold;
transition: background-color 0.2s;
}
.send-button:hover {
background-color: #4752c4;
}
/* Misafir Girişi Modalı */
.modal {
display: none; /* Varsayılan olarak gizli */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7); /* Yarı saydam arka plan */
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #36393f;
margin: auto;
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
width: 300px;
text-align: center;
color: #dcddde;
}
.modal-content h2 {
color: #ffffff;
margin-bottom: 20px;
}
.modal-content input[type="text"] {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #40444b;
background-color: #2f3136;
color: #dcddde;
border-radius: 4px;
outline: none;
}
.modal-content button {
background-color: #5865f2;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s;
}
.modal-content button:hover {
background-color: #4752c4;
}
/* CSS Sonu */
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div id="loginModal" class="modal">
<div class="modal-content">
<h2>Discord Lite'a Hoş Geldiniz!</h2>
<p>Devam etmek için bir kullanıcı adı girin:</p>
<input type="text" id="usernameInput" placeholder="Kullanıcı adınız...">
<button id="joinButton">Sohbete Katıl</button>
</div>
</div>
<div class="server-sidebar">
<a href="#" class="server-icon active" data-server-id="main">
<img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6cc3c481a15a1419ff_icon_clyde_white_RGB.png" alt="Discord" style="width: 32px; height: 32px;">
</a>
<a href="#" class="server-icon" data-server-id="dev">DEV</a>
<a href="#" class="server-icon" data-server-id="gaming">OYUN</a>
<a href="#" class="server-icon add-server" id="addServerButton">+</a>
</div>
<div class="channel-sidebar">
<div class="server-name" id="currentServerName">Sunucum Adı</div>
<div class="channel-list" id="channelList">
</div>
<div class="user-panel">
<div class="user-avatar" id="currentUserAvatar">Y</div>
<div class="user-info">
<strong id="currentUsername">Misafir</strong>
<span id="currentUserTag">#0000</span>
</div>
<div class="user-actions">
<i class="fas fa-microphone user-action-icon"></i>
<i class="fas fa-headphones user-action-icon"></i>
<i class="fas fa-cog user-action-icon"></i>
</div>
</div>
</div>
<div class="chat-area">
<div class="chat-header">
<i class="fas fa-hashtag"></i> <span id="current-channel-name">genel-sohbet</span>
</div>
<div class="message-container" id="messageContainer">
</div>
<div class="message-input-area">
<input type="text" class="message-input" id="messageInput" placeholder="#genel-sohbet kanalına mesaj gönder...">
<button class="send-button" id="sendMessageButton">Gönder</button>
</div>
</div>
<script>
// JavaScript Başlangıcı
const loginModal = document.getElementById('loginModal');
const usernameInput = document.getElementById('usernameInput');
const joinButton = document.getElementById('joinButton');
const currentUsernameEl = document.getElementById('currentUsername');
const currentUserTagEl = document.getElementById('currentUserTag');
const currentUserAvatarEl = document.getElementById('currentUserAvatar');
const messageContainer = document.getElementById('messageContainer');
const messageInput = document.getElementById('messageInput');
const sendMessageButton = document.getElementById('sendMessageButton');
const currentChannelNameEl = document.getElementById('current-channel-name');
const serverSidebar = document.querySelector('.server-sidebar');
const addServerButton = document.getElementById('addServerButton');
const currentServerNameEl = document.getElementById('currentServerName');
const channelListEl = document.getElementById('channelList');
let currentUsername = 'Misafir';
let currentChannelId = 'genel-sohbet'; // Varsayılan kanal
let messages = {}; // Kanal bazında mesajları saklamak için obje (geçici bellek)
// Mevcut sunucular ve kanallar (geçici bellek)
let servers = {
'main': {
name: 'Ana Sunucu',
channels: {
'metin': [
{ id: 'genel-sohbet', name: 'genel-sohbet', icon: 'fas fa-hashtag' },
{ id: 'duyurular', name: 'duyurular', icon: 'fas fa-hashtag' },
{ id: 'kurallar', name: 'kurallar', icon: 'fas fa-hashtag' }
],
'ses': [
{ id: 'genel-ses', name: 'Genel Ses', icon: 'fas fa-volume-up' },
{ id: 'oyun-sesi', name: 'Oyun Sesi', icon: 'fas fa-volume-up' }
]
}
},
'dev': {
name: 'Dev Sunucusu',
channels: {
'metin': [
{ id: 'dev-sohbet', name: 'dev-sohbet', icon: 'fas fa-hashtag' },
{ id: 'bug-raporları', name: 'bug-raporları', icon: 'fas fa-hashtag' }
],
'ses': [
{ id: 'dev-ses', name: 'Dev Ses', icon: 'fas fa-volume-up' }
]
}
},
'gaming': {
name: 'Oyun Sunucusu',
channels: {
'metin': [
{ id: 'oyun-genel', name: 'oyun-genel', icon: 'fas fa-hashtag' },
{ id: 'lol', name: 'lol', icon: 'fas fa-hashtag' }
],
'ses': [
{ id: 'lol-ses', name: 'LoL Ses', icon: 'fas fa-volume-up' }
]
}
}
};
// Başlangıç mesajları (sadece demo için, kanal ID'leri ile eşleşmeli)
messages['genel-sohbet'] = [
{ author: 'Discord Bot', text: 'Discord Lite Demoya Hoş Geldiniz! Bu uygulama sadece tarayıcınızda çalışır ve mesajlar sayfa yenilendiğinde silinir.', avatar: 'D' },
{ author: 'Yasin A.', text: 'Merhaba! Misafir olarak sohbete katılabilirsiniz.', avatar: 'Y' }
];
messages['duyurular'] = [
{ author: 'Discord Bot', text: 'Bu kanal sadece duyurular içindir.', avatar: 'D' }
];
messages['kurallar'] = [
{ author: 'Discord Bot', text: 'Lütfen kurallara uyun.', avatar: 'D' }
];
messages['dev-sohbet'] = [
{ author: 'Discord Bot', text: 'Dev sunucusuna hoş geldiniz!', avatar: 'D' }
];
// Sayfa yüklendiğinde modalı göster
window.onload = () => {
loginModal.style.display = 'flex';
usernameInput.focus();
};
// Kullanıcı Girişi Fonksiyonu
joinButton.addEventListener('click', () => {
let enteredUsername = usernameInput.value.trim();
if (enteredUsername) {
currentUsername = enteredUsername;
currentUsernameEl.textContent = currentUsername;
currentUserTagEl.textContent = `#${Math.floor(Math.random() * 9000) + 1000}`; // Rastgele 4 haneli tag
currentUserAvatarEl.textContent = currentUsername.charAt(0).toUpperCase(); // İlk harf avatar
loginModal.style.display = 'none'; // Modalı kapat
// Varsayılan sunucuyu seç ve kanalları yükle
setActiveServer('main');
loadChannelsForServer('main');
setActiveChannel('genel-sohbet'); // Varsayılan kanal mesajlarını yükle
messageInput.focus();
} else {
alert('Lütfen bir kullanıcı adı girin.');
}
});
// Enter tuşu ile giriş yapma
usernameInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
joinButton.click();
}
});
// Mesajları Yükleme Fonksiyonu
function loadMessages(channelId) {
messageContainer.innerHTML = ''; // Önceki mesajları temizle
const currentChannelMessages = messages[channelId] || [];
currentChannelMessages.forEach(msg => {
addMessageToChat(msg.author, msg.text, msg.avatar);
});
messageContainer.scrollTop = messageContainer.scrollHeight; // En alta kaydır
}
// Mesajı Sohbet Alanına Ekleme Fonksiyonu
function addMessageToChat(author, text, avatarChar) {
const messageDiv = document.createElement('div');
messageDiv.className = 'message';
const avatarDiv = document.createElement('div');
avatarDiv.className = 'message-avatar';
avatarDiv.textContent = avatarChar.toUpperCase();
const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
const authorDiv = document.createElement('div');
authorDiv.className = 'message-author';
const now = new Date();
const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
authorDiv.innerHTML = `${author} <span>Bugün saat ${time}</span>`;
const textDiv = document.createElement('div');
textDiv.className = 'message-text';
textDiv.textContent = text;
contentDiv.appendChild(authorDiv);
contentDiv.appendChild(textDiv);
messageDiv.appendChild(avatarDiv);
messageDiv.appendChild(contentDiv);
messageContainer.appendChild(messageDiv);
messageContainer.scrollTop = messageContainer.scrollHeight; // Yeni mesajda alta kaydır
}
// Mesaj Gönderme Fonksiyonu
sendMessageButton.addEventListener('click', () => {
const messageText = messageInput.value.trim();
if (messageText) {
// Mesajı mevcut kanalın listesine ekle
if (!messages[currentChannelId]) {
messages[currentChannelId] = [];
}
messages[currentChannelId].push({
author: currentUsername,
text: messageText,
avatar: currentUsername.charAt(0)
});
addMessageToChat(currentUsername, messageText, currentUsername.charAt(0));
messageInput.value = ''; // Giriş alanını temizle
}
});
// Enter tuşu ile mesaj gönderme
messageInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessageButton.click();
}
});
// Kanal Listesini Yükleme Fonksiyonu
function loadChannelsForServer(serverId) {
channelListEl.innerHTML = ''; // Önceki kanalları temizle
const server = servers[serverId];
currentServerNameEl.textContent = server.name;
// Metin Kanalları
if (server.channels.metin && server.channels.metin.length > 0) {
const textCategory = document.createElement('div');
textCategory.className = 'channel-category';
textCategory.textContent = 'Metin Kanalları';
channelListEl.appendChild(textCategory);
server.channels.metin.forEach(channel => {
const channelItem = document.createElement('div');
channelItem.className = 'channel-item';
channelItem.dataset.channelId = channel.id;
channelItem.innerHTML = `<i class="${channel.icon}"></i> <span>${channel.name}</span>`;
channelListEl.appendChild(channelItem);
channelItem.addEventListener('click', () => setActiveChannel(channel.id));
});
}
// Ses Kanalları
if (server.channels.ses && server.channels.ses.length > 0) {
const voiceCategory = document.createElement('div');
voiceCategory.className = 'channel-category';
voiceCategory.textContent = 'Ses Kanalları';
channelListEl.appendChild(voiceCategory);
server.channels.ses.forEach(channel => {
const channelItem = document.createElement('div');
channelItem.className = 'channel-item';
channelItem.dataset.channelId = channel.id;
channelItem.innerHTML = `<i class="${channel.icon}"></i> <span>${channel.name}</span>`;
channelListEl.appendChild(channelItem);
channelItem.addEventListener('click', () => setActiveChannel(channel.id));
});
}
}
// Aktif Kanalı Ayarlama Fonksiyonu
function setActiveChannel(channelId) {
document.querySelector('.channel-item.active')?.classList.remove('active');
const newActiveChannel = document.querySelector(`.channel-item[data-channel-id="${channelId}"]`);
if (newActiveChannel) {
newActiveChannel.classList.add('active');
currentChannelId = channelId;
currentChannelNameEl.textContent = newActiveChannel.querySelector('span').textContent;
messageInput.placeholder = `#${currentChannelNameEl.textContent} kanalına mesaj gönder...`;
loadMessages(currentChannelId); // Yeni kanalın mesajlarını yükle
} else {
// Eğer yeni sunucuda seçili kanal yoksa, ilk metin kanalını seç
const firstChannelItem = channelListEl.querySelector('.channel-item');
if (firstChannelItem) {
firstChannelItem.classList.add('active');
currentChannelId = firstChannelItem.dataset.channelId;
currentChannelNameEl.textContent = firstChannelItem.querySelector('span').textContent;
messageInput.placeholder = `#${currentChannelNameEl.textContent} kanalına mesaj gönder...`;
loadMessages(currentChannelId);
} else {
currentChannelId = null; // Hiç kanal yoksa
currentChannelNameEl.textContent = 'Kanal Yok';
messageInput.placeholder = 'Bu sunucuda henüz kanal yok.';
messageContainer.innerHTML = '<div style="text-align: center; margin-top: 50px; color: #8e9297;">Bu kanalda henüz mesaj yok.</div>';
}
}
}
// Aktif Sunucuyu Ayarlama Fonksiyonu
function setActiveServer(serverId) {
document.querySelector('.server-icon.active')?.classList.remove('active');
const newActiveServerIcon = document.querySelector(`.server-icon[data-server-id="${serverId}"]`);
if (newActiveServerIcon) {
newActiveServerIcon.classList.add('active');
loadChannelsForServer(serverId);
// Sunucu değiştiğinde, eğer mümkünse ilk metin kanalına geç
if (servers[serverId].channels.metin && servers[serverId].channels.metin.length > 0) {
setActiveChannel(servers[serverId].channels.metin[0].id);
} else {
setActiveChannel(null); // Hiç kanal yoksa
}
}
}
// Sunucu İkonlarına Tıklama Dinleyicileri (mevcut ve yeni eklenecekler için)
function setupServerIconListeners() {
document.querySelectorAll('.server-icon:not(.add-server)').forEach(icon => {
icon.removeEventListener('click', handleServerIconClick); // Mevcut dinleyicileri kaldır
icon.addEventListener('click', handleServerIconClick);
});
}
function handleServerIconClick(e) {
e.preventDefault();
const serverId = this.dataset.serverId;
setActiveServer(serverId);
}
setupServerIconListeners(); // İlk yüklemede dinleyicileri ayarla
// YENİ FONKSİYON: Artı (+) Butonuna Basıldığında Yeni Sunucu Ekleme
addServerButton.addEventListener('click', () => {
const newServerName = prompt("Yeni sunucu adı girin:");
if (newServerName && newServerName.trim()) {
const serverId = newServerName.trim().toLowerCase().replace(/\s+/g, '-'); // slug yap
if (servers[serverId]) {
alert('Bu isimde bir sunucu zaten var!');
return;
}
// Yeni sunucuyu geçici belleğe ekle
servers[serverId] = {
name: newServerName.trim(),
channels: {
'metin': [
{ id: `${serverId}-genel`, name: 'genel', icon: 'fas fa-hashtag' }
],
'ses': []
}
};
messages[`${serverId}-genel`] = [{ author: 'Discord Bot', text: `${newServerName.trim()} sunucusuna hoş geldiniz!`, avatar: 'D' }];
// Yeni sunucu ikonunu oluştur ve DOM'a ekle
const newServerIcon = document.createElement('a');
newServerIcon.href = "#";
newServerIcon.className = 'server-icon';
newServerIcon.dataset.serverId = serverId;
newServerIcon.textContent = newServerName.trim().substring(0, 2).toUpperCase(); // İlk iki harf
// "+" butonundan önce ekle
serverSidebar.insertBefore(newServerIcon, addServerButton);
// Yeni ikon için dinleyiciyi ayarla
newServerIcon.addEventListener('click', handleServerIconClick);
// Yeni sunucuyu aktif yap
setActiveServer(serverId);
alert(`${newServerName.trim()} adlı yeni sunucu eklendi!`);
} else if (newServerName !== null) { // null değilse (yani iptal edilmediyse) ama boşsa
alert('Sunucu adı boş olamaz.');
}
});
// JavaScript Sonu
</script>
</body>
</html>
Selamlar hayırlı cumalar basit bir discord yaptık mağlum engel var kendimize ait discord olsun dedim
sunucu oluşturma , mesaj gönderme gibi fonksiyonlar çalışıyor geliştirmek size kalmış yapay zeka eseridir
