295 lines
15 KiB
HTML
295 lines
15 KiB
HTML
<!--
|
|
Bookmarklet detection logic
|
|
{$isCalledFromBookmarklet=isset($_GET['source']) && $_GET['source'] == 'bookmarklet'}
|
|
-->
|
|
{if="$isCalledFromBookmarklet"}
|
|
{ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
|
|
{else}
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar" aria-label="Navigation principale">
|
|
<div class="sidebar-header">
|
|
<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" 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}"
|
|
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}" 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}"
|
|
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}" 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}"
|
|
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}" 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}" 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">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}"
|
|
aria-label="Paramètres">
|
|
<i class="mdi mdi-cog-outline" aria-hidden="true"></i>
|
|
<span>Paramètres</span>
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
{if="$is_logged_in"}
|
|
<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" aria-hidden="true"></i>
|
|
<span>Mode clair</span>
|
|
</span>
|
|
<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>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Sidebar Overlay for Mobile -->
|
|
<div class="sidebar-overlay" id="sidebar-overlay" aria-hidden="true"></div>
|
|
|
|
<!-- Main Content Wrapper -->
|
|
<div class="main-content">
|
|
<!-- Top Header Bar -->
|
|
<header class="header-main">
|
|
<div class="header-inner">
|
|
<div class="header-left">
|
|
<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" 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}"
|
|
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}" 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}"
|
|
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}" 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}" 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" aria-label="Rechercher (raccourci S)">
|
|
<i class="mdi mdi-magnify" aria-hidden="true"></i>
|
|
<span>RECHERCHE</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Header Actions -->
|
|
<div class="header-actions">
|
|
<!-- Filter Button -->
|
|
<div class="filter-dropdown" id="filter-dropdown">
|
|
<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" role="dialog" aria-label="Panneau de filtres"
|
|
aria-hidden="true">
|
|
<div class="filter-header">
|
|
<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">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">Valeur personnalisée</div>
|
|
<form method="GET" action="{$base_path}/">
|
|
<input type="number" name="nb" class="filter-input" placeholder="20" min="1"
|
|
max="500" aria-label="Nombre de liens par page">
|
|
</form>
|
|
</div>
|
|
{if="$is_logged_in"}
|
|
<div class="filter-section">
|
|
<div class="filter-section-title">Filtres de visibilité</div>
|
|
<div class="filter-toggle-row">
|
|
<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">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">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>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{if="$is_logged_in"}
|
|
<!-- Multi-select Toggle -->
|
|
<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" aria-label="Flux RSS">
|
|
<i class="mdi mdi-rss" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
<!-- Plugins Support -->
|
|
{if="isset($plugins_header.buttons_toolbar)"}
|
|
{loop="$plugins_header.buttons_toolbar"}
|
|
{$value.html}
|
|
{/loop}
|
|
{/if}
|
|
|
|
{if="$is_logged_in"}
|
|
<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" 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" aria-label="Connexion">
|
|
<i class="mdi mdi-login-variant" aria-hidden="true"></i>
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Search Overlay (Spotlight Style) -->
|
|
<div class="search-overlay" id="search-overlay">
|
|
<div class="search-modal">
|
|
<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}">
|
|
<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>
|
|
<span>tags</span>
|
|
</button>
|
|
<button type="submit" class="search-pill-btn search-pill-search active" id="search-all-btn">
|
|
<i class="mdi mdi-magnify"></i>
|
|
<span>search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="search-separator"></div>
|
|
<div class="search-results" id="search-results">
|
|
<div class="search-results-empty">
|
|
<span class="search-results-hint">Start typing to see suggestions...</span>
|
|
</div>
|
|
</div>
|
|
<div class="search-footer">
|
|
<span class="search-footer-hint">
|
|
<kbd class="search-kbd">↑</kbd><kbd class="search-kbd">↓</kbd> to navigate
|
|
<kbd class="search-kbd">Enter</kbd> to select
|
|
<kbd class="search-kbd">ESC</kbd> to close
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Container -->
|
|
<div class="content-container">
|
|
<!-- Feedback Messages -->
|
|
{if="!empty($plugin_errors) && $is_logged_in"}
|
|
{loop="plugin_errors"}
|
|
<div class="alert alert-danger">{$value}</div>
|
|
{/loop}
|
|
{/if}
|
|
{if="!empty($global_errors)"}
|
|
{loop="global_errors"}
|
|
<div class="alert alert-danger">{$value}</div>
|
|
{/loop}
|
|
{/if}
|
|
{if="!empty($global_successes)"}
|
|
{loop="global_successes"}
|
|
<div class="alert alert-success">{$value}</div>
|
|
{/loop}
|
|
{/if}
|
|
{/if}
|