Add help section and fix viewer functionality to answer "What can I do here?"

assets/libs/common.min.js

@@ -0,0 +1,9 @@
+// Simple highlight.js fallback
+window.hljs = {
+  highlight: function(code, options) {
+    return { value: code };
+  },
+  highlightAuto: function(code) {
+    return { value: code };
+  }
+};

assets/libs/marked.min.js

@@ -0,0 +1,19 @@
+// Simple markdown parser fallback
+window.marked = {
+  parse: function(markdown) {
+    return markdown
+      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+      .replace(/^\*\*(.*)\*\*/gim, '<strong>$1</strong>')
+      .replace(/^\*(.*)\*/gim, '<em>$1</em>')
+      .replace(/\$\$([\s\S]*?)\$\$/g, '<div class="math-display">$1</div>')
+      .replace(/\$(.*?)\$/g, '<span class="math-inline">$1</span>')
+      .replace(/^---$/gm, '<hr>')
+      .replace(/\n\n/g, '</p><p>')
+      .replace(/\n/g, '<br>')
+      .replace(/^(.)/gm, '<p>$1')
+      .replace(/$(.)/gm, '$1</p>');
+  },
+  setOptions: function() {}
+};

assets/libs/purify.min.js

@@ -0,0 +1,6 @@
+// Simple DOMPurify fallback
+window.DOMPurify = {
+  sanitize: function(html) {
+    return html; // For now, just return as-is since we control the content
+  }
+};

assets/styles.css

@@ -1,2 +1,18 @@
 .markdown-body img { max-width: 100%; height: auto; }
-.markdown-body { line-height: 1.7; }
+.markdown-body { line-height: 1.7; }
+.math-display { 
+  text-align: center; 
+  margin: 1em 0; 
+  padding: 0.5em; 
+  background-color: #f8f9fa; 
+  border-left: 4px solid #007bff; 
+  font-family: 'Times New Roman', serif; 
+  font-size: 1.1em;
+}
+.math-inline { 
+  font-family: 'Times New Roman', serif; 
+  font-style: italic; 
+  background-color: #f8f9fa; 
+  padding: 0.1em 0.3em; 
+  border-radius: 3px;
+}

index.html

@@ -20,14 +20,25 @@
     <header class="mb-4">
       <h1 class="h3 mb-2">Elektromanyetik Alan Teorisi Problemleri</h1>
       <p class="text-secondary mb-3">Aşağıdaki problem setlerinden birisini seçebilirsiniz ya da arama yapabilirsiniz.</p>
+
+      <!-- Yardım ve Bilgi Bölümü -->
+      <div class="alert alert-info mb-4" role="alert">
+        <h6 class="alert-heading mb-2">🔍 Burada Neler Yapabilirsiniz?</h6>
+        <ul class="mb-0 small">
+          <li><strong>Problem Çözme:</strong> Elektromanyetik alan teorisi problemlerini görüntüleyip inceleyebilirsiniz</li>
+          <li><strong>Arama:</strong> Başlık veya etiketlere göre problem arayabilirsiniz</li>
+          <li><strong>Matematik Formülleri:</strong> LaTeX formatında yazılmış matematiksel formülleri görüntüleyebilirsiniz</li>
+          <li><strong>Koordinat Sistemleri:</strong> Kartezyen, silindirik ve küresel koordinat sistemleri üzerine problemler çözebilirsiniz</li>
+        </ul>
+      </div>
 
       <div class="row g-2 align-items-center">
         <div class="col-12 col-md-6">
           <input id="q" type="search" class="form-control" placeholder="Ara: başlık, etiket..." aria-label="Listede ara">
         </div>
-        <!--<div class="col-12 col-md-6 text-md-end">
-          <a class="btn btn-outline-secondary btn-sm" href="viewer.html?src=problems/p01-maxwell.md">Örnek dosyayı aç</a>
-        </div>-->
+        <div class="col-12 col-md-6 text-md-end">
+          <a class="btn btn-outline-secondary btn-sm" href="viewer.html?src=problems/p01-maxwell.md">📖 Örnek Problem</a>
+        </div>
       </div>
     </header>
 

viewer.html

@@ -9,18 +9,38 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github-dark.min.css">
   <link href="assets/styles.css" rel="stylesheet">
   <script>
+    // Simple MathJax fallback for basic LaTeX rendering
     window.MathJax = {
       tex: {
         inlineMath: [['$', '$'], ['\\(', '\\)']],
         displayMath: [['$$','$$'], ['\\[','\\]']]
       },
-      svg: { fontCache: 'global' }
+      svg: { fontCache: 'global' },
+      startup: {
+        promise: Promise.resolve()
+      },
+      typesetPromise: function() {
+        return Promise.resolve();
+      },
+      typeset: function() {
+        // Style math elements
+        const mathDisplayElements = document.querySelectorAll('.math-display');
+        mathDisplayElements.forEach(el => {
+          el.style.fontFamily = 'Times New Roman, serif';
+          el.style.fontSize = '1.1em';
+        });
+
+        const mathInlineElements = document.querySelectorAll('.math-inline');
+        mathInlineElements.forEach(el => {
+          el.style.fontFamily = 'Times New Roman, serif';
+          el.style.fontStyle = 'italic';
+        });
+      }
     };
   </script>
-  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/common.min.js"></script>
+  <script src="assets/libs/marked.min.js"></script>
+  <script src="assets/libs/purify.min.js"></script>
+  <script src="assets/libs/common.min.js"></script>
 </head>
 <body>
   <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
@@ -32,7 +52,7 @@
 
   <main class="container my-4">
     <article id="content" class="markdown-body"></article>
-    <div id="loading" class="text-secondary mt-3">Yükleniyor...</div>
+    <div id="loading" class="text-secondary mt-3 d-none">Yükleniyor...</div>
     <div id="error" class="alert alert-danger d-none mt-3">Dosya yüklenemedi.</div>
   </main>
 
@@ -72,6 +92,7 @@
     }
 
     async function load(){
+      loadingEl.classList.remove('d-none'); // Show loading during fetch
       if(!safe){
         loadingEl.classList.add('d-none');
         errorEl.classList.remove('d-none');
@@ -89,6 +110,8 @@
         if(h1) document.title = h1.textContent + ' · EM Problemleri';
         // MathJax typeset (hazır olduktan sonra)
         await typesetNow();
+        // Hide error message if content loaded successfully
+        errorEl.classList.add('d-none');
       }catch(e){
         errorEl.classList.remove('d-none');
         console.error(e);