Hugging Face's logo

Spaces:
idiouf
/
SenClim
Running

App Files Community
idiouf commited on
Commit
af80a89
·
verified ·
1 Parent(s): 7f7b386

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +11 -7
index.html CHANGED
@@ -1,5 +1,5 @@
1
  <!DOCTYPE html>
2
- <html lang="fr" data-theme="light">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -70,7 +70,9 @@
70
 
71
  .charts-col{columns:2; column-gap:18px;}
72
  @media(max-width:1100px){.charts-col{columns:1;}}
 
73
  .chart-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 18px 8px;break-inside:avoid;display:inline-block;width:100%;margin:0 0 18px;}
 
74
  .chart-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;flex-wrap:wrap;gap:6px;}
75
  .chart-card-head h3{font-size:15px;color:var(--ink);}
76
  .chart-card-head .meta{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
@@ -139,13 +141,13 @@
139
  </div>
140
  <div class="nav-right">
141
  <div class="toggle-group" id="lang-toggle">
142
- <button class="toggle-btn active" data-lang="fr">FR</button>
143
- <button class="toggle-btn" data-lang="en">EN</button>
144
- <button class="toggle-btn" data-lang="wo">WO</button>
145
  </div>
146
  <div class="toggle-group" id="theme-toggle">
147
- <button class="toggle-btn active" data-theme-val="light" data-i18n="themeLight">Clair</button>
148
- <button class="toggle-btn" data-theme-val="dark" data-i18n="themeDark">Sombre</button>
149
  </div>
150
  </div>
151
  </div>
@@ -230,7 +232,9 @@
230
  <div class="chart-legend-row" style="margin-top:14px"><span data-i18n="dailyRainLabel">Pluie journalière (mm)</span></div>
231
  <div id="rain30-bar-body"></div>
232
  </div>
 
233
 
 
234
  <div class="chart-card">
235
  <div class="chart-card-head">
236
  <h3 data-i18n="detailChartTitle2">🌦️ Pluie, probabilité &amp; ensoleillement — 7 jours</h3>
@@ -396,7 +400,7 @@ const I18N = {
396
  }
397
  };
398
  let currentLang = 'fr';
399
- let currentTheme = 'light';
400
 
401
  /* ============================= I18N APPLY ============================= */
402
  function applyI18n(){
 
1
  <!DOCTYPE html>
2
+ <html lang="fr" data-theme="dark">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
70
 
71
  .charts-col{columns:2; column-gap:18px;}
72
  @media(max-width:1100px){.charts-col{columns:1;}}
73
+ .charts-full{display:flex;flex-direction:column;gap:18px;margin-top:18px;}
74
  .chart-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 18px 8px;break-inside:avoid;display:inline-block;width:100%;margin:0 0 18px;}
75
+ .charts-full .chart-card{display:block;margin:0;}
76
  .chart-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;flex-wrap:wrap;gap:6px;}
77
  .chart-card-head h3{font-size:15px;color:var(--ink);}
78
  .chart-card-head .meta{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
 
141
  </div>
142
  <div class="nav-right">
143
  <div class="toggle-group" id="lang-toggle">
144
+ <button class="toggle-btn active" data-lang="fr">Français</button>
145
+ <button class="toggle-btn" data-lang="en">Anglais</button>
146
+ <button class="toggle-btn" data-lang="wo">Wolof</button>
147
  </div>
148
  <div class="toggle-group" id="theme-toggle">
149
+ <button class="toggle-btn" data-theme-val="light" data-i18n="themeLight">Clair</button>
150
+ <button class="toggle-btn active" data-theme-val="dark" data-i18n="themeDark">Sombre</button>
151
  </div>
152
  </div>
153
  </div>
 
232
  <div class="chart-legend-row" style="margin-top:14px"><span data-i18n="dailyRainLabel">Pluie journalière (mm)</span></div>
233
  <div id="rain30-bar-body"></div>
234
  </div>
235
+ </div>
236
 
237
+ <div class="charts-full">
238
  <div class="chart-card">
239
  <div class="chart-card-head">
240
  <h3 data-i18n="detailChartTitle2">🌦️ Pluie, probabilité &amp; ensoleillement — 7 jours</h3>
 
400
  }
401
  };
402
  let currentLang = 'fr';
403
+ let currentTheme = 'dark';
404
 
405
  /* ============================= I18N APPLY ============================= */
406
  function applyI18n(){