Spaces:

mcmeszi
/

biblAI

Sleeping

App Files Files Community

mcmeszi commited on Aug 1, 2025

Commit

eceac39

verified ·

1 Parent(s): bbfbd92

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +95 -161

public/index.html CHANGED Viewed

@@ -2,186 +2,125 @@
 <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"],
-  ["1 Samuel","1Sámuel"],["2 Samuel","2Sámuel"],["1 Kings","1Királyok"],["2 Kings","2Királyok"],
-  ["1 Chronicles","1Krónika"],["2 Chronicles","2Krónika"],["Ezra","Ezsdás"],["Nehemiah","Nehémiás"],
-  ["Esther","Eszter"],["Job","Jób"],["Psalms","Zsoltárok"],["Proverbs","Példabeszédek"],
-  ["Ecclesiastes","Prédikátor"],["Song of Solomon","Énekek éneke"],["Isaiah","Ézsaiás"],
-  ["Jeremiah","Jeremiás"],["Lamentations","JerSir"],["Ezekiel","Ezékiel"],["Daniel","Dániel"],
-  ["Hosea","Hóseás"],["Joel","Jóel"],["Amos","Ámós"],["Obadiah","Abdiás"],
-  ["Jonah","Jónás"],["Micah","Mikeás"],["Nahum","Náhum"],["Habakkuk","Habakuk"],
-  ["Zephaniah","Szofóniás"],["Haggai","Aggeus"],["Zechariah","Zakariás"],["Malachi","Malakiás"],
-  ["Matthew","Máté"],["Mark","Márk"],["Luke","Lukács"],["John","János"],
-  ["Acts","Apostolok"],["Romans","Róma"],["1 Corinthians","1Korintus"],["2 Corinthians","2Korintus"],
-  ["Galatians","Galata"],["Ephesians","Efezus"],["Philippians","Filippi"],["Colossians","Kolossé"],
-  ["1 Thessalonians","1Thessz"],["2 Thessalonians","2Thessz"],["1 Timothy","1Timóteus"],["2 Timothy","2Timóteus"],
-  ["Titus","Titus"],["Philemon","Filemon"],["Hebrews","Zsidók"],["James","Jakab"],
-  ["1 Peter","1Péter"],["2 Peter","2Péter"],["1 John","1János"],["2 John","2János"],
-  ["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);
@@ -190,9 +129,4 @@ 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>

 <html lang="hu">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Theos ex Machina</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
   <style>
+    /* ─────────── Színpaletta: fekete–fehér minimal ─────────── */
     :root {
+      --bg-start: #000000;
+      --bg-end:   #111111;
+      --surface:  #1a1a1a;
+      --border:   #333;
+      --text:     #eaeaea;
+      --heading:  #ffffff;
+      --btn-bg:   #000000;
+      --btn-hover:#222222;
+    }
+    *{box-sizing:border-box;margin:0;padding:0}
+    body{
+      font-family:"Inter",Arial,Helvetica,sans-serif;
+      min-height:100vh;
+      background:linear-gradient(135deg,var(--bg-start),var(--bg-end));
+      color:var(--text);
+      line-height:1.6;
+      display:flex;
+      align-items:flex-start;
+      justify-content:center;
+      padding:3rem 1rem;
+      -webkit-font-smoothing:antialiased;
+    }
+    h1{font-size:2.3rem;font-weight:700;color:var(--heading);margin-bottom:0.6rem}
+    h2{font-size:1.4rem;color:var(--heading);margin:0.4rem 0 1rem}
+    .card{
+      width:100%;max-width:860px;
+      background:var(--surface);
+      border:1px solid var(--border);
+      border-radius:12px;
+      padding:2rem 1.75rem;
+      box-shadow:0 4px 18px rgba(0,0,0,0.45);
+    }
+    label{display:block;font-weight:600;margin-bottom:0.3rem;color:var(--text)}
+    select,button{
+      width:100%;font:inherit;font-size:1rem;
+      padding:0.65rem 0.75rem;border-radius:8px;border:1px solid var(--border);
+      background:#000;color:#fff;
+      transition:background 0.2s ease,border-color 0.2s ease;
+    }
+    select{background:var(--surface);color:var(--text)}
+    select:focus{outline:none;border-color:#555}
+    button{
+      font-weight:600;cursor:pointer;margin-top:1rem;background:var(--btn-bg);
+    }
+    button:hover:not(:disabled){background:var(--btn-hover)}
+    button:disabled{opacity:0.55;cursor:not-allowed}
+    .grid{display:grid;gap:1.1rem}
+    .two{grid-template-columns:1fr 1fr}
+    .btns{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1.7rem}
+    #result{margin-top:2rem;display:none}
+    pre{
+      white-space:pre-wrap;
+      background:#000;
+      color:#fff;
+      padding:1.4rem;
+      border-radius:8px;
+      border:1px solid var(--border);
+      font-weight:700; /* félkövér kimenet */
+    }
+    @media(max-width:640px){.two{grid-template-columns:1fr}}
   </style>
 </head>
 <body>
+  <main class="card">
     <header>
       <h1>Theos ex Machina</h1>
+      <p style="opacity:0.83;margin-bottom:1.6rem">Válassz könyvet, fejezetet és verset, vagy kattints a <strong>🎲 Random</strong> gombra!<br><small style="opacity:0.7">Forrás: KJV → AI által fordított &amp; értelmezett magyar szöveg</small></p>
     </header>
+    <label for="book">Könyv</label>
+    <select id="book"></select>
+    <div class="grid two" style="margin-top:1.3rem">
+      <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 btns">
+      <button id="randomBtn">🎲 Random vers</button>
+      <button id="generateBtn">📖 Elemzés</button>
     </div>
     <section id="result">
+      <h2>Eredmény</h2>
       <pre id="analysis"></pre>
     </section>
+  </main>
 <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"],["1 Samuel","1Sámuel"],["2 Samuel","2Sámuel"],["1 Kings","1Királyok"],["2 Kings","2Királyok"],["1 Chronicles","1Krónika"],["2 Chronicles","2Krónika"],["Ezra","Ezsdás"],["Nehemiah","Nehémiás"],["Esther","Eszter"],["Job","Jób"],["Psalms","Zsoltárok"],["Proverbs","Példabeszédek"],["Ecclesiastes","Prédikátor"],["Song of Solomon","Énekek éneke"],["Isaiah","Ézsaiás"],["Jeremiah","Jeremiás"],["Lamentations","JerSir"],["Ezekiel","Ezékiel"],["Daniel","Dániel"],["Hosea","Hóseás"],["Joel","Jóel"],["Amos","Ámós"],["Obadiah","Abdiás"],["Jonah","Jónás"],["Micah","Mikeás"],["Nahum","Náhum"],["Habakkuk","Habakuk"],["Zephaniah","Szofóniás"],["Haggai","Aggeus"],["Zechariah","Zakariás"],["Malachi","Malakiás"],["Matthew","Máté"],["Mark","Márk"],["Luke","Lukács"],["John","János"],["Acts","Apostolok"],["Romans","Róma"],["1 Corinthians","1Korintus"],["2 Corinthians","2Korintus"],["Galatians","Galata"],["Ephesians","Efezus"],["Philippians","Filippi"],["Colossians","Kolossé"],["1 Thessalonians","1Thessz"],["2 Thessalonians","2Thessz"],["1 Timothy","1Timóteus"],["2 Timothy","2Timóteus"],["Titus","Titus"],["Philemon","Filemon"],["Hebrews","Zsidók"],["James","Jakab"],["1 Peter","1Péter"],["2 Peter","2Péter"],["1 John","1János"],["2 John","2János"],["3 John","3János"],["Jude","Júdás"],["Revelation","Jelenések"]];
+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(([v,l])=>bookSel.insertAdjacentHTML("beforeend",`<option value="${v}">${l}</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);
 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