index.html
files/inter.css
files/schema.json
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bureau - Recherche TAJ</title>
<script src="libs/fullscreen.js"></script>
<link rel="stylesheet" href="files/inter.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body {
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: 'Inter', sans-serif;
}
.desktop {
width: 100%;
height: calc(100% - 44px);
position: relative;
}
.desktop-icons {
position: absolute;
top: 15px;
left: 15px;
bottom: 15px;
width: 66%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
gap: 8px;
}
.desktop-icon {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
padding: 10px 5px;
border-radius: 5px;
cursor: pointer;
}
.desktop-icon:hover { background: rgba(255,255,255,0.15); }
.desktop-icon:active { background: rgba(255,255,255,0.25); }
.desktop-icon img {
width: 64px;
height: 64px;
margin-bottom: 6px;
}
.desktop-icon span {
color: white;
font-size: 12px;
text-align: center;
text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
line-height: 1.2;
max-width: 95px;
word-wrap: break-word;
}
.taskbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 44px;
background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
display: flex;
align-items: center;
padding: 0 10px;
border-top: 1px solid #444;
z-index: 9999;
}
.start-button {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: linear-gradient(180deg, #3498db 0%, #2980b9 100%);
border: none;
border-radius: 4px;
color: white;
font-weight: bold;
font-size: 13px;
cursor: pointer;
}
.taskbar-apps {
display: flex;
margin-left: 12px;
gap: 4px;
flex: 1;
}
.taskbar-app {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(255,255,255,0.1);
border: none;
border-radius: 4px;
color: white;
font-size: 12px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.taskbar-app.active { border-bottom-color: #3498db; background: rgba(255,255,255,0.18); }
.taskbar-app:hover { background: rgba(255,255,255,0.2); }
.taskbar-app img { width: 20px; height: 20px; }
.taskbar-clock {
color: white;
font-size: 12px;
padding-right: 15px;
}
.window {
position: absolute;
background: #1a1a2e;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
overflow: hidden;
min-width: 300px;
min-height: 200px;
display: flex;
flex-direction: column;
}
.window.hidden { display: none; }
.window-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: linear-gradient(180deg, #34495e 0%, #2c3e50 100%);
cursor: move;
}
.window-title {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-size: 13px;
}
.window-title img { width: 18px; height: 18px; }
.window-controls { display: flex; gap: 8px; }
.window-btn {
width: 14px;
height: 14px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.window-btn.minimize { background: #f39c12; }
.window-btn.maximize { background: #27ae60; }
.window-btn.close { background: #e74c3c; }
.window-content {
flex: 1;
overflow: hidden;
position: relative;
background: #1a2634;
}
.resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 18px;
height: 18px;
cursor: nwse-resize;
}
.resize-handle::after {
content: '';
position: absolute;
bottom: 4px;
right: 4px;
width: 10px;
height: 10px;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
}
.image-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #2a2a3a;
}
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Explorateur amélioré */
.explorer-container {
width: 100%;
height: 100%;
background: #f0f0f0;
display: flex;
flex-direction: column;
}
.explorer-toolbar {
display: flex;
align-items: center;
padding: 6px 8px;
background: #fff;
gap: 6px;
border-bottom: 1px solid #ddd;
}
.explorer-nav-btn {
width: 28px;
height: 28px;
border: 1px solid #ccc;
background: #f8f8f8;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 14px;
}
.explorer-nav-btn:hover { background: #e8e8e8; }
.explorer-nav-btn:disabled { opacity: 0.4; cursor: default; }
.explorer-path {
flex: 1;
padding: 6px 10px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
font-size: 12px;
font-family: 'Inter', sans-serif;
}
.explorer-search {
width: 180px;
padding: 6px 10px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 11px;
color: #666;
}
.explorer-sidebar {
width: 180px;
background: #fff;
border-right: 1px solid #ddd;
padding: 10px 0;
flex-shrink: 0;
}
.explorer-sidebar-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 12px;
color: #333;
cursor: pointer;
}
.explorer-sidebar-item:hover { background: #e5f3ff; }
.explorer-sidebar-item.active { background: #cce8ff; }
.explorer-sidebar-item img { width: 16px; height: 16px; }
.explorer-main {
display: flex;
flex: 1;
overflow: hidden;
}
.explorer-files {
flex: 1;
padding: 15px;
display: grid;
grid-template-columns: repeat(auto-fill, 140px);
grid-auto-rows: 160px;
gap: 15px;
align-content: start;
overflow-y: auto;
background: #fff;
}
.explorer-file {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px;
border-radius: 5px;
cursor: grab;
border: 2px solid transparent;
}
.explorer-file:hover { background: #e5f3ff; border-color: #cce8ff; }
.explorer-file.selected { background: #cce8ff; border-color: #99d1ff; }
.explorer-file.dragging { opacity: 0.5; cursor: grabbing; }
.explorer-file img {
width: 100px;
height: 100px;
margin-bottom: 8px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.explorer-file span {
color: #333;
font-size: 11px;
text-align: center;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.explorer-statusbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 12px;
background: #f5f5f5;
border-top: 1px solid #ddd;
font-size: 11px;
color: #666;
}
.taj-container { width: 100%; height: 100%; position: relative; }
.taj-screen {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
display: none;
}
.taj-screen.active { display: block; }
#tajSearchScreen { background-image: url('files/taj1.jpg'); }
#tajResultScreen { background-image: url('files/taj3.jpg'); }
.taj-drop-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: all 0.3s ease;
}
.taj-drop-overlay.drag-over {
background: rgba(52, 152, 219, 0.3);
pointer-events: auto;
}
.taj-drop-overlay.drag-over::after {
content: 'Deposer la photo ici';
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
padding: 30px 50px;
border: 4px dashed white;
border-radius: 20px;
background: rgba(52, 152, 219, 0.5);
}
.taj-drop-overlay.has-photo::after {
display: none;
}
.form-mask {
position: absolute;
left: 0; top: 30%;
width: 100%; height: 25%;
background: rgb(23, 34, 52);
}
.form-overlay {
position: absolute;
left: 50%; top: 44%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
z-index: 10;
}
.btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
border-radius: 5px;
font-size: 13px;
cursor: pointer;
background: #1a6091;
color: white;
}
.btn:hover { background: #2980b9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.search-input {
width: 220px;
padding: 8px 35px 8px 12px;
border: none;
border-radius: 5px;
background: white;
color: #333;
font-size: 13px;
}
.search-wrapper { position: relative; }
.search-icon {
position: absolute;
right: 10px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
stroke: #888;
}
.dropped-photo-preview {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 6px;
border: 3px solid #27ae60;
display: none;
}
.dropped-photo-preview.visible { display: block; }
#tajLoaderScreen {
background: rgb(23, 34, 52);
display: none;
justify-content: center;
align-items: center;
}
#tajLoaderScreen.active { display: flex; }
.loader-container { text-align: center; }
.loader {
width: 60px; height: 60px;
border: 4px solid #1a2634;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.loader-text { color: white; font-size: 16px; letter-spacing: 2px; }
.loader-subtext { color: #7f8c8d; font-size: 12px; margin-top: 8px; }
</style>
</head>
<body>
<div class="desktop" id="desktop"></div>
<div class="taskbar">
<button class="start-button"><span style="font-size:16px;">☰</span> Menu</button>
<div class="taskbar-apps" id="taskbarApps"></div>
<div class="taskbar-clock" id="clock">12:00</div>
</div>
<script src="data.js"></script>
<script>
var cc_data = window.cc_data || {};
const config = {
loadingTime: cc_data.loadingTime || 3000,
wallpaper: cc_data.wallpaper || { type: 'gradient', value: 'linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%)' },
icons: cc_data.icons || [],
windows: cc_data.windows || []
};
const iconImages = {
folder: 'files/icon-folder-yellow.png',
pdf: 'files/icon-pdf.png',
txt: 'files/icon-txt.png',
app: 'files/icon-database.png',
trash: 'files/icon-trash.png'
};
const desktop = document.getElementById('desktop');
const taskbarButtons = {};
let zIndex = 100;
// Set wallpaper
if (config.wallpaper.type === 'image') {
desktop.style.backgroundImage = `url('${config.wallpaper.value}')`;
desktop.style.backgroundSize = 'cover';
} else {
desktop.style.background = config.wallpaper.value;
}
// Create icons
const iconsContainer = document.createElement('div');
iconsContainer.className = 'desktop-icons';
config.icons.forEach(icon => {
const iconEl = document.createElement('div');
iconEl.className = 'desktop-icon';
if (icon.action) {
iconEl.onclick = () => showWindow(icon.action);
}
let imgSrc = iconImages[icon.type] || iconImages.folder;
if (icon.name === 'Carte Secteur') imgSrc = 'files/icon-map.png';
if (icon.name === 'Ce PC') imgSrc = 'files/icon-computer.png';
if (icon.name === 'TAJ') imgSrc = 'files/icon-database.png';
iconEl.innerHTML = `<img src="${imgSrc}" alt=""><span>${icon.name}</span>`;
iconsContainer.appendChild(iconEl);
});
desktop.appendChild(iconsContainer);
// Photos pour l'explorateur (personnes)
const personPhotos = [
{ name: 'IMG_20241015_001.jpg', src: 'files/person1.jpg' },
{ name: 'IMG_20241015_002.jpg', src: 'files/person2.jpg' },
{ name: 'IMG_20241018_003.jpg', src: 'files/person3.jpg' },
{ name: 'IMG_20241022_004.jpg', src: 'files/person4.jpg' },
{ name: 'IMG_20241025_005.jpg', src: 'files/person5.jpg' },
{ name: 'IMG_20241028_006.jpg', src: 'files/person6.jpg' }
];
// Create windows
config.windows.forEach((win, index) => {
const winEl = document.createElement('div');
winEl.className = 'window' + (win.openByDefault ? '' : ' hidden');
winEl.id = win.id;
winEl.style.cssText = `left:${win.x};top:${win.y};width:${win.width};height:${win.height};z-index:${100 + index};`;
let iconSrc = 'files/icon-folder-yellow.png';
if (win.type === 'image') iconSrc = 'files/icon-map.png';
if (win.type === 'explorer') iconSrc = 'files/icon-folder-yellow.png';
if (win.type === 'specific') iconSrc = 'files/icon-database.png';
let content = '';
if (win.type === 'image') {
content = `<div class="image-container"><img src="${win.image}" alt=""></div>`;
} else if (win.type === 'explorer') {
let filesHtml = personPhotos.map(p => {
return `<div class="explorer-file" draggable="true" data-photo="${p.src}">
<img src="${p.src}" alt="">
<span>${p.name}</span>
</div>`;
}).join('');
content = `
<div class="explorer-container">
<div class="explorer-toolbar">
<button class="explorer-nav-btn" disabled>←</button>
<button class="explorer-nav-btn" disabled>→</button>
<button class="explorer-nav-btn">↑</button>
<div class="explorer-path">C:\\Users\\Agent\\Documents\\Affaire_2024-158\\Photos_suspects</div>
<input type="text" class="explorer-search" placeholder="Rechercher dans Photos_suspects">
</div>
<div class="explorer-main">
<div class="explorer-sidebar">
<div class="explorer-sidebar-item"><img src="files/icon-folder-yellow.png" alt="">Accès rapide</div>
<div class="explorer-sidebar-item"><img src="files/icon-computer.png" alt="">Ce PC</div>
<div class="explorer-sidebar-item"><img src="files/icon-folder-yellow.png" alt="">Documents</div>
<div class="explorer-sidebar-item active"><img src="files/icon-folder-yellow.png" alt="">Photos_suspects</div>
<div class="explorer-sidebar-item"><img src="files/icon-folder-yellow.png" alt="">PV_auditions</div>
<div class="explorer-sidebar-item"><img src="files/icon-folder-yellow.png" alt="">Scellés</div>
</div>
<div class="explorer-files">${filesHtml}</div>
</div>
<div class="explorer-statusbar">
<span>6 éléments</span>
<span>Glisser-déposer une photo vers TAJ pour lancer une recherche</span>
</div>
</div>`;
} else if (win.type === 'specific' && win.component === 'taj') {
content = `
<div class="taj-container" id="tajContainer">
<div id="tajSearchScreen" class="taj-screen active">
<div class="taj-drop-overlay" id="tajDropOverlay"></div>
<div class="form-mask"></div>
<div class="form-overlay">
<img id="droppedPhotoPreview" class="dropped-photo-preview" src="" alt="">
<div class="search-wrapper">
<input type="text" class="search-input" id="searchInput" placeholder="">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke-width="2">
<circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
</svg>
</div>
<button class="btn" id="searchBtn" disabled>Rechercher</button>
</div>
</div>
<div id="tajLoaderScreen" class="taj-screen">
<div class="loader-container">
<div class="loader"></div>
<div class="loader-text">RECHERCHE EN COURS</div>
<div class="loader-subtext">Interrogation de la base TAJ...</div>
</div>
</div>
<div id="tajResultScreen" class="taj-screen"></div>
</div>`;
}
winEl.innerHTML = `
<div class="window-header" onmousedown="startDrag(event, '${win.id}')">
<div class="window-title"><img src="${iconSrc}" alt=""><span>${win.title}</span></div>
<div class="window-controls">
<button class="window-btn minimize"></button>
<button class="window-btn maximize"></button>
<button class="window-btn close" onclick="hideWindow('${win.id}')"></button>
</div>
</div>
<div class="window-content">${content}</div>
<div class="resize-handle" onmousedown="startResize(event, '${win.id}')"></div>`;
desktop.appendChild(winEl);
// Taskbar button
const taskBtn = document.createElement('button');
taskBtn.className = 'taskbar-app' + (win.openByDefault ? ' active' : '');
taskBtn.id = 'taskbar-' + win.id;
taskBtn.onclick = () => toggleWindow(win.id);
const shortTitle = win.title.split(' - ')[0];
taskBtn.innerHTML = `<img src="${iconSrc}" alt="">${shortTitle}`;
document.getElementById('taskbarApps').appendChild(taskBtn);
taskbarButtons[win.id] = taskBtn;
});
// Clock
function updateClock() {
document.getElementById('clock').textContent = new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
}
updateClock();
setInterval(updateClock, 1000);
// Window management
let dragWindow = null, resizeWindow = null, dragOffset = { x: 0, y: 0 };
function showWindow(id) {
const win = document.getElementById(id);
if (win) {
win.classList.remove('hidden');
win.style.zIndex = ++zIndex;
if (taskbarButtons[id]) taskbarButtons[id].classList.add('active');
}
}
function hideWindow(id) {
const win = document.getElementById(id);
if (win) {
win.classList.add('hidden');
if (taskbarButtons[id]) taskbarButtons[id].classList.remove('active');
}
}
function toggleWindow(id) {
const win = document.getElementById(id);
if (win) {
if (win.classList.contains('hidden')) {
showWindow(id);
} else {
win.style.zIndex = ++zIndex;
}
}
}
function startDrag(e, windowId) {
if (e.target.classList.contains('window-btn')) return;
dragWindow = document.getElementById(windowId);
dragWindow.style.zIndex = ++zIndex;
dragOffset.x = e.clientX - dragWindow.offsetLeft;
dragOffset.y = e.clientY - dragWindow.offsetTop;
e.preventDefault();
}
function startResize(e, windowId) {
resizeWindow = document.getElementById(windowId);
e.preventDefault();
}
document.addEventListener('mousemove', (e) => {
if (dragWindow) {
dragWindow.style.left = (e.clientX - dragOffset.x) + 'px';
dragWindow.style.top = (e.clientY - dragOffset.y) + 'px';
}
if (resizeWindow) {
const rect = resizeWindow.getBoundingClientRect();
const w = e.clientX - rect.left, h = e.clientY - rect.top;
if (w > 300) resizeWindow.style.width = w + 'px';
if (h > 200) resizeWindow.style.height = h + 'px';
}
});
document.addEventListener('mouseup', () => { dragWindow = null; resizeWindow = null; });
// Drag & Drop Logic - sur toute la fenêtre TAJ
setTimeout(() => {
let selectedPhoto = null;
const tajContainer = document.getElementById('tajContainer');
const tajDropOverlay = document.getElementById('tajDropOverlay');
const droppedPhotoPreview = document.getElementById('droppedPhotoPreview');
const searchBtn = document.getElementById('searchBtn');
const explorerFiles = document.querySelectorAll('.explorer-file[draggable="true"]');
// Setup drag for explorer files
explorerFiles.forEach(file => {
file.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', file.dataset.photo);
file.classList.add('dragging');
});
file.addEventListener('dragend', () => {
file.classList.remove('dragging');
});
// Selection au clic
file.addEventListener('click', () => {
explorerFiles.forEach(f => f.classList.remove('selected'));
file.classList.add('selected');
});
});
// Setup drop sur toute la fenêtre TAJ
if (tajContainer) {
tajContainer.addEventListener('dragover', (e) => {
e.preventDefault();
tajDropOverlay.classList.add('drag-over');
});
tajContainer.addEventListener('dragleave', (e) => {
if (!tajContainer.contains(e.relatedTarget)) {
tajDropOverlay.classList.remove('drag-over');
}
});
tajContainer.addEventListener('drop', (e) => {
e.preventDefault();
tajDropOverlay.classList.remove('drag-over');
const photoSrc = e.dataTransfer.getData('text/plain');
if (photoSrc) {
selectedPhoto = photoSrc;
droppedPhotoPreview.src = photoSrc;
droppedPhotoPreview.classList.add('visible');
tajDropOverlay.classList.add('has-photo');
searchBtn.disabled = false;
}
});
}
// Search button
if (searchBtn) searchBtn.onclick = () => {
if (selectedPhoto) {
document.getElementById('tajSearchScreen').classList.remove('active');
document.getElementById('tajLoaderScreen').classList.add('active');
setTimeout(() => {
document.getElementById('tajLoaderScreen').classList.remove('active');
document.getElementById('tajResultScreen').classList.add('active');
}, config.loadingTime);
}
};
}, 100);
</script>
</body>
</html>
/* Inter - Downloaded from Google Fonts */
/* Usage: <link rel="stylesheet" href="files/inter.css"> */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('./files/inter-300.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('./files/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('./files/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./files/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('./files/inter-700.woff2') format('woff2');
}
{
"type": "object",
"title": "Configuration Bureau TAJ",
"properties": {
"loadingTime": {
"type": "integer",
"title": "Temps de chargement TAJ (ms)",
"default": 3000,
"minimum": 1000,
"maximum": 10000
},
"wallpaper": {
"type": "object",
"title": "Fond d'écran",
"properties": {
"type": {
"type": "string",
"title": "Type",
"enum": ["gradient", "color", "image"],
"default": "gradient"
},
"value": {
"type": "string",
"title": "Valeur (CSS gradient, couleur ou chemin image)",
"default": "linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%)"
}
}
},
"icons": {
"type": "array",
"title": "Icônes du bureau",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string",
"title": "Nom"
},
"type": {
"type": "string",
"title": "Type",
"enum": ["folder", "pdf", "txt", "app", "trash"],
"default": "folder"
},
"action": {
"type": "string",
"title": "Action (ID fenêtre à ouvrir)"
}
}
}
},
"windows": {
"type": "array",
"title": "Fenêtres",
"items": {
"type": "object",
"properties": {
"id": {
"type": "string",
"title": "ID unique"
},
"title": {
"type": "string",
"title": "Titre"
},
"type": {
"type": "string",
"title": "Type",
"enum": ["image", "explorer", "specific"],
"default": "image"
},
"image": {
"type": "string",
"title": "Image (pour type image)",
"links": [{"rel": "Source", "href": "#files"}]
},
"component": {
"type": "string",
"title": "Composant (pour type specific)"
},
"path": {
"type": "string",
"title": "Chemin (pour type explorer)"
},
"files": {
"type": "array",
"title": "Fichiers (pour type explorer)",
"items": {
"type": "object",
"properties": {
"name": { "type": "string", "title": "Nom" },
"type": { "type": "string", "enum": ["folder", "pdf", "txt"], "default": "folder" }
}
}
},
"x": {
"type": "string",
"title": "Position X",
"default": "100px"
},
"y": {
"type": "string",
"title": "Position Y",
"default": "100px"
},
"width": {
"type": "string",
"title": "Largeur",
"default": "400px"
},
"height": {
"type": "string",
"title": "Hauteur",
"default": "300px"
}
}
}
}
}
}
Glisser-déposer des fichiers ou dossiers ici
ou utiliser les boutons ci-dessous
| Nom | Taille | Statut | Actions |
|---|