collage-maker/web/index.html

98 lines
4.5 KiB
HTML
Raw 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">
<label>
<span>Paper size</span>
<select id="page_size_selector" size=8>
<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>
<div>
<div class="toolbar">
<button>Left</button>
<button>Right</button>
</div>
<div class="img-container">
<div> <img src="images/img1.jpg"/> </div>
<div> <img class="selected-img" src="images/img2.jpg"/> </div>
<div> <img src="images/img3.jpg"/> </div>
<div> <img src="images/img4.jpg"/> </div>
<div> <img src="images/img5.jpg"/> </div>
<div> <img src="images/img6.jpg"/> </div>
</div>
</div>
<ul class="templates">
<li>
<div id="default_template" class="template single" data-collage-template="single">
<div class="img img1"></div>
</div>
</li>
<li>
<div class="template one-two" data-collage-template="one-two">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</li>
<li>
<div class="template half-leftright" data-collage-template="half-leftright">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template half-topbottom" data-collage-template="half-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template two-one-two-leftright" data-collage-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" data-collage-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>
</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>