Change d'interface plus légére, modification side barre
This commit is contained in:
95
public/11.html
Normal file
95
public/11.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Daily Note - 2025-11-11 - PersoNotes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/theme.css" />
|
||||
<link rel="stylesheet" href="static/themes.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||||
.public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||||
.public-nav { margin-bottom: 2rem; }
|
||||
.public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.public-nav a:hover { text-decoration: underline; }
|
||||
.public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||||
.public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
|
||||
.public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||||
.public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
|
||||
.public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
|
||||
.public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
|
||||
.public-content p { margin-bottom: 1rem; }
|
||||
.public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
|
||||
.public-content a:hover { text-decoration: underline; }
|
||||
.public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
|
||||
.public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
|
||||
.public-content pre code { background: none; padding: 0; }
|
||||
.public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
|
||||
.public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
|
||||
.public-content li { margin-bottom: 0.5rem; }
|
||||
.public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
.public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
|
||||
.public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
|
||||
.public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
|
||||
.public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="public-view-container">
|
||||
<div class="public-nav">
|
||||
<a href="index.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
Back to public notes
|
||||
</a>
|
||||
</div>
|
||||
<article>
|
||||
<div class="public-header">
|
||||
<h1 class="public-title">Daily Note - 2025-11-11</h1>
|
||||
<div class="public-meta"><span>📅 11-11-2025</span></div>
|
||||
<div class="public-tags"><span class="tag">#daily</span></div>
|
||||
</div>
|
||||
<div class="public-content">
|
||||
<h1 id="-mardi-11-novembre-2025">📅 Mardi 11 novembre 2025</h1>
|
||||
<h2 id="-objectifs-du-jour">🎯 Objectifs du jour</h2>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
<h2 id="-notes">📝 Notes</h2>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
<h2 id="-accompli">✅ Accompli</h2>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
<h2 id="-rflexions">💭 Réflexions</h2>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
<h2 id="-liens">🔗 Liens</h2>
|
||||
<ul>
|
||||
<li></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
95
public/backlog.html
Normal file
95
public/backlog.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Backlog - PersoNotes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/theme.css" />
|
||||
<link rel="stylesheet" href="static/themes.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||||
.public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||||
.public-nav { margin-bottom: 2rem; }
|
||||
.public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.public-nav a:hover { text-decoration: underline; }
|
||||
.public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||||
.public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
|
||||
.public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||||
.public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
|
||||
.public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
|
||||
.public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
|
||||
.public-content p { margin-bottom: 1rem; }
|
||||
.public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
|
||||
.public-content a:hover { text-decoration: underline; }
|
||||
.public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
|
||||
.public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
|
||||
.public-content pre code { background: none; padding: 0; }
|
||||
.public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
|
||||
.public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
|
||||
.public-content li { margin-bottom: 0.5rem; }
|
||||
.public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
.public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
|
||||
.public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
|
||||
.public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
|
||||
.public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="public-view-container">
|
||||
<div class="public-nav">
|
||||
<a href="index.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
Back to public notes
|
||||
</a>
|
||||
</div>
|
||||
<article>
|
||||
<div class="public-header">
|
||||
<h1 class="public-title">Product Backlog</h1>
|
||||
<div class="public-meta"><span>📅 10-11-2025</span></div>
|
||||
<div class="public-tags"><span class="tag">#task</span><span class="tag">#planning</span></div>
|
||||
</div>
|
||||
<div class="public-content">
|
||||
<h1 id="product-backlog">Product Backlog</h1>
|
||||
<h2 id="high-priority">High Priority</h2>
|
||||
<ul>
|
||||
<li><input disabled="" type="checkbox" /> Export notes to PDF</li>
|
||||
<li><input disabled="" type="checkbox" /> Bulk operations (delete, move)</li>
|
||||
<li><input disabled="" type="checkbox" /> Tags management page</li>
|
||||
<li><input disabled="" type="checkbox" /> Keyboard shortcuts documentation</li>
|
||||
</ul>
|
||||
<h2 id="medium-priority">Medium Priority</h2>
|
||||
<ul>
|
||||
<li><input disabled="" type="checkbox" /> Note templates</li>
|
||||
<li><input disabled="" type="checkbox" /> Trash/Recycle bin</li>
|
||||
<li><input disabled="" type="checkbox" /> Note history/versions</li>
|
||||
<li><input disabled="" type="checkbox" /> Full-text search improvements</li>
|
||||
</ul>
|
||||
<h2 id="low-priority">Low Priority</h2>
|
||||
<ul>
|
||||
<li><input disabled="" type="checkbox" /> Themes customization</li>
|
||||
<li><input disabled="" type="checkbox" /> Plugin system</li>
|
||||
<li><input disabled="" type="checkbox" /> Graph view of notes links</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
89
public/collaboration.html
Normal file
89
public/collaboration.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Real-time Collaboration - PersoNotes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/theme.css" />
|
||||
<link rel="stylesheet" href="static/themes.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||||
.public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||||
.public-nav { margin-bottom: 2rem; }
|
||||
.public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.public-nav a:hover { text-decoration: underline; }
|
||||
.public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||||
.public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
|
||||
.public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||||
.public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
|
||||
.public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
|
||||
.public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
|
||||
.public-content p { margin-bottom: 1rem; }
|
||||
.public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
|
||||
.public-content a:hover { text-decoration: underline; }
|
||||
.public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
|
||||
.public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
|
||||
.public-content pre code { background: none; padding: 0; }
|
||||
.public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
|
||||
.public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
|
||||
.public-content li { margin-bottom: 0.5rem; }
|
||||
.public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
.public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
|
||||
.public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
|
||||
.public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
|
||||
.public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="public-view-container">
|
||||
<div class="public-nav">
|
||||
<a href="index.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
Back to public notes
|
||||
</a>
|
||||
</div>
|
||||
<article>
|
||||
<div class="public-header">
|
||||
<h1 class="public-title">Real-time Collaboration</h1>
|
||||
<div class="public-meta"><span>📅 10-11-2025</span></div>
|
||||
<div class="public-tags"><span class="tag">#idea</span><span class="tag">#collaboration</span></div>
|
||||
</div>
|
||||
<div class="public-content">
|
||||
<h1 id="real-time-collaboration">Real-time Collaboration</h1>
|
||||
<h2 id="goal">Goal</h2>
|
||||
<p>Plusieurs utilisateurs éditent la même note simultanément.</p>
|
||||
<h2 id="technology">Technology</h2>
|
||||
<ul>
|
||||
<li>WebSockets</li>
|
||||
<li>Operational Transforms ou CRDT</li>
|
||||
<li>Presence indicators</li>
|
||||
</ul>
|
||||
<h2 id="challenges">Challenges</h2>
|
||||
<ul>
|
||||
<li>Conflict resolution</li>
|
||||
<li>Performance at scale</li>
|
||||
<li>User permissions</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
92
public/index.html
Normal file
92
public/index.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Public Notes - PersoNotes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/theme.css" />
|
||||
<link rel="stylesheet" href="static/themes.css" />
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||||
.public-container { max-width: 900px; margin: 0 auto; padding: 2rem; }
|
||||
.public-header { text-align: center; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||||
.public-header h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.public-header p { color: var(--text-secondary, #b0b0b0); font-size: 1.1rem; }
|
||||
.notes-list { list-style: none; padding: 0; margin: 0; }
|
||||
.note-item { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; transition: transform 0.2s, box-shadow 0.2s; }
|
||||
.note-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
|
||||
.note-item a { text-decoration: none; color: inherit; display: block; }
|
||||
.note-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.note-meta { display: flex; gap: 1rem; color: var(--text-secondary, #b0b0b0); font-size: 0.9rem; margin-bottom: 0.5rem; }
|
||||
.note-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
||||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||||
.empty-state { text-align: center; padding: 3rem; color: var(--text-secondary, #b0b0b0); }
|
||||
.empty-state svg { width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="public-container">
|
||||
<div class="public-header">
|
||||
<h1><i data-lucide="book-open" class="icon-md"></i> Public Notes</h1>
|
||||
<p>Discover my shared notes</p>
|
||||
</div>
|
||||
<ul class="notes-list">
|
||||
<li class="note-item">
|
||||
<a href="collaboration.html">
|
||||
<h2 class="note-title">Real-time Collaboration</h2>
|
||||
<div class="note-meta">
|
||||
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="note-item">
|
||||
<a href="11.html">
|
||||
<h2 class="note-title">Daily Note - 2025-11-11</h2>
|
||||
<div class="note-meta">
|
||||
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="note-item">
|
||||
<a href="mobile-app.html">
|
||||
<h2 class="note-title">Native Mobile App</h2>
|
||||
<div class="note-meta">
|
||||
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 24/12/2025</span>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="note-item">
|
||||
<a href="backlog.html">
|
||||
<h2 class="note-title">Product Backlog</h2>
|
||||
<div class="note-meta">
|
||||
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 13/11/2025</span>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li class="note-item">
|
||||
<a href="endpoints.html">
|
||||
<h2 class="note-title">API Endpoints Reference</h2>
|
||||
<div class="note-meta">
|
||||
<span><i data-lucide="calendar" class="icon-sm"></i> Published on 13/11/2025</span>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</li></ul>
|
||||
</div>
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
93
public/mobile-app.html
Normal file
93
public/mobile-app.html
Normal file
@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Native Mobile App - PersoNotes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/theme.css" />
|
||||
<link rel="stylesheet" href="static/themes.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||||
.public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||||
.public-nav { margin-bottom: 2rem; }
|
||||
.public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.public-nav a:hover { text-decoration: underline; }
|
||||
.public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||||
.public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
|
||||
.public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||||
.public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
|
||||
.public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
|
||||
.public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
|
||||
.public-content p { margin-bottom: 1rem; }
|
||||
.public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
|
||||
.public-content a:hover { text-decoration: underline; }
|
||||
.public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
|
||||
.public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
|
||||
.public-content pre code { background: none; padding: 0; }
|
||||
.public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
|
||||
.public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
|
||||
.public-content li { margin-bottom: 0.5rem; }
|
||||
.public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
.public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
|
||||
.public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
|
||||
.public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
|
||||
.public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="public-view-container">
|
||||
<div class="public-nav">
|
||||
<a href="index.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
Back to public notes
|
||||
</a>
|
||||
</div>
|
||||
<article>
|
||||
<div class="public-header">
|
||||
<h1 class="public-title">Native Mobile App</h1>
|
||||
<div class="public-meta"><span>📅 10-11-2025</span></div>
|
||||
<div class="public-tags"><span class="tag">#idea</span><span class="tag">#mobile</span></div>
|
||||
</div>
|
||||
<div class="public-content">
|
||||
<h1 id="native-mobile-app-idea">Native Mobile App Idea</h1>
|
||||
<h2 id="concept">Concept</h2>
|
||||
<p>Créer une app native iOS/Android pour l’édition de notes.</p>
|
||||
<h2 id="tech-stack">Tech Stack</h2>
|
||||
<ul>
|
||||
<li>React Native ou Flutter</li>
|
||||
<li>Sync avec l’API REST</li>
|
||||
<li>Offline-first architecture</li>
|
||||
</ul>
|
||||
<h2 id="features">Features</h2>
|
||||
<ul>
|
||||
<li>Push notifications</li>
|
||||
<li>Widget home screen</li>
|
||||
<li>Voice notes</li>
|
||||
<li>Photo attachments</li>
|
||||
</ul>
|
||||
<h2 id="timeline">Timeline</h2>
|
||||
<p>Q2 2025 - Prototype<br />
|
||||
Q3 2025 - Beta testing</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
94
public/notes/personal/learning-goals.html
Normal file
94
public/notes/personal/learning-goals.html
Normal file
@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>2025 Learning Goals - PersoNotes</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../static/theme.css" />
|
||||
<link rel="stylesheet" href="../static/themes.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/atom-one-dark.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; background: var(--bg-primary, #1e1e1e); color: var(--text-primary, #e0e0e0); font-family: 'JetBrains Mono', monospace; }
|
||||
.public-view-container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||||
.public-nav { margin-bottom: 2rem; }
|
||||
.public-nav a { color: var(--accent-blue, #42a5f5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.public-nav a:hover { text-decoration: underline; }
|
||||
.public-header { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--bg-tertiary, #2d2d2d); }
|
||||
.public-title { font-size: 2.5rem; margin: 0 0 1rem 0; color: var(--text-primary, #e0e0e0); }
|
||||
.public-meta { display: flex; gap: 1.5rem; color: var(--text-secondary, #b0b0b0); font-size: 0.95rem; }
|
||||
.public-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||||
.tag { background: var(--bg-tertiary, #2d2d2d); color: var(--text-secondary, #b0b0b0); padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.85rem; }
|
||||
.public-content { line-height: 1.8; color: var(--text-primary, #e0e0e0); font-size: 1.05rem; }
|
||||
.public-content h1, .public-content h2, .public-content h3, .public-content h4, .public-content h5, .public-content h6 { color: var(--text-primary, #e0e0e0); margin-top: 2rem; margin-bottom: 1rem; }
|
||||
.public-content h1 { font-size: 2rem; } .public-content h2 { font-size: 1.75rem; } .public-content h3 { font-size: 1.5rem; } .public-content h4 { font-size: 1.25rem; }
|
||||
.public-content p { margin-bottom: 1rem; }
|
||||
.public-content a { color: var(--accent-blue, #42a5f5); text-decoration: none; }
|
||||
.public-content a:hover { text-decoration: underline; }
|
||||
.public-content pre { background: var(--bg-secondary, #252525); border: 1px solid var(--bg-tertiary, #2d2d2d); border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 1rem 0; }
|
||||
.public-content code { font-family: 'JetBrains Mono', monospace; background: var(--bg-secondary, #252525); padding: 0.2rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
|
||||
.public-content pre code { background: none; padding: 0; }
|
||||
.public-content blockquote { border-left: 4px solid var(--accent-blue, #42a5f5); padding-left: 1rem; margin: 1rem 0; color: var(--text-secondary, #b0b0b0); font-style: italic; }
|
||||
.public-content ul, .public-content ol { margin: 1rem 0; padding-left: 2rem; }
|
||||
.public-content li { margin-bottom: 0.5rem; }
|
||||
.public-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
||||
.public-content th, .public-content td { border: 1px solid var(--bg-tertiary, #2d2d2d); padding: 0.75rem; text-align: left; }
|
||||
.public-content th { background: var(--bg-secondary, #252525); font-weight: 600; }
|
||||
.public-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1rem 0; }
|
||||
.public-content hr { border: none; border-top: 2px solid var(--bg-tertiary, #2d2d2d); margin: 2rem 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="public-view-container">
|
||||
<div class="public-nav">
|
||||
<a href="../index.html">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="19" y1="12" x2="5" y2="12"></line>
|
||||
<polyline points="12 19 5 12 12 5"></polyline>
|
||||
</svg>
|
||||
Back to public notes
|
||||
</a>
|
||||
</div>
|
||||
<article>
|
||||
<div class="public-header">
|
||||
<h1 class="public-title">2025 Learning Goals</h1>
|
||||
<div class="public-meta"><span>📅 10-11-2025</span></div>
|
||||
<div class="public-tags"><span class="tag">#personal</span><span class="tag">#learning</span></div>
|
||||
</div>
|
||||
<div class="public-content">
|
||||
<h1 id="learning-goals-2025">Learning Goals 2025</h1>
|
||||
<h2 id="technical">Technical</h2>
|
||||
<ul>
|
||||
<li><input checked="" disabled="" type="checkbox" /> Master Go concurrency patterns</li>
|
||||
<li><input disabled="" type="checkbox" /> Learn Rust basics</li>
|
||||
<li><input disabled="" type="checkbox" /> Deep dive into databases</li>
|
||||
<li><input disabled="" type="checkbox" /> System design courses</li>
|
||||
</ul>
|
||||
<h2 id="soft-skills">Soft Skills</h2>
|
||||
<ul>
|
||||
<li><input disabled="" type="checkbox" /> Technical writing</li>
|
||||
<li><input disabled="" type="checkbox" /> Public speaking</li>
|
||||
<li><input disabled="" type="checkbox" /> Mentoring</li>
|
||||
</ul>
|
||||
<h2 id="books-to-read">Books to Read</h2>
|
||||
<ol>
|
||||
<li>Designing Data-Intensive Applications</li>
|
||||
<li>The Pragmatic Programmer</li>
|
||||
<li>Clean Architecture</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
3643
public/static/theme.css
Normal file
3643
public/static/theme.css
Normal file
File diff suppressed because it is too large
Load Diff
695
public/static/themes.css
Normal file
695
public/static/themes.css
Normal file
@ -0,0 +1,695 @@
|
||||
/*
|
||||
* PersoNotes - Multi-Theme System
|
||||
* Supports: Material Dark (default), Monokai Dark, Dracula, One Dark, Solarized Dark, Nord
|
||||
*/
|
||||
|
||||
/* ===========================
|
||||
THEME: MATERIAL DARK (défaut)
|
||||
=========================== */
|
||||
:root,
|
||||
[data-theme="material-dark"] {
|
||||
--bg-primary: #1e1e1e;
|
||||
--bg-secondary: #252525;
|
||||
--bg-tertiary: #2d2d2d;
|
||||
--bg-elevated: #323232;
|
||||
|
||||
--border-primary: #3e3e3e;
|
||||
--border-secondary: #2a2a2a;
|
||||
|
||||
--text-primary: #e0e0e0;
|
||||
--text-secondary: #b0b0b0;
|
||||
--text-muted: #6e6e6e;
|
||||
|
||||
--accent-primary: #42a5f5;
|
||||
--accent-primary-hover: #5ab3f7;
|
||||
--accent-secondary: #29b6f6;
|
||||
--accent-secondary-hover: #4fc3f7;
|
||||
|
||||
--success: #66bb6a;
|
||||
--warning: #ffa726;
|
||||
--error: #ef5350;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: MONOKAI DARK
|
||||
=========================== */
|
||||
[data-theme="monokai-dark"] {
|
||||
--bg-primary: #272822;
|
||||
--bg-secondary: #2d2e27;
|
||||
--bg-tertiary: #3e3d32;
|
||||
--bg-elevated: #49483e;
|
||||
|
||||
--border-primary: #49483e;
|
||||
--border-secondary: #3e3d32;
|
||||
|
||||
--text-primary: #f8f8f2;
|
||||
--text-secondary: #cfcfc2;
|
||||
--text-muted: #75715e;
|
||||
|
||||
--accent-primary: #66d9ef;
|
||||
--accent-primary-hover: #7ee5f7;
|
||||
--accent-secondary: #88c070;
|
||||
--accent-secondary-hover: #9acc84;
|
||||
|
||||
--success: #88c070;
|
||||
--warning: #e6db74;
|
||||
--error: #f92672;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: DRACULA
|
||||
=========================== */
|
||||
[data-theme="dracula"] {
|
||||
--bg-primary: #282a36;
|
||||
--bg-secondary: #2f3241;
|
||||
--bg-tertiary: #373844;
|
||||
--bg-elevated: #44475a;
|
||||
|
||||
--border-primary: #44475a;
|
||||
--border-secondary: #373844;
|
||||
|
||||
--text-primary: #f8f8f2;
|
||||
--text-secondary: #d6d6d6;
|
||||
--text-muted: #6272a4;
|
||||
|
||||
--accent-primary: #8be9fd;
|
||||
--accent-primary-hover: #9ff3ff;
|
||||
--accent-secondary: #bd93f9;
|
||||
--accent-secondary-hover: #cba6ff;
|
||||
|
||||
--success: #50fa7b;
|
||||
--warning: #f1fa8c;
|
||||
--error: #ff5555;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: ONE DARK
|
||||
=========================== */
|
||||
[data-theme="one-dark"] {
|
||||
--bg-primary: #282c34;
|
||||
--bg-secondary: #2c313a;
|
||||
--bg-tertiary: #333842;
|
||||
--bg-elevated: #3e4451;
|
||||
|
||||
--border-primary: #3e4451;
|
||||
--border-secondary: #333842;
|
||||
|
||||
--text-primary: #abb2bf;
|
||||
--text-secondary: #9ca3af;
|
||||
--text-muted: #5c6370;
|
||||
|
||||
--accent-primary: #61afef;
|
||||
--accent-primary-hover: #75bdf5;
|
||||
--accent-secondary: #c678dd;
|
||||
--accent-secondary-hover: #d48ae9;
|
||||
|
||||
--success: #98c379;
|
||||
--warning: #e5c07b;
|
||||
--error: #e06c75;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: SOLARIZED DARK
|
||||
=========================== */
|
||||
[data-theme="solarized-dark"] {
|
||||
--bg-primary: #002b36;
|
||||
--bg-secondary: #073642;
|
||||
--bg-tertiary: #094454;
|
||||
--bg-elevated: #0e5261;
|
||||
|
||||
--border-primary: #0e5261;
|
||||
--border-secondary: #094454;
|
||||
|
||||
--text-primary: #839496;
|
||||
--text-secondary: #93a1a1;
|
||||
--text-muted: #586e75;
|
||||
|
||||
--accent-primary: #268bd2;
|
||||
--accent-primary-hover: #4098d9;
|
||||
--accent-secondary: #2aa198;
|
||||
--accent-secondary-hover: #3eb3a8;
|
||||
|
||||
--success: #859900;
|
||||
--warning: #b58900;
|
||||
--error: #dc322f;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: NORD
|
||||
=========================== */
|
||||
[data-theme="nord"] {
|
||||
--bg-primary: #2e3440;
|
||||
--bg-secondary: #3b4252;
|
||||
--bg-tertiary: #434c5e;
|
||||
--bg-elevated: #4c566a;
|
||||
|
||||
--border-primary: #4c566a;
|
||||
--border-secondary: #434c5e;
|
||||
|
||||
--text-primary: #eceff4;
|
||||
--text-secondary: #d8dee9;
|
||||
--text-muted: #616e88;
|
||||
|
||||
--accent-primary: #88c0d0;
|
||||
--accent-primary-hover: #9dcadb;
|
||||
--accent-secondary: #81a1c1;
|
||||
--accent-secondary-hover: #94b0cc;
|
||||
|
||||
--success: #a3be8c;
|
||||
--warning: #ebcb8b;
|
||||
--error: #bf616a;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: CATPPUCCIN MOCHA
|
||||
=========================== */
|
||||
[data-theme="catppuccin"] {
|
||||
--bg-primary: #1e1e2e;
|
||||
--bg-secondary: #181825;
|
||||
--bg-tertiary: #313244;
|
||||
--bg-elevated: #45475a;
|
||||
|
||||
--border-primary: #45475a;
|
||||
--border-secondary: #313244;
|
||||
|
||||
--text-primary: #cdd6f4;
|
||||
--text-secondary: #bac2de;
|
||||
--text-muted: #6c7086;
|
||||
|
||||
--accent-primary: #89b4fa;
|
||||
--accent-primary-hover: #a6c8ff;
|
||||
--accent-secondary: #f5c2e7;
|
||||
--accent-secondary-hover: #f9d5ee;
|
||||
|
||||
--success: #a6e3a1;
|
||||
--warning: #f9e2af;
|
||||
--error: #f38ba8;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
THEME: EVERFOREST DARK
|
||||
=========================== */
|
||||
[data-theme="everforest"] {
|
||||
--bg-primary: #2d353b;
|
||||
--bg-secondary: #272e33;
|
||||
--bg-tertiary: #343f44;
|
||||
--bg-elevated: #3d484d;
|
||||
|
||||
--border-primary: #3d484d;
|
||||
--border-secondary: #343f44;
|
||||
|
||||
--text-primary: #d3c6aa;
|
||||
--text-secondary: #b4a990;
|
||||
--text-muted: #7a8478;
|
||||
|
||||
--accent-primary: #7fbbb3;
|
||||
--accent-primary-hover: #93c9c1;
|
||||
--accent-secondary: #a7c080;
|
||||
--accent-secondary-hover: #b8cc94;
|
||||
|
||||
--success: #a7c080;
|
||||
--warning: #dbbc7f;
|
||||
--error: #e67e80;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
BOUTONS D'ACTION DE LA SIDEBAR
|
||||
=========================== */
|
||||
.sidebar-action-btn {
|
||||
width: 100%;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
padding: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.sidebar-action-btn:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Style spécifique pour le bouton paramètres (avec animation) */
|
||||
.theme-settings-btn {
|
||||
width: 100%;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
padding: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
margin-top: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.theme-settings-btn:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.theme-settings-btn svg {
|
||||
animation: rotate 2s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.theme-settings-btn:hover svg {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
MODALE DE SÉLECTION DE THÈME
|
||||
=========================== */
|
||||
#theme-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-modal-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.theme-modal-content {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--accent-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-lg), var(--shadow-glow);
|
||||
animation: slideUp 0.3s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.theme-modal-content h2 {
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
background: var(--bg-tertiary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.theme-card:hover {
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.theme-card.active {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
||||
}
|
||||
|
||||
.theme-card.active::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: var(--spacing-xs);
|
||||
right: var(--spacing-xs);
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.theme-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.theme-card-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.theme-card-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
height: 40px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-preview-color {
|
||||
flex: 1;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.theme-card:hover .theme-preview-color {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
|
||||
.theme-description {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Couleurs de prévisualisation pour chaque thème */
|
||||
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(1) { background: #1e1e1e; }
|
||||
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(2) { background: #42a5f5; }
|
||||
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(3) { background: #29b6f6; }
|
||||
.theme-card[data-theme="material-dark"] .theme-preview-color:nth-child(4) { background: #e0e0e0; }
|
||||
|
||||
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(1) { background: #272822; }
|
||||
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(2) { background: #66d9ef; }
|
||||
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(3) { background: #88c070; }
|
||||
.theme-card[data-theme="monokai-dark"] .theme-preview-color:nth-child(4) { background: #f8f8f2; }
|
||||
|
||||
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(1) { background: #282a36; }
|
||||
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(2) { background: #8be9fd; }
|
||||
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(3) { background: #bd93f9; }
|
||||
.theme-card[data-theme="dracula"] .theme-preview-color:nth-child(4) { background: #f8f8f2; }
|
||||
|
||||
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(1) { background: #282c34; }
|
||||
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(2) { background: #61afef; }
|
||||
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(3) { background: #c678dd; }
|
||||
.theme-card[data-theme="one-dark"] .theme-preview-color:nth-child(4) { background: #abb2bf; }
|
||||
|
||||
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(1) { background: #002b36; }
|
||||
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(2) { background: #268bd2; }
|
||||
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(3) { background: #2aa198; }
|
||||
.theme-card[data-theme="solarized-dark"] .theme-preview-color:nth-child(4) { background: #839496; }
|
||||
|
||||
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(1) { background: #2e3440; }
|
||||
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(2) { background: #88c0d0; }
|
||||
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(3) { background: #81a1c1; }
|
||||
.theme-card[data-theme="nord"] .theme-preview-color:nth-child(4) { background: #eceff4; }
|
||||
|
||||
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(1) { background: #1e1e2e; }
|
||||
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(2) { background: #89b4fa; }
|
||||
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(3) { background: #f5c2e7; }
|
||||
.theme-card[data-theme="catppuccin"] .theme-preview-color:nth-child(4) { background: #cdd6f4; }
|
||||
|
||||
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(1) { background: #2d353b; }
|
||||
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(2) { background: #7fbbb3; }
|
||||
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(3) { background: #a7c080; }
|
||||
.theme-card[data-theme="everforest"] .theme-preview-color:nth-child(4) { background: #d3c6aa; }
|
||||
|
||||
.theme-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-lg);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* Onglets de paramètres */
|
||||
.settings-tabs {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.settings-tab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.settings-tab:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.settings-tab.active {
|
||||
color: var(--accent-primary);
|
||||
border-bottom-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* Grille de polices */
|
||||
.font-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.font-card {
|
||||
background: var(--bg-tertiary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.font-card:hover {
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.font-card.active {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
||||
}
|
||||
|
||||
.font-card.active::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: var(--spacing-xs);
|
||||
right: var(--spacing-xs);
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.font-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.font-card-icon {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.font-card-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.font-preview {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
color: var(--text-primary);
|
||||
min-height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.font-description {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Sélecteur de taille de police */
|
||||
.font-size-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.font-size-option {
|
||||
background: var(--bg-tertiary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.font-size-option:hover {
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.font-size-option.active {
|
||||
border-color: var(--accent-primary);
|
||||
background: rgba(66, 165, 245, 0.1);
|
||||
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
||||
}
|
||||
|
||||
.size-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-size-option.active .size-label {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.size-preview {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TOGGLE SWITCH (pour Mode Vim)
|
||||
=========================== */
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--bg-tertiary);
|
||||
transition: 0.3s;
|
||||
border-radius: 26px;
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.toggle-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 4px;
|
||||
bottom: 3px;
|
||||
background-color: var(--text-muted);
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background-color: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider:before {
|
||||
transform: translateX(24px);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.toggle-switch input:focus + .toggle-slider {
|
||||
box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user