Spaces:

mcmeszi
/

biblAI

Sleeping

App Files Files Community

mcmeszi commited on Aug 1, 2025

Commit

bbfbd92

verified ·

1 Parent(s): 2d46e40

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +163 -127

public/index.html CHANGED Viewed

@@ -2,50 +2,159 @@
 <html lang="hu">
 <head>
   <meta charset="UTF-8" />
   <title>Theos ex Machina</title>
   <style>
-    body{font-family:Arial,Helvetica,sans-serif;max-width:760px;margin:40px auto;padding:0 1rem;line-height:1.5;}
-    h1{font-size:1.9rem;margin-bottom:0.4rem;}
-    label{display:block;margin-top:1rem;font-weight:600;}
-    select,button{font-size:1rem;padding:0.4rem 0.6rem;width:100%;box-sizing:border-box;border:1px solid #bbb;border-radius:4px;}
-    button{margin-top:1.2rem;background:#00684a;color:#fff;border:none;cursor:pointer;transition:background 0.2s;}
-    button:hover:not(:disabled){background:#004f38;}
-    button:disabled{opacity:0.6;cursor:not-allowed;}
-    #result{margin-top:2rem;border-top:1px solid #ccc;padding-top:1.5rem;display:none;}
-    pre{white-space:pre-wrap;background:#f7f7f7;padding:1rem;border-radius:4px;}
-    .row{display:flex;gap:0.5rem;}
-    .row>*{flex:1;}
   </style>
 </head>
 <body>
-  <h1>Theos ex Machina</h1>
-  <p>Válassz könyvet, fejezetet és verset, vagy kattints a <strong>🎲 Random</strong> gombra! (Forrás: KJV → AI fordítás magyarra)</p>
-  <!-- Könyv‑legördülő (value = angol név, label = magyar név) -->
-  <label>Könyv:
-    <select id="book"></select>
-  </label>
-  <div class="row">
-    <label>Fejezet:
-      <select id="chapter"></select>
-    </label>
-    <label>Vers:
-      <select id="verse"></select>
-    </label>
-  </div>
-  <button id="randomBtn">🎲 Random vers</button>
-  <button id="generateBtn">📖 Elemzés</button>
-  <div id="result">
-    <h2>Magyar vers + AI‑elemzés</h2>
-    <pre id="analysis"></pre>
   </div>
 <script>
 // ───────────────────────────────────────────────
-// Könyvlista  (value = angol KJV‑név, label = magyar név)
 const books = [
   ["Genesis","1Mózes"],["Exodus","2Mózes"],["Leviticus","3Mózes"],["Numbers","4Mózes"],["Deuteronomy","5Mózes"],
   ["Joshua","Józsué"],["Judges","Bírák"],["Ruth","Ruth"],
@@ -66,97 +175,24 @@ const books = [
   ["3 John","3János"],["Jude","Júdás"],["Revelation","Jelenések"]
 ];
-// DOM‑elemek
-const bookSel     = document.getElementById("book");
-const chapterSel  = document.getElementById("chapter");
-const verseSel    = document.getElementById("verse");
-const generateBtn = document.getElementById("generateBtn");
-const randomBtn   = document.getElementById("randomBtn");
-const analysisEl  = document.getElementById("analysis");
-const resultBox   = document.getElementById("result");
-// Könyvek betöltése
-books.forEach(([val,label])=>{
-  bookSel.innerHTML += `<option value="${val}">${label}</option>`;
-});
-// Fejezet & versszámok lekérése a bible‑api‑ból
-async function fetchChapterVerseCounts(book){
-  const r = await fetch("/api/meta?book=" + encodeURIComponent(book));
-  if(!r.ok) throw new Error("Szerver meta hiba");
-  const d = await r.json();
-  return d.chapters;   // pl. [31,25,…]
-}
-// Select‑feltöltő segéd
-function fill(sel, n){
-  sel.innerHTML = "";
-  for(let i=1;i<=n;i++){
-    sel.innerHTML += `<option value="${i}">${i}</option>`;
-  }
-}
-// Könyv‑ vagy fejezetváltás
-async function refresh(){
-  generateBtn.disabled = randomBtn.disabled = true;
-  try{
-    window.chapterMap = await fetchChapterVerseCounts(bookSel.value);
-    fill(chapterSel, window.chapterMap.length);
-    fill(verseSel, window.chapterMap[0]);
-  }catch(e){
-    alert(e.message);
-  }finally{
-    generateBtn.disabled = randomBtn.disabled = false;
-  }
-}
-bookSel.addEventListener("change", refresh);
-chapterSel.addEventListener("change", ()=>fill(verseSel, window.chapterMap[chapterSel.value-1]||1));
-refresh(); // első betöltés
-// Random gomb
-randomBtn.addEventListener("click", ()=>{
-  const chIdx = Math.floor(Math.random()*window.chapterMap.length);
-  chapterSel.value = chIdx+1;
-  fill(verseSel, window.chapterMap[chIdx]);
-  verseSel.value = Math.floor(Math.random()*window.chapterMap[chIdx])+1;
-});
-// Elemzés lekérése
-async function generate(){
-  const payload = {
-    book:    bookSel.value,     // angol KJV név
-    chapter: chapterSel.value,
-    verse:   verseSel.value
-  };
-  generateBtn.disabled = true;
-  generateBtn.textContent = "⏳ Kérem…";
-  try{
-    const r = await fetch("/api/analyze",{
-      method:"POST",
-      headers:{ "Content-Type":"application/json" },
-      body: JSON.stringify(payload)
-    });
-    if(!r.ok){
-      const e = await r.json();
-      throw new Error(e.error);
-    }
-    const d = await r.json();
-    analysisEl.textContent = d.output;  // magyar vers + AI‑kommentár
-    resultBox.style.display = "block";
-  }catch(e){
-    alert(e.message);
-  }finally{
-    generateBtn.disabled = false;
-    generateBtn.textContent = "📖 Elemzés";
-  }
-}
-generateBtn.addEventListener("click", generate);
 </script>
 </body>
-</html>

 <html lang="hu">
 <head>
   <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Theos ex Machina</title>
+  <!-- Inter font – jól olvasható, tudományos hangulat -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
   <style>
+    :root {
+      --c-bg: #fafafa;
+      --c-bg-panel: #ffffff;
+      --c-primary: #00684a;
+      --c-primary-dark: #004f38;
+      --c-border: #d0d7de;
+      --c-heading: #1a1a1a;
+      --c-text: #303030;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Inter", Arial, Helvetica, sans-serif;
+      background: var(--c-bg);
+      color: var(--c-text);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+    }
+    .wrapper {
+      max-width: 800px;
+      margin: 4rem auto;
+      padding: 0 1rem;
+    }
+    h1 {
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: var(--c-heading);
+      margin: 0 0 0.5rem;
+    }
+    h2 {
+      font-size: 1.4rem;
+      margin: 0.5rem 0 1rem;
+    }
+    .panel {
+      background: var(--c-bg-panel);
+      border: 1px solid var(--c-border);
+      border-radius: 8px;
+      padding: 1.5rem 1.25rem;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+    }
+    label {
+      display: block;
+      font-weight: 500;
+      margin-bottom: 0.25rem;
+    }
+    select, button {
+      width: 100%;
+      font: inherit;
+      font-size: 1rem;
+      padding: 0.55rem 0.65rem;
+      border-radius: 6px;
+      border: 1px solid var(--c-border);
+      transition: border-color 0.15s ease;
+      background: #fff;
+    }
+    select:focus, button:focus {
+      outline: none;
+      border-color: var(--c-primary);
+    }
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.4rem;
+      font-weight: 600;
+      background: var(--c-primary);
+      color: #fff;
+      border: none;
+      cursor: pointer;
+      margin-top: 1rem;
+      transition: background 0.2s ease;
+    }
+    button:hover:not(:disabled) {
+      background: var(--c-primary-dark);
+    }
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+    }
+    #result {
+      margin-top: 2.5rem;
+      display: none;
+    }
+    pre {
+      white-space: pre-wrap;
+      background: #f2f4f6;
+      padding: 1.25rem;
+      border-radius: 8px;
+      border: 1px solid var(--c-border);
+    }
+    @media (max-width: 600px) {
+      .grid { grid-template-columns: 1fr; }
+    }
   </style>
 </head>
 <body>
+  <div class="wrapper">
+    <header>
+      <h1>Theos ex Machina</h1>
+      <p class="panel" style="margin-bottom:1.5rem">Válassz könyvet, fejezetet és verset, vagy kattints a <strong>🎲 Random</strong> gombra!<br><small style="color:#555">Forrás: KJV → mesterséges intelligencia által fordított és értelmezett magyar szöveg</small></p>
+    </header>
+    <div class="panel">
+      <label for="book">Könyv</label>
+      <select id="book"></select>
+      <div class="grid" style="margin-top:1rem">
+        <div>
+          <label for="chapter">Fejezet</label>
+          <select id="chapter"></select>
+        </div>
+        <div>
+          <label for="verse">Vers</label>
+          <select id="verse"></select>
+        </div>
+      </div>
+      <div class="grid" style="margin-top:1.25rem">
+        <button id="randomBtn">🎲 Random vers</button>
+        <button id="generateBtn">📖 Elemzés</button>
+      </div>
+    </div>
+    <section id="result">
+      <h2>Fordítás &amp; AI‑elemzés</h2>
+      <pre id="analysis"></pre>
+    </section>
   </div>
 <script>
 // ───────────────────────────────────────────────
+// Könyvlista (value = angol KJV név, label = magyar név)
 const books = [
   ["Genesis","1Mózes"],["Exodus","2Mózes"],["Leviticus","3Mózes"],["Numbers","4Mózes"],["Deuteronomy","5Mózes"],
   ["Joshua","Józsué"],["Judges","Bírák"],["Ruth","Ruth"],
   ["3 John","3János"],["Jude","Júdás"],["Revelation","Jelenések"]
 ];
+// DOM elemek
+const bookSel=document.getElementById("book"),chapterSel=document.getElementById("chapter"),verseSel=document.getElementById("verse"),generateBtn=document.getElementById("generateBtn"),randomBtn=document.getElementById("randomBtn"),analysisEl=document.getElementById("analysis"),resultBox=document.getElementById("result");
+books.forEach(([val,label])=>{bookSel.insertAdjacentHTML("beforeend",`<option value="${val}">${label}</option>`)});
+async function fetchChapterVerseCounts(book){const r=await fetch("/api/meta?book="+encodeURIComponent(book));if(!r.ok)throw new Error("Szerver meta hiba");return (await r.json()).chapters;}
+function fill(sel,n){sel.innerHTML="";for(let i=1;i<=n;i++){sel.insertAdjacentHTML("beforeend",`<option value="${i}">${i}</option>`);} }
+async function refresh(){generateBtn.disabled=randomBtn.disabled=true;try{window.chapterMap=await fetchChapterVerseCounts(bookSel.value);fill(chapterSel,window.chapterMap.length);fill(verseSel,window.chapterMap[0]);}catch(e){alert(e.message);}finally{generateBtn.disabled=randomBtn.disabled=false;}}
+bookSel.addEventListener("change",refresh);
+chapterSel.addEventListener("change",()=>fill(verseSel,window.chapterMap[chapterSel.value-1]||1));
+refresh();
+randomBtn.addEventListener("click",()=>{const chIdx=Math.floor(Math.random()*window.chapterMap.length);chapterSel.value=chIdx+1;fill(verseSel,window.chapterMap[chIdx]);verseSel.value=Math.floor(Math.random()*window.chapterMap[chIdx])+1;});
+async function generate(){const payload={book:bookSel.value,chapter:chapterSel.value,verse:verseSel.value};generateBtn.disabled=true;generateBtn.textContent="⏳ Kérem…";try{const r=await fetch("/api/analyze",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(payload)});if(!r.ok)throw new Error((await r.json()).error);const d=await r.json();analysisEl.textContent=d.output;resultBox.style.display="block";}catch(e){alert(e.message);}finally{generateBtn.disabled=false;generateBtn.textContent="📖 Elemzés";}}
+generateBtn.addEventListener("click",generate);
 </script>
 </body>
+</html>