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

web/index.css

@@ -32,7 +32,7 @@
 .templates {
     display: flex;
     flex-wrap: wrap;
-     gap: 1rem;
+    gap: 1rem;
 }
 
 .templates li {
@@ -56,53 +56,61 @@
     border: 1px solid;
 }
 
-.single div {
-    width: 100%;
-    height: 100%;
+.single {
+    display: grid;
 }
 
 .one-two {
     display: grid;
     grid-template-areas: 
-    "one two"
-    "one three";
+    "A B"
+    "A C";
 }
 .one-two .img1{
-    grid-area: one;
+    grid-area: A;
 }
 
-.half-leftright {
-    display:flex;
-}
-
-.half-leftright .img {
-    flex: 50%;
-}
-
-.half-topbottom .img {
-    width: 100%;
-    height: 50%;
+.half-topbottom {
+    display: grid;
 }
 
 .two-one-two-leftright {
     display: grid;
-    grid-template-areas: 
-    "one two two three"
-    "four two two five";
+    grid-template-areas:
+    "A  B  B  C"
+    "D  B  B  E";
 }
-.two-one-two-leftright .img2 {
-    grid-area: two;
+.two-one-two-leftright .img1 {
+    grid-area: B;
 }
 
 .two-one-two-topbottom {
     display: grid;
     grid-template-areas: 
-    "one two"
-    "three three"
-    "three three"
-    "four five"
+    "A  B"
+    "C  C"
+    "C  C"
+    "D  E"
 }
 
-.two-one-two-topbottom .img3 {
-    grid-area: three;
+.two-one-two-topbottom .img1 {
+    grid-area: C;
+}
+
+.two-row {
+    display: grid;
+    grid-template-areas: 
+    "A B"
+}
+
+.three-row {
+    display: grid;
+    grid-template-areas:
+    "A B C"
+}
+
+.four-row {
+    display: grid;
+    grid-template-areas:
+    "A B C D"
 }