Pro HTML Editör - v3.1 (Görsel Yükleme)

Pro HTML Editör v3.1

Görsel Yükle

<!DOCTYPE html>
<html lang="tr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { 
      font-family: 'Segoe UI', sans-serif; 
      margin: 0; padding: 0; 
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      height: 100vh; display: flex; 
      justify-content: center; align-items: center; 
      color: white;
  }
  .card {
      background: rgba(255, 255, 255, 0.1);
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      text-align: center;
      max-width: 90%;
      border: 1px solid rgba(255,255,255,0.2);
  }
  h1 { margin: 0 0 20px 0; font-size: 2.5rem; }
  p { font-size: 1.1rem; line-height: 1.6; }
  
  /* Yüklenen görsel örneği için */
  img { max-width: 100px; border-radius: 10px; margin-top: 10px; display: none; }
  
  button {
      background: #ff79c6; color: white;
      border: none; padding: 12px 30px;
      border-radius: 50px; font-weight: bold;
      font-size: 1rem; cursor: pointer;
      margin-top: 20px; transition: 0.3s;
  }
  button:hover { transform: scale(1.05); background: #bd93f9; }
  
  /* TV ve Yüksek Çözünürlük için Stil */
  @media (min-width: 2000px) {
      h1 { font-size: 5rem; }
      p { font-size: 2.5rem; }
      button { padding: 25px 60px; font-size: 2rem; }
      img { max-width: 200px; }
  }
</style>
</head>
<body>

<div class="card">
  <h1>Merhaba Dünya!</h1>
  <p>Bu, canlı bir önizleme testidir.<br>
  Üstteki <strong>"Görsel Yükle"</strong> butonuna basıp bir resim seçin.<br>
  Örneğin: <em>logo.png</em></p>
  
  <img src="logo.png" alt="Yüklenen Logo" style="display: inline-block;">
  
  <br>
  <button onclick="alert('İndir butonu sağ üstte!')">Tıkla Bana</button>
</div>

</body>
</html>