feat(style): voeg compacte zijbalk en weersectie toe
De CSS-stijlen zijn bijgewerkt om een nieuwe compacte zijbalk en een verbeterde weersectie te ondersteunen, met speciale aandacht voor responsiviteit en gebruikerservaring. De hadith-sectie is visueel gescheiden van andere inhoudselementen met aangepaste themakleuren voor betere leesbaarheid in zowel licht als donker modus. Er is ook een glasmorphisme-effect aan de weersectie toegevoegd voor een moderne uitstraling. Deze veranderingen verbeteren de gebruiksvriendelijkheid van de webapp door belangrijke informatie op een georganiseerde en duidelijke manier weer te geven.
This commit is contained in:
parent
ae78e9d368
commit
649cebf6ba
@ -146,6 +146,40 @@ body.settings-page {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Hadith sectie in linker overlay */
|
||||
.hadith-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2rem 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.hadith-section blockquote {
|
||||
font-style: italic;
|
||||
font-size: 1.8rem;
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-family: 'Cairo', Arial, sans-serif;
|
||||
line-height: 1.4;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.hadith-section blockquote footer {
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent);
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
font-family: 'Lato', Arial, sans-serif;
|
||||
text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.huidig-gebed {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
@ -303,6 +337,58 @@ blockquote footer {
|
||||
width: 100%;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
.right.compact-sidebar {
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
flex: unset;
|
||||
padding: 1.2rem;
|
||||
}
|
||||
.compact-sidebar .vertical-tijden {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
}
|
||||
.compact-sidebar .tijden-en-icoontjes {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.compact-sidebar .weather-section {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.compact-sidebar .weather-main {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.compact-sidebar .weather-details {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
.hadith-tijden-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.hadith-center {
|
||||
margin: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.hadith-center blockquote {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.vertical-tijden {
|
||||
flex-direction: row;
|
||||
min-width: unset;
|
||||
padding: 1.2rem 0 0 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.tijden-en-icoontjes {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.left {
|
||||
min-height: 40vh;
|
||||
}
|
||||
@ -318,9 +404,12 @@ blockquote footer {
|
||||
.right {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
blockquote {
|
||||
.hadith-section blockquote {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.hadith-section blockquote footer {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.gregorian-datum {
|
||||
font-size: 1.1rem;
|
||||
@ -333,6 +422,30 @@ blockquote footer {
|
||||
.hijri-datum-dutch {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Weer sectie links responsive */
|
||||
.weather-section-left {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-temp {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-desc {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-details {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-detail {
|
||||
font-size: 0.8rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.right.new-layout {
|
||||
@ -351,6 +464,25 @@ blockquote footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Compact sidebar voor index.html */
|
||||
.right.new-layout.compact-sidebar {
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
flex: 0 0 120px;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.compact-sidebar .vertical-tijden {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hadith-tijden-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -365,12 +497,16 @@ blockquote footer {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2.5rem 2rem 2.5rem 2.5rem;
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.hadith-center blockquote {
|
||||
font-size: 2.2rem;
|
||||
text-align: left;
|
||||
color: var(--text);
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
@ -381,7 +517,7 @@ blockquote footer {
|
||||
|
||||
.hadith-center blockquote footer {
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent);
|
||||
color: var(--primary-color);
|
||||
margin-top: 1.2rem;
|
||||
text-align: left;
|
||||
font-family: 'Lato', Arial, sans-serif;
|
||||
@ -442,35 +578,6 @@ blockquote footer {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hadith-tijden-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.vertical-tijden {
|
||||
flex-direction: row;
|
||||
min-width: unset;
|
||||
padding: 1.2rem 0 0 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.gebedstijden-verticaal {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
width: auto;
|
||||
margin: 0 1.5rem 0 0;
|
||||
}
|
||||
.gebedstijden-verticaal li {
|
||||
align-items: center;
|
||||
padding: 0 0.7rem;
|
||||
}
|
||||
.vertical-icoontjes {
|
||||
flex-direction: row;
|
||||
gap: 1.2rem;
|
||||
margin-top: 0;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tijden-en-icoontjes {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -579,6 +686,38 @@ blockquote footer {
|
||||
font-family: 'Cairo', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Weer sectie in compact sidebar */
|
||||
.compact-sidebar .weather-section {
|
||||
margin-top: 0;
|
||||
padding: 1rem 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.compact-sidebar .weather-main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.compact-sidebar .weather-temp {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.compact-sidebar .weather-desc {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.compact-sidebar .weather-details {
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.compact-sidebar .weather-detail {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.weather-info {
|
||||
text-align: left;
|
||||
}
|
||||
@ -955,3 +1094,71 @@ blockquote footer {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
html.light .hadith-center {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
html.dark .hadith-center {
|
||||
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Weer sectie in linker overlay */
|
||||
.weather-section-left {
|
||||
margin-top: 2rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
font-family: 'Cairo', Arial, sans-serif;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.weather-section-left .weather-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-temp {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
font-family: 'Cairo', sans-serif;
|
||||
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.weather-section-left .weather-desc {
|
||||
font-size: 1rem;
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-transform: capitalize;
|
||||
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.weather-section-left .weather-details {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 0.8rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding-top: 0.8rem;
|
||||
}
|
||||
|
||||
.weather-section-left .weather-detail {
|
||||
font-size: 0.9rem;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
@ -21,7 +21,23 @@
|
||||
<div class="hijri-datum-arabic">{{ date_info.hijri_arabic }}</div>
|
||||
<div class="hijri-datum-dutch">{{ date_info.hijri_dutch }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Weer sectie naast de tijd -->
|
||||
<div class="weather-section-left">
|
||||
<div class="weather-info">
|
||||
<div class="weather-main">
|
||||
<span class="weather-temp">{{ weather.temperature }}°C</span>
|
||||
<span class="weather-desc">{{ weather.description }}</span>
|
||||
</div>
|
||||
<div class="weather-details">
|
||||
<span class="weather-detail">Voelt als {{ weather.feels_like }}°C</span>
|
||||
<span class="weather-detail">Vochtigheid {{ weather.humidity }}%</span>
|
||||
<span class="weather-detail">Wind {{ weather.wind_speed }} km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="huidig-gebed">
|
||||
<div class="naam">{{ next_name }}</div>
|
||||
<div id="countdown">--:--:--</div>
|
||||
@ -29,14 +45,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zijmenu met hadith sectie -->
|
||||
<div class="right new-layout">
|
||||
<div class="hadith-tijden-row">
|
||||
<!-- Hadith sectie met witte achtergrond -->
|
||||
<div class="hadith-center">
|
||||
<blockquote>
|
||||
"{{ hadith.text }}"
|
||||
<footer>— {{ hadith.bron }}</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!-- Compact zijmenu -->
|
||||
<div class="vertical-tijden">
|
||||
<ul class="tijden-en-icoontjes">
|
||||
{% for naam, tijd in gebedstijden.items() %}
|
||||
@ -54,21 +74,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weer sectie -->
|
||||
<div class="weather-section">
|
||||
<div class="weather-info">
|
||||
<div class="weather-main">
|
||||
<span class="weather-temp">{{ weather.temperature }}°C</span>
|
||||
<span class="weather-desc">{{ weather.description }}</span>
|
||||
</div>
|
||||
<div class="weather-details">
|
||||
<span class="weather-detail">Voelt als {{ weather.feels_like }}°C</span>
|
||||
<span class="weather-detail">Vochtigheid {{ weather.humidity }}%</span>
|
||||
<span class="weather-detail">Wind {{ weather.wind_speed }} km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -110,11 +115,11 @@
|
||||
fetch('/api/weather')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.querySelector('.weather-temp').textContent = data.temperature + '°C';
|
||||
document.querySelector('.weather-desc').textContent = data.description;
|
||||
document.querySelector('.weather-detail:nth-child(1)').textContent = `Voelt als ${data.feels_like}°C`;
|
||||
document.querySelector('.weather-detail:nth-child(2)').textContent = `Vochtigheid ${data.humidity}%`;
|
||||
document.querySelector('.weather-detail:nth-child(3)').textContent = `Wind ${data.wind_speed} km/h`;
|
||||
document.querySelector('.weather-section-left .weather-temp').textContent = data.temperature + '°C';
|
||||
document.querySelector('.weather-section-left .weather-desc').textContent = data.description;
|
||||
document.querySelector('.weather-section-left .weather-detail:nth-child(1)').textContent = `Voelt als ${data.feels_like}°C`;
|
||||
document.querySelector('.weather-section-left .weather-detail:nth-child(2)').textContent = `Vochtigheid ${data.humidity}%`;
|
||||
document.querySelector('.weather-section-left .weather-detail:nth-child(3)').textContent = `Wind ${data.wind_speed} km/h`;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('Fout bij bijwerken weerdata:', error);
|
||||
@ -126,8 +131,8 @@
|
||||
fetch('/api/hadith')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const hadithTextElement = document.querySelector('.hadith-center blockquote');
|
||||
const hadithFooterElement = document.querySelector('.hadith-center blockquote footer');
|
||||
const hadithTextElement = document.querySelector('.hadith-section blockquote');
|
||||
const hadithFooterElement = document.querySelector('.hadith-section blockquote footer');
|
||||
|
||||
if (hadithTextElement && hadithFooterElement) {
|
||||
// Update de tekst en bron
|
||||
|
||||
@ -105,7 +105,11 @@
|
||||
</div>
|
||||
|
||||
<script src="/static/quran.js"></script>
|
||||
<script src="/static/countdown.js"></script>
|
||||
<script>
|
||||
// Theme toggle setup (gebruik de standaard functie)
|
||||
setupThemeToggle();
|
||||
|
||||
// Theme toggle icon dynamisch aanpassen
|
||||
function updateThemeIcon() {
|
||||
const html = document.documentElement;
|
||||
@ -117,18 +121,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('themeToggle').addEventListener('click', function() {
|
||||
const html = document.documentElement;
|
||||
html.className = html.className === 'light' ? '' : 'light';
|
||||
localStorage.setItem('theme', html.className);
|
||||
updateThemeIcon();
|
||||
});
|
||||
|
||||
// Laad opgeslagen theme
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
document.documentElement.className = savedTheme;
|
||||
}
|
||||
// Update icon bij theme wijziging
|
||||
const observer = new MutationObserver(updateThemeIcon);
|
||||
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
|
||||
updateThemeIcon();
|
||||
|
||||
// Mute functionaliteit
|
||||
|
||||
5
done
5
done
@ -50,3 +50,8 @@ Wed May 28 07:22:58 CEST 2025: Automatische navigatie toegevoegd aan adzkaar.htm
|
||||
Wed May 28 07:27:01 CEST 2025: Centraal kleurenschema geïmplementeerd - alle kleuren nu aanpasbaar via colors.css
|
||||
Wed May 28 07:30:33 CEST 2025: Debug functionaliteit beveiligd - debug knop en routes alleen zichtbaar/toegankelijk als debug_mode=true
|
||||
Wed May 28 07:32:53 CEST 2025: .gitignore toegevoegd en .lh folder verwijderd uit repository - Local History bestanden worden nu genegeerd
|
||||
Wed May 28 07:42:06 CEST 2025: Theme toggle gerepareerd in quran.html en compact zijmenu geïmplementeerd in index.html - hadith sectie verplaatst naar linker overlay
|
||||
Wed May 28 07:49:43 CEST 2025: Zijmenu layout gerepareerd - compact sidebar toegevoegd voor index.html, hadith sectie blijft in linker overlay, zijmenu nu correct rechts gepositioneerd
|
||||
Wed May 28 07:51:11 CEST 2025: Scheiding hersteld - hadith sectie terug naar rechts met witte achtergrond, behoud van scheiding tussen links (tijd/countdown) en rechts (hadith + zijmenu)
|
||||
Wed May 28 07:52:07 CEST 2025: Hadith sectie theme-responsive gemaakt - gebruikt nu var(--card-bg) en var(--text-color) voor correcte dark/light mode ondersteuning
|
||||
Wed May 28 07:53:43 CEST 2025: Weer sectie verplaatst van rechts naar links naast de tijd - nu in overlay met glasmorphism effect en witte tekst met schaduw
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user