mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-20 04:47:55 +00:00
enhanced
This commit is contained in:
parent
ae0890fc59
commit
0108aef7bd
59
endpoints/docs/lollms_theme/doc.md
Normal file
59
endpoints/docs/lollms_theme/doc.md
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
Lollms theme:
|
||||||
|
|
||||||
|
1. Use Tailwind CSS for styling:
|
||||||
|
```html
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Implement a gradient background:
|
||||||
|
```html
|
||||||
|
<body class="bg-gradient-to-r from-blue-100 to-purple-100 font-sans">
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Create a container with responsive padding:
|
||||||
|
```html
|
||||||
|
<div class="container mx-auto px-4 py-8">
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Style headers with large, bold text in indigo:
|
||||||
|
```html
|
||||||
|
<h1 class="text-4xl font-bold text-indigo-800">Chat with PDFs</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Use white backgrounds with shadow for content areas:
|
||||||
|
```html
|
||||||
|
<div class="bg-white shadow-lg rounded-lg p-6 mb-8">
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Style buttons with indigo background and hover effects:
|
||||||
|
```html
|
||||||
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded transition duration-300">
|
||||||
|
```
|
||||||
|
|
||||||
|
7. Implement a responsive layout using Flexbox:
|
||||||
|
```html
|
||||||
|
<main class="flex flex-col md:flex-row gap-8">
|
||||||
|
```
|
||||||
|
|
||||||
|
8. Style input fields with indigo borders and focus effects:
|
||||||
|
```html
|
||||||
|
<input type="text" class="border border-indigo-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||||
|
```
|
||||||
|
|
||||||
|
9. Use SVG icons for buttons:
|
||||||
|
```html
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<!-- SVG path data -->
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
10. Implement a settings popup with a blurred overlay:
|
||||||
|
```html
|
||||||
|
<div id="settingsOverlay" class="blurred-overlay"></div>
|
||||||
|
<div id="settingsPopup" class="settings-popup">
|
||||||
|
<!-- Settings content -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
This style guide focuses on creating a clean, modern interface with a purple-blue color scheme, responsive design, and smooth transitions. It uses Tailwind CSS for rapid styling and incorporates SVG icons for a polished look.
|
||||||
|
|
@ -453,12 +453,13 @@ class MarkdownRenderer {
|
|||||||
let inCodeBlock = false;
|
let inCodeBlock = false;
|
||||||
let result = [];
|
let result = [];
|
||||||
let currentParagraph = '';
|
let currentParagraph = '';
|
||||||
|
|
||||||
for (let i = 0; i < lines.length; i++) {
|
for (let i = 0; i < lines.length; i++) {
|
||||||
let line = lines[i].trim();
|
let line = lines[i];
|
||||||
|
let trimmedLine = line.trim();
|
||||||
|
|
||||||
// Check for code blocks
|
// Check for code blocks
|
||||||
if (line.startsWith('```')) {
|
if (trimmedLine.startsWith('```')) {
|
||||||
if (currentParagraph) {
|
if (currentParagraph) {
|
||||||
result.push('<p>' + currentParagraph + '</p>');
|
result.push('<p>' + currentParagraph + '</p>');
|
||||||
currentParagraph = '';
|
currentParagraph = '';
|
||||||
@ -467,15 +468,15 @@ class MarkdownRenderer {
|
|||||||
result.push(line);
|
result.push(line);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If we're in a code block, don't process the line
|
// If we're in a code block, don't process the line
|
||||||
if (inCodeBlock) {
|
if (inCodeBlock) {
|
||||||
result.push(line);
|
result.push(line);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check for list items
|
// Check for list items
|
||||||
if (line.match(/^[-*+]\s/) || line.match(/^\d+\.\s/)) {
|
if (trimmedLine.match(/^[-*+]\s/) || trimmedLine.match(/^\d+\.\s/)) {
|
||||||
if (currentParagraph) {
|
if (currentParagraph) {
|
||||||
result.push('<p>' + currentParagraph + '</p>');
|
result.push('<p>' + currentParagraph + '</p>');
|
||||||
currentParagraph = '';
|
currentParagraph = '';
|
||||||
@ -484,19 +485,19 @@ class MarkdownRenderer {
|
|||||||
result.push('<ul>');
|
result.push('<ul>');
|
||||||
inList = true;
|
inList = true;
|
||||||
}
|
}
|
||||||
result.push('<li>' + line.replace(/^[-*+]\s/, '').replace(/^\d+\.\s/, '') + '</li>');
|
result.push('<li>' + trimmedLine.replace(/^[-*+]\s/, '').replace(/^\d+\.\s/, '') + '</li>');
|
||||||
}
|
}
|
||||||
// Check for headers
|
// Check for headers
|
||||||
else if (line.startsWith('#')) {
|
else if (trimmedLine.startsWith('#')) {
|
||||||
if (currentParagraph) {
|
if (currentParagraph) {
|
||||||
result.push('<p>' + currentParagraph + '</p>');
|
result.push('<p>' + currentParagraph + '</p>');
|
||||||
currentParagraph = '';
|
currentParagraph = '';
|
||||||
}
|
}
|
||||||
let level = line.match(/^#+/)[0].length;
|
let level = trimmedLine.match(/^#+/)[0].length;
|
||||||
result.push(`<h${level}>${line.replace(/^#+\s/, '')}</h${level}>`);
|
result.push(`<h${level}>${trimmedLine.replace(/^#+\s/, '')}</h${level}>`);
|
||||||
}
|
}
|
||||||
// Check for horizontal rules
|
// Check for horizontal rules
|
||||||
else if (line.match(/^(-{3,}|\*{3,}|_{3,})$/)) {
|
else if (trimmedLine.match(/^(-{3,}|\*{3,}|_{3,})$/)) {
|
||||||
if (currentParagraph) {
|
if (currentParagraph) {
|
||||||
result.push('<p>' + currentParagraph + '</p>');
|
result.push('<p>' + currentParagraph + '</p>');
|
||||||
currentParagraph = '';
|
currentParagraph = '';
|
||||||
@ -504,7 +505,7 @@ class MarkdownRenderer {
|
|||||||
result.push('<hr>');
|
result.push('<hr>');
|
||||||
}
|
}
|
||||||
// Handle empty lines
|
// Handle empty lines
|
||||||
else if (line === '') {
|
else if (trimmedLine === '') {
|
||||||
if (inList) {
|
if (inList) {
|
||||||
result.push('</ul>');
|
result.push('</ul>');
|
||||||
inList = false;
|
inList = false;
|
||||||
@ -513,6 +514,7 @@ class MarkdownRenderer {
|
|||||||
result.push('<p>' + currentParagraph + '</p>');
|
result.push('<p>' + currentParagraph + '</p>');
|
||||||
currentParagraph = '';
|
currentParagraph = '';
|
||||||
}
|
}
|
||||||
|
result.push('<br>'); // Add a line break for empty lines
|
||||||
}
|
}
|
||||||
// Regular text
|
// Regular text
|
||||||
else {
|
else {
|
||||||
@ -520,22 +522,23 @@ class MarkdownRenderer {
|
|||||||
result.push('</ul>');
|
result.push('</ul>');
|
||||||
inList = false;
|
inList = false;
|
||||||
}
|
}
|
||||||
currentParagraph += (currentParagraph ? ' ' : '') + line;
|
currentParagraph += (currentParagraph ? '\n' : '') + line;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Close any open list
|
// Close any open list
|
||||||
if (inList) {
|
if (inList) {
|
||||||
result.push('</ul>');
|
result.push('</ul>');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add any remaining paragraph
|
// Add any remaining paragraph
|
||||||
if (currentParagraph) {
|
if (currentParagraph) {
|
||||||
result.push('<p>' + currentParagraph + '</p>');
|
result.push('<p>' + currentParagraph + '</p>');
|
||||||
}
|
}
|
||||||
|
|
||||||
return result.join('\n');
|
return result.join('\n');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
initMathJax() {
|
initMathJax() {
|
||||||
|
@ -1 +1 @@
|
|||||||
Subproject commit 94ee95f94a0d3fd15129de94538a2a9b73b06f84
|
Subproject commit bfae31e6ac6a65622bd6f18f80555859167dd5c2
|
Loading…
Reference in New Issue
Block a user