Update index.html

index.html

@@ -1,19 +1,78 @@
-<!doctype html>
+Evet, **`<iframe>` ile** istediğin heatmap sayfalarını doğrudan başka bir web sayfasına gömebilirsin.  
+Senin verdiğin kod, HTML dosyasında veya destekleyen bir platformda **çalışır** ve her bir heatmap’i ayrı ayrı gömülü olarak gösterir.
+
+---
+
+## Örnek: Tüm Heatmap’leri Yan Yana veya Alt Alta Göstermek
+
+```html
+<div style="display: flex; flex-direction: column; gap: 20px;">
+  <iframe
+    src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"
+    style="width: 100%; height: 300px;"
+    frameborder="0"
+  ></iframe>
+  <iframe
+    src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"
+    style="width: 100%; height: 300px;"
+    frameborder="0"
+  ></iframe>
+  <iframe
+    src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"
+    style="width: 100%; height: 300px;"
+    frameborder="0"
+  ></iframe>
+  <iframe
+    src="https://cfahlgren1-model-release-heatmap.hf.space/Vyvo"
+    style="width: 100%; height: 300px;"
+    frameborder="0"
+  ></iframe>
+</div>
+```
+
+> **Not:**  
+> - `class="w-full h-[300px]"` TailwindCSS içindir, klasik HTML’de `style="width: 100%; height: 300px;"` olarak kullanabilirsin.
+> - Bu kodu **kendi web sitende**, **GitHub Pages’te** veya **Hugging Face Space’in HTML tabanlı bir arayüzünde** kullanabilirsin.
+
+---
+
+## Platform Desteği
+
+| Platform                | `<iframe>` Desteği | Açıklama                                |
+|-------------------------|:------------------:|-----------------------------------------|
+| Kendi HTML/Web Sitesi   | ✔️                | Sorunsuz çalışır                        |
+| GitHub README.md        | ❌                | ÇALIŞMAZ (iframe desteklenmez)          |
+| Hugging Face Space (HTML/Gradio) | ⚠️       | HTML bloklarında çalışabilir, Gradio Markdown’da çalışmaz |
+| Notion, Medium vb.      | ⚠️                | Bazı platformlarda çalışır, bazılarında çalışmaz |
+
+---
+
+## **Sonuç**
+
+-  Kendi web sitende veya HTML destekli bir platformda verdiğin iframe kodunu kullanabilirsin.
+-  Eğer **GitHub README.md** veya Markdown tabanlı bir ortamdaysan, iframe çalışmaz.
+-  Hugging Face Space’te Streamlit veya saf HTML ile de gömebilirsin.
+
+---
+
+### **Ekstra: Sadece HTML Dosyası Örneği**
+
+```html
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+  <head>
+    <title>Hugging Face Heatmaps</title>
+  </head>
+  <body style="background: #111; color: #fff;">
+    <h1>My Hugging Face Heatmaps</h1>
+    <div style="display: flex; flex-direction: column; gap: 20px;">
+      <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar" style="width: 100%; height: 300px;" frameborder="0"></iframe>
+      <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub" style="width: 100%; height: 300px;" frameborder="0"></iframe>
+      <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS" style="width: 100%; height: 300px;" frameborder="0"></iframe>
+      <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Vyvo" style="width: 100%; height: 300px;" frameborder="0"></iframe>
+    </div>
+  </body>
 </html>
+```
+
+---