polished search form, rating checkboxes, 100vh layout, and fixed static file serving

6 files changed, 196 insertions, 17 deletions

diff --git a/imageboard/main.go b/imageboard/main.go
index a8dc2c0..178fed2 100644
--- a/imageboard/main.go
+++ b/imageboard/main.go
@@ -42,7 +42,7 @@ func main() {
 	processors.Initialize(app)

 

 	app.Use(middleware.JSON)

-	app.Static("/", "./static")

+	app.Static("/static", "./static")

 

 	router.Initialize(app)

 

diff --git a/static/css/main.css b/static/css/main.css
index 1fc8ce6..814497b 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -7,7 +7,7 @@ body {
     padding: 0;
     box-sizing: border-box;
     font-family: "LXGW WenKai Mono TC", monospace;
-    font-size: 14px;
+    font-size: 13px;
 }
 
 body {
@@ -19,6 +19,9 @@ body {
     margin: 0;
     padding: 0;
     overflow-x: hidden;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
 a {
@@ -32,24 +35,23 @@ a:hover {
 }
 
 nav {
-    background: linear-gradient(to bottom, #330066, #1a001a);
-    padding: 8px 16px;
+    background-color: #0d001a;
+    padding: 16px 16px 16px 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
-    border-bottom: 2px solid #ff99cc;
+    border-bottom: 1px solid #ff99cc;
 }
 
 nav::before {
     content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧";
     position: absolute;
-    top: 2px;
+    top: 15px;
     left: 0;
     right: 0;
     text-align: center;
     color: #ffccee;
-    font-size: 12px;
 }
 
 .nav-left,
@@ -79,6 +81,7 @@ main {
     margin: 0 auto;
     gap: 10px;
     padding: 10px;
+    flex: 1;
 }
 
 .sidebar {
@@ -123,4 +126,158 @@ main {
 .tag-count,
 .sidebar-stat-value {
     color: #cccccc;
+}
+
+.content {
+    flex: 1;
+    background-color: #0a0015;
+    border: 1px solid #4d4d80;
+    padding: 10px;
+}
+
+.home-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    min-height: 580px;
+}
+
+.home-main h1 {
+    color: #ffccff;
+    font-size: 16px;
+    margin: 8px 0px;
+}
+
+.home-main p {
+    color: #99ffcc;
+}
+
+.main-img {
+    max-width: 768px;
+    max-height: 576px;
+}
+
+.search-container {
+    background-color: #0d001a;
+    border: 1px solid #6666cc;
+    padding: 8px;
+    text-align: center;
+    margin-top: 16px;
+}
+
+.search-container form {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+input[type="text"] {
+    background-color: #1a0033;
+    border: 1px solid #9999ff;
+    color: #ccccff;
+    padding: 2px 4px;
+    width: 250px;
+}
+
+input[type="text"]:focus {
+    border-color: #ff99cc;
+    background-color: #260040;
+    outline: none;
+}
+
+input[type="button"],
+input[type="submit"] {
+    background-color: #330066;
+    border: 1px solid #9999ff;
+    color: #ccccff;
+    padding: 3px 8px;
+    cursor: pointer;
+}
+
+input[type="button"]:hover,
+input[type="submit"]:hover {
+    background-color: #ff99cc;
+    color: #1a001a;
+}
+
+.rating-toggles {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
+.rating-checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.rating-checkbox input[type="checkbox"] {
+    display: none;
+}
+
+.checkbox-custom {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #666;
+    background-color: #1a0033;
+    transition: all 0.2s ease;
+}
+
+.checkbox-custom.safe {
+    border-color: #388e3c;
+}
+
+.checkbox-custom.questionable {
+    border-color: #f57c00;
+}
+
+.checkbox-custom.sensitive {
+    border-color: #7b1fa2;
+}
+
+.checkbox-custom.explicit {
+    border-color: #d32f2f;
+}
+
+.rating-checkbox input[type="checkbox"]:checked+.checkbox-custom.safe {
+    background-color: #4caf50;
+    border-color: #388e3c;
+    border-width: 2px;
+}
+
+.rating-checkbox input[type="checkbox"]:checked+.checkbox-custom.questionable {
+    background-color: #ff9800;
+    border-color: #f57c00;
+    border-width: 2px;
+}
+
+.rating-checkbox input[type="checkbox"]:checked+.checkbox-custom.sensitive {
+    background-color: #9c27b0;
+    border-color: #7b1fa2;
+    border-width: 2px;
+}
+
+.rating-checkbox input[type="checkbox"]:checked+.checkbox-custom.explicit {
+    background-color: #f44336;
+    border-color: #d32f2f;
+    border-width: 2px;
+}
+
+footer {
+    background-color: #0d001a;
+    border-top: 1px solid #ff99cc;
+    padding: 10px 0 16px 0;
+    text-align: center;
+    color: #ccccff;
+    margin-top: 16px;
+}
+
+footer::before {
+    content: "✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦";
+    display: block;
+    color: #ffccee;
+    margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/templates/home.django b/templates/home.django
index e23df14..61d54db 100644
--- a/templates/home.django
+++ b/templates/home.django
@@ -1,5 +1,9 @@
 {% extends 'layouts/main.django' %}
-{% include 'partials/search.django' %}
 {% block content %}
-  <h2>{{ Title }}</h2>
+  <div class="home-main">
+    <img src="/static/images/image_main.png" alt="Main Image" class="main-img" />
+    <h1>Welcome to {{ Appname }}!</h1>
+    <p>～ 個人的な画像ボード ～</p>
+    {% include 'partials/search.django' %}
+  </div>
 {% endblock %}
diff --git a/templates/layouts/main.django b/templates/layouts/main.django
index 6f0407e..488f9e4 100644
--- a/templates/layouts/main.django
+++ b/templates/layouts/main.django
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>{{ Title }} - {{ Appname }}</title>
-    <link rel="stylesheet" href="/css/main.css" />
+    <link rel="stylesheet" href="/static/css/main.css" />
   </head>
   <body>
     {% include 'partials/navbar.django' %}
diff --git a/templates/partials/search.django b/templates/partials/search.django
index 7b66170..ae67017 100644
--- a/templates/partials/search.django
+++ b/templates/partials/search.django
@@ -1,8 +1,26 @@
-<aside>
+<div class="search-container">
   <form action="/" method="GET">
-    <h3>Search Posts</h3>
-    <input type="text" name="tags" placeholder="tags..." value="{{ SearchQuery }}" />
-    <input type="submit" value="SEARCH" />
-    <input type="button" value="CLEAR" onclick="this.form.reset(); window.location.href='/';" />
+    <h3>« Search Posts »</h3>
+    <input type="text" name="tags" placeholder="enter some tags..." value="{{ SearchQuery }}" />
+    <input type="submit" value="Search" />
+    <input type="button" value="Clear" onclick="this.form.reset();" />
+    <div class="rating-toggles">
+      <label class="rating-checkbox">
+        <input type="checkbox" name="rating" value="safe" checked />
+        <span class="checkbox-custom safe"></span>
+      </label>
+      <label class="rating-checkbox">
+        <input type="checkbox" name="rating" value="questionable" checked />
+        <span class="checkbox-custom questionable"></span>
+      </label>
+      <label class="rating-checkbox">
+        <input type="checkbox" name="rating" value="sensitive" checked />
+        <span class="checkbox-custom sensitive"></span>
+      </label>
+      <label class="rating-checkbox">
+        <input type="checkbox" name="rating" value="explicit" checked />
+        <span class="checkbox-custom explicit"></span>
+      </label>
+    </div>
   </form>
-</aside>
+</div>
diff --git a/templates/partials/sidebar.django b/templates/partials/sidebar.django
index 79a747b..2940523 100644
--- a/templates/partials/sidebar.django
+++ b/templates/partials/sidebar.django
@@ -32,7 +32,7 @@
 </div>
 
 <div>
-  <h3>★ Recent Tags</h3>
+  <h3>✧ Recent Tags</h3>
   <div class="sidebar-content">
     {% for tag in RecentTags %}
       <a href="/posts?tags={{ tag.Name }}" style="color: {{ tag.Type.Color }};" class="sidebar-tag">{{ tag.Name }} <span class="tag-count">({{ tag.Count }})</span></a>