GiteaAdmin/go-lcg
1
0
Fork 0
mirror of https://github.com/Direct-Dev-Ru/go-lcg.git synced 2025-11-16 01:29:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile version styled -ready for new version 2.0.1

Browse Source
This commit is contained in:
Кузнецов Антон (aka Direct-dev.ru)
2025-10-22 18:37:08 +06:00
parent 344f763bb4
commit e37599d3ef
28 changed files with 4998 additions and 2224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

515
serve/templates/prompts.go Normal file
View File

@@ -0,0 +1,515 @@
package templates
// PromptsPageTemplate шаблон страницы управления промптами
const PromptsPageTemplate = `
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Системные промпты - LCG Results</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
margin: 0;
font-size: 2.5em;
font-weight: 300;
}
.content {
padding: 30px;
}
.nav-buttons {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.nav-btn {
background: #3498db;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 1em;
text-decoration: none;
transition: background 0.3s ease;
display: inline-block;
text-align: center;
}
.nav-btn:hover {
background: #2980b9;
}
.add-btn {
background: #27ae60;
}
.add-btn:hover {
background: #229954;
}
.prompt-item {
background: #f0f8f0;
border: 1px solid #a8e6cf;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
position: relative;
}
.prompt-item:hover {
border-color: #2d5016;
}
.prompt-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.prompt-id {
background: #2d5016;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
}
.prompt-name {
font-weight: 600;
color: #333;
font-size: 1.2em;
}
.prompt-description {
color: #666;
margin-bottom: 10px;
}
.prompt-content {
background: #f8f9fa;
padding: 15px;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 0.9em;
color: #2d5016;
border-left: 3px solid #2d5016;
white-space: pre-wrap;
}
.prompt-actions {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 8px;
}
.action-btn {
background: #4a7c59;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 0.8em;
transition: background 0.3s ease;
}
.action-btn:hover {
background: #2d5016;
}
.delete-btn {
background: #e74c3c;
}
.delete-btn:hover {
background: #c0392b;
}
.restore-btn {
background: #3498db;
}
.restore-btn:hover {
background: #2980b9;
}
.default-badge {
background: #28a745;
color: white;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.7em;
margin-left: 8px;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #666;
}
.lang-switcher {
display: flex;
gap: 5px;
margin-left: auto;
}
.lang-btn {
background: #6c757d;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: background 0.3s ease;
}
.lang-btn:hover {
background: #5a6268;
}
.lang-btn.active {
background: #3498db;
}
.lang-btn.active:hover {
background: #2980b9;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #e9ecef;
}
.tab-btn {
background: #f8f9fa;
color: #6c757d;
border: none;
padding: 12px 20px;
border-radius: 6px 6px 0 0;
cursor: pointer;
font-size: 1em;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.tab-btn:hover {
background: #e9ecef;
color: #495057;
}
.tab-btn.active {
background: #3498db;
color: white;
border-bottom-color: #2980b9;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Мобильная адаптация */
@media (max-width: 768px) {
body { padding: 10px; }
.container { margin: 0; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.header { padding: 20px; }
.header h1 { font-size: 2em; }
.content { padding: 20px; }
.nav-buttons { flex-direction: column; gap: 8px; }
.nav-btn { text-align: center; padding: 12px 16px; font-size: 14px; }
.lang-switcher { margin-left: 0; }
.tabs { flex-direction: column; gap: 8px; }
.tab-btn { text-align: center; }
.prompt-item { padding: 15px; }
.prompt-content { font-size: 0.85em; }
}
@media (max-width: 480px) {
.header h1 { font-size: 1.8em; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>⚙️ Системные промпты</h1>
<p>Управление системными промптами Linux Command GPT</p>
</div>
<div class="content">
<div class="nav-buttons">
<a href="/" class="nav-btn">🏠 Главная</a>
<a href="/run" class="nav-btn">🚀 Выполнение</a>
<a href="/history" class="nav-btn">📝 История</a>
<button class="nav-btn add-btn" onclick="showAddForm()">➕ Добавить промпт</button>
<div class="lang-switcher">
<button class="lang-btn {{if eq .Lang "ru"}}active{{end}}" onclick="switchLang('ru')">🇷🇺 RU</button>
<button class="lang-btn {{if eq .Lang "en"}}active{{end}}" onclick="switchLang('en')">🇺🇸 EN</button>
</div>
</div>
<!-- Вкладки -->
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('system')">⚙️ Системные промпты</button>
<button class="tab-btn" onclick="switchTab('verbose')">📝 Промпты подробности (v/vv/vvv)</button>
</div>
<!-- Вкладка системных промптов -->
<div id="system-tab" class="tab-content active">
{{if .Prompts}}
{{range .Prompts}}
<div class="prompt-item">
<div class="prompt-actions">
<button class="action-btn" onclick="editPrompt({{.ID}}, '{{.Name}}', '{{.Description}}', '{{.Content}}')">✏️</button>
<button class="action-btn restore-btn" onclick="restorePrompt({{.ID}})" title="Восстановить к значению по умолчанию">🔄</button>
<button class="action-btn delete-btn" onclick="deletePrompt({{.ID}})">🗑️</button>
</div>
<div class="prompt-header">
<div>
<span class="prompt-id">#{{.ID}}</span>
<span class="prompt-name">{{.Name}}</span>
{{if .IsDefault}}<span class="default-badge">Встроенный</span>{{end}}
</div>
</div>
<div class="prompt-description">{{.Description}}</div>
<div class="prompt-content">{{.Content}}</div>
</div>
{{end}}
{{else}}
<div class="empty-state">
<h3>⚙️ Промпты не найдены</h3>
<p>Добавьте пользовательские промпты для настройки поведения системы</p>
</div>
{{end}}
</div>
<!-- Вкладка промптов подробности -->
<div id="verbose-tab" class="tab-content">
{{if .VerbosePrompts}}
{{range .VerbosePrompts}}
<div class="prompt-item">
<div class="prompt-actions">
<button class="action-btn" onclick="editVerbosePrompt('{{.Mode}}', '{{.Content}}')">✏️</button>
<button class="action-btn restore-btn" onclick="restoreVerbosePrompt('{{.Mode}}')" title="Восстановить к значению по умолчанию">🔄</button>
</div>
<div class="prompt-header">
<div>
<span class="prompt-id">#{{.Mode}}</span>
<span class="prompt-name">{{.Name}}</span>
{{if .IsDefault}}<span class="default-badge">Встроенный</span>{{end}}
</div>
</div>
<div class="prompt-description">{{.Description}}</div>
<div class="prompt-content">{{.Content}}</div>
</div>
{{end}}
{{else}}
<div class="empty-state">
<h3>📝 Промпты подробности</h3>
<p>Промпты для режимов v, vv, vvv</p>
</div>
{{end}}
</div>
</div>
</div>
<!-- Форма добавления/редактирования -->
<div id="promptForm" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 12px; max-width: 600px; width: 90%;">
<h3 id="formTitle">Добавить промпт</h3>
<form id="promptFormData">
<input type="hidden" id="promptId" name="id">
<div style="margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: 600;">Название:</label>
<input type="text" id="promptName" name="name" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" required>
</div>
<div style="margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: 600;">Описание:</label>
<input type="text" id="promptDescription" name="description" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" required>
</div>
<div style="margin-bottom: 20px;">
<label style="display: block; margin-bottom: 5px; font-weight: 600;">Содержание:</label>
<textarea id="promptContent" name="content" rows="6" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace;" required></textarea>
</div>
<div style="text-align: right;">
<button type="button" onclick="hideForm()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 4px; margin-right: 10px; cursor: pointer;">Отмена</button>
<button type="submit" style="background: #2d5016; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">Сохранить</button>
</div>
</form>
</div>
</div>
<script>
function showAddForm() {
document.getElementById('formTitle').textContent = 'Добавить промпт';
document.getElementById('promptFormData').reset();
document.getElementById('promptId').value = '';
document.getElementById('promptForm').style.display = 'block';
}
function editPrompt(id, name, description, content) {
document.getElementById('formTitle').textContent = 'Редактировать промпт';
document.getElementById('promptId').value = id;
document.getElementById('promptName').value = name;
document.getElementById('promptDescription').value = description;
document.getElementById('promptContent').value = content;
document.getElementById('promptForm').style.display = 'block';
}
function hideForm() {
document.getElementById('promptForm').style.display = 'none';
}
function switchTab(tabName) {
// Скрываем все вкладки
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
// Убираем активный класс с кнопок
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
// Показываем нужную вкладку
document.getElementById(tabName + '-tab').classList.add('active');
// Активируем нужную кнопку
event.target.classList.add('active');
}
function switchLang(lang) {
// Сохраняем текущие промпты перед переключением языка
saveCurrentPrompts(lang);
// Перезагружаем страницу с новым языком
const url = new URL(window.location);
url.searchParams.set('lang', lang);
window.location.href = url.toString();
}
function saveCurrentPrompts(lang) {
// Отправляем запрос для сохранения текущих промптов с новым языком
fetch('/prompts/save-lang', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
lang: lang
})
})
.catch(error => {
console.error('Error saving prompts:', error);
});
}
function editVerbosePrompt(mode, content) {
// Редактирование промпта подробности
alert('Редактирование промптов подробности будет реализовано');
}
function deletePrompt(id) {
if (confirm('Вы уверены, что хотите удалить промпт #' + id + '?')) {
fetch('/prompts/delete/' + id, {
method: 'DELETE'
})
.then(response => {
if (response.ok) {
location.reload();
} else {
alert('Ошибка при удалении промпта');
}
})
.catch(error => {
console.error('Error:', error);
alert('Ошибка при удалении промпта');
});
}
}
document.getElementById('promptFormData').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const id = formData.get('id');
const url = id ? '/prompts/edit/' + id : '/prompts/add';
const method = id ? 'PUT' : 'POST';
fetch(url, {
method: method,
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: formData.get('name'),
description: formData.get('description'),
content: formData.get('content')
})
})
.then(response => {
if (response.ok) {
location.reload();
} else {
alert('Ошибка при сохранении промпта');
}
})
.catch(error => {
console.error('Error:', error);
alert('Ошибка при сохранении промпта');
});
});
// Функция восстановления системного промпта
function restorePrompt(id) {
if (confirm('Восстановить промпт к значению по умолчанию?')) {
fetch('/prompts/restore/' + id, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Промпт восстановлен');
location.reload();
} else {
alert('Ошибка: ' + data.error);
}
})
.catch(error => {
console.error('Error:', error);
alert('Ошибка при восстановлении промпта');
});
}
}
// Функция восстановления verbose промпта
function restoreVerbosePrompt(mode) {
if (confirm('Восстановить промпт к значению по умолчанию?')) {
fetch('/prompts/restore-verbose/' + mode, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Промпт восстановлен');
location.reload();
} else {
alert('Ошибка: ' + data.error);
}
})
.catch(error => {
console.error('Error:', error);
alert('Ошибка при восстановлении промпта');
});
}
}
</script>
</body>
</html>`