100 lines
3.5 KiB
HTML
100 lines
3.5 KiB
HTML
<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>
|