mirror of
https://github.com/carlrobertoh/ProxyAI.git
synced 2026-05-10 03:59:43 +00:00
157 lines
3.7 KiB
HTML
157 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/[prism-theme].min.css"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/prism.min.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.0/plugins/autoloader/prism-autoloader.min.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg: [bg];
|
|
--font-color: [font-color];
|
|
--font-size: [font-size]px;
|
|
--separator-color: [separator-color];
|
|
--disabled-color: [disabled-color];
|
|
--panel-background-color: [panel-background-color];
|
|
--button-background-color: [button-background-color];
|
|
--button-disabled-background-color: [button-disabled-background-color];
|
|
}
|
|
|
|
button[disabled] {
|
|
color: var(--disabled-color);
|
|
background-color: var(--button-disabled-background-color);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
background-color: var(--bg);
|
|
color: var(--font-color);
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
pre, pre[class*='language-'] {
|
|
overflow: auto;
|
|
font-size: var(--font-size);
|
|
padding: 8px;
|
|
margin-top: 0;
|
|
border-bottom-left-radius: 6px;
|
|
border-bottom-right-radius: 6px;
|
|
border: 1px solid var(--separator-color);
|
|
}
|
|
|
|
pre:focus {
|
|
outline: none;
|
|
}
|
|
|
|
pre:not([class*='language-']) {
|
|
white-space: normal;
|
|
}
|
|
|
|
@keyframes roll {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
#landing-view {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
#landing-view > div {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
#landing-view > div > h1 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.example-text {
|
|
background-color: var(--panel-background-color);
|
|
color: inherit;
|
|
padding: 16px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-message {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.user-message > p {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.response {
|
|
padding: 0 8px;
|
|
background-color: var(--panel-background-color);
|
|
border-top: 1px solid var(--separator-color);
|
|
border-bottom: 1px solid var(--separator-color);
|
|
}
|
|
|
|
.response > p {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.code-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--bg);
|
|
padding: 8px;
|
|
border-top-left-radius: 6px;
|
|
border-top-right-radius: 6px;
|
|
border: 1px solid var(--separator-color);
|
|
}
|
|
|
|
.code-header .actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.lang {
|
|
letter-spacing: 1.2px;
|
|
}
|
|
|
|
.copy-button, .replace-button {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--separator-color);
|
|
background-color: var(--button-background-color);
|
|
color: inherit;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body></body>
|
|
</html>
|