mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-02 21:19:12 +00:00
341 lines
8.4 KiB
HTML
341 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
|
|
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
|
|
<title>Khoj - Settings</title>
|
|
<link rel="stylesheet" href="/static/assets/pico.min.css">
|
|
<link rel="stylesheet" href="/static/assets/khoj.css">
|
|
</head>
|
|
<script type="text/javascript" src="/static/assets/utils.js"></script>
|
|
<body class="khoj-configure">
|
|
<div class="khoj-header-wrapper">
|
|
<div class="filler"></div>
|
|
|
|
<!--Add Header Logo and Nav Pane-->
|
|
{% import 'utils.html' as utils %}
|
|
{{ utils.heading_pane(user_photo, username) }}
|
|
|
|
<div class="filler"></div>
|
|
</div>
|
|
<div class=”content”>
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
</body>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
img.khoj-logo {
|
|
max-width: none!important;
|
|
}
|
|
div.khoj-header-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr min(70vw, 100%) 1fr;
|
|
}
|
|
.circle {
|
|
width: 51px;
|
|
height: 51px;
|
|
}
|
|
|
|
.page {
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
gap: 32px;
|
|
}
|
|
.section {
|
|
display: grid;
|
|
justify-self: center;
|
|
}
|
|
|
|
div.section-manage-files,
|
|
div.api-settings {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
justify-items: start;
|
|
gap: 8px;
|
|
padding: 24px 24px;
|
|
background: var(--background-color);
|
|
border: 1px solid rgb(229, 229, 229);
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
div.section-manage-files {
|
|
width: 640px;
|
|
}
|
|
|
|
div.api-settings {
|
|
grid-template-rows: 1fr 1fr auto;
|
|
}
|
|
|
|
#api-settings-card-description {
|
|
margin: 8px 0 0 0;
|
|
}
|
|
|
|
#api-settings-keys-table {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
div.instructions {
|
|
font-size: large;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0;
|
|
padding: 0 0 16px 0;
|
|
font-size: 32;
|
|
font-weight: normal;
|
|
}
|
|
.section-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
justify-items: start;
|
|
}
|
|
.card {
|
|
display: grid;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
gap: 8px;
|
|
padding: 24px 16px;
|
|
width: 320px;
|
|
height: 180px;
|
|
background: var(--background-color);
|
|
border: 1px solid rgb(229, 229, 229);
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
|
|
overflow: hidden;
|
|
}
|
|
div.finalize-buttons {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 24px 16px;
|
|
width: 320px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
div#features-hint-text {
|
|
width: 640px;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
overflow: hidden;
|
|
height: 0;
|
|
}
|
|
div#features-hint-text.show {
|
|
opacity: 1;
|
|
height: auto;
|
|
}
|
|
.card-title-row {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
padding: 0;
|
|
gap: 12px;
|
|
}
|
|
.card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.card-title {
|
|
font-size: 20px;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
padding: 0;
|
|
align-self: center;
|
|
}
|
|
.card-title-text {
|
|
vertical-align: middle;
|
|
}
|
|
.card-description {
|
|
margin: 0;
|
|
color: grey;
|
|
font-size: 16px;
|
|
}
|
|
.card-button-row {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
text-align: right;
|
|
}
|
|
.card-button {
|
|
border: none;
|
|
font-weight: bold;
|
|
color: rgb(64,64,64);
|
|
background: transparent;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 32px;
|
|
text-align: right;
|
|
}
|
|
.primary-button {
|
|
border: none;
|
|
color: white;
|
|
padding: 15px 32px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
}
|
|
|
|
button.card-button {
|
|
color: var(--flower);
|
|
background: transparent;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 32px;
|
|
text-align: right;
|
|
text-align: left;
|
|
}
|
|
|
|
button.remove-file-button:hover {
|
|
background-color: rgb(255 235 235);
|
|
border-radius: 3px;
|
|
border: none;
|
|
color: var(--flower);
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button.remove-file-button {
|
|
background-color: rgb(253 214 214);
|
|
border-radius: 3px;
|
|
border: none;
|
|
color: var(--flower);
|
|
padding: 4px;
|
|
}
|
|
|
|
div.file-element {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
border: 1px solid rgb(229, 229, 229);
|
|
border-radius: 4px;
|
|
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
|
|
padding: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
div.remove-button-container {
|
|
text-align: right;
|
|
}
|
|
|
|
button.card-button.happy {
|
|
color: var(--leaf);
|
|
}
|
|
|
|
img.configured-icon {
|
|
max-width: 16px;
|
|
}
|
|
|
|
div.card-action-row.enabled{
|
|
display: block;
|
|
}
|
|
|
|
img.configured-icon.enabled {
|
|
display: inline;
|
|
}
|
|
|
|
div.card-action-row.disabled,
|
|
img.configured-icon.disabled {
|
|
display: none;
|
|
}
|
|
|
|
.loader {
|
|
border: 16px solid #f3f3f3; /* Light grey */
|
|
border-top: 16px solid var(--primary);
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
|
|
div.finalize-actions {
|
|
grid-auto-flow: column;
|
|
grid-gap: 24px;
|
|
}
|
|
|
|
button#logout {
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 32px;
|
|
}
|
|
|
|
select#chat-models {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
|
|
div.api-settings {
|
|
width: 640px;
|
|
}
|
|
|
|
img.api-key-action:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
a {
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.section-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 700px) {
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr repeat(4, auto);
|
|
}
|
|
body > * {
|
|
grid-column: 1;
|
|
}
|
|
|
|
div.filler {
|
|
display: none;
|
|
}
|
|
|
|
body.khoj-configure {
|
|
padding: 0;
|
|
}
|
|
|
|
div.section {
|
|
padding: 12px;
|
|
}
|
|
|
|
div#features-hint-text {
|
|
width: 320px;
|
|
}
|
|
|
|
div.khoj-header-wrapper {
|
|
grid-template-columns: auto;
|
|
}
|
|
|
|
div.section-manage-files,
|
|
div.api-settings {
|
|
width: auto;
|
|
}
|
|
|
|
div.finalize-buttons {
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</html>
|