feat: améliorer l'accessibilité et les performances avec support pour prefers-reduced-motion, prefers-contrast, focus-visible, ajout de preconnect pour les domaines externes, versioning des assets CSS/JS, et correction des chemins de ressources avec ltrim
This commit is contained in:
parent
1aa05548a8
commit
1721032254
@ -26,8 +26,8 @@ body.view-todo #linklist {
|
||||
/* Sidebar */
|
||||
.todo-sidebar {
|
||||
width: 280px;
|
||||
background-color: var(--background-secondary, #f8f9fa);
|
||||
border-right: 1px solid var(--border-color, #e2e8f0);
|
||||
background-color: var(--bg-sidebar);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -3744,3 +3744,58 @@ select:focus {
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===== Accessibility Enhancements ===== */
|
||||
|
||||
/* Reduced Motion - Respect user preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* High Contrast Mode */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border: #000000;
|
||||
--text-main: #000000;
|
||||
--text-secondary: #000000;
|
||||
--primary: #0000ff;
|
||||
--primary-hover: #0000cc;
|
||||
--bg-body: #ffffff;
|
||||
--bg-sidebar: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--border: #ffffff;
|
||||
--text-main: #ffffff;
|
||||
--text-secondary: #ffffff;
|
||||
--primary: #00ffff;
|
||||
--primary-hover: #66ffff;
|
||||
--bg-body: #000000;
|
||||
--bg-sidebar: #000000;
|
||||
--bg-card: #000000;
|
||||
}
|
||||
|
||||
.sidebar-link:focus,
|
||||
.header-nav-link:focus,
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 3px solid currentColor;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus Visible - Enhanced keyboard navigation */
|
||||
@supports not selector(:focus-visible) {
|
||||
*:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
5
shaarli-pro/img/favicon.svg
Normal file
5
shaarli-pro/img/favicon.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<rect width="64" height="64" rx="12" fill="#2563eb"/>
|
||||
<path d="M21 17h22a4 4 0 0 1 4 4v26a4 4 0 0 1-4 4H21a4 4 0 0 1-4-4V21a4 4 0 0 1 4-4Z" fill="#ffffff"/>
|
||||
<circle cx="32" cy="32" r="7" fill="#2563eb"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 278 B |
@ -2,6 +2,7 @@
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="referrer" content="same-origin">
|
||||
<link rel="icon" type="image/svg+xml" href="/{function="ltrim($asset_path, '/')"}/img/favicon.svg#">
|
||||
<link rel="alternate" type="application/rss+xml" href="{$feedurl}?do=rss{$searchcrits}#" title="RSS Feed" />
|
||||
<link rel="alternate" type="application/atom+xml" href="{$feedurl}?do=atom{$searchcrits}#" title="ATOM Feed" />
|
||||
<link rel="search" type="application/opensearchdescription+xml" href="{$base_path}/open-search#" title="Shaarli search - {$shaarlititle}" />
|
||||
@ -22,42 +23,46 @@
|
||||
</script>
|
||||
|
||||
<!-- Professional Theme CSS -->
|
||||
<link type="text/css" rel="stylesheet" href="{$asset_path}/css/style.css#" />
|
||||
<link type="text/css" rel="stylesheet" href="{$asset_path}/css/custom_views.css#" />
|
||||
<link type="text/css" rel="stylesheet" href="/{function="ltrim($asset_path, '/')"}/css/style.css?v=1.0.1" />
|
||||
<link type="text/css" rel="stylesheet" href="/{function="ltrim($asset_path, '/')"}/css/custom_views.css?v=1.0.1" />
|
||||
{if="$pageName=='editlink' || $pageName=='addlink' || $pageName=='editlinkbatch'"}
|
||||
<link type="text/css" rel="stylesheet" href="{$asset_path}/css/awesomplete.css#" />
|
||||
<script src="{$asset_path}/js/awesomplete.min.js#" defer></script>
|
||||
<link type="text/css" rel="stylesheet" href="/{function="ltrim($asset_path, '/')"}/css/awesomplete.css?v=1.0.1" />
|
||||
<script src="/{function="ltrim($asset_path, '/')"}/js/awesomplete.min.js?v=1.0.1" defer></script>
|
||||
{/if}
|
||||
|
||||
<!-- Preconnect to external domains for performance -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
|
||||
<!-- Icons (Material Design Icons) -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css" crossorigin="anonymous">
|
||||
|
||||
<!-- Theme Color -->
|
||||
<meta name="theme-color" content="#2563eb">
|
||||
|
||||
<!-- Plugins CSS -->
|
||||
{loop="$plugins_includes.css_files"}
|
||||
<link type="text/css" rel="stylesheet" href="{$root_path}/{$value}#" />
|
||||
<link type="text/css" rel="stylesheet" href="/{function="ltrim($value, '/')"}?v=1.0.1" />
|
||||
{/loop}
|
||||
|
||||
{if="is_file('data/user.css')"}
|
||||
<link type="text/css" rel="stylesheet" href="{$root_path}/data/user.css#" />
|
||||
<link type="text/css" rel="stylesheet" href="/data/user.css?v=1.0.1" />
|
||||
{/if}
|
||||
|
||||
<script>
|
||||
var shaarli = {
|
||||
basePath: '{$base_path}',
|
||||
rootPath: '{$root_path}',
|
||||
assetPath: '{$asset_path}',
|
||||
assetPath: '/{function="ltrim($asset_path, '/')"}',
|
||||
isAuth: {if="$is_logged_in"}true{else}false{/if},
|
||||
pageName: '{$pageName}',
|
||||
visibility: '{$visibility}',
|
||||
untaggedonly: {if="$untaggedonly"}true{else}false{/if}
|
||||
};
|
||||
</script>
|
||||
<script src="{$asset_path}/js/script.js#" defer></script>
|
||||
<script src="{$asset_path}/js/custom_views.js#" defer></script>
|
||||
<script src="/{function="ltrim($asset_path, '/')"}/js/script.js?v=1.0.1" defer></script>
|
||||
<script src="/{function="ltrim($asset_path, '/')"}/js/custom_views.js?v=1.0.1" defer></script>
|
||||
|
||||
{if="file_exists('tpl/shaarli-pro/extra.html')"}
|
||||
{include="extra"}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -59,14 +59,24 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let cachedBookmarks = null;
|
||||
let cachedTags = null;
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
if (typeof text !== 'string') return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Highlight matching text with <mark> tags
|
||||
function highlightMatch(text, query) {
|
||||
if (!query || query.length === 0) return text;
|
||||
if (!query || query.length === 0) return escapeHtml(text);
|
||||
|
||||
// Escape HTML first to prevent XSS
|
||||
const escapedText = escapeHtml(text);
|
||||
// Escape special regex characters in query
|
||||
const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
const regex = new RegExp(`(${escapedQuery})`, 'gi');
|
||||
return text.replace(regex, '<mark>$1</mark>');
|
||||
return escapedText.replace(regex, '<mark>$1</mark>');
|
||||
}
|
||||
|
||||
// Fuzzy search - matches substring anywhere in text
|
||||
|
||||
@ -1,84 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
||||
|
||||
<head>
|
||||
{$pageName="linklist"}
|
||||
{include="includes"}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{include="page.header"}
|
||||
<div id="linklist">
|
||||
{loop="$plugin_start_zone"}
|
||||
{$value}
|
||||
{/loop}
|
||||
<!-- {* ----- barre outils ----- *} -->
|
||||
<!-- {* ----- toolbar ----- *} -->
|
||||
<div class="content-toolbar">
|
||||
<div class="toolbar-left">{include="linklist.paging"}</div>
|
||||
<div class="toolbar-right">
|
||||
<div class="view-toggle">
|
||||
<button class="view-toggle-btn active" id="view-grid-btn" title="Grid"><i class="mdi mdi-view-grid"></i></button>
|
||||
<button class="view-toggle-btn" id="view-list-btn" title="List"><i class="mdi mdi-view-list"></i></button>
|
||||
<button class="view-toggle-btn" id="view-compact-btn" title="Compact"><i class="mdi mdi-view-headline"></i></button>
|
||||
<div class="view-toggle" role="group" aria-label="Changer de vue">
|
||||
<button class="view-toggle-btn active" id="view-grid-btn" aria-label="Vue grille"
|
||||
aria-pressed="true"><i class="mdi mdi-view-grid" aria-hidden="true"></i></button>
|
||||
<button class="view-toggle-btn" id="view-list-btn" aria-label="Vue liste"
|
||||
aria-pressed="false"><i class="mdi mdi-view-list" aria-hidden="true"></i></button>
|
||||
<button class="view-toggle-btn" id="view-compact-btn" aria-label="Vue compacte"
|
||||
aria-pressed="false"><i class="mdi mdi-view-headline"
|
||||
aria-hidden="true"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {* ----- résultats de recherche par tags ----- *} -->
|
||||
<!-- {* ----- tag search results ----- *} -->
|
||||
{if="!empty($search_tags)"}
|
||||
<div class="search-results-header">
|
||||
<span class="search-count">{$result_count} results tagged</span>
|
||||
<span class="search-count">{$result_count} résultat(s) tagué(s)</span>
|
||||
{$exploded_tags=tags_str2array($search_tags, $tags_separator)}
|
||||
{loop="$exploded_tags"}
|
||||
<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="urlencode($value)"}" class="search-tag-close" title="Remove tag"><i class="mdi mdi-close"></i></a></span>
|
||||
<span class="search-tag-chip">{$value} <a href="{$base_path}/remove-tag/{function="
|
||||
urlencode($value)"}" class="search-tag-close" title="Retirer le tag"
|
||||
aria-label="Retirer le tag {$value}"><i class="mdi mdi-close"
|
||||
aria-hidden="true"></i></a></span>
|
||||
{/loop}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- {* ----- aucun lien ----- *} -->
|
||||
<!-- {* ----- no links ----- *} -->
|
||||
{if="count($links)==0"}
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon"><i class="mdi mdi-bookmark-off-outline"></i></div>
|
||||
<h2 class="empty-state-title">No bookmarks found</h2>
|
||||
<p class="empty-state-text">{if="!empty($search_term)"}No results for: <strong>{$search_term}</strong>{else}Start adding bookmarks to see them here.{/if}</p>
|
||||
<div class="empty-state" role="status" aria-live="polite">
|
||||
<div class="empty-state-icon" aria-hidden="true"><i class="mdi mdi-bookmark-off-outline"></i></div>
|
||||
<h2 class="empty-state-title">Aucun bookmark trouvé</h2>
|
||||
<p class="empty-state-text">{if="!empty($search_term)"}Aucun résultat pour : <strong>{$search_term}</strong>{else}Commencez à ajouter des bookmarks pour les voir apparaître ici.{/if}</p>
|
||||
</div>
|
||||
{else}
|
||||
<!-- {* ----- au moins un lien ----- *} -->
|
||||
<!-- {* ----- at least one link ----- *} -->
|
||||
<div class="links-list view-grid" id="links-list">
|
||||
{loop="$links"}
|
||||
<div id="{$value.id}" class="link-outer{if="isset($value.sticky) && $value.sticky"} is-sticky{/if}{if="$value.class"} {$value.class}{/if}{if="$value.private"} private{else} public{/if}" data-id="{$value.id}">
|
||||
{if="$is_logged_in"}
|
||||
<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox" data-id="{$value.id}"></div>
|
||||
<div class="link-select-checkbox"><input type="checkbox" class="link-checkbox"
|
||||
data-id="{$value.id}" aria-label="Sélectionner ce bookmark"></div>
|
||||
{/if}
|
||||
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="" style="width:100%;height:100%;object-fit:cover;" onerror="this.parentElement.style.display='none'"></div>{/if}
|
||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Private"></i>{else}<i class="mdi mdi-lock-open-variant" title="Public"></i>{/if}</div>
|
||||
{if="$value.thumbnail !== false"}<div class="link-thumbnail"><img
|
||||
src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
onerror="this.parentElement.style.display='none'"></div>{/if}
|
||||
<div class="link-visibility-badge">{if="$value.private"}<i class="mdi mdi-lock" title="Privé"
|
||||
aria-label="Bookmark privé"></i>{else}<i class="mdi mdi-lock-open-variant"
|
||||
title="Public" aria-label="Bookmark public"></i>{/if}</div>
|
||||
<div class="link-content">
|
||||
<div class="link-header">
|
||||
<a href="{$value.real_url}" class="link-title"{if="strpos($value.url, $value.shorturl) !== false"} title="Note"{/if}>
|
||||
{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin" style="color:var(--primary);"></i>{/if}{$value.title_html}
|
||||
<a href="{$value.real_url}" class="link-title"
|
||||
{if="strpos($value.url, $value.shorturl) !== false"} title="Note" {/if}>
|
||||
{if="isset($value.sticky) && $value.sticky"}<i class="mdi mdi-pin"
|
||||
style="color:var(--primary);"
|
||||
aria-hidden="true"></i>{/if}{$value.title_html}
|
||||
</a>
|
||||
<span class="link-url">{$value.url}</span>
|
||||
<div class="link-meta">
|
||||
<span class="link-date">{$value.created|format_date}</span>
|
||||
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink" title="Permalink"><i class="mdi mdi-link-variant"></i></a>
|
||||
<a href="{$base_path}/shaare/{$value.shorturl}" class="link-permalink"
|
||||
title="Lien permanent" aria-label="Lien permanent"><i
|
||||
class="mdi mdi-link-variant" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if="$value.description"}<div class="link-description">{$value.description}</div>{/if}
|
||||
<div class="link-footer">
|
||||
<div class="link-tag-list">
|
||||
{loop="$value.taglist"}<span class="link-tag"><a href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
|
||||
{loop="$value.taglist"}<span class="link-tag"><a
|
||||
href="{$base_path}/add-tag/{$value|urlencode}">{$value}</a></span>{/loop}
|
||||
</div>
|
||||
<div class="link-actions">
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}" title="Edit"><i class="mdi mdi-pencil"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}" title="Pin/Unpin"><i class="mdi mdi-pin"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}" title="Delete" onclick="return confirm('Delete this bookmark?');"><i class="mdi mdi-delete"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}" title="Modifier"
|
||||
aria-label="Modifier ce bookmark"><i class="mdi mdi-pencil"
|
||||
aria-hidden="true"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/{$value.id}/pin?token={$token}"
|
||||
title="Épingler/Désépingler" aria-label="Épingler ou désépingler"><i
|
||||
class="mdi mdi-pin" aria-hidden="true"></i></a>
|
||||
<a href="{$base_path}/admin/shaare/delete?id={$value.id}&token={$token}"
|
||||
title="Supprimer" aria-label="Supprimer ce bookmark"
|
||||
onclick="return confirm('Supprimer ce bookmark ?');"><i
|
||||
class="mdi mdi-delete" aria-hidden="true"></i></a>
|
||||
{/if}
|
||||
<!-- bouton plein écran (dans les 3 vues) -->
|
||||
<a href="#" class="view-desc-btn" data-id="{$value.id}" title="View Description"><i class="mdi mdi-fullscreen"></i></a>
|
||||
<!-- fullscreen button (in all 3 views) -->
|
||||
<a href="#" class="view-desc-btn" data-id="{$value.id}"
|
||||
title="Voir la description" aria-label="Voir la description complète"><i
|
||||
class="mdi mdi-fullscreen" aria-hidden="true"></i></a>
|
||||
{loop="$value.link_plugin"}
|
||||
<span class="link-plugin">{$value}</span>
|
||||
{/loop}
|
||||
<a href="{$value.real_url}" target="_blank" rel="noopener" title="Open Link"><i class="mdi mdi-open-in-new"></i></a>
|
||||
<a href="{$value.real_url}" target="_blank" rel="noopener"
|
||||
title="Ouvrir le lien" aria-label="Ouvrir le lien dans un nouvel onglet"><i
|
||||
class="mdi mdi-open-in-new" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,18 +124,20 @@
|
||||
{/loop}
|
||||
</div>
|
||||
|
||||
<!-- {* ----- modale unique ----- *} -->
|
||||
<div id="desc-modal" class="modal-overlay">
|
||||
<!-- {* ----- description modal ----- *} -->
|
||||
<div id="desc-modal" class="modal-overlay" role="dialog" aria-modal="true"
|
||||
aria-label="Description du bookmark" aria-hidden="true">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" id="desc-modal-close">×</button>
|
||||
<button class="modal-close" id="desc-modal-close" aria-label="Fermer">×</button>
|
||||
<div class="modal-body" id="desc-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {* ----- QR Code Modal ----- *} -->
|
||||
<div id="qrcode-modal" class="qrcode-modal-overlay">
|
||||
<div id="qrcode-modal" class="qrcode-modal-overlay" role="dialog" aria-modal="true" aria-label="Code QR"
|
||||
aria-hidden="true">
|
||||
<div class="qrcode-modal-content">
|
||||
<button class="qrcode-modal-close" id="qrcode-modal-close">×</button>
|
||||
<button class="qrcode-modal-close" id="qrcode-modal-close" aria-label="Fermer">×</button>
|
||||
<div id="qrcode-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
{/loop}
|
||||
|
||||
{loop="$plugins_footer.js"}
|
||||
<script src="{$root_path}/{$value}"></script>
|
||||
<script src="/{function="ltrim($value, '/')"}"></script>
|
||||
{/loop}
|
||||
{if="$pageName=='editlink' || $pageName=='addlink' || $pageName=='editlinkbatch'"}
|
||||
<script>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<!--
|
||||
Bookmarklet detection logic
|
||||
{$isCalledFromBookmarklet=isset($_GET['source']) && $_GET['source'] == 'bookmarklet'}
|
||||
-->
|
||||
{if="$isCalledFromBookmarklet"}
|
||||
@ -6,57 +7,62 @@
|
||||
{else}
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<aside class="sidebar" id="sidebar" aria-label="Navigation principale">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo" aria-hidden="true">
|
||||
<i class="mdi mdi-bookmark-multiple"></i>
|
||||
</div>
|
||||
<a href="{$titleLink}" class="sidebar-brand">{$shaarlititle}</a>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<nav class="sidebar-nav" aria-label="Menu latéral">
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-title">Navigation</div>
|
||||
<a href="{$base_path}/" class="sidebar-link{if="$pageName=='linklist' && empty($search_tags)"} active{/if}">
|
||||
<i class="mdi mdi-bookmark-multiple-outline"></i>
|
||||
<span>All Bookmarks</span>
|
||||
<a href="{$base_path}/" class="sidebar-link{if="$pageName=='linklist' && empty($search_tags)"} active{/if}"
|
||||
aria-label="Tous les bookmarks">
|
||||
<i class="mdi mdi-bookmark-multiple-outline" aria-hidden="true"></i>
|
||||
<span>Tous les bookmarks</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=shaarli-pin" class="sidebar-link{if="isset($search_tags) && $search_tags == 'shaarli-pin'"} active{/if}">
|
||||
<i class="mdi mdi-pin-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=shaarli-pin" class="sidebar-link{if="isset($search_tags)&&$search_tags=='shaarli-pin'"} active{/if}" aria-label="Épinglés">
|
||||
<i class="mdi mdi-pin-outline" aria-hidden="true"></i>
|
||||
<span>Épinglés</span>
|
||||
</a>
|
||||
<a href="{$base_path}/tags/cloud" class="sidebar-link{if="$pageName=='tagcloud'"} active{/if}">
|
||||
<i class="mdi mdi-tag-multiple-outline"></i>
|
||||
<span>Tag Cloud</span>
|
||||
<a href="{$base_path}/tags/cloud" class="sidebar-link{if="$pageName=='tagcloud'"} active{/if}"
|
||||
aria-label="Nuage de tags">
|
||||
<i class="mdi mdi-tag-multiple-outline" aria-hidden="true"></i>
|
||||
<span>Nuage de tags</span>
|
||||
</a>
|
||||
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}" class="sidebar-link{if="$pageName=='picwall'"} active{/if}">
|
||||
<i class="mdi mdi-image-multiple-outline"></i>
|
||||
<span>Picture Wall</span>
|
||||
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&' )"}" class="sidebar-link{if="$pageName=='picwall'"} active{/if}" aria-label="Mur d'images">
|
||||
<i class="mdi mdi-image-multiple-outline" aria-hidden="true"></i>
|
||||
<span>Mur d'images</span>
|
||||
</a>
|
||||
<a href="{$base_path}/daily" class="sidebar-link{if="$pageName=='daily'"} active{/if}">
|
||||
<i class="mdi mdi-calendar-today"></i>
|
||||
<span>Daily</span>
|
||||
<a href="{$base_path}/daily" class="sidebar-link{if="$pageName=='daily'"} active{/if}"
|
||||
aria-label="Vue quotidienne">
|
||||
<i class="mdi mdi-calendar-today" aria-hidden="true"></i>
|
||||
<span>Quotidien</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=todo" class="sidebar-link{if="isset($search_tags) && $search_tags == 'todo'"} active{/if}">
|
||||
<i class="mdi mdi-check-circle-outline"></i>
|
||||
<span>Mes Tâches</span>
|
||||
<a href="{$base_path}/?searchtags=todo" class="sidebar-link{if="isset($search_tags)&&$search_tags=='todo'"} active{/if}" aria-label="Mes tâches">
|
||||
<i class="mdi mdi-check-circle-outline" aria-hidden="true"></i>
|
||||
<span>Mes tâches</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=note" class="sidebar-link{if="isset($search_tags) && $search_tags == 'note'"} active{/if}">
|
||||
<i class="mdi mdi-note-text-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=note" class="sidebar-link{if="isset($search_tags)&&$search_tags=='note'"} active{/if}" aria-label="Notes">
|
||||
<i class="mdi mdi-note-text-outline" aria-hidden="true"></i>
|
||||
<span>Notes</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{if="$is_logged_in"}
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-title">Admin</div>
|
||||
<a href="{$base_path}/admin/tools" class="sidebar-link{if="$pageName == 'tools'"} active{/if}">
|
||||
<i class="mdi mdi-tools"></i>
|
||||
<span>Tools</span>
|
||||
<div class="sidebar-section-title">Administration</div>
|
||||
<a href="{$base_path}/admin/tools" class="sidebar-link{if="$pageName=='tools'"} active{/if}"
|
||||
aria-label="Outils">
|
||||
<i class="mdi mdi-tools" aria-hidden="true"></i>
|
||||
<span>Outils</span>
|
||||
</a>
|
||||
<a href="{$base_path}/admin/configure" class="sidebar-link{if="$pageName == 'configure'"} active{/if}">
|
||||
<i class="mdi mdi-cog-outline"></i>
|
||||
<span>Settings</span>
|
||||
<a href="{$base_path}/admin/configure" class="sidebar-link{if="$pageName=='configure'"} active{/if}"
|
||||
aria-label="Paramètres">
|
||||
<i class="mdi mdi-cog-outline" aria-hidden="true"></i>
|
||||
<span>Paramètres</span>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
@ -64,19 +70,19 @@
|
||||
|
||||
<div class="sidebar-footer">
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/add-shaare" class="sidebar-add-btn">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
<span>New Bookmark</span>
|
||||
<a href="{$base_path}/admin/add-shaare" class="sidebar-add-btn" aria-label="Nouveau bookmark">
|
||||
<i class="mdi mdi-plus" aria-hidden="true"></i>
|
||||
<span>Nouveau bookmark</span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="theme-toggle-wrapper">
|
||||
<span class="theme-toggle-label">
|
||||
<i class="mdi mdi-weather-sunny" id="theme-icon-light"></i>
|
||||
<span>Light Mode</span>
|
||||
<i class="mdi mdi-weather-sunny" id="theme-icon-light" aria-hidden="true"></i>
|
||||
<span>Mode clair</span>
|
||||
</span>
|
||||
<label class="theme-switch">
|
||||
<input type="checkbox" id="theme-toggle-checkbox">
|
||||
<label class="theme-switch" aria-label="Basculer le mode sombre">
|
||||
<input type="checkbox" id="theme-toggle-checkbox" aria-label="Activer/désactiver le mode sombre">
|
||||
<span class="theme-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
@ -84,7 +90,7 @@
|
||||
</aside>
|
||||
|
||||
<!-- Sidebar Overlay for Mobile -->
|
||||
<div class="sidebar-overlay" id="sidebar-overlay"></div>
|
||||
<div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
|
||||
|
||||
<!-- Main Content Wrapper -->
|
||||
<div class="main-content">
|
||||
@ -92,42 +98,45 @@
|
||||
<header class="header-main">
|
||||
<div class="header-inner">
|
||||
<div class="header-left">
|
||||
<button class="mobile-menu-btn" id="mobile-menu-btn" title="Toggle Menu">
|
||||
<i class="mdi mdi-menu"></i>
|
||||
<button class="mobile-menu-btn" id="mobile-menu-btn" aria-label="Ouvrir le menu" aria-expanded="false"
|
||||
aria-controls="sidebar">
|
||||
<i class="mdi mdi-menu" aria-hidden="true"></i>
|
||||
</button>
|
||||
<a href="{$titleLink}" class="header-brand">{$shaarlititle}</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
<nav class="header-nav">
|
||||
<a href="{$base_path}/" class="header-nav-link{if=" $pageName=='linklist'"} active{/if}">
|
||||
<i class="mdi mdi-home-outline"></i>
|
||||
<span>HOME</span>
|
||||
<nav class="header-nav" aria-label="Navigation principale">
|
||||
<a href="{$base_path}/" class="header-nav-link{if="$pageName=='linklist'"} active{/if}"
|
||||
aria-label="Accueil">
|
||||
<i class="mdi mdi-home-outline" aria-hidden="true"></i>
|
||||
<span>ACCUEIL</span>
|
||||
</a>
|
||||
<a href="{$base_path}/tags/cloud" class="header-nav-link{if=" $pageName=='tagcloud'"} active{/if}">
|
||||
<i class="mdi mdi-tag-multiple"></i>
|
||||
<span>TAG CLOUD</span>
|
||||
<a href="{$base_path}/tags/cloud" class="header-nav-link{if="$pageName=='tagcloud'"} active{/if}"
|
||||
aria-label="Nuage de tags">
|
||||
<i class="mdi mdi-tag-multiple" aria-hidden="true"></i>
|
||||
<span>TAGS</span>
|
||||
</a>
|
||||
<a href="{$base_path}/picture-wall?{function=" ltrim($searchcrits, '&' )"}" class="header-nav-link{if="
|
||||
$pageName=='picwall'"} active{/if}">
|
||||
<i class="mdi mdi-image-multiple"></i>
|
||||
<span>PICTURE WALL</span>
|
||||
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&' )"}" class="header-nav-link{if="$pageName=='picwall'"} active{/if}" aria-label="Mur d'images">
|
||||
<i class="mdi mdi-image-multiple" aria-hidden="true"></i>
|
||||
<span>IMAGES</span>
|
||||
</a>
|
||||
<a href="{$base_path}/daily" class="header-nav-link{if=" $pageName=='daily'"} active{/if}">
|
||||
<i class="mdi mdi-calendar"></i>
|
||||
<span>DAILY</span>
|
||||
<a href="{$base_path}/daily" class="header-nav-link{if="$pageName=='daily'"} active{/if}"
|
||||
aria-label="Vue quotidienne">
|
||||
<i class="mdi mdi-calendar" aria-hidden="true"></i>
|
||||
<span>QUOTIDIEN</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=todo" class="header-nav-link{if="isset($search_tags) && $search_tags == 'todo'"} active{/if}">
|
||||
<i class="mdi mdi-check-circle-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=todo" class="header-nav-link{if="isset($search_tags)&&$search_tags=='todo'"} active{/if}" aria-label="Mes tâches">
|
||||
<i class="mdi mdi-check-circle-outline" aria-hidden="true"></i>
|
||||
<span>TÂCHES</span>
|
||||
</a>
|
||||
<a href="{$base_path}/?searchtags=note" class="header-nav-link{if="isset($search_tags) && $search_tags == 'note'"} active{/if}">
|
||||
<i class="mdi mdi-note-text-outline"></i>
|
||||
<a href="{$base_path}/?searchtags=note" class="header-nav-link{if="isset($search_tags)&&$search_tags=='note'"} active{/if}" aria-label="Notes">
|
||||
<i class="mdi mdi-note-text-outline" aria-hidden="true"></i>
|
||||
<span>NOTES</span>
|
||||
</a>
|
||||
<button class="header-nav-link" id="search-toggle-btn" title="Search (Press S)">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
<span>SEARCH</span>
|
||||
<button class="header-nav-link" id="search-toggle-btn" aria-label="Rechercher (raccourci S)">
|
||||
<i class="mdi mdi-magnify" aria-hidden="true"></i>
|
||||
<span>RECHERCHE</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
@ -135,53 +144,55 @@
|
||||
<div class="header-actions">
|
||||
<!-- Filter Button -->
|
||||
<div class="filter-dropdown" id="filter-dropdown">
|
||||
<button class="header-action-btn" id="filter-toggle-btn" title="Filters">
|
||||
<i class="mdi mdi-filter-variant"></i>
|
||||
<button class="header-action-btn" id="filter-toggle-btn" aria-label="Filtres" aria-expanded="false"
|
||||
aria-controls="filter-panel">
|
||||
<i class="mdi mdi-filter-variant" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<!-- Filter Panel -->
|
||||
<div class="filter-panel" id="filter-panel">
|
||||
<div class="filter-panel" id="filter-panel" role="dialog" aria-label="Panneau de filtres"
|
||||
aria-hidden="true">
|
||||
<div class="filter-header">
|
||||
<span class="filter-title">Filters</span>
|
||||
<button class="filter-close" id="filter-close-btn">
|
||||
<i class="mdi mdi-close"></i>
|
||||
<span class="filter-title">Filtres</span>
|
||||
<button class="filter-close" id="filter-close-btn" aria-label="Fermer les filtres">
|
||||
<i class="mdi mdi-close" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-body">
|
||||
<div class="filter-section">
|
||||
<div class="filter-section-title">Links Per Page</div>
|
||||
<a href="{$base_path}/links-per-page?nb=20" class="filter-option">20 links</a>
|
||||
<a href="{$base_path}/links-per-page?nb=50" class="filter-option">50 links</a>
|
||||
<a href="{$base_path}/links-per-page?nb=100" class="filter-option">100 links</a>
|
||||
<div class="filter-section-title">Liens par page</div>
|
||||
<a href="{$base_path}/links-per-page?nb=20" class="filter-option">20 liens</a>
|
||||
<a href="{$base_path}/links-per-page?nb=50" class="filter-option">50 liens</a>
|
||||
<a href="{$base_path}/links-per-page?nb=100" class="filter-option">100 liens</a>
|
||||
</div>
|
||||
<div class="filter-section">
|
||||
<div class="filter-section-title">Custom value</div>
|
||||
<div class="filter-section-title">Valeur personnalisée</div>
|
||||
<form method="GET" action="{$base_path}/">
|
||||
<input type="number" name="nb" class="filter-input" placeholder="20" min="1"
|
||||
max="500">
|
||||
max="500" aria-label="Nombre de liens par page">
|
||||
</form>
|
||||
</div>
|
||||
{if="$is_logged_in"}
|
||||
<div class="filter-section">
|
||||
<div class="filter-section-title">Filters</div>
|
||||
<div class="filter-section-title">Filtres de visibilité</div>
|
||||
<div class="filter-toggle-row">
|
||||
<span class="filter-toggle-label">Only private links</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filter-private">
|
||||
<span class="filter-toggle-label">Liens privés uniquement</span>
|
||||
<label class="toggle-switch" aria-label="Filtrer les liens privés">
|
||||
<input type="checkbox" id="filter-private" aria-label="Liens privés uniquement">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="filter-toggle-row">
|
||||
<span class="filter-toggle-label">Only public links</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filter-public">
|
||||
<span class="filter-toggle-label">Liens publics uniquement</span>
|
||||
<label class="toggle-switch" aria-label="Filtrer les liens publics">
|
||||
<input type="checkbox" id="filter-public" aria-label="Liens publics uniquement">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="filter-toggle-row">
|
||||
<span class="filter-toggle-label">Untagged links</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="filter-untagged">
|
||||
<span class="filter-toggle-label">Liens sans tag</span>
|
||||
<label class="toggle-switch" aria-label="Filtrer les liens sans tag">
|
||||
<input type="checkbox" id="filter-untagged" aria-label="Liens sans tag">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
@ -193,14 +204,15 @@
|
||||
|
||||
{if="$is_logged_in"}
|
||||
<!-- Multi-select Toggle -->
|
||||
<button class="header-action-btn" id="select-mode-btn" title="Multi-select">
|
||||
<i class="mdi mdi-checkbox-multiple-marked-outline"></i>
|
||||
<button class="header-action-btn" id="select-mode-btn" aria-label="Sélection multiple"
|
||||
aria-pressed="false">
|
||||
<i class="mdi mdi-checkbox-multiple-marked-outline" aria-hidden="true"></i>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- RSS Feed -->
|
||||
<a href="{$base_path}/feed/rss" class="header-action-btn" title="RSS Feed">
|
||||
<i class="mdi mdi-rss"></i>
|
||||
<a href="{$base_path}/feed/rss" class="header-action-btn" aria-label="Flux RSS">
|
||||
<i class="mdi mdi-rss" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
<!-- Plugins Support -->
|
||||
@ -211,15 +223,15 @@
|
||||
{/if}
|
||||
|
||||
{if="$is_logged_in"}
|
||||
<a href="{$base_path}/admin/tools" class="header-action-btn" title="Tools">
|
||||
<i class="mdi mdi-cog-outline"></i>
|
||||
<a href="{$base_path}/admin/tools" class="header-action-btn" aria-label="Outils">
|
||||
<i class="mdi mdi-cog-outline" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a href="{$base_path}/admin/logout" class="header-action-btn" title="Logout">
|
||||
<i class="mdi mdi-logout-variant"></i>
|
||||
<a href="{$base_path}/admin/logout" class="header-action-btn" aria-label="Déconnexion">
|
||||
<i class="mdi mdi-logout-variant" aria-hidden="true"></i>
|
||||
</a>
|
||||
{else}
|
||||
<a href="{$base_path}/login" class="header-action-btn" title="Login">
|
||||
<i class="mdi mdi-login-variant"></i>
|
||||
<a href="{$base_path}/login" class="header-action-btn" aria-label="Connexion">
|
||||
<i class="mdi mdi-login-variant" aria-hidden="true"></i>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
@ -232,8 +244,7 @@
|
||||
<form method="GET" action="{$base_path}/" id="search-form">
|
||||
<div class="search-modal-header">
|
||||
<input type="text" name="searchterm" class="search-modal-input" id="search-modal-input"
|
||||
placeholder="Type to search..." autocomplete="off" value="{if="
|
||||
isset($search_term)"}{$search_term}{/if}">
|
||||
placeholder="Type to search..." autocomplete="off" value="{if="isset($search_term)"}{$search_term}{/if}">
|
||||
<div class="search-modal-actions">
|
||||
<button type="button" class="search-pill-btn search-pill-tags" id="search-tags-btn">
|
||||
<i class="mdi mdi-tag-outline"></i>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user