github/ESPTimeCast
1
1
Fork 0
mirror of https://github.com/mfactory-osaka/ESPTimeCast.git synced 2026-04-03 03:00:24 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added weather description language support

Browse Source 
Weather description will show in the same language as the one in the selected day language.
This commit is contained in:
mfactory-osaka
2025-07-14 10:53:15 +09:00
parent f610f9382d
commit 7c47fe5a4f
3 changed files with 332 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
data/index.html
View File

@@ -23,7 +23,7 @@
background-repeat: no-repeat, repeat, repeat;
opacity: 0;
transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
visibility: 0;
visibility: hidden;
}
body.loaded {
@@ -210,7 +210,7 @@ textarea::placeholder {
gap: 1rem; }
#openWeatherCountry{
margin-top: 0.0;
margin-top: 0;
}
}
@@ -303,8 +303,7 @@ textarea::placeholder {
<input type="text" id="openWeatherCity" name="openWeatherCity" placeholder="City / Zip / Lat."/>
<input type="text" id="openWeatherCountry" name="openWeatherCountry" placeholder="Country Code / Long."/>
</div>
</div>
<div class="small">
Visit <a href="https://openweathermap.org/find" target="_blank" rel="noopener">OpenWeatherMap</a> to find your location.<br><br>
Location format examples: City, Country Code - Osaka, JP | ZIP,Country Code - 94040, US | Latitude, Longitude - 34.6937, 135.5023
@@ -404,7 +403,7 @@ textarea::placeholder {
<option value="Etc/UTC">Etc/UTC</option>
</select>
<label for="language">Day of the week language</label>
<label for="language">Language (Day & Weather)</label>
<select id="language" name="language" onchange="setLanguage(this.value)">
<option value="" disabled selected>Select language</option>
<option value="af">Afrikaans</option>
@@ -466,74 +465,74 @@ textarea::placeholder {
<input type="text" name="ntpServer2" id="ntpServer2" placeholder="Enter NTP address">
<div class="toggles" style="padding: 0 1rem;">
<!-- Day of the week Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Show Day of Week:</span>
<span class="toggle-switch">
<input type="checkbox" id="showDayOfWeek" name="showDayOfWeek" onchange="setShowDayOfWeek(this.checked)">
<!-- Day of the week Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Show Day of Week:</span>
<span class="toggle-switch">
<input type="checkbox" id="showDayOfWeek" name="showDayOfWeek" onchange="setShowDayOfWeek(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- 24/12hrs Clock Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Display 12-hour Clock:</span>
<span class="toggle-switch">
<input type="checkbox" id="twelveHourToggle" name="twelveHourToggle" onchange="setTwelveHour(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Imperial Units Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Use Imperial Units (°F):</span>
<span class="toggle-switch">
<input type="checkbox" id="weatherUnits" name="weatherUnits" onchange="setWeatherUnits(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Display humidity (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Show Humidity:</span>
<span class="toggle-switch">
<input type="checkbox" id="showHumidity" name="showHumidity" onchange="setShowHumidity(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Show weather description -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Show Weather Description:</span>
<span class="toggle-switch">
<input type="checkbox" id="showWeatherDescription" name="showWeatherDescription" onchange="setShowWeatherDescription(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Display Flip Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Flip Display (180°):</span>
<span class="toggle-switch">
<input type="checkbox" id="flipDisplay" name="flipDisplay" onchange="setFlipDisplay(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Brightness Slider with Value -->
<label style="margin-top: 1.75rem;">Brightness: <span id="brightnessValue">10</span></label>
<input style="width: 100%;" type="range" min="0" max="15" name="brightness" id="brightnessSlider" value="10"
oninput="brightnessValue.textContent = brightnessSlider.value; setBrightnessLive(this.value);">
<br><br><br>
<!-- Dimming Controls -->
<label style="display: flex; align-items: center; justify-content: space-between;">
<span style="margin-right: 0.5em;">Enable Dimming:</span>
<span class="toggle-switch">
<input type="checkbox" id="dimmingEnabled" name="dimmingEnabled">
<span class="toggle-slider"></span>
</span>
</label>
<!-- 24/12hrs Clock Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Display 12-hour Clock:</span>
<span class="toggle-switch">
<input type="checkbox" id="twelveHourToggle" name="twelveHourToggle" onchange="setTwelveHour(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Imperial Units Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Use Imperial Units (°F):</span>
<span class="toggle-switch">
<input type="checkbox" id="weatherUnits" name="weatherUnits" onchange="setWeatherUnits(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Display humidity (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Show Humidity:</span>
<span class="toggle-switch">
<input type="checkbox" id="showHumidity" name="showHumidity" onchange="setShowHumidity(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Show weather description -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Show Weather Description:</span>
<span class="toggle-switch">
<input type="checkbox" id="showWeatherDescription" name="showWeatherDescription" onchange="setShowWeatherDescription(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Display Flip Toggle (Styled) -->
<label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
<span style="margin-right: 0.5em;">Flip Display (180°):</span>
<span class="toggle-switch">
<input type="checkbox" id="flipDisplay" name="flipDisplay" onchange="setFlipDisplay(this.checked)">
<span class="toggle-slider"></span>
</span>
</label>
<!-- Brightness Slider with Value -->
<label style="margin-top: 1.75rem;">Brightness: <span id="brightnessValue">10</span></label>
<input style="width: 100%;" type="range" min="0" max="15" name="brightness" id="brightnessSlider" value="10"
oninput="brightnessValue.textContent = brightnessSlider.value; setBrightnessLive(this.value);">
<br><br><br>
<!-- Dimming Controls -->
<label style="display: flex; align-items: center; justify-content: space-between;">
<span style="margin-right: 0.5em;">Enable Dimming:</span>
<span class="toggle-switch">
<input type="checkbox" id="dimmingEnabled" name="dimmingEnabled">
<span class="toggle-slider"></span>
</span>
</label>
</span>
</label>
<div class="form-row two-col">
<div>