<div id="proPanel">

<h2>⚡ WEB MASTER PANEL</h2>

<div class="tabs">
  <button data-tab="seo">📊 SEO</button>
  <button data-tab="code">💻 Kod</button>
  <button data-tab="design">🎨 Görsel</button>
  <button data-tab="tools">🛠 Araçlar</button>
</div>

<!-- 📊 SEO -->
<div id="seo" class="tab">
  <h3>robots.txt</h3>
  <input id="siteUrl" placeholder="https://site.com" />
  <button id="btnRobots">Oluştur</button>
  <textarea id="robotsOut"></textarea>

  <h3>sitemap.xml</h3>
  <button id="btnSitemap">Oluştur</button>
  <textarea id="sitemapOut"></textarea>

  <h3>.htaccess</h3>
  <button id="btnHtaccess">Oluştur</button>
  <textarea id="htaccessOut"></textarea>
</div>

<!-- 💻 KOD -->
<div id="code" class="tab" style="display:none;">
  <button id="btnRender">Çalıştır</button>
  <div id="previewBox"></div>
</div>

<!-- 🎨 GÖRSEL -->
<div id="design" class="tab" style="display:none;">
  <input id="textImg" placeholder="Yazı gir" />
  <button id="btnImage">Görsel Oluştur</button>
  <canvas id="canvas" width="300" height="150"></canvas>
</div>

<!-- 🛠 TOOLS -->
<div id="tools" class="tab" style="display:none;">
  <h3>🔐 Şifre Oluşturucu</h3>
  <button id="genPass">Şifre Üret</button>
  <input id="passOut" readonly />

  <h3>🔢 Uzunluk</h3>
  <input type="number" id="passLen" value="12" />
</div>

</div>

<style>
#proPanel{
  background:#0a0a0a;
  color:#0f0;
  padding:20px;
  border-radius:12px;
  font-family:monospace;
}
.tabs button{
  margin:5px;
  padding:10px;
  background:#111;
  color:#0f0;
  border:none;
  cursor:pointer;
}
.tab input, .tab textarea{
  width:100%;
  margin:10px 0;
  padding:10px;
  background:#000;
  color:#0f0;
  border:none;
}
#previewBox{
  background:#fff;
  color:#000;
  padding:10px;
  min-height:150px;
}
canvas{
  margin-top:10px;
  border:1px solid #0f0;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){

  document.querySelectorAll(".tabs button").forEach(btn=>{
    btn.addEventListener("click", function(){
      document.querySelectorAll(".tab").forEach(t=>t.style.display="none");
      document.getElementById(this.dataset.tab).style.display="block";
    });
  });

  document.getElementById("btnRobots").onclick=function(){
    let url=document.getElementById("siteUrl").value;
    document.getElementById("robotsOut").value=
`User-agent: *
Allow: /

Sitemap: ${url}/sitemap.xml`;
  };

  document.getElementById("btnSitemap").onclick=function(){
    let url=document.getElementById("siteUrl").value;
    document.getElementById("sitemapOut").value=
`<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>${url}</loc></url>
</urlset>`;
  };

  document.getElementById("btnHtaccess").onclick=function(){
    document.getElementById("htaccessOut").value=
`RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

RewriteCond %{HTTP_HOST} ^www\\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [L,R=301]

Options -Indexes`;
  };

  document.getElementById("btnRender").onclick=function(){
    let code=document.getElementById("htmlCode").value;
    document.getElementById("previewBox").innerHTML=code;
  };

  document.getElementById("btnImage").onclick=function(){
    let text=document.getElementById("textImg").value;
    let c=document.getElementById("canvas");
    let ctx=c.getContext("2d");

    ctx.fillStyle="black";
    ctx.fillRect(0,0,300,150);

    ctx.fillStyle="#0f0";
    ctx.font="20px Arial";
    ctx.fillText(text,20,80);
  };

  document.getElementById("genPass").onclick=function(){
    let len=document.getElementById("passLen").value;
    let chars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#";
    let pass="";

    for(let i=0;i