Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Khoj - Settings</title> | |
| <link rel="icon" type="image/png" sizes="128x128" href="./assets/icons/favicon-128x128.png"> | |
| <link rel="stylesheet" href="./assets/khoj.css"> | |
| <style> | |
| :root { | |
| --background-color: #f9fafb; | |
| --primary-color: hsla(24.6 95% 53.1%); | |
| --secondary-color: #f3f4f6; | |
| --text-color: #111827; | |
| --card-bg: #ffffff; | |
| --card-border: #e5e7eb; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: var(--font-family); | |
| background-color: var(--background-color); | |
| color: var(--text-color); | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| height: 100vh; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .header { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| text-align: left; | |
| margin-bottom: 20px; | |
| } | |
| .section-cards { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .card { | |
| background-color: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); | |
| } | |
| .card-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .card-input { | |
| width: -webkit-fill-available; | |
| padding: 10px; | |
| border: 1px solid var(--card-border); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| } | |
| input, | |
| button { | |
| font-family: var(--font-family); | |
| } | |
| .card-button { | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .card-button:hover { | |
| background-color: hsla(24.6 95% 53.1% / 0.5); | |
| } | |
| .secondary-button { | |
| background-color: var(--secondary-color); | |
| color: var(--text-color); | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .secondary-button:hover { | |
| background-color: #e5e7eb; | |
| } | |
| .sync-data { | |
| display: flex; | |
| justify-content: left; | |
| align-items: baseline; | |
| gap: 10px; | |
| flex-direction: column; | |
| } | |
| div.folder-element, | |
| div.file-element { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| img.file-synced-image { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| div.remove-button-container { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: right; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| button.remove-folder-button, | |
| button.remove-file-button { | |
| background-color: transparent; | |
| border: none; | |
| cursor: pointer; | |
| border-radius: 8px; | |
| } | |
| button.remove-folder-button:hover, | |
| button.remove-file-button:hover { | |
| background-color: #f3f4f6; | |
| } | |
| div#sync-status { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| div#big-actions { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| div#big-actions button { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .content-name:hover { | |
| text-decoration: underline; | |
| color: var(--primary-color); | |
| } | |
| .sync-icon, | |
| .clock-icon, | |
| .trash-icon { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| #loading-bar { | |
| width: 100%; | |
| height: 4px; | |
| background: linear-gradient(90deg, | |
| hsla(24.6 95% 53.1% / 0.2) 0%, | |
| var(--primary-color) 50%, | |
| hsla(24.6 95% 53.1% / 0.2) 100%); | |
| border-radius: 2px; | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| margin: 10px 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| @keyframes loading { | |
| 0% { | |
| background-position: 200% 0; | |
| } | |
| 100% { | |
| background-position: -200% 0; | |
| } | |
| } | |
| #loading-bar[style*="display: none"] { | |
| opacity: 0; | |
| } | |
| #loading-bar { | |
| opacity: 1; | |
| } | |
| details.collapsible { | |
| background-color: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| details.collapsible:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); | |
| } | |
| details.collapsible summary { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| details.collapsible summary::after { | |
| content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); | |
| font-size: 0.8em; | |
| transition: transform 0.2s; | |
| } | |
| details.collapsible[open] summary::after { | |
| transform: rotate(180deg); | |
| } | |
| details.collapsible .content { | |
| margin-top: 10px; | |
| } | |
| </style> | |
| <script src="./utils.js"></script> | |
| <script> | |
| window.addEventListener("DOMContentLoaded", async () => { | |
| // Setup the header pane | |
| document.getElementById("khoj-header").innerHTML = await populateHeaderPane(); | |
| // Setup the nav menu | |
| document.getElementById("profile-picture").addEventListener("click", toggleNavMenu); | |
| // Set the active nav pane | |
| document.getElementById("settings-nav")?.classList.add("khoj-nav-selected"); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Main Content --> | |
| <div class="main-content"> | |
| <div id="khoj-header" class="khoj-header"></div> | |
| <div class="section-cards"> | |
| <!-- Replace the server URL and API key cards with: --> | |
| <details class="collapsible"> | |
| <summary>Server URL</summary> | |
| <div class="content"> | |
| <input type="text" class="card-input" id="khoj-host-url" placeholder="Enter server URL"> | |
| </div> | |
| </details> | |
| <details class="collapsible"> | |
| <summary>API Key</summary> | |
| <div class="content"> | |
| <input type="text" class="card-input" id="khoj-access-key" placeholder="Enter API key"> | |
| </div> | |
| </details> | |
| <div class="card"> | |
| <div class="card-title">Files</div> | |
| <div id="current-files"></div> | |
| <button class="secondary-button" id="update-file" title="Add a file to be indexed to your Khoj knowledge base. Will be synced automatically.">Add File</button> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Folders</div> | |
| <div id="current-folders"></div> | |
| <button class="secondary-button" id="update-folder" title="Add a folder to be indexed to your Khoj knowledge base. All valid files will be synced automatically.">Add Folder</button> | |
| </div> | |
| <div class="sync-data"> | |
| <div id="loading-bar" style="display: none;"></div> | |
| <div id="sync-status"></div> | |
| <div id="big-actions"> | |
| <button class="card-button" id="sync-force" title="Delete and re-index all configured files and folders"> | |
| <img src="./assets/icons/upload.svg" class="sync-icon" alt="Sync"> | |
| Force Sync | |
| </button> | |
| <button class="card-button" id="delete-all" title="Remove all indexed content from Khoj"> | |
| <img src="./assets/icons/trash-solid.svg" class="trash-icon" alt="Delete All"> | |
| Delete All | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="./renderer.js"></script> | |
| </html> | |