Skip to content

Commit 9ee3920

Browse files
Eta06Eta06
committed
Some serious UI improvements with new Haptic Feedback support for better user experience.
1 parent 833736d commit 9ee3920

File tree

6 files changed

+156
-15
lines changed

6 files changed

+156
-15
lines changed

‎main.py

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ def set_language():
3535
def index():
3636
if language == "":
3737
return render_template("language.html", version=version, language=language, author=author)
38-
return render_template("index.html", version=version, language=language, author=author)
38+
print(language_files)
39+
return render_template("index.html", version=version, language=language, author=author, language_files=language_files)
3940

4041

4142
@app.route("/status")

‎templates/index.html

+121-9
Original file line numberDiff line numberDiff line change
@@ -119,24 +119,136 @@
119119
color: #FFFFFF
120120

121121
}
122+
.tabs {
123+
display: flex;
124+
justify-content: space-around;
125+
margin-bottom: 20px;
126+
background-color: #FFFFFF;
127+
width: 80%;
128+
border-bottom-left-radius: 20px;
129+
border-bottom-right-radius: 20px;
130+
}
131+
132+
.tab {
133+
padding: 10px 20px;
134+
border: 1px solid #ffffff;
135+
border-bottom: none;
136+
background-color: #ffffff;
137+
cursor: pointer;
138+
font-weight: bold;
139+
transition: 0.4s;
140+
}
141+
142+
.tab.active {
143+
background-color: #f1f1f1;
144+
border-top: 4px solid #F25D5D; /* Match accent color */
145+
transition: 0.4s;
146+
}
147+
148+
.tab-content {
149+
display: none;
150+
}
151+
152+
.tab-content.active {
153+
display: block;
154+
}
155+
156+
.footer-tabs {
157+
display: flex;
158+
justify-content: space-around;
159+
margin-top: 10px;
160+
}
161+
162+
.footer-tab {
163+
padding: 10px 10px;
164+
border: none;
165+
background-color: #f5f5f5;
166+
cursor: pointer;
167+
font-weight: bold;
168+
border-radius: 15px;
169+
transition: 0.4s;
170+
}
171+
172+
.footer-tab.active {
173+
background-color: #fff;
174+
border-bottom: 5px solid #F25D5D; /* Match accent color */
175+
transition: 0.4s;
176+
}
122177
</style>
123178
</head>
124179
<body>
125180
<center>
126181
<div class="header-div">
127182
<img class="main-logo" src="{{ url_for('static', filename='images/icon.png') }}" alt="LockDown">
128-
<h2>LockDown - Web UI</h2>
183+
<h2>LockDown Web UI</h2>
129184
</div>
130185
</center>
131186
<center class="main-screen">
132-
<div class="main-div">
187+
<div class="main-div">
188+
<div class="tabs">
189+
<div class="tab active" data-tab="home">{{ language_files.home }}</div>
190+
<div class="tab" data-tab="modules">{{ language_files.modules }}</div>
191+
<div class="tab" data-tab="settings">{{ language_files.settings }}</div>
192+
</div>
133193

134-
</div>
135-
</center>
136-
<center>
137-
<div class="footer-div">
138-
<p class="version-text">Version: {{ version }}</p>
139-
</div>
140-
</center>
194+
<div class="tab-content active" id="home">
195+
</div>
196+
<div class="tab-content" id="modules">
197+
</div>
198+
<div class="tab-content" id="settings">
199+
</div>
200+
</div>
201+
</center>
202+
<center>
203+
<div class="footer-div" style="right: -10px; left:-10px;">
204+
<p class="version-text">{{ language_files.version }} {{ version }}</p>
205+
<div class="footer-tabs">
206+
<div class="footer-tab" data-tab="about">{{ language_files.about }}</div>
207+
<!--- github icon button -->
208+
<div class="footer-tab" data-tab="github" style="padding: 0; height: 38px; border-radius: 20px; background-color: transparent"><a href="https://github.com/Eta06" target="_blank">
209+
<img src="{{ url_for('static', filename='images/github.png') }}" alt="GitHub" width="38" height="38" style="filter: invert(100%)">
210+
</a>
211+
</div>
212+
<div class="footer-tab" data-tab="contact">{{ language_files.contact }}</div>
213+
</div>
214+
215+
</div>
216+
</center>
217+
<script>
218+
function clearActiveTabs() {
219+
tabs.forEach(tab => tab.classList.remove('active'));
220+
footerTabs.forEach(footerTab => footerTab.classList.remove('active'));
221+
}
222+
223+
const tabs = document.querySelectorAll('.tab');
224+
tabs.forEach(tab => {
225+
tab.addEventListener('click', () => {
226+
clearActiveTabs();
227+
tabs.forEach(tab => tab.classList.remove('active'));
228+
tab.classList.add('active');
229+
console.log(tab.dataset.tab);
230+
navigator.vibrate([10, 30, 10]);
231+
const tabId = tab.dataset.tab;
232+
const tabContents = document.querySelectorAll('.tab-content');
233+
tabContents.forEach(content => content.classList.remove('active'));
234+
document.getElementById(tabId).classList.add('active');
235+
});
236+
});
237+
238+
const footerTabs = document.querySelectorAll('.footer-tab');
239+
footerTabs.forEach(footerTab => {
240+
footerTab.addEventListener('click', () => {
241+
clearActiveTabs();
242+
footerTabs.forEach(footerTab => footerTab.classList.remove('active'));
243+
footerTab.classList.add('active');
244+
console.log(footerTab.dataset.tab);
245+
navigator.vibrate([10, 40, 10]);
246+
const footerTabId = footerTab.dataset.tab;
247+
const footerTabContents = document.querySelectorAll('.footer-tab-content');
248+
footerTabContents.forEach(content => content.classList.remove('active'));
249+
document.getElementById(footerTabId).classList.add('active');
250+
});
251+
});
252+
</script>
141253
</body>
142254
</html>

‎translations/en.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
{
2-
"welcome": "Welcome back!"
2+
"welcome": "Welcome back!",
3+
"version": "Version: ",
4+
"home": "Home",
5+
"settings": "Settings",
6+
"modules": "Modules",
7+
"about": "About",
8+
"contact": "Contact",
9+
"vibration": "Vibration"
310
}

‎translations/es.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
{
2-
"welcome": "¡Bienvenido de nuevo!"
2+
"welcome": "¡Bienvenido de nuevo!",
3+
"version": "Versión: ",
4+
"home": "Inicio",
5+
"settings": "Configuración",
6+
"modules": "Módulos",
7+
"about": "Acerca de",
8+
"contact": "Contacto",
9+
"vibration": "Vibración"
310
}

‎translations/ru.json

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
{
2-
"welcome": "Добро пожаловать обратно!"
3-
}
2+
"welcome": "С возвращением!",
3+
"version": "Версия: ",
4+
"home": "Главная",
5+
"settings": "Настройки",
6+
"modules": "Модули",
7+
"about": "О программе",
8+
"contact": "Контакты",
9+
"vibration": "Вибрация"
10+
}

‎translations/tr.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
{
2-
"welcome": "Yeniden hoşgeldin!"
2+
"welcome": "Yeniden hoşgeldin!",
3+
"version": "Versiyon: ",
4+
"home": "Ana Sayfa",
5+
"settings": "Ayarlar",
6+
"modules": "Modüller",
7+
"about": "Hakkında",
8+
"contact": "İletişim",
9+
"vibration": "Titreşim"
310
}

0 commit comments

Comments
 (0)