summary refs log tree commit diff stats
diff options
context:
space:
mode:
authorChristian Krinitsin <mail@krinitsin.com>2025-04-20 18:08:02 +0200
committerChristian Krinitsin <mail@krinitsin.com>2025-04-20 18:08:02 +0200
commitba9fb9dfdf3e845527a0c00fc304cb52ada9c487 (patch)
tree344707a36150eaa41f48803c74feec6f07bbfc83
parent3b4914327abe8774e77b1677cafa64faa0746958 (diff)
downloadshopping-list-ba9fb9dfdf3e845527a0c00fc304cb52ada9c487.tar.gz
shopping-list-ba9fb9dfdf3e845527a0c00fc304cb52ada9c487.zip
add basic template, shopping list website and a health check
Diffstat
-rw-r--r--handlers/shopping_list.go13


-rw-r--r--main.go19


-rw-r--r--templates/template.html224


3 files changed, 253 insertions, 3 deletions
diff --git a/handlers/shopping_list.go b/handlers/shopping_list.go
new file mode 100644
index 0000000..af07954
--- /dev/null
+++ b/handlers/shopping_list.go
@@ -0,0 +1,13 @@
+package shopping_list
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+func LoadElements(c *gin.Context) {
+	c.HTML(http.StatusOK, "template.html", gin.H{
+		"Name": "Shopping List",
+	})
+}
diff --git a/main.go b/main.go
index c98abf0..a08c858 100644
--- a/main.go
+++ b/main.go
@@ -1,17 +1,30 @@
 package main
 
 import (
+	"embed"
+	"html/template"
 	"net/http"
 
+	"github.com/ckrinitsin/go-backend/handlers"
 	"github.com/gin-gonic/gin"
 )
 
+//go:embed templates/*
+var templatesFS embed.FS
+
 func main() {
 	r := gin.Default()
-	r.GET("/ping", func(c *gin.Context) {
+
+	tmpl := template.Must(template.ParseFS(templatesFS, "templates/*"))
+	r.SetHTMLTemplate(tmpl)
+
+	r.GET("/health", func(c *gin.Context) {
 		c.JSON(http.StatusOK, gin.H{
-			"message": "pong",
+			"health-check": "passed",
 		})
 	})
-	r.Run("127.0.0.1:8081") // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080")
+
+	r.GET("/shopping", shopping_list.LoadElements)
+
+	r.Run()
 }
diff --git a/templates/template.html b/templates/template.html
new file mode 100644
index 0000000..a37e0a6
--- /dev/null
+++ b/templates/template.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> {{ .Name }}</title>
+    <style>
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #2d353b; /* Dark background color */
+            color: #d3c6aa; /* Text color */
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .container {
+            padding: 2rem;
+            width: 300px;
+            max-height: 100%;
+        }
+
+        .checklist {
+            max-height: 500px; /* Adjust max-height as needed */
+            overflow-y: auto; /* Enable vertical scrolling */
+            padding: 10px;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        li {
+            display: flex;
+            align-items: center;
+            justify-content: space-between; /* Align items evenly */
+            margin: 0.5rem 0;
+            padding: 0.5rem;
+            border: 1px solid #d3c6aa;
+            border-radius: 4px;
+            height: 25px;
+        }
+
+        li > div {
+            display: flex;
+            align-items: center;
+        }
+
+        li > div > button {
+            width: 30px; /* Fixed width for delete button */
+            margin-left: 10px; /* Adjust as needed */
+        }
+
+        li.selected {
+            text-decoration: line-through;
+            color: #475258;
+            border: 1px solid #475258;
+        }
+
+        input[type="checkbox"] {
+            margin-right: 1rem;
+        }
+
+        button {
+            display: block;
+            padding: 0.5rem;
+            border: none;
+            background-color: #d3c6aa;
+            color: #2d353b;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        button.delete {
+            width: 30px;
+            text-decoration: none;
+            text-align: center;
+        }
+
+        .buttons {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .add-button,
+        .delete-button {
+            padding: 10px 20px;
+            cursor: pointer;
+        }
+
+        .add-button {
+            order: 1; /* Display on the left */
+        }
+
+        .delete-button {
+            order: 2; /* Display on the right */
+            width: 200px;
+        }
+
+        .input-container{
+            position:relative;
+            margin-bottom:25px;
+            margin-top:25px;
+        }
+        .input-container label{
+            position:absolute;
+            top:0px;
+            left:0px;
+            font-size:16px;
+            color:#fff;	
+            pointer-event:none;
+            transition: all 0.5s ease-in-out;
+        }
+        .input-container input{
+          border:0;
+          border-bottom:1px solid #555;
+          background:transparent;
+          width:100%;
+          padding:8px 0 5px 0;
+          font-size:16px;
+          color:#d3c6aa;
+        }
+        .input-container input:focus{
+         border:none;	
+         outline:none;
+         border-bottom:1px solid #d3c6aa;	
+        }
+        .input-container input:focus ~ label,
+        .input-container input:valid ~ label{
+            top:-12px;
+            font-size:12px;
+            
+        }
+
+        /* settings for mini phones (my unihertz jelly) */
+        @media (max-width: 280px) {
+          h1 {
+            font-size: 0;
+            height: 0;
+            margin: 0;
+          }
+          li {
+            height: 18px;
+            margin: 0.3rem 0;
+          }
+          .container {
+            width: 268px; /* Scale font sizes */
+            height: 100%;
+            margin: 0;
+          }
+          .checklist {
+            height: 300px;
+            margin: 0;
+            padding: 3px;
+            padding-top: 0;
+          }
+          .input-container {
+            margin: 6px;
+          }
+          .delete-button {
+            width: 170px;
+          }
+        }
+
+
+        /* Scrollbar styles for WebKit browsers (Chrome, Safari) */
+
+        /* Track */
+        ::-webkit-scrollbar {
+            width: 10px; /* Width of the scrollbar */
+        }
+
+        /* Handle */
+        ::-webkit-scrollbar-thumb {
+            background-color: #3d484d; /* Color of the scrollbar handle */
+            border-radius: 5px; /* Rounded corners of the handle */
+        }
+
+        /* Handle on hover */
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: #475258; /* Darker color on hover */
+        }
+
+        /* Track */
+        ::-webkit-scrollbar-track {
+            background: transparent; /* Color of the scrollbar track */
+        }
+
+        /* Corner */
+        ::-webkit-scrollbar-corner {
+            background: transparent; /* Background color of the scrollbar corner */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>{{ .Name }}</h1>
+        <ul class="checklist" id="checklist"></ul>
+
+        <div class="input-container">
+            <input type="text" id="newItem" tabindex="0"/>
+        </div>
+
+        <div class="buttons">
+            <button onclick="addItem()" class="add-button">Add Item</button>
+            <button onclick="deleteItems()" class="delete-button">Delete Selected Items</button>
+        </div>
+    </div>
+</body>
+</html>