update go version

go.mod

@@ -1,10 +1,10 @@
 module go.balki.me/collage-maker
 
-go 1.22
+go 1.23.2
 
 require (
 	github.com/disintegration/imaging v1.6.2
 	go.balki.me/anyhttp v0.3.0
 )
 
-require golang.org/x/image v0.1.0 // indirect
+require golang.org/x/image v0.21.0 // indirect

go.sum

@@ -1,31 +1,8 @@
 github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
 github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
-github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 go.balki.me/anyhttp v0.3.0 h1:WtBQ0rnkg567sX/O4ij/+qBbdCIUt5VURSe718sITBY=
 go.balki.me/anyhttp v0.3.0/go.mod h1:JhfekOIjgVODoVqUCficjpIgmB3wwlB7jhN0eN2EZ/s=
-golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.1.0 h1:r8Oj8ZA2Xy12/b5KZYj3tuv7NG/fBz3TwQVvpJ9l8Rk=
-golang.org/x/image v0.1.0/go.mod h1:iyPr49SD/G/TBxYVB/9RRtGUT5eNbo2u4NamWeQcD5c=
-golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
-golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
-golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
+golang.org/x/image v0.21.0 h1:c5qV36ajHpdj4Qi0GnE0jUc/yuo33OLFaa0d+crTD5s=
+golang.org/x/image v0.21.0/go.mod h1:vUbsLavqK/W303ZroQQVKQ+Af3Yl6Uz1Ppu5J/cLz78=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
-golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
-golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=

web/index.css

@@ -33,7 +33,7 @@
 
 #image-chooser-controls {
     display: none;
-    width: 100%;
+    width: 80%;
 }
 
 #image-preview-box {
@@ -44,16 +44,19 @@
 }
 
 #image-preview-box img {
-    width: 50px;
-    height: 50px;
+    width: 30%;
+    aspect-ratio: 1 / 1;
 }
 
 .main-controls {
     display: flex;
     gap: 0.5rem;
+    width: 80%;
 }
 
-.main-controls button {
+.main-controls * {
+    width: 100%;
+    height: 4rem;
     font-size: 1.2rem;
 }
 
@@ -167,6 +170,27 @@
     "A A A"
     "B C D";
 }
+
 .one-three-topbottom .img1 {
     grid-area: A;
 }
+
+.ten-spl {
+    display: grid;
+    grid-template-areas:
+    "A A A B B B"
+    "C D D E E F"
+    "G D D E E H"
+    "I I I J J J";
+}
+
+.ten-spl .img1 { grid-area: A; }
+.ten-spl .img2 { grid-area: B; }
+.ten-spl .img3 { grid-area: C; }
+.ten-spl .img4 { grid-area: D; }
+.ten-spl .img5 { grid-area: E; }
+.ten-spl .img6 { grid-area: F; }
+.ten-spl .img7 { grid-area: G; }
+.ten-spl .img8 { grid-area: H; }
+.ten-spl .img9 { grid-area: I; }
+.ten-spl .img10 { grid-area: J; }

web/index.html

@@ -26,7 +26,6 @@
               </select>
               <div class="main-controls">
                 <a href="choose.html"><button>Select</button></a>
-
                 <button id="snapper" class="showbuton">Snap</button>
                 <a href="/collages/?sort=time&order=desc&layout=grid" target="_blank" ><button>All</button></a>
                 <button id="reorder_btn">Reorder</button>
@@ -156,6 +155,20 @@
                             <div class="img img4"></div>
                         </div>
                     </li>
+                    <li>
+                        <div class="template ten-spl">
+                            <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>
+                    </li>
                 </ul>
 
             </div>

web/splgrid.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+        <!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+      <div class="template ten-spl">
+        <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>
+    </body>
+</html>