63 lines
2.0 KiB
Plaintext
63 lines
2.0 KiB
Plaintext
<!-- weather -->
|
|
<!-- Based on https://codepen.io/codeconvey/pen/xRzQay -->
|
|
{# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #}
|
|
<div class="fallingObjects" id="weather" aria-hidden="true">
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
<div class="fallingObject">
|
|
<div>{{ metadata.weatherSymbol }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const weather = document.getElementById("weather");
|
|
const weatherToggle = document.getElementById("weatherToggle");
|
|
const weatherPreference = localStorage.getItem("weather");
|
|
|
|
// Initial weather preference check on page load
|
|
if ({% if metadata.weatherOnByDefault == false %}!weatherPreference || {% endif %}weatherPreference == 0) {
|
|
weather.classList.add("hidden");
|
|
weatherToggle.checked = false;
|
|
} else {
|
|
weather.classList.remove("hidden");
|
|
weatherToggle.checked = true;
|
|
};
|
|
|
|
// Handle weather setting toggle
|
|
weatherToggle.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
localStorage.setItem("weather", 1);
|
|
weather.classList.remove("hidden");
|
|
} else {
|
|
localStorage.setItem("weather", 0);
|
|
weather.classList.add("hidden");
|
|
};
|
|
});
|
|
</script>
|
|
<!-- /weather -->
|