Spaces:

Shouvik99
/

LifeGuide

Sleeping

App Files Files Community

Shouvik599 commited on Mar 22

Commit

0848bca

1 Parent(s): 603a7ff

Generalized url for frontend fetching

Browse files

Files changed (1) hide show

frontend/index.html +206 -75

frontend/index.html CHANGED Viewed

@@ -1,34 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Sacred Texts — Divine Knowledge</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=IM+Fell+English:ital@0;1&display=swap" rel="stylesheet" />
   <style>
     /* ── Reset & Base ─────────────────────────────────────────── */
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --bg:          #0d0b07;
-      --surface:     #16130d;
-      --surface-2:   #1e1a11;
-      --border:      #3a2e1a;
-      --gold:        #c9993a;
-      --gold-light:  #e8c170;
-      --gold-pale:   #f5e4b0;
-      --cream:       #f0e6cc;
-      --muted:       #7a6a4a;
-      --gita:        #e07b3b;    /* saffron */
-      --quran:       #3bba85;    /* green */
-      --bible:       #5b8ce0;    /* blue */
-      --granth:      #b07ce0;    /* violet — Sikh royal purple */
-    }
-    html, body {
       height: 100%;
       background: var(--bg);
       color: var(--cream);
@@ -41,11 +55,12 @@
     /* ── Background texture ───────────────────────────────────── */
     body::before {
       content: '';
-      position: fixed; inset: 0;
       background:
-        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(201,153,58,.07) 0%, transparent 60%),
-        radial-gradient(ellipse 60% 80% at 80% 90%, rgba(91,140,224,.05) 0%, transparent 60%),
-        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(176,124,224,.04) 0%, transparent 60%),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
       pointer-events: none;
       z-index: 0;
@@ -79,7 +94,12 @@
       animation: spin 60s linear infinite;
       display: inline-block;
     }
-    @keyframes spin { to { transform: rotate(360deg); } }
     h1 {
       font-family: 'Cinzel Decorative', serif;
@@ -87,7 +107,7 @@
       font-weight: 400;
       color: var(--gold-pale);
       letter-spacing: .12em;
-      text-shadow: 0 0 40px rgba(201,153,58,.3);
     }
     .subtitle {
@@ -116,10 +136,30 @@
       font-family: 'Cormorant Garamond', serif;
       font-weight: 600;
     }
-    .badge-gita   { color: var(--gita);   border-color: var(--gita);   background: rgba(224,123,59,.1); }
-    .badge-quran  { color: var(--quran);  border-color: var(--quran);  background: rgba(59,186,133,.1); }
-    .badge-bible  { color: var(--bible);  border-color: var(--bible);  background: rgba(91,140,224,.1); }
-    .badge-granth { color: var(--granth); border-color: var(--granth); background: rgba(176,124,224,.1); }
     /* ── Chat Window ──────────────────────────────────────────── */
     .chat-window {
@@ -131,8 +171,15 @@
       scrollbar-width: thin;
       scrollbar-color: var(--border) transparent;
     }
-    .chat-window::-webkit-scrollbar { width: 4px; }
-    .chat-window::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
     /* ── Welcome State ────────────────────────────────────────── */
     .welcome {
@@ -145,7 +192,7 @@
     .welcome-icon {
       font-size: 3.5rem;
       margin-bottom: 16px;
-      filter: drop-shadow(0 0 20px rgba(201,153,58,.4));
     }
     .welcome h2 {
@@ -182,6 +229,7 @@
       transition: all .2s;
       text-align: left;
     }
     .suggested-queries button:hover {
       border-color: var(--gold);
       color: var(--gold-pale);
@@ -195,14 +243,23 @@
       gap: 8px;
       animation: fadeUp .4s ease both;
     }
     @keyframes fadeUp {
-      from { opacity: 0; transform: translateY(12px); }
-      to   { opacity: 1; transform: translateY(0); }
     }
     .message-user {
       align-items: flex-end;
     }
     .message-assistant {
       align-items: flex-start;
     }
@@ -233,17 +290,26 @@
     }
     .message-assistant .msg-bubble {
-      background: linear-gradient(135deg, var(--surface) 0%, rgba(30,26,17,.95) 100%);
-      border: 1px solid rgba(201,153,58,.2);
       color: var(--cream);
       font-size: 1rem;
       border-bottom-left-radius: 4px;
-      box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(201,153,58,.1);
     }
-    .msg-bubble p { margin-bottom: 1em; }
-    .msg-bubble p:last-child { margin-bottom: 0; }
-    .msg-bubble strong { color: var(--gold-light); font-weight: 600; }
     /* ── Sources Panel ────────────────────────────────────────── */
     .sources {
@@ -261,13 +327,18 @@
       align-items: center;
       gap: 6px;
     }
-    .sources-label::before, .sources-label::after {
       content: '';
       flex: 1;
       height: 1px;
       background: var(--border);
     }
-    .sources-label::before { max-width: 20px; }
     .source-tags {
       display: flex;
@@ -284,12 +355,41 @@
       cursor: default;
       transition: all .2s;
     }
-    .source-tag:hover { transform: translateY(-1px); filter: brightness(1.2); }
-    .source-gita   { color: var(--gita);   border-color: rgba(224,123,59,.4);  background: rgba(224,123,59,.08); }
-    .source-quran  { color: var(--quran);  border-color: rgba(59,186,133,.4);  background: rgba(59,186,133,.08); }
-    .source-bible  { color: var(--bible);  border-color: rgba(91,140,224,.4);  background: rgba(91,140,224,.08); }
-    .source-granth { color: var(--granth); border-color: rgba(176,124,224,.4); background: rgba(176,124,224,.08); }
-    .source-other  { color: var(--gold-light); border-color: rgba(201,153,58,.4); background: rgba(201,153,58,.08); }
     /* ── Loading ──────────────────────────────────────────────── */
     .loading {
@@ -297,7 +397,7 @@
       align-items: center;
       gap: 12px;
       padding: 14px 18px;
-      border: 1px solid rgba(201,153,58,.15);
       border-radius: 12px;
       background: var(--surface);
       width: fit-content;
@@ -308,17 +408,36 @@
       display: flex;
       gap: 5px;
     }
     .loading-dots span {
-      width: 6px; height: 6px;
       border-radius: 50%;
       background: var(--gold);
       animation: dot-pulse 1.4s ease-in-out infinite;
     }
-    .loading-dots span:nth-child(2) { animation-delay: .2s; }
-    .loading-dots span:nth-child(3) { animation-delay: .4s; }
     @keyframes dot-pulse {
-      0%, 80%, 100% { opacity: .2; transform: scale(.8); }
-      40%            { opacity: 1;  transform: scale(1.1); }
     }
     .loading-text {
@@ -366,17 +485,23 @@
       outline: none;
       transition: border-color .2s, box-shadow .2s;
     }
-    textarea::placeholder { color: var(--muted); font-style: italic; }
     textarea:focus {
-      border-color: rgba(201,153,58,.5);
-      box-shadow: 0 0 0 3px rgba(201,153,58,.08);
     }
     .send-btn {
-      width: 52px; height: 52px;
       border-radius: 12px;
-      border: 1px solid rgba(201,153,58,.4);
-      background: linear-gradient(135deg, rgba(201,153,58,.2), rgba(201,153,58,.05));
       color: var(--gold);
       font-size: 1.3rem;
       cursor: pointer;
@@ -386,13 +511,19 @@
       justify-content: center;
       flex-shrink: 0;
     }
     .send-btn:hover:not(:disabled) {
-      background: linear-gradient(135deg, rgba(201,153,58,.35), rgba(201,153,58,.15));
       border-color: var(--gold);
       transform: translateY(-1px);
-      box-shadow: 0 4px 16px rgba(201,153,58,.2);
     }
-    .send-btn:disabled { opacity: .3; cursor: not-allowed; transform: none; }
     .input-hint {
       font-size: .72rem;
@@ -412,6 +543,7 @@
     }
   </style>
 </head>
 <body>
   <div class="app">
@@ -433,13 +565,15 @@
       <div class="welcome" id="welcomePane">
         <div class="welcome-icon">🕊️</div>
         <h2>"Seek, and it shall be given unto you"</h2>
-        <p>Ask any spiritual or philosophical question. Answers are drawn exclusively from the Bhagavad Gita, Quran, Bible, and Guru Granth Sahib.</p>
         <div class="suggested-queries">
           <button onclick="askSuggested(this)">What do the scriptures say about forgiveness?</button>
           <button onclick="askSuggested(this)">How should one face fear and death?</button>
           <button onclick="askSuggested(this)">What is the purpose of prayer and worship?</button>
           <button onclick="askSuggested(this)">What is the nature of the soul according to each religion?</button>
-          <button onclick="askSuggested(this)">What do the scriptures teach about humility and selfless service?</button>
         </div>
       </div>
     </div>
@@ -447,24 +581,20 @@
     <!-- Input -->
     <div class="input-area">
       <div class="input-row">
-        <textarea
-          id="questionInput"
-          placeholder="Ask a question from the sacred texts…"
-          rows="1"
-          onkeydown="handleKey(event)"
-          oninput="autoResize(this)"
-        ></textarea>
         <button class="send-btn" id="sendBtn" onclick="sendQuestion()" title="Ask (Enter)">
           ✦
         </button>
       </div>
-      <p class="input-hint">Press Enter to ask · Shift+Enter for new line · Answers grounded strictly in the sacred texts</p>
     </div>
   </div>
   <script>
-    const API_BASE = "http://localhost:8000";
     let isLoading = false;
     // ── Helpers ────────────────────────────────────────────────
@@ -562,7 +692,7 @@
     }
     function escapeHtml(str) {
-      return str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
     }
     // ── Send question ──────────────────────────────────────────
@@ -598,7 +728,7 @@
       } catch (err) {
         let msg = err.message;
         if (msg.includes("fetch") || msg.includes("NetworkError") || msg.includes("Failed")) {
-          msg = "Cannot reach the server. Make sure `python app.py` is running on localhost:8000.";
         }
         replaceLoadingWithError(loadingEl, msg);
       } finally {
@@ -623,4 +753,5 @@
     }
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Sacred Texts — Divine Knowledge</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=IM+Fell+English:ital@0;1&display=swap"
+    rel="stylesheet" />
   <style>
     /* ── Reset & Base ─────────────────────────────────────────── */
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
     :root {
+      --bg: #0d0b07;
+      --surface: #16130d;
+      --surface-2: #1e1a11;
+      --border: #3a2e1a;
+      --gold: #c9993a;
+      --gold-light: #e8c170;
+      --gold-pale: #f5e4b0;
+      --cream: #f0e6cc;
+      --muted: #7a6a4a;
+      --gita: #e07b3b;
+      /* saffron */
+      --quran: #3bba85;
+      /* green */
+      --bible: #5b8ce0;
+      /* blue */
+      --granth: #b07ce0;
+      /* violet — Sikh royal purple */
+    }
+    html,
+    body {
       height: 100%;
       background: var(--bg);
       color: var(--cream);
     /* ── Background texture ───────────────────────────────────── */
     body::before {
       content: '';
+      position: fixed;
+      inset: 0;
       background:
+        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(201, 153, 58, .07) 0%, transparent 60%),
+        radial-gradient(ellipse 60% 80% at 80% 90%, rgba(91, 140, 224, .05) 0%, transparent 60%),
+        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(176, 124, 224, .04) 0%, transparent 60%),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
       pointer-events: none;
       z-index: 0;
       animation: spin 60s linear infinite;
       display: inline-block;
     }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
     h1 {
       font-family: 'Cinzel Decorative', serif;
       font-weight: 400;
       color: var(--gold-pale);
       letter-spacing: .12em;
+      text-shadow: 0 0 40px rgba(201, 153, 58, .3);
     }
     .subtitle {
       font-family: 'Cormorant Garamond', serif;
       font-weight: 600;
     }
+    .badge-gita {
+      color: var(--gita);
+      border-color: var(--gita);
+      background: rgba(224, 123, 59, .1);
+    }
+    .badge-quran {
+      color: var(--quran);
+      border-color: var(--quran);
+      background: rgba(59, 186, 133, .1);
+    }
+    .badge-bible {
+      color: var(--bible);
+      border-color: var(--bible);
+      background: rgba(91, 140, 224, .1);
+    }
+    .badge-granth {
+      color: var(--granth);
+      border-color: var(--granth);
+      background: rgba(176, 124, 224, .1);
+    }
     /* ── Chat Window ──────────────────────────────────────────── */
     .chat-window {
       scrollbar-width: thin;
       scrollbar-color: var(--border) transparent;
     }
+    .chat-window::-webkit-scrollbar {
+      width: 4px;
+    }
+    .chat-window::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 4px;
+    }
     /* ── Welcome State ────────────────────────────────────────── */
     .welcome {
     .welcome-icon {
       font-size: 3.5rem;
       margin-bottom: 16px;
+      filter: drop-shadow(0 0 20px rgba(201, 153, 58, .4));
     }
     .welcome h2 {
       transition: all .2s;
       text-align: left;
     }
     .suggested-queries button:hover {
       border-color: var(--gold);
       color: var(--gold-pale);
       gap: 8px;
       animation: fadeUp .4s ease both;
     }
     @keyframes fadeUp {
+      from {
+        opacity: 0;
+        transform: translateY(12px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
     .message-user {
       align-items: flex-end;
     }
     .message-assistant {
       align-items: flex-start;
     }
     }
     .message-assistant .msg-bubble {
+      background: linear-gradient(135deg, var(--surface) 0%, rgba(30, 26, 17, .95) 100%);
+      border: 1px solid rgba(201, 153, 58, .2);
       color: var(--cream);
       font-size: 1rem;
       border-bottom-left-radius: 4px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(201, 153, 58, .1);
     }
+    .msg-bubble p {
+      margin-bottom: 1em;
+    }
+    .msg-bubble p:last-child {
+      margin-bottom: 0;
+    }
+    .msg-bubble strong {
+      color: var(--gold-light);
+      font-weight: 600;
+    }
     /* ── Sources Panel ────────────────────────────────────────── */
     .sources {
       align-items: center;
       gap: 6px;
     }
+    .sources-label::before,
+    .sources-label::after {
       content: '';
       flex: 1;
       height: 1px;
       background: var(--border);
     }
+    .sources-label::before {
+      max-width: 20px;
+    }
     .source-tags {
       display: flex;
       cursor: default;
       transition: all .2s;
     }
+    .source-tag:hover {
+      transform: translateY(-1px);
+      filter: brightness(1.2);
+    }
+    .source-gita {
+      color: var(--gita);
+      border-color: rgba(224, 123, 59, .4);
+      background: rgba(224, 123, 59, .08);
+    }
+    .source-quran {
+      color: var(--quran);
+      border-color: rgba(59, 186, 133, .4);
+      background: rgba(59, 186, 133, .08);
+    }
+    .source-bible {
+      color: var(--bible);
+      border-color: rgba(91, 140, 224, .4);
+      background: rgba(91, 140, 224, .08);
+    }
+    .source-granth {
+      color: var(--granth);
+      border-color: rgba(176, 124, 224, .4);
+      background: rgba(176, 124, 224, .08);
+    }
+    .source-other {
+      color: var(--gold-light);
+      border-color: rgba(201, 153, 58, .4);
+      background: rgba(201, 153, 58, .08);
+    }
     /* ── Loading ──────────────────────────────────────────────── */
     .loading {
       align-items: center;
       gap: 12px;
       padding: 14px 18px;
+      border: 1px solid rgba(201, 153, 58, .15);
       border-radius: 12px;
       background: var(--surface);
       width: fit-content;
       display: flex;
       gap: 5px;
     }
     .loading-dots span {
+      width: 6px;
+      height: 6px;
       border-radius: 50%;
       background: var(--gold);
       animation: dot-pulse 1.4s ease-in-out infinite;
     }
+    .loading-dots span:nth-child(2) {
+      animation-delay: .2s;
+    }
+    .loading-dots span:nth-child(3) {
+      animation-delay: .4s;
+    }
     @keyframes dot-pulse {
+      0%,
+      80%,
+      100% {
+        opacity: .2;
+        transform: scale(.8);
+      }
+      40% {
+        opacity: 1;
+        transform: scale(1.1);
+      }
     }
     .loading-text {
       outline: none;
       transition: border-color .2s, box-shadow .2s;
     }
+    textarea::placeholder {
+      color: var(--muted);
+      font-style: italic;
+    }
     textarea:focus {
+      border-color: rgba(201, 153, 58, .5);
+      box-shadow: 0 0 0 3px rgba(201, 153, 58, .08);
     }
     .send-btn {
+      width: 52px;
+      height: 52px;
       border-radius: 12px;
+      border: 1px solid rgba(201, 153, 58, .4);
+      background: linear-gradient(135deg, rgba(201, 153, 58, .2), rgba(201, 153, 58, .05));
       color: var(--gold);
       font-size: 1.3rem;
       cursor: pointer;
       justify-content: center;
       flex-shrink: 0;
     }
     .send-btn:hover:not(:disabled) {
+      background: linear-gradient(135deg, rgba(201, 153, 58, .35), rgba(201, 153, 58, .15));
       border-color: var(--gold);
       transform: translateY(-1px);
+      box-shadow: 0 4px 16px rgba(201, 153, 58, .2);
+    }
+    .send-btn:disabled {
+      opacity: .3;
+      cursor: not-allowed;
+      transform: none;
     }
     .input-hint {
       font-size: .72rem;
     }
   </style>
 </head>
 <body>
   <div class="app">
       <div class="welcome" id="welcomePane">
         <div class="welcome-icon">🕊️</div>
         <h2>"Seek, and it shall be given unto you"</h2>
+        <p>Ask any spiritual or philosophical question. Answers are drawn exclusively from the Bhagavad Gita, Quran,
+          Bible, and Guru Granth Sahib.</p>
         <div class="suggested-queries">
           <button onclick="askSuggested(this)">What do the scriptures say about forgiveness?</button>
           <button onclick="askSuggested(this)">How should one face fear and death?</button>
           <button onclick="askSuggested(this)">What is the purpose of prayer and worship?</button>
           <button onclick="askSuggested(this)">What is the nature of the soul according to each religion?</button>
+          <button onclick="askSuggested(this)">What do the scriptures teach about humility and selfless
+            service?</button>
         </div>
       </div>
     </div>
     <!-- Input -->
     <div class="input-area">
       <div class="input-row">
+        <textarea id="questionInput" placeholder="Ask a question from the sacred texts…" rows="1"
+          onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
         <button class="send-btn" id="sendBtn" onclick="sendQuestion()" title="Ask (Enter)">
           ✦
         </button>
       </div>
+      <p class="input-hint">Press Enter to ask · Shift+Enter for new line · Answers grounded strictly in the sacred
+        texts</p>
     </div>
   </div>
   <script>
+    const API_BASE = window.location.origin;
     let isLoading = false;
     // ── Helpers ────────────────────────────────────────────────
     }
     function escapeHtml(str) {
+      return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
     }
     // ── Send question ──────────────────────────────────────────
       } catch (err) {
         let msg = err.message;
         if (msg.includes("fetch") || msg.includes("NetworkError") || msg.includes("Failed")) {
+          msg = "Connecting to the divine knowledge base... Please wait a moment or refresh the page.";
         }
         replaceLoadingWithError(loadingEl, msg);
       } finally {
     }
   </script>
 </body>
 </html>