web/index.html

@@ -13,19 +13,6 @@
             height: 11in;
         -->
         <style>
-            .image-surface {
-                overflow: hidden;
-                margin: auto;
-                background-color: lightgreen;
-            }
-            .imagebox {
-                grid-area: image;
-                display:flex;
-                align-items: center;
-                justify-content: center;
-                padding: 50px;
-                flex: 70%;
-            }
             .container {
                 display: flex;
                 background-color: lightyellow;
@@ -34,18 +21,63 @@
             .controls {
                 background-color: lightgrey;
                 display: flex;
-                grid-area: controls;
                 align-items: center;
                 justify-content: center;
                 flex: 30%;
             }
+            .imagebox {
+                padding: 2rem;
+                flex: 70%;
+            }
+            .image-surface {
+                overflow: hidden;
+                margin: auto;
+                border: 2px solid;
+                height: 100%;
+                width: 100%;
+            }
             .showbuton {
                 font-size: 2rem;
             }
+            
+            // paper sizes
             .letter-portrait {
-                height: 100%;
                 aspect-ratio: 85 / 110;
             }
+            .letter-landscape {
+                aspect-ratio: 110 / 85;
+            }
+            .fiveseven-portrait {
+                aspect-ratio: 5 / 7;
+            }
+            .fiveseven-landscape {
+                aspect-ratio: 7 / 5;
+            }
+            .foursix-portrait {
+                aspect-ratio: 4 / 6;
+            }
+            .foursix-landscape {
+                aspect-ratio: 6 / 4;
+            }
+
+            .half-landscape {
+                display:flex;
+            }
+
+            .half-landscape .collage-img {
+                flex: 50%;
+            }
+
+            .one-two {
+                display: grid;
+                grid-template-areas: 
+                    "one two"
+                    "one three";
+            }
+            .one-two .img1{
+                grid-area: one;
+            }
+
             .letter-portrait .collage-img {
                 height: 50%;
             }
@@ -75,12 +107,12 @@
                 </div>
             </div>
             <div class="imagebox">
-            <div id="collage" class="image-surface letter-landscape-2">
+                <div id="collage" class="image-surface fiveseven-landscape one-two">
                     <div class="collage-img img1" data-collage-image-url="images/img1.jpg">
-                    <!-- <img src="img1.jpg"> -->
                     </div>
                     <div class="collage-img img2" data-collage-image-url="images/img2.jpg">
-                    <!-- <img src="img2.jpg"> -->
+                    </div>
+                    <div class="collage-img img3" data-collage-image-url="images/img3.jpg">
                     </div>
                 </div>
             </div>

web/index.js

@@ -63,8 +63,8 @@ function snap() {
     req = {
         background_image: "",
         aspect: {
-            width: 528 * 4 * 2,
+            width: 3150,
-            height: 816 * 4,
+            height: 2250,
         },
         dimension: {
             width: collageDiv.clientWidth,