dark theme
parent
0ef941d11d
commit
55bb7c3c4f
|
|
@ -8,11 +8,38 @@
|
||||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!-- Библиотека для Markdown -->
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <!-- Библиотека для Markdown -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
|
||||||
<style>
|
<style>
|
||||||
body { display: flex; font-family: Arial, sans-serif; margin: 0; }
|
body {
|
||||||
#tree-container { width: 15%; padding: 10px; border-right: 1px solid #ccc; }
|
display: flex;
|
||||||
#installs-container { width: 60%; padding: 10px; position: relative; }
|
font-family: Arial, sans-serif;
|
||||||
.install-item { display: table; width: 100%; border-collapse: collapse; margin: 2px 0; background: #fff; cursor: move; }
|
margin: 0;
|
||||||
.install-item.selected { background-color: #e6f7ff; } /* Подсветка выбранного пункта */
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
body.dark-theme {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
#tree-container {
|
||||||
|
width: 15%;
|
||||||
|
padding: 10px;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
#tree-container.dark-theme { border-right-color: #444; }
|
||||||
|
#installs-container {
|
||||||
|
width: 60%;
|
||||||
|
padding: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.install-item {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 2px 0;
|
||||||
|
background: #fff;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
.install-item.dark-theme { background: #2a2a2a; }
|
||||||
|
.install-item.selected { background-color: #e6f7ff; }
|
||||||
|
.install-item.selected.dark-theme { background-color: #003a6d; }
|
||||||
.install-item > div {
|
.install-item > div {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -41,9 +68,7 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.install-item .actions {
|
.install-item .actions { width: 25%; }
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
.form-container { margin-bottom: 20px; }
|
.form-container { margin-bottom: 20px; }
|
||||||
.jstree-node { position: relative; }
|
.jstree-node { position: relative; }
|
||||||
.folder-actions {
|
.folder-actions {
|
||||||
|
|
@ -54,10 +79,27 @@
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
#search-container { position: absolute; top: 10px; right: 10px; text-align: right; }
|
#search-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#search-container.dark-theme input, #search-container.dark-theme select {
|
||||||
|
background-color: #333;
|
||||||
|
color: #e0e0e0;
|
||||||
|
border: 1px solid #555;
|
||||||
|
}
|
||||||
#search-input { width: 200px; margin-bottom: 5px; }
|
#search-input { width: 200px; margin-bottom: 5px; }
|
||||||
#installs-list { margin-top: 0; }
|
#installs-list { margin-top: 0; }
|
||||||
.header { display: table; width: 100%; border-collapse: collapse; background: #f0f0f0; cursor: pointer; }
|
.header {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.header.dark-theme { background: #333; }
|
||||||
.header > div {
|
.header > div {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
@ -65,6 +107,7 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.header > div:hover { background: #e0e0e0; }
|
.header > div:hover { background: #e0e0e0; }
|
||||||
|
.header > div.dark-theme:hover { background: #444; }
|
||||||
.sort-arrow { font-size: 12px; margin-left: 5px; }
|
.sort-arrow { font-size: 12px; margin-left: 5px; }
|
||||||
.protocol-icon {
|
.protocol-icon {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
|
@ -78,6 +121,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
.connection-link.dark-theme { color: #66b3ff; }
|
||||||
.edit-button {
|
.edit-button {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #007bff;
|
color: #007bff;
|
||||||
|
|
@ -88,10 +132,19 @@
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
transition: background 0.2s ease;
|
transition: background 0.2s ease;
|
||||||
}
|
}
|
||||||
|
.edit-button.dark-theme {
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #66b3ff;
|
||||||
|
border-color: #66b3ff;
|
||||||
|
}
|
||||||
.edit-button:hover {
|
.edit-button:hover {
|
||||||
background: #e0e0e0;
|
background: #e0e0e0;
|
||||||
color: #0056b3;
|
color: #0056b3;
|
||||||
}
|
}
|
||||||
|
.edit-button.dark-theme:hover {
|
||||||
|
background: #444;
|
||||||
|
color: #99ccff;
|
||||||
|
}
|
||||||
.copy-button {
|
.copy-button {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #28a745;
|
color: #28a745;
|
||||||
|
|
@ -102,10 +155,19 @@
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
transition: background 0.2s ease;
|
transition: background 0.2s ease;
|
||||||
}
|
}
|
||||||
|
.copy-button.dark-theme {
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #5cb85c;
|
||||||
|
border-color: #5cb85c;
|
||||||
|
}
|
||||||
.copy-button:hover {
|
.copy-button:hover {
|
||||||
background: #e0e0e0;
|
background: #e0e0e0;
|
||||||
color: #218838;
|
color: #218838;
|
||||||
}
|
}
|
||||||
|
.copy-button.dark-theme:hover {
|
||||||
|
background: #444;
|
||||||
|
color: #8de28d;
|
||||||
|
}
|
||||||
.action-buttons { margin-left: 5px; }
|
.action-buttons { margin-left: 5px; }
|
||||||
.action-buttons button { margin: 0 2px; }
|
.action-buttons button { margin: 0 2px; }
|
||||||
#import-form { margin-top: 5px; }
|
#import-form { margin-top: 5px; }
|
||||||
|
|
@ -118,9 +180,15 @@
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
#import-label.dark-theme {
|
||||||
|
background: #004d99;
|
||||||
|
border-color: #004d99;
|
||||||
|
}
|
||||||
#import-label:hover { background: #0056b3; }
|
#import-label:hover { background: #0056b3; }
|
||||||
|
#import-label.dark-theme:hover { background: #0066cc; }
|
||||||
.folder-select { margin-bottom: 5px; width: 150px; }
|
.folder-select { margin-bottom: 5px; width: 150px; }
|
||||||
.time-hint { font-size: 12px; color: #666; margin-top: 5px; }
|
.time-hint { font-size: 12px; color: #666; margin-top: 5px; }
|
||||||
|
.time-hint.dark-theme { color: #bbb; }
|
||||||
#notes-panel {
|
#notes-panel {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -129,6 +197,10 @@
|
||||||
min-height: 200px;
|
min-height: 200px;
|
||||||
margin-top: 240px;
|
margin-top: 240px;
|
||||||
}
|
}
|
||||||
|
#notes-panel.dark-theme {
|
||||||
|
border-left-color: #444;
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
#notes-content { margin-top: 10px; }
|
#notes-content { margin-top: 10px; }
|
||||||
#note-modal {
|
#note-modal {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -143,10 +215,27 @@
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
|
#note-modal.dark-theme {
|
||||||
|
background: #2a2a2a;
|
||||||
|
border-color: #444;
|
||||||
|
box-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
#note-modal .markdown-buttons { margin-bottom: 10px; }
|
#note-modal .markdown-buttons { margin-bottom: 10px; }
|
||||||
#note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
|
#note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
|
||||||
#note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
|
#note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
|
||||||
|
#note-modal.dark-theme textarea {
|
||||||
|
background: #333;
|
||||||
|
color: #e0e0e0;
|
||||||
|
border: 1px solid #555;
|
||||||
|
}
|
||||||
#note-modal button { margin-right: 10px; }
|
#note-modal button { margin-right: 10px; }
|
||||||
|
#note-modal.dark-theme button {
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
#note-modal button:hover { background: #0056b3; }
|
||||||
|
#note-modal.dark-theme button:hover { background: #004d99; }
|
||||||
#modal-overlay {
|
#modal-overlay {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -159,6 +248,26 @@
|
||||||
}
|
}
|
||||||
.header-logo { display: flex; align-items: center; }
|
.header-logo { display: flex; align-items: center; }
|
||||||
.header-logo img { height: 50px; margin-right: 10px; }
|
.header-logo img { height: 50px; margin-right: 10px; }
|
||||||
|
.theme-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
background: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid #007bff;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
}
|
||||||
|
.theme-toggle.dark-theme {
|
||||||
|
background: #004d99;
|
||||||
|
border-color: #004d99;
|
||||||
|
}
|
||||||
|
.theme-toggle.dark-theme:hover {
|
||||||
|
background: #0066cc;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -171,6 +280,7 @@
|
||||||
<h1 class="header-logo">
|
<h1 class="header-logo">
|
||||||
<img src="/icons/it-depo-logo.png" alt="АйТи-Депо логотип"> <!-- Логотип -->
|
<img src="/icons/it-depo-logo.png" alt="АйТи-Депо логотип"> <!-- Логотип -->
|
||||||
Органайзер АйТи-Депо
|
Органайзер АйТи-Депо
|
||||||
|
<button class="theme-toggle" onclick="toggleTheme()">Темная тема</button>
|
||||||
</h1>
|
</h1>
|
||||||
<div id="search-container">
|
<div id="search-container">
|
||||||
<input type="text" id="search-input" placeholder="Поиск по ID или имени">
|
<input type="text" id="search-input" placeholder="Поиск по ID или имени">
|
||||||
|
|
@ -254,6 +364,57 @@
|
||||||
'rdp': 'rdp://'
|
'rdp': 'rdp://'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Проверка и применение сохранённой темы
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
if (savedTheme === 'dark') {
|
||||||
|
document.body.classList.add('dark-theme');
|
||||||
|
document.getElementById('installs-container').classList.add('dark-theme');
|
||||||
|
document.getElementById('tree-container').classList.add('dark-theme');
|
||||||
|
document.getElementById('notes-panel').classList.add('dark-theme');
|
||||||
|
document.getElementById('note-modal').classList.add('dark-theme');
|
||||||
|
document.getElementById('search-container').classList.add('dark-theme');
|
||||||
|
document.getElementById('import-label').classList.add('dark-theme');
|
||||||
|
document.querySelector('.theme-toggle').classList.add('dark-theme');
|
||||||
|
document.querySelector('.theme-toggle').textContent = 'Светлая тема';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const body = document.body;
|
||||||
|
const installsContainer = document.getElementById('installs-container');
|
||||||
|
const treeContainer = document.getElementById('tree-container');
|
||||||
|
const notesPanel = document.getElementById('notes-panel');
|
||||||
|
const noteModal = document.getElementById('note-modal');
|
||||||
|
const searchContainer = document.getElementById('search-container');
|
||||||
|
const importLabel = document.getElementById('import-label');
|
||||||
|
const themeToggle = document.querySelector('.theme-toggle');
|
||||||
|
|
||||||
|
if (body.classList.contains('dark-theme')) {
|
||||||
|
body.classList.remove('dark-theme');
|
||||||
|
installsContainer.classList.remove('dark-theme');
|
||||||
|
treeContainer.classList.remove('dark-theme');
|
||||||
|
notesPanel.classList.remove('dark-theme');
|
||||||
|
noteModal.classList.remove('dark-theme');
|
||||||
|
searchContainer.classList.remove('dark-theme');
|
||||||
|
importLabel.classList.remove('dark-theme');
|
||||||
|
themeToggle.classList.remove('dark-theme');
|
||||||
|
themeToggle.textContent = 'Темная тема';
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
body.classList.add('dark-theme');
|
||||||
|
installsContainer.classList.add('dark-theme');
|
||||||
|
treeContainer.classList.add('dark-theme');
|
||||||
|
notesPanel.classList.add('dark-theme');
|
||||||
|
noteModal.classList.add('dark-theme');
|
||||||
|
searchContainer.classList.add('dark-theme');
|
||||||
|
importLabel.classList.add('dark-theme');
|
||||||
|
themeToggle.classList.add('dark-theme');
|
||||||
|
themeToggle.textContent = 'Светлая тема';
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// Загружаем все папки и записи при инициализации
|
// Загружаем все папки и записи при инициализации
|
||||||
loadFolders();
|
loadFolders();
|
||||||
|
|
@ -280,7 +441,7 @@
|
||||||
cb(treeData);
|
cb(treeData);
|
||||||
|
|
||||||
// Автоматически выбираем папку "Несортированные" после загрузки дерева
|
// Автоматически выбираем папку "Несортированные" после загрузки дерева
|
||||||
const unsortedFolder = sortedFolders.find(f => f.name === '00.Несортированные');
|
const unsortedFolder = sortedFolders.find(f => f.name === 'Несортированные');
|
||||||
if (unsortedFolder) {
|
if (unsortedFolder) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$('#folder-tree').jstree('select_node', unsortedFolder.id);
|
$('#folder-tree').jstree('select_node', unsortedFolder.id);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue