GitHub/TwitchDropsMiner
1
0
Fork 0
mirror of https://github.com/rangermix/TwitchDropsMiner.git synced 2026-05-26 07:08:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move i18n language selector to top-right corner of banner area

Browse Source 
- Relocated language dropdown from Settings tab to header banner
- Added new header-top layout with flexbox to position title and controls
- Styled language selector for better integration in header
- Removed duplicate language selector from Settings tab
- Language selector now appears in top-right corner for easier access

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
2025-10-23 10:28:44 +00:00
parent 3e38e9eba1
commit 89bf863d46
2 changed files with 58 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/index.html
View File

@@ -10,7 +10,17 @@
<body>
<div class="container">
<header>
<h1>🎮 Twitch Drops Miner</h1>
<div class="header-top">
<h1>🎮 Twitch Drops Miner</h1>
<div class="header-controls">
<label for="language" class="language-selector">
<span>Language:</span>
<select id="language">
<option value="en">English</option>
</select>
</label>
</div>
</div>
<div class="status-bar">
<span id="status-text">Initializing...</span>
<span id="manual-mode-badge" class="mode-badge hidden" title="Manual mode active - watching specific game">
@@ -102,12 +112,6 @@
<label>
<input type="checkbox" id="dark-mode"> Dark Mode
</label>
<label>
Language:
<select id="language">
<option value="en">English</option>
</select>
</label>
<label>
Connection Quality:
<input type="number" id="connection-quality" min="1" max="6" value="1">

48
web/static/styles.css
View File

@@ -51,11 +51,57 @@ header {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header h1 {
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
header h1 {
margin: 0;
color: var(--accent-color);
}
.header-controls {
display: flex;
align-items: center;
gap: 15px;
}
.language-selector {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-primary);
}
.language-selector span {
font-weight: 500;
}
.language-selector select {
padding: 6px 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s;
}
.language-selector select:hover {
border-color: var(--accent-color);
}
.language-selector select:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.2);
}
.status-bar {
display: flex;
justify-content: space-between;