ubunteroz
0dd0dd0224
- Add "Maybe Related" section showing icons with similar names - Find related icons by base name matching (e.g., time-check → time-delete) - Add icons to modal section labels (settings-sliders, link) - Style related icons grid with hover effects Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
171 lines
7.6 KiB
HTML
171 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Flaticon Explorer</title>
|
|
<link rel="stylesheet" href="fonts/flaticon.css">
|
|
<link rel="stylesheet" href="explorer.css">
|
|
<script>try{document.documentElement.dataset.theme=localStorage.getItem('theme')??(matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light')}catch{}</script>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-inner">
|
|
<div class="header-top">
|
|
<div class="logo-section">
|
|
<div class="logo-icon">
|
|
<span class="fi fi-rs-sparkles"></span>
|
|
</div>
|
|
<div>
|
|
<h1>Flaticon Explorer</h1>
|
|
<div class="header-subtitle">Just a little place to find nice icons</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="theme-toggle" id="themeToggle" title="Toggle theme">
|
|
<span class="fi fi-rs-sun"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<div class="search-container">
|
|
<div class="search-box">
|
|
<span class="fi fi-rs-search search-icon"></span>
|
|
<input type="text" class="search-input" id="searchInput" placeholder="Search icons by name or tags...">
|
|
<span class="search-shortcut">/</span>
|
|
</div>
|
|
</div>
|
|
<div class="filter-section">
|
|
<span class="filter-label"><span class="fi fi-rs-settings-sliders"></span> Weight</span>
|
|
<div class="filter-group" id="weightFilter">
|
|
<button class="filter-btn active" data-weight="regular">Regular</button>
|
|
<button class="filter-btn" data-weight="bold">Bold</button>
|
|
<button class="filter-btn" data-weight="solid">Solid</button>
|
|
<button class="filter-btn" data-weight="thin">Thin</button>
|
|
<button class="filter-btn" data-weight="duotone">Duotone</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-section">
|
|
<span class="filter-label"><span class="fi fi-rs-square"></span> Corner</span>
|
|
<div class="filter-group" id="cornerFilter">
|
|
<button class="filter-btn active" data-corner="straight">Straight</button>
|
|
<button class="filter-btn" data-corner="rounded">Rounded</button>
|
|
<button class="filter-btn" data-corner="chubby">Chubby</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-section">
|
|
<span class="filter-label"><span class="fi fi-rs-grid"></span> Type</span>
|
|
<div class="filter-group" id="typeFilter">
|
|
<button class="filter-btn active" data-type="interface">Interface</button>
|
|
<button class="filter-btn" data-type="brands">Brands</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="size-control">
|
|
<span class="filter-label"><span class="fi fi-rs-expand"></span></span>
|
|
<input type="range" class="size-slider" id="sizeSlider" min="20" max="48" value="32">
|
|
<span class="size-value" id="sizeValue">32px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<div class="loading" id="loadingState">
|
|
<div class="loading-spinner"></div>
|
|
<p>Loading icon library...</p>
|
|
</div>
|
|
|
|
<div class="icon-grid" id="iconGrid" style="display:none"></div>
|
|
|
|
<div class="empty" id="emptyState" style="display:none">
|
|
<div class="empty-icon"><span class="fi fi-rs-search"></span></div>
|
|
<h3>No icons found</h3>
|
|
<p>Try adjusting your search or filters</p>
|
|
</div>
|
|
|
|
<div class="pagination" id="pagination" style="display:none">
|
|
<button class="page-btn" id="prevBtn">
|
|
<span class="fi fi-rs-angle-left"></span> Prev
|
|
</button>
|
|
<span class="page-info" id="pageInfo">Page 1 of 1</span>
|
|
<button class="page-btn" id="nextBtn">
|
|
Next <span class="fi fi-rs-angle-right"></span>
|
|
</button>
|
|
<div class="page-jump">
|
|
<input type="number" class="page-input" id="pageInput" min="1" placeholder="Go">
|
|
<button class="page-btn" id="goBtn">Go</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="toast" id="toast">
|
|
<span class="fi fi-rs-clipboard-check"></span>
|
|
<span id="toastMessage">Copied!</span>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="modal-icon-wrapper">
|
|
<span class="modal-icon fi" id="modalIcon"></span>
|
|
</div>
|
|
<div class="modal-info">
|
|
<div class="modal-title" id="modalTitle"></div>
|
|
<div class="modal-subtitle" id="modalSubtitle"></div>
|
|
</div>
|
|
<div class="modal-actions-inline">
|
|
<button class="copy-btn-inline" id="modalCopyBtn" title="Copy HTML">
|
|
<span class="fi fi-rs-file-code"></span>
|
|
<span class="copy-label">HTML</span>
|
|
</button>
|
|
<button class="copy-btn-inline" id="modalCopyCssBtn" title="Copy CSS class">
|
|
<span class="fi fi-rs-palette"></span>
|
|
<span class="copy-label">CSS</span>
|
|
</button>
|
|
<button class="copy-btn-inline" id="modalCopyNameBtn" title="Copy icon name">
|
|
<span class="fi fi-rs-copy"></span>
|
|
<span class="copy-label">Name</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-content">
|
|
<div class="modal-section">
|
|
<div class="modal-label"><span class="fi fi-rs-settings-sliders"></span> All Variations</div>
|
|
<div class="modal-variations" id="modalVariations"></div>
|
|
</div>
|
|
|
|
<div class="modal-section" id="relatedSection" style="display:none">
|
|
<div class="modal-label"><span class="fi fi-rs-link"></span> Maybe Related</div>
|
|
<div class="related-icons" id="relatedIcons"></div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button class="modal-btn" id="modalClose">
|
|
<span class="fi fi-rs-cross"></span> Close <span class="btn-key">Esc</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shortcuts-help">
|
|
<kbd>/</kbd> Search <span></span>
|
|
<kbd>Esc</kbd> Close <span></span>
|
|
<kbd>←</kbd><kbd>→</kbd> Navigate
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<span id="loadingIndicator" class="loading-indicator" style="display:none"></span>
|
|
<span><strong id="visibleCount">0</strong> of <strong id="totalCount">0</strong></span>
|
|
</div>
|
|
|
|
<script src="data/all_icons.js"></script>
|
|
<script src="explorer.js"></script>
|
|
</body>
|
|
</html>
|