Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#0B132B" />
<title>My Name İstanbul</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
<body>
<div id="app" class="app">
<!-- ==================== ANA SAYFA ==================== -->
<div id="page-home" class="page active">
<header class="top-bar">
<button class="top-btn live-btn" id="liveBtn">
<span class="live-dot"></span>
<span class="live-text">CANLI</span>
</button>
<div class="logo">MY NAME İSTANBUL</div>
<button class="top-btn map-btn" id="mapBtn">
<i class="fas fa-map-marked-alt"></i>
</button>
</header>
<div class="story-bar" id="storyBar">
<div class="story-item add-story">
<div class="story-avatar add"><i class="fas fa-plus"></i></div>
<span>Senin</span>
</div>
</div>
<main class="feed" id="feed"></main>
</div>
<!-- ==================== KEŞFET ==================== -->
<div id="page-discover" class="page">
<header class="page-header">
<h1>Keşfet</h1>
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="Semt, etiket veya kullanıcı ara..." id="searchInput" />
</div>
</header>
<div class="discover-content">
<section class="discover-section">
<h2>🔥 Popüler Semtler</h2>
<div class="semt-grid" id="semtGrid"></div>
</section>
<section class="discover-section">
<h2>📍 Trend Etiketler</h2>
<div class="tag-cloud" id="tagCloud"></div>
</section>
<section class="discover-section">
<h2>🎵 İstanbul Ortam Sesleri</h2>
<div class="sound-list" id="soundList"></div>
</section>
<section class="discover-section">
<h2>🔴 Sokak Sahnesi Canlı</h2>
<div class="live-cards" id="liveCards"></div>
</section>
</div>
</div>
<!-- ==================== VIDEO ÇEKME / STUDIO ==================== -->
<div id="page-create" class="page">
<div class="camera-view">
<div class="camera-preview" id="cameraPreview">
<div class="camera-placeholder">
<i class="fas fa-camera"></i>
<p>Kamera Önizleme</p>
<span>9:16 Dikey Format</span>
</div>
</div>
<div class="camera-top-controls">
<button class="cam-btn" onclick="showToast('Kapat')"><i class="fas fa-times"></i></button>
<button class="cam-btn" onclick="showToast('Flaş')"><i class="fas fa-bolt"></i></button>
<button class="cam-btn" onclick="showToast('Çevir')"><i class="fas fa-sync-alt"></i></button>
</div>
<div class="camera-side-tools">
<button class="tool-btn" onclick="showToast('Hız: 0.5x / 1x / 2x')"><i class="fas fa-tachometer-alt"></i><span>Hız</span></button>
<button class="tool-btn" onclick="showToast('Ses Efektleri: Helyum, Robot...')"><i class="fas fa-magic"></i><span>Efekt</span></button>
<button class="tool-btn" onclick="showToast('İstanbul Ortam Sesleri')"><i class="fas fa-music"></i><span>Ses</span></button>
<button class="tool-btn" onclick="showToast('Filtreler')"><i class="fas fa-palette"></i><span>Filtre</span></button>
<button class="tool-btn" onclick="showToast('Semt Etiketi Ekle')"><i class="fas fa-map-marker-alt"></i><span>Semt</span></button>
</div>
<div class="camera-bottom">
<button class="gallery-btn" onclick="showToast('Galeriden seç')"><i class="fas fa-images"></i></button>
<button class="record-btn" id="recordBtn">
<div class="record-inner"></div>
</button>
<button class="effects-btn" onclick="showToast('Efektler')"><i class="fas fa-sparkles"></i></button>
</div>
</div>
</div>
<!-- ==================== MESAJLAR ==================== -->
<div id="page-messages" class="page">
<header class="page-header messages-header">
<h1>Mesajlar</h1>
<button class="icon-btn" onclick="showToast('Yeni mesaj')"><i class="fas fa-edit"></i></button>
</header>
<div class="chat-list" id="chatList"></div>
<!-- Chat Detail (hidden by default) -->
<div id="chatDetail" class="chat-detail hidden">
<header class="chat-detail-header">
<button class="back-btn" id="backToChats"><i class="fas fa-arrow-left"></i></button>
<div class="chat-user-info">
<img id="chatAvatar" src="" alt="" class="chat-avatar" />
<div>
<div class="chat-name" id="chatName"></div>
<div class="chat-status" id="chatStatus">çevrimiçi</div>
</div>
</div>
<div class="chat-actions">
<button class="icon-btn" onclick="showToast('Sesli Arama 📞')"><i class="fas fa-phone"></i></button>
<button class="icon-btn" onclick="showToast('Görüntülü Arama 📹')"><i class="fas fa-video"></i></button>
</div>
</header>
<div class="messages-area" id="messagesArea"></div>
<!-- Typing indicator -->
<div class="typing-indicator hidden" id="typingIndicator">
<img id="typingAvatar" src="" class="typing-avatar" />
<div class="wave-dots">
<span></span><span></span><span></span>
</div>
</div>
<div class="message-input-bar">
<button class="attach-btn" onclick="showToast('Dosya ekle')"><i class="fas fa-plus"></i></button>
<input type="text" id="messageInput" placeholder="Mesaj yaz..." />
<button class="voice-btn" id="voiceBtn" title="Basılı tut, ses kaydet">
<i class="fas fa-microphone"></i>
</button>
<button class="send-btn" id="sendBtn"><i class="fas fa-paper-plane"></i></button>
</div>
</div>
</div>
<!-- ==================== PROFİL ==================== -->
<div id="page-profile" class="page">
<header class="page-header profile-header">
<h1>@senin_adin</h1>
<button class="icon-btn" onclick="showToast('Ayarlar')"><i class="fas fa-cog"></i></button>
</header>
<div class="profile-content">
<div class="profile-top">
<div class="profile-avatar-wrap">
<img src="https://i.pravatar.cc/150?img=68" alt="Profil" class="profile-avatar" />
<div class="vip-badge gold">
<i class="fas fa-crown"></i> GOLD VIP
</div>
</div>
<div class="profile-stats">
<div class="stat"><strong>24</strong><span>Gönderi</span></div>
<div class="stat"><strong>1.2K</strong><span>Takipçi</span></div>
<div class="stat"><strong>340</strong><span>Takip</span></div>
</div>
</div>
<div class="profile-info">
<h2>Hasan <span class="verify-badge"><i class="fas fa-check-circle"></i></span></h2>
<p class="bio">İstanbul’un ritmi 🌊 | 9. Sınıf | My Name İstanbul Beta Kurucu</p>
<div class="profile-actions">
<button class="btn-primary" onclick="showToast('Profili Düzenle')">Profili Düzenle</button>
<button class="btn-outline" onclick="showToast('Paylaş')">Paylaş</button>
</div>
</div>
<div class="profile-tabs">
<button class="tab active" data-tab="posts"><i class="fas fa-th"></i></button>
<button class="tab" data-tab="pinned"><i class="fas fa-thumbtack"></i></button>
<button class="tab" data-tab="saved"><i class="fas fa-bookmark"></i></button>
</div>
<div class="profile-grid" id="profileGrid"></div>
</div>
</div>
<!-- ALT NAVİGASYON (her zaman görünür) -->
<nav class="bottom-nav">
<button class="nav-item active" data-page="home">
<i class="fas fa-home"></i>
<span>Ana Sayfa</span>
</button>
<button class="nav-item" data-page="discover">
<i class="fas fa-compass"></i>
<span>Keşfet</span>
</button>
<button class="nav-item plus-btn" data-page="create">
<div class="plus-circle"><i class="fas fa-plus"></i></div>
</button>
<button class="nav-item" data-page="messages">
<i class="fas fa-comment-dots"></i>
<span>Mesajlar</span>
<span class="badge" id="msgBadge">3</span>
</button>
<button class="nav-item" data-page="profile">
<i class="fas fa-user"></i>
<span>Profilim</span>
</button>
</nav>
</div>
<div id="toast" class="toast"></div>
<script src="app.js"></script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
6
Requests
3
Domains
186KB
Transfer Size
266KB
Content Size
302.0ms
Dom Content Loaded
492.0ms
First Paint
513.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...