collage-maker/web/index.html
Balakrishnan Balasubramanian 12b4386f14 Frontend improvements
1. Simplify template css to use grid always and use ABCD for area names
2. Add 3 new templates
3. Set data attribute dynamically for templates
4. Minor reformatting in js files
5. Fix URL path
2024-08-09 01:51:52 -04:00

128 lines
5.7 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
<link rel="stylesheet" href="croppie.css" />
<script src="croppie.min.js" defer></script>
<script src="index.js" defer></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<div class="controls">
<p><a href="choose.html">Select Images</a></p>
<label>
<span>Paper size</span>
<select id="page_size_selector" size=6>
<option value="letter-portrait" > Letter (Portrait) </option>
<option selected value="letter-landscape" > Letter (Landscape) </option>
<option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
<option value="fiveseven-landscape" > 7 × 5 (Landscape) </option>
<option value="foursix-portrait" > 4 × 6 (Portrait) </option>
<option value="foursix-landscape" > 4 × 6 (Landscape) </option>
</select>
</label>
<ul class="templates">
<li>
<div id="default_template" class="template single">
<div class="img img1"></div>
</div>
</li>
<li>
<div class="template one-two">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</li>
<li>
<div class="template two-row">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template half-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template two-one-two-leftright">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
</div>
</li>
<li>
<div class="template two-one-two-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
</div>
<li>
<div class="template four-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
</div>
</li>
<li>
<div class="template four-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
</div>
</li>
<li>
<div class="template three-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
</div>
</li>
</ul>
<button id="snapper" class="showbuton">Snap Collage</button>
<p><a href="" target="_blank" id="collage-url"></a></p>
</div>
<div class="imagebox">
<div id="collage" class="image-surface"></div>
</div>
</div>
</body>
</html>