<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes" />
<title>PhotoCalendar</title>
<script src="photoCalendar.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<input id="menu-checkbox" type="checkbox" />
<label for="menu-checkbox" id="menu-overlay"></label>
<nav id="menu">
<div class="controls">
<div class="control select">
<label data-translate>Language:</label>
<select id="language">
<option value="es">Español</option>
<option value="en">English</option>
</select>
</div>
<div class="control select">
<label data-translate>Año:</label>
<input type="number" min="2024" step="1" value="" id="year" />
</div>
<div class="control checkbox">
<input type="checkbox" id="showMonthSeparators" />
<label for="showMonthSeparators" data-translate>Dividir meses</label>
</div>
<div class="control checkbox" data-control->
<input type="checkbox" id="centerMonths" />
<label for="centerMonths" data-translate>Centrar meses</label>
</div>
<div class="control file">
<label for="imageInput" data-translate>Seleccionar Foto</label>
<input type="file" id="imageInput" accept="image/*" />
</div>
<div class="control button">
<button id="downloadButton" data-translate>Descargar foto-calendario</button>
</div>
</div>
<hr />
<a class="button" target="_blank" href="https://paypal.me/jdgd" data-translate>Buy me a coffe</a>
<br>
<a class="button" target="_blank" href="https://paypal.me/jdgd" data-translate>Support my work</a>
<hr />
<div id="darkModeSwitch">
<input type="checkbox" id="darkModeSwitch_checkbox" />
<label for="darkModeSwitch_checkbox">
<div class="starContainer">
<div class="star star-1">★</div>
<div class="star star-2">★</div>
</div>
<div class="moon"></div>
</label>
</div>
</nav>
<div id="header" class="scroll-up">
<div id="title">PhotoCalendar</div>
<div id="header-left">
<div class="hamburger hamburger--arrow">
<label for="menu-checkbox">
<div class="hamburger-box"><div class="hamburger-inner"></div></div>
</label>
</div>
</div>
</div>
<div class="preview">
<canvas id="calendarCanvas" width="1181" height="1771"></canvas>
</div>
<div style="display: none;">
<div data-months>
<span data-translate>Enero</span>
<span data-translate>Febrero</span>
<span data-translate>Marzo</span>
<span data-translate>Abril</span>
<span data-translate>Mayo</span>
<span data-translate>Junio</span>
<span data-translate>Julio</span>
<span data-translate>Agosto</span>
<span data-translate>Septiembre</span>
<span data-translate>Octubre</span>
<span data-translate>Noviembre</span>
<span data-translate>Diciembre</span>
</div>
<div data-weekdays>
<span data-translate>L</span>
<span data-translate>M</span>
<span data-translate>X</span>
<span data-translate>J</span>
<span data-translate>V</span>
<span data-translate>S</span>
<span data-translate>D</span>
</div>
</div>
</body>
</html>