Add sidebar drawer icons and favicon

This commit is contained in:
2026-08-05 13:31:14 +02:00
parent 41a562cd6f
commit 8ecbc6655f
7 changed files with 69 additions and 16 deletions
+23 -14
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Catalog Maker</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="stylesheet" href="/styles.css" />
<script src="/app.js" type="module"></script>
</head>
@@ -17,17 +18,25 @@
<button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button>
</div>
<div class="sidebar-section parser-actions" aria-label="Parser actions">
<button class="action-button" id="findSourcesButton" type="button">Find sources</button>
<button class="action-button" id="getPicturesButton" type="button">Get pictures</button>
<button class="action-button" type="button">Get features</button>
<button class="action-button" type="button">Get texts</button>
<button class="action-button" type="button">Preview parsed data</button>
<button class="action-button" type="button" disabled>Apply / Save</button>
<button class="drawer-trigger" id="parserDrawerToggle" type="button" aria-expanded="true" aria-controls="parserDrawer">
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#sliders"></use></svg>
<span>Parser tools</span>
<span class="drawer-chevron" aria-hidden="true"></span>
</button>
<div class="sidebar-section parser-drawer" id="parserDrawer">
<div class="parser-actions" aria-label="Parser actions">
<button class="action-button" id="findSourcesButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#search"></use></svg><span>Find sources</span></button>
<button class="action-button" id="getPicturesButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#image"></use></svg><span>Get pictures</span></button>
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#sliders"></use></svg><span>Get features</span></button>
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#text"></use></svg><span>Get texts</span></button>
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#eye"></use></svg><span>Preview parsed data</span></button>
<button class="action-button" type="button" disabled><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#save"></use></svg><span>Apply / Save</span></button>
</div>
</div>
<button class="action-button" id="loadProductButton" type="button">Get product info - 00</button>
<button class="action-button" type="button">Creat combin. - 02</button>
<button class="action-button" id="loadProductButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#info"></use></svg><span>Get product info - 00</span></button>
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg><span>Creat combin. - 02</span></button>
<input class="input-like" id="scanInput" aria-label="Scan EAN" placeholder="Scan EAN" />
@@ -53,15 +62,15 @@
</details>
</div>
<button class="action-button primary" type="button">Show menu (20)</button>
<button class="action-button" type="button">Scraper - 03</button>
<button class="action-button" type="button">BG remover - 04</button>
<button class="action-button primary" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#menu"></use></svg><span>Show menu (20)</span></button>
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#scan"></use></svg><span>Scraper - 03</span></button>
<button class="action-button" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#erase"></use></svg><span>BG remover - 04</span></button>
<div class="sidebar-footer">
<div class="app-status">
<span class="safe-mode" id="databaseStatus">DB read-only</span>
</div>
<button class="action-button" id="themeToggle" type="button" aria-pressed="false">Dark theme</button>
<button class="action-button" id="settingsButton" type="button">Settings</button>
<button class="action-button" id="themeToggle" type="button" aria-pressed="false"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#moon"></use></svg><span>Dark theme</span></button>
<button class="action-button" id="settingsButton" type="button"><svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#settings"></use></svg><span>Settings</span></button>
</div>
</aside>