jdg/photoCalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dirty code but better UI

Browse Source
This commit is contained in:
José David Guillén
2024-06-16 22:17:40 +00:00
parent bfc6671788
commit 6ee7eeda29
3 changed files with 691 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
index.html
View File

@ -7,41 +7,93 @@
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="controls">
<div class="control select">
<label>Año:</label>
<input type="number" min="2024" step="1" value="2024" id="year" />
</div>
<div class="row">
<div class="col50">
<div class="control checkbox">
<input type="checkbox" id="showMonthSeparators" />
<label for="showMonthSeparators">Dividir meses</label>
</div>
<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="col50">
<div class="control checkbox">
<input type="checkbox" id="centerMonths" />
<label for="centerMonths">Centrar meses</label>
</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>
<div class="row">
<div class="col50">
<div class="control file">
<label for="imageInput">Seleccionar Foto</label>
<input type="file" id="imageInput" accept="image/*" />
</div>
</div>
<div class="col50">
<div class="control button">
<button id="downloadButton">Descargar foto-calendario</button>
<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>