init
This commit is contained in:
Dean J. Karstedt
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.v]
|
||||||
|
indent_style = tab
|
||||||
|
indent_size = 4
|
||||||
7
.gitattributes
vendored
Normal file
7
.gitattributes
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
* text=auto eol=lf
|
||||||
|
*.bat eol=crlf
|
||||||
|
|
||||||
|
**/*.v linguist-language=V
|
||||||
|
**/*.vv linguist-language=V
|
||||||
|
**/*.vsh linguist-language=V
|
||||||
|
**/v.mod linguist-language=V
|
||||||
9
.gitignore
vendored
9
.gitignore
vendored
@@ -1,4 +1,7 @@
|
|||||||
# ---> V
|
# ---> V
|
||||||
|
main
|
||||||
|
*.dylib
|
||||||
|
*.exe~
|
||||||
*.exe
|
*.exe
|
||||||
*.o
|
*.o
|
||||||
*.so
|
*.so
|
||||||
@@ -11,3 +14,9 @@
|
|||||||
*.bak
|
*.bak
|
||||||
*.out
|
*.out
|
||||||
|
|
||||||
|
bin/
|
||||||
|
|
||||||
|
.DS_Store
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.iml
|
||||||
|
|||||||
0
app/Dockerfile
Normal file
0
app/Dockerfile
Normal file
276
app/src/assets/dev/index.html
Normal file
276
app/src/assets/dev/index.html
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>File Browser</title>
|
||||||
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="breadcrumbs">Folder Path</div>
|
||||||
|
<div class="path-container" id="pathContainer">
|
||||||
|
<!-- Breadcrumbs will be generated here -->
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="meta">
|
||||||
|
<div id="summary">
|
||||||
|
<span class="meta-item"><b id="dirCount">0</b> directories</span>
|
||||||
|
<span class="meta-item"><b id="fileCount">0</b> files</span>
|
||||||
|
<span class="meta-item"><b id="totalSize">0 B</b> total</span>
|
||||||
|
</div>
|
||||||
|
<div class="layout-toggle">
|
||||||
|
<button class="layout-btn active" id="layoutList" onclick="setLayout('list')">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="18" height="7" rx="1"></rect>
|
||||||
|
<rect x="3" y="14" width="18" height="7" rx="1"></rect>
|
||||||
|
</svg>
|
||||||
|
List
|
||||||
|
</button>
|
||||||
|
<button class="layout-btn" id="layoutGrid" onclick="setLayout('grid')">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="7" height="7"></rect>
|
||||||
|
<rect x="14" y="3" width="7" height="7"></rect>
|
||||||
|
<rect x="14" y="14" width="7" height="7"></rect>
|
||||||
|
<rect x="3" y="14" width="7" height="7"></rect>
|
||||||
|
</svg>
|
||||||
|
Grid
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn theme-toggle" onclick="toggleTheme()">🌙</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="listing" id="listing">
|
||||||
|
<div class="file-list" id="fileList">
|
||||||
|
<!-- Files will be generated here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Mock data - replace with actual file data
|
||||||
|
const mockFiles = [
|
||||||
|
{ name: 'documents', type: 'directory', size: null, modified: '2024-11-20' },
|
||||||
|
{ name: 'downloads', type: 'directory', size: null, modified: '2024-11-19' },
|
||||||
|
{ name: 'projects', type: 'directory', size: null, modified: '2024-11-15' },
|
||||||
|
{ name: 'report.pdf', type: 'file', size: 2457600, modified: '2024-11-18' },
|
||||||
|
{ name: 'presentation.pptx', type: 'file', size: 6082560, modified: '2024-11-17' },
|
||||||
|
{ name: 'data.json', type: 'file', size: 350208, modified: '2024-11-16' },
|
||||||
|
{ name: 'notes.txt', type: 'file', size: 12288, modified: '2024-11-14' },
|
||||||
|
{ name: 'archive.zip', type: 'file', size: 131072000, modified: '2024-11-10' },
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentPath = '/home/user/documents';
|
||||||
|
let currentLayout = 'list';
|
||||||
|
|
||||||
|
// Theme management
|
||||||
|
function initTheme() {
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||||
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||||
|
updateThemeButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const current = document.documentElement.getAttribute('data-theme');
|
||||||
|
const newTheme = current === 'dark' ? 'light' : 'dark';
|
||||||
|
document.documentElement.setAttribute('data-theme', newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
updateThemeButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateThemeButton() {
|
||||||
|
const theme = document.documentElement.getAttribute('data-theme');
|
||||||
|
const btn = document.querySelector('.theme-toggle');
|
||||||
|
btn.textContent = theme === 'dark' ? '☀️' : '🌙';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIcon(type, name) {
|
||||||
|
if (type === 'directory') return '📁';
|
||||||
|
const ext = name.split('.').pop().toLowerCase();
|
||||||
|
const icons = {
|
||||||
|
pdf: '📄', pptx: '📊', xlsx: '📊', csv: '📊',
|
||||||
|
txt: '📝', md: '📝', json: '🔧', xml: '🔧',
|
||||||
|
jpg: '🖼️', png: '🖼️', gif: '🖼️', svg: '🖼️',
|
||||||
|
zip: '🗜️', rar: '🗜️', "7z": '🗜️',
|
||||||
|
mp3: '🎵', mp4: '🎬', avi: '🎬',
|
||||||
|
py: '🐍', js: '📜', html: '🌐', css: '🎨'
|
||||||
|
};
|
||||||
|
return icons[ext] || '📄';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSize(bytes) {
|
||||||
|
if (!bytes) return '-';
|
||||||
|
const units = ['B', 'KB', 'MB', 'GB'];
|
||||||
|
let size = bytes;
|
||||||
|
let unitIndex = 0;
|
||||||
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||||
|
size /= 1024;
|
||||||
|
unitIndex++;
|
||||||
|
}
|
||||||
|
return (size < 10 ? size.toFixed(2) : size.toFixed(0)) + ' ' + units[unitIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(dateStr) {
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderBreadcrumbs() {
|
||||||
|
const parts = currentPath.split('/').filter(p => p);
|
||||||
|
const pathContainer = document.getElementById('pathContainer');
|
||||||
|
let html = '<a href="#" onclick="navigateTo(\'/\'); return false;" class="breadcrumb-link">/</a>';
|
||||||
|
|
||||||
|
let accumulatedPath = '';
|
||||||
|
for (let i = 0; i < parts.length; i++) {
|
||||||
|
accumulatedPath += '/' + parts[i];
|
||||||
|
const isLast = i === parts.length - 1;
|
||||||
|
if (isLast) {
|
||||||
|
html += '<span class="breadcrumb-text">' + parts[i] + '</span>';
|
||||||
|
} else {
|
||||||
|
html += '<a href="#" onclick="navigateTo(\'' + accumulatedPath + '\'); return false;" class="breadcrumb-link">' + parts[i] + '</a>';
|
||||||
|
}
|
||||||
|
if (i < parts.length - 1) {
|
||||||
|
html += '<span class="breadcrumb-sep">/</span>';
|
||||||
|
} else {
|
||||||
|
html += '<span class="breadcrumb-sep">/</span>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pathContainer.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFileList() {
|
||||||
|
const fileList = document.getElementById('fileList');
|
||||||
|
|
||||||
|
if (mockFiles.length === 0) {
|
||||||
|
fileList.innerHTML = `
|
||||||
|
<div class="empty-state">
|
||||||
|
<div class="empty-state-icon">📭</div>
|
||||||
|
<p>This folder is empty</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
updateSummary(0, 0, 0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort: directories first, then alphabetically
|
||||||
|
const sorted = [...mockFiles].sort((a, b) => {
|
||||||
|
if (a.type === b.type) return a.name.localeCompare(b.name);
|
||||||
|
return a.type === 'directory' ? -1 : 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
let dirCount = 0;
|
||||||
|
let fileCount = 0;
|
||||||
|
let totalSize = 0;
|
||||||
|
|
||||||
|
if (currentLayout === 'grid') {
|
||||||
|
const gridItems = sorted.map(file => {
|
||||||
|
if (file.type === 'directory') dirCount++;
|
||||||
|
else {
|
||||||
|
fileCount++;
|
||||||
|
totalSize += file.size || 0;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="grid-item" onclick="handleFileClick('${file.name}', '${file.type}')">
|
||||||
|
<div class="grid-icon">${getIcon(file.type, file.name)}</div>
|
||||||
|
<div class="grid-name">${file.name}</div>
|
||||||
|
${file.size ? `<div class="grid-size">${formatSize(file.size)}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
fileList.innerHTML = `<div class="grid">${gridItems}</div>`;
|
||||||
|
} else {
|
||||||
|
const tableRows = sorted.map(file => {
|
||||||
|
if (file.type === 'directory') dirCount++;
|
||||||
|
else {
|
||||||
|
fileCount++;
|
||||||
|
totalSize += file.size || 0;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<tr class="file-row ${file.type}" onclick="handleFileClick('${file.name}', '${file.type}')">
|
||||||
|
<td class="icon">${getIcon(file.type, file.name)}</td>
|
||||||
|
<td class="name">${file.name}</td>
|
||||||
|
<td class="size">${file.size ? formatSize(file.size) : '-'}</td>
|
||||||
|
<td class="date">${formatDate(file.modified)}</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
fileList.innerHTML = `
|
||||||
|
<table class="file-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Modified</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${tableRows}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSummary(dirCount, fileCount, totalSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSummary(dirs, files, bytes) {
|
||||||
|
document.getElementById('dirCount').textContent = dirs;
|
||||||
|
document.getElementById('fileCount').textContent = files;
|
||||||
|
document.getElementById('totalSize').textContent = formatSize(bytes);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileClick(name, type) {
|
||||||
|
if (type === 'directory') {
|
||||||
|
navigateTo(currentPath + (currentPath.endsWith('/') ? '' : '/') + name);
|
||||||
|
} else {
|
||||||
|
console.log('Opening file:', name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function navigateTo(path) {
|
||||||
|
currentPath = path;
|
||||||
|
renderBreadcrumbs();
|
||||||
|
renderFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function navigateUp() {
|
||||||
|
const parts = currentPath.split('/').filter(p => p);
|
||||||
|
if (parts.length > 0) {
|
||||||
|
parts.pop();
|
||||||
|
currentPath = '/' + parts.join('/');
|
||||||
|
if (currentPath === '/') currentPath = '/';
|
||||||
|
navigateTo(currentPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshList() {
|
||||||
|
renderFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLayout(layout) {
|
||||||
|
currentLayout = layout;
|
||||||
|
document.getElementById('layoutList').classList.toggle('active', layout === 'list');
|
||||||
|
document.getElementById('layoutGrid').classList.toggle('active', layout === 'grid');
|
||||||
|
document.getElementById('listing').classList.toggle('list-view', layout === 'list');
|
||||||
|
document.getElementById('listing').classList.toggle('grid-view', layout === 'grid');
|
||||||
|
renderFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
initTheme();
|
||||||
|
renderBreadcrumbs();
|
||||||
|
renderFileList();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
260
app/src/assets/dev/ref.html
Normal file
260
app/src/assets/dev/ref.html
Normal file
@@ -0,0 +1,260 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>File Browser</title>
|
||||||
|
|
||||||
|
<link rel="icon" type="image/x-icon" href="">
|
||||||
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="breadcrumbs">Folder Path</div>
|
||||||
|
<div class="path-container" id="pathContainer">
|
||||||
|
<!-- Breadcrumbs will be generated here -->
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="meta">
|
||||||
|
<div id="summary">
|
||||||
|
<span class="meta-item"><b id="dirCount">0</b> directories</span>
|
||||||
|
<span class="meta-item"><b id="fileCount">0</b> files</span>
|
||||||
|
<span class="meta-item"><b id="totalSize">0 B</b> total</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn theme-toggle" onclick="toggleTheme()">🌙</button> <!-- needs svgs -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="listing" id="listing">
|
||||||
|
<div class="file-list" id="fileList">
|
||||||
|
<!-- Files will be generated here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <script>
|
||||||
|
// Mock data - replace with actual file data
|
||||||
|
const mockFiles = [
|
||||||
|
{ name: 'documents', type: 'directory', size: null, modified: '2024-11-20' },
|
||||||
|
{ name: 'downloads', type: 'directory', size: null, modified: '2024-11-19' },
|
||||||
|
{ name: 'projects', type: 'directory', size: null, modified: '2024-11-15' },
|
||||||
|
{ name: 'report.pdf', type: 'file', size: 2457600, modified: '2024-11-18' },
|
||||||
|
{ name: 'presentation.pptx', type: 'file', size: 6082560, modified: '2024-11-17' },
|
||||||
|
{ name: 'data.json', type: 'file', size: 350208, modified: '2024-11-16' },
|
||||||
|
{ name: 'notes.txt', type: 'file', size: 12288, modified: '2024-11-14' },
|
||||||
|
{ name: 'archive.zip', type: 'file', size: 131072000, modified: '2024-11-10' },
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentPath = '/home/user/documents';
|
||||||
|
let currentLayout = 'list';
|
||||||
|
|
||||||
|
function initTheme()
|
||||||
|
{
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||||
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||||
|
updateThemeButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTheme() {
|
||||||
|
const current = document.documentElement.getAttribute('data-theme');
|
||||||
|
const newTheme = current === 'dark' ? 'light' : 'dark';
|
||||||
|
document.documentElement.setAttribute('data-theme', newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
updateThemeButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateThemeButton() {
|
||||||
|
const theme = document.documentElement.getAttribute('data-theme');
|
||||||
|
const btn = document.querySelector('.theme-toggle');
|
||||||
|
btn.textContent = theme === 'dark' ? '☀️' : '🌙';
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIcon(type, name) {
|
||||||
|
if (type === 'directory') return '📁';
|
||||||
|
const ext = name.split('.').pop().toLowerCase();
|
||||||
|
const icons = {
|
||||||
|
pdf: '📄', pptx: '📊', xlsx: '📊', csv: '📊',
|
||||||
|
txt: '📝', md: '📝', json: '🔧', xml: '🔧',
|
||||||
|
jpg: '🖼️', png: '🖼️', gif: '🖼️', svg: '🖼️',
|
||||||
|
zip: '🗜️', rar: '🗜️', "7z": '🗜️',
|
||||||
|
mp3: '🎵', mp4: '🎬', avi: '🎬',
|
||||||
|
py: '🐍', js: '📜', html: '🌐', css: '🎨'
|
||||||
|
};
|
||||||
|
return icons[ext] || '📄';
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatSize(bytes) {
|
||||||
|
if (!bytes) return '-';
|
||||||
|
const units = ['B', 'KB', 'MB', 'GB'];
|
||||||
|
let size = bytes;
|
||||||
|
let unitIndex = 0;
|
||||||
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||||
|
size /= 1024;
|
||||||
|
unitIndex++;
|
||||||
|
}
|
||||||
|
return (size < 10 ? size.toFixed(2) : size.toFixed(0)) + ' ' + units[unitIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(dateStr) {
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderBreadcrumbs() {
|
||||||
|
const parts = currentPath.split('/').filter(p => p);
|
||||||
|
const pathContainer = document.getElementById('pathContainer');
|
||||||
|
let html = '<a href="#" onclick="navigateTo(\'/\'); return false;" class="breadcrumb-link">/</a>';
|
||||||
|
|
||||||
|
let accumulatedPath = '';
|
||||||
|
for (let i = 0; i < parts.length; i++) {
|
||||||
|
accumulatedPath += '/' + parts[i];
|
||||||
|
const isLast = i === parts.length - 1;
|
||||||
|
if (isLast) {
|
||||||
|
html += '<span class="breadcrumb-text">' + parts[i] + '</span>';
|
||||||
|
} else {
|
||||||
|
html += '<a href="#" onclick="navigateTo(\'' + accumulatedPath + '\'); return false;" class="breadcrumb-link">' + parts[i] + '</a>';
|
||||||
|
}
|
||||||
|
if (i < parts.length - 1) {
|
||||||
|
html += '<span class="breadcrumb-sep">/</span>';
|
||||||
|
} else {
|
||||||
|
html += '<span class="breadcrumb-sep">/</span>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pathContainer.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderFileList() {
|
||||||
|
const fileList = document.getElementById('fileList');
|
||||||
|
|
||||||
|
if (mockFiles.length === 0) {
|
||||||
|
fileList.innerHTML = `
|
||||||
|
<div class="empty-state">
|
||||||
|
<div class="empty-state-icon">📭</div>
|
||||||
|
<p>This folder is empty</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
updateSummary(0, 0, 0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort: directories first, then alphabetically
|
||||||
|
const sorted = [...mockFiles].sort((a, b) => {
|
||||||
|
if (a.type === b.type) return a.name.localeCompare(b.name);
|
||||||
|
return a.type === 'directory' ? -1 : 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
let dirCount = 0;
|
||||||
|
let fileCount = 0;
|
||||||
|
let totalSize = 0;
|
||||||
|
|
||||||
|
if (currentLayout === 'grid') {
|
||||||
|
const gridItems = sorted.map(file => {
|
||||||
|
if (file.type === 'directory') dirCount++;
|
||||||
|
else {
|
||||||
|
fileCount++;
|
||||||
|
totalSize += file.size || 0;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="grid-item" onclick="handleFileClick('${file.name}', '${file.type}')">
|
||||||
|
<div class="grid-icon">${getIcon(file.type, file.name)}</div>
|
||||||
|
<div class="grid-name">${file.name}</div>
|
||||||
|
${file.size ? `<div class="grid-size">${formatSize(file.size)}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
fileList.innerHTML = `<div class="grid">${gridItems}</div>`;
|
||||||
|
} else {
|
||||||
|
const tableRows = sorted.map(file => {
|
||||||
|
if (file.type === 'directory') dirCount++;
|
||||||
|
else {
|
||||||
|
fileCount++;
|
||||||
|
totalSize += file.size || 0;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<tr class="file-row ${file.type}" onclick="handleFileClick('${file.name}', '${file.type}')">
|
||||||
|
<td class="icon">${getIcon(file.type, file.name)}</td>
|
||||||
|
<td class="name">${file.name}</td>
|
||||||
|
<td class="size">${file.size ? formatSize(file.size) : '-'}</td>
|
||||||
|
<td class="date">${formatDate(file.modified)}</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
fileList.innerHTML = `
|
||||||
|
<table class="file-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Size</th>
|
||||||
|
<th>Modified</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${tableRows}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSummary(dirCount, fileCount, totalSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSummary(dirs, files, bytes) {
|
||||||
|
document.getElementById('dirCount').textContent = dirs;
|
||||||
|
document.getElementById('fileCount').textContent = files;
|
||||||
|
document.getElementById('totalSize').textContent = formatSize(bytes);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFileClick(name, type) {
|
||||||
|
if (type === 'directory') {
|
||||||
|
navigateTo(currentPath + (currentPath.endsWith('/') ? '' : '/') + name);
|
||||||
|
} else {
|
||||||
|
console.log('Opening file:', name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function navigateTo(path) {
|
||||||
|
currentPath = path;
|
||||||
|
renderBreadcrumbs();
|
||||||
|
renderFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function navigateUp() {
|
||||||
|
const parts = currentPath.split('/').filter(p => p);
|
||||||
|
if (parts.length > 0) {
|
||||||
|
parts.pop();
|
||||||
|
currentPath = '/' + parts.join('/');
|
||||||
|
if (currentPath === '/') currentPath = '/';
|
||||||
|
navigateTo(currentPath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshList() {
|
||||||
|
renderFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLayout(layout) {
|
||||||
|
currentLayout = layout;
|
||||||
|
document.getElementById('layoutList').classList.toggle('active', layout === 'list');
|
||||||
|
document.getElementById('layoutGrid').classList.toggle('active', layout === 'grid');
|
||||||
|
document.getElementById('listing').classList.toggle('list-view', layout === 'list');
|
||||||
|
document.getElementById('listing').classList.toggle('grid-view', layout === 'grid');
|
||||||
|
renderFileList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
initTheme();
|
||||||
|
renderBreadcrumbs();
|
||||||
|
renderFileList();
|
||||||
|
</script> -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
101
app/src/assets/style/error.css
Normal file
101
app/src/assets/style/error.css
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
|
||||||
|
* { margin:0; padding:0; box-sizing:border-box; }
|
||||||
|
|
||||||
|
:root[data-theme="light"] {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f5f7fb;
|
||||||
|
--bg-tertiary: #eff2f5;
|
||||||
|
--text-primary: #1a202c;
|
||||||
|
--text-secondary: #6c757d;
|
||||||
|
--border-color: #d4d7de;
|
||||||
|
--accent: #0051ba;
|
||||||
|
--accent-hover: #003e8f;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="dark"] {
|
||||||
|
--bg-primary: #0d1117;
|
||||||
|
--bg-secondary: #161b22;
|
||||||
|
--bg-tertiary: #21262d;
|
||||||
|
--text-primary: #e6edf3;
|
||||||
|
--text-secondary: #8b949e;
|
||||||
|
--border-color: #30363d;
|
||||||
|
--accent: #58a6ff;
|
||||||
|
--accent-hover: #79c0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg-primary:#0d1117;
|
||||||
|
--bg-secondary:#161b22;
|
||||||
|
--bg-tertiary:#21262d;
|
||||||
|
--text-primary:#e6edf3;
|
||||||
|
--text-secondary:#8b949e;
|
||||||
|
--border-color:#30363d;
|
||||||
|
--accent:#58a6ff;
|
||||||
|
--accent-hover:#79c0ff;
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f5f7fb;
|
||||||
|
--bg-tertiary: #eff2f5;
|
||||||
|
--text-primary: #1a202c;
|
||||||
|
--text-secondary: #6c757d;
|
||||||
|
--border-color: #d4d7de;
|
||||||
|
--accent: #0051ba;
|
||||||
|
--accent-hover: #003e8f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 6rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root:not([data-theme]) {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f5f7fb;
|
||||||
|
--bg-tertiary: #eff2f5;
|
||||||
|
--text-primary: #1a202c;
|
||||||
|
--text-secondary: #6c757d;
|
||||||
|
--border-color: #d4d7de;
|
||||||
|
--accent: #0051ba;
|
||||||
|
--accent-hover: #003e8f;
|
||||||
|
}
|
||||||
|
}
|
||||||
476
app/src/assets/style/style.css
Normal file
476
app/src/assets/style/style.css
Normal file
@@ -0,0 +1,476 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light Mode (Cloudflare Dashboard Style) */
|
||||||
|
:root[data-theme="light"] {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f5f7fb;
|
||||||
|
--bg-tertiary: #eff2f5;
|
||||||
|
--text-primary: #1a202c;
|
||||||
|
--text-secondary: #6c757d;
|
||||||
|
--border-color: #d4d7de;
|
||||||
|
--accent: #0051ba;
|
||||||
|
--accent-hover: #003e8f;
|
||||||
|
--file-hover: #f0f2f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode (GitHub Style) */
|
||||||
|
:root[data-theme="dark"] {
|
||||||
|
--bg-primary: #0d1117;
|
||||||
|
--bg-secondary: #161b22;
|
||||||
|
--bg-tertiary: #21262d;
|
||||||
|
--text-primary: #e6edf3;
|
||||||
|
--text-secondary: #8b949e;
|
||||||
|
--border-color: #30363d;
|
||||||
|
--accent: #58a6ff;
|
||||||
|
--accent-hover: #79c0ff;
|
||||||
|
--file-hover: #1c2128;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Default to dark mode */
|
||||||
|
:root {
|
||||||
|
--bg-primary: #0d1117;
|
||||||
|
--bg-secondary: #161b22;
|
||||||
|
--bg-tertiary: #21262d;
|
||||||
|
--text-primary: #e6edf3;
|
||||||
|
--text-secondary: #8b949e;
|
||||||
|
--border-color: #30363d;
|
||||||
|
--accent: #58a6ff;
|
||||||
|
--accent-hover: #79c0ff;
|
||||||
|
--file-hover: #1c2128;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding: 1.5rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumbs {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link:hover {
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
color: var(--accent-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-text {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-sep {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#summary {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-item b {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-toggle {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
background-color: var(--bg-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-btn:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-btn.active {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing {
|
||||||
|
flex: 1;
|
||||||
|
padding: 1.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table Layout */
|
||||||
|
.file-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table thead {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table th {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table tbody tr {
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table tbody tr:hover {
|
||||||
|
background-color: var(--file-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table td {
|
||||||
|
padding: 0.75rem;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table td.icon {
|
||||||
|
width: 2.5rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table td.name {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table tr.directory td.name {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table td.size,
|
||||||
|
.file-table td.date {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid Layout */
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item:hover {
|
||||||
|
background-color: var(--file-hover);
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-icon {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item:has(.grid-name) .grid-name {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-size {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state-icon {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.header {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table td.date {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table th:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path-container {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0.75rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path-container {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-link,
|
||||||
|
.breadcrumb-text,
|
||||||
|
.breadcrumb-sep {
|
||||||
|
padding: 0.125rem 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
width: 100%;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.5rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
gap: 1rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table th,
|
||||||
|
.file-table td {
|
||||||
|
padding: 0.5rem 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-table td.size {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-name {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar Styling */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--text-secondary);
|
||||||
|
}
|
||||||
BIN
app/src/assets/style/style.css.zst
Normal file
BIN
app/src/assets/style/style.css.zst
Normal file
Binary file not shown.
126
app/src/main.v
Normal file
126
app/src/main.v
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
module main
|
||||||
|
|
||||||
|
import veb
|
||||||
|
import os
|
||||||
|
import log
|
||||||
|
|
||||||
|
struct Config {
|
||||||
|
pub mut:
|
||||||
|
root string
|
||||||
|
port int
|
||||||
|
}
|
||||||
|
|
||||||
|
struct Embedded {
|
||||||
|
pub mut:
|
||||||
|
style_css string
|
||||||
|
error_css string
|
||||||
|
}
|
||||||
|
|
||||||
|
pub struct User {
|
||||||
|
pub mut:
|
||||||
|
name string
|
||||||
|
id int
|
||||||
|
}
|
||||||
|
|
||||||
|
pub struct Context {
|
||||||
|
veb.Context
|
||||||
|
pub mut:
|
||||||
|
embed Embedded
|
||||||
|
user User
|
||||||
|
session_id string
|
||||||
|
}
|
||||||
|
|
||||||
|
pub struct App {
|
||||||
|
veb.Controller
|
||||||
|
veb.StaticHandler
|
||||||
|
veb.Middleware[Context]
|
||||||
|
pub mut:
|
||||||
|
embed Embedded
|
||||||
|
}
|
||||||
|
|
||||||
|
pub struct Auth {}
|
||||||
|
|
||||||
|
// endpoints
|
||||||
|
|
||||||
|
@['/:path...']
|
||||||
|
pub fn (app &App) root(mut ctx Context, path string) veb.Result {
|
||||||
|
style := app.embed.style_css
|
||||||
|
return ctx.html($tmpl('template/dashboard.html'))
|
||||||
|
}
|
||||||
|
|
||||||
|
@['/error']
|
||||||
|
pub fn (app &App) error(mut ctx Context) veb.Result {
|
||||||
|
return ctx.html(ctx.error_page(500, 'Internal Server Error', 'Oops! Seems like something went wrong here.'))
|
||||||
|
}
|
||||||
|
|
||||||
|
// auth endpoints
|
||||||
|
|
||||||
|
@[get; post]
|
||||||
|
pub fn (auth &Auth) login(mut ctx Context) veb.Result {
|
||||||
|
return ctx.text('')
|
||||||
|
}
|
||||||
|
|
||||||
|
@[get; post]
|
||||||
|
pub fn (auth &Auth) logout(mut ctx Context) veb.Result {
|
||||||
|
return ctx.text('')
|
||||||
|
}
|
||||||
|
|
||||||
|
@[get; post; put]
|
||||||
|
pub fn (auth &Auth) register(mut ctx Context) veb.Result {
|
||||||
|
return ctx.text('')
|
||||||
|
}
|
||||||
|
|
||||||
|
// utility
|
||||||
|
|
||||||
|
fn (mut ctx Context) error_page(code int, short string, long string) string {
|
||||||
|
style := ctx.embed.error_css
|
||||||
|
return $tmpl('template/error.html')
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn (mut ctx Context) not_found() veb.Result {
|
||||||
|
ctx.res.set_status(.not_found)
|
||||||
|
return ctx.html(ctx.error_page(404, 'Not found', 'Oops! The page you are looking for does not exist.'))
|
||||||
|
}
|
||||||
|
|
||||||
|
// --
|
||||||
|
|
||||||
|
fn populate() &Config {
|
||||||
|
mut cfg := &Config{
|
||||||
|
root: $d('root', '.')
|
||||||
|
port: $d('port', 6767)
|
||||||
|
}
|
||||||
|
|
||||||
|
if os.getenv('CDN_ROOT') != '' {
|
||||||
|
cfg.root = os.getenv('CDN_ROOT').str()
|
||||||
|
}
|
||||||
|
if os.getenv('CDN_PORT') != '' {
|
||||||
|
cfg.port = os.getenv('CDN_PORT').int()
|
||||||
|
}
|
||||||
|
|
||||||
|
return cfg
|
||||||
|
}
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
cfg := populate()
|
||||||
|
|
||||||
|
mut app := &App{}
|
||||||
|
mut auth := &Auth{}
|
||||||
|
app.embed = &Embedded{
|
||||||
|
style_css: $embed_file('assets/style/style.css', .zlib).to_string()
|
||||||
|
error_css: $embed_file('assets/style/error.css', .zlib).to_string()
|
||||||
|
}
|
||||||
|
|
||||||
|
app.register_controller[Auth, Context]('/auth', mut auth)!
|
||||||
|
|
||||||
|
app.enable_static_compression = true
|
||||||
|
app.use(veb.encode_auto[Context]())
|
||||||
|
|
||||||
|
app.use(veb.MiddlewareOptions[Context]{
|
||||||
|
handler: fn [app] (mut ctx Context) bool {
|
||||||
|
ctx.embed = &app.embed
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
veb.run[App, Context](mut app, cfg.port)
|
||||||
|
}
|
||||||
36
app/src/template/dashboard.html
Normal file
36
app/src/template/dashboard.html
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>File Browser</title>
|
||||||
|
<link rel="icon" type="image/x-icon" href="">
|
||||||
|
<style>@{style}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="breadcrumbs">Folder Path</div>
|
||||||
|
<div class="path-container" id="pathContainer">
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="meta">
|
||||||
|
<div id="summary">
|
||||||
|
<span class="meta-item"><b id="dirCount">0</b> directories</span>
|
||||||
|
<span class="meta-item"><b id="fileCount">0</b> files</span>
|
||||||
|
<span class="meta-item"><b id="totalSize">0 B</b> total</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn theme-toggle" onclick="toggleTheme()">🌙</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<div class="listing" id="listing">
|
||||||
|
<div class="file-list" id="fileList">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
18
app/src/template/error.html
Normal file
18
app/src/template/error.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>@code - @short</title>
|
||||||
|
<style>@{style}</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>@code</h1>
|
||||||
|
<p>@long</p>
|
||||||
|
<a href="/" class="btn">Go Home</a>
|
||||||
|
<script>
|
||||||
|
if ((savedTheme = (localStorage.getItem('theme') || 'light')))
|
||||||
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
docker-compose.yml
Normal file
32
docker-compose.yml
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
services:
|
||||||
|
app:
|
||||||
|
build:
|
||||||
|
context: ./app
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: cdn_web
|
||||||
|
depends_on:
|
||||||
|
- db
|
||||||
|
ports:
|
||||||
|
- "8080:8080"
|
||||||
|
environment:
|
||||||
|
# env shee
|
||||||
|
DB_HOST: db
|
||||||
|
DB_USER: appuser
|
||||||
|
DB_PASS: s3cret
|
||||||
|
DB_NAME: appdb
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
|
db:
|
||||||
|
image: postgres:16
|
||||||
|
container_name: cdn_db
|
||||||
|
environment:
|
||||||
|
POSTGRES_USER: appuser
|
||||||
|
POSTGRES_PASSWORD: s3cret
|
||||||
|
POSTGRES_DB: appdb
|
||||||
|
volumes:
|
||||||
|
- dbdata:/var/lib/postgresql/data
|
||||||
|
- ./db/init.sql:/docker-entrypoint-initdb.d/init.sql
|
||||||
|
restart: unless-stopped
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
dbdata:
|
||||||
Reference in New Issue
Block a user