Fix UI (#32)

Make some more features to UI for better UX.
BachErik · Jul 13, 2024 · 4b584c7 · 4b584c7
2 parents 4e68a41 + adcd45a
commit 4b584c7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 16 deletions.
diff --git a/main.go b/main.go
@@ -11,6 +11,7 @@ import (
 	"log"
 	"math"
 	"net/http"
+	"net/url"
 	"os"
 	"path/filepath"
 	"sort"
@@ -151,7 +152,9 @@ func main() {
 			}
 			return dict, nil
 		},
-		"isFutureDate": isFutureDate,
+		"isFutureDate":      isFutureDate,
+		"calculateLifespan": calculateLifespan,
+		"domainOnly":        domainOnly,
 	}
 
 	// Fetch custom footer if available
@@ -179,6 +182,14 @@ func main() {
 	log.Fatal(http.ListenAndServe(":8080", nil))
 }
 
+func domainOnly(urlStr string) string {
+	urlParsed, err := url.Parse(urlStr)
+	if err != nil {
+		return ""
+	}
+	return urlParsed.Hostname()
+}
+
 func fetchCustomFooter() (string, error) {
 	customFooterURL := fmt.Sprintf("https://raw.githubusercontent.com/%s/%s/main/templates/footer.html", githubUsername, githubRepository)
 	resp, err := http.Get(customFooterURL)

diff --git a/templates/footer.html b/templates/footer.html
@@ -10,6 +10,7 @@ <h3>Quick Links</h3>
                     <li><a href="/contact">Contact</a></li>
                     <li><a href="/privacy">Privacy Policy</a></li>
                     <li><a href="/terms">Terms of Service</a></li>
+                    <li><a href="https://github.com/BachErik/killedby">GitHub</a></li>
                 </ul>
             </div>
             <div class="footer-social">
@@ -82,4 +83,4 @@ <h3>Contact Us</h3>
             margin-top: 20px;
         }
     </style>
-{{ end }}
+{{ end }}
diff --git a/templates/header.html b/templates/header.html
@@ -62,7 +62,7 @@
         }
 
         a:hover {
-            text-decoration: underline;
+            text-decoration: none;
         }
 
         .header-logo-container {
@@ -182,6 +182,24 @@
         header .home-link:hover {
             background-color: #9a67ea;
         }
+
+        /* Style definitions to ensure consistent text alignment */
+        .year-group h2 {
+            text-align: center;
+            /* Center text alignment */
+            margin-top: 40px;
+            /* Space above the year heading */
+            color: #bb86fc;
+            /* Purple color for headings */
+        }
+
+        /* Ensure that this style is loaded and applied immediately */
+        .cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            grid-gap: 20px;
+            padding: 20px;
+        }
     </style>
 </head>
 

diff --git a/templates/project.html b/templates/project.html
@@ -2,37 +2,52 @@
 {{ template "header" . }}
 <div class="project-container">
     <h1>{{ .Project.Name }}</h1>
-    <div class="project-info">
-        <p><strong>Description:</strong> {{ .Project.Description }}</p>
+    <!-- Dedicated section for Description -->
+    <div class="project-description">
+        <p>{{ .Project.Description }}</p>
+    </div>
+    <!-- Section for other details -->
+    <div class="project-details">
+        <p><strong>Developer/Company:</strong> {{ .Project.Company }}</p>
         <p><strong>Released:</strong> {{ .Project.DateOpen }}</p>
         <p><strong>Discontinued:</strong> {{ .Project.DateClose }}</p>
-        <p><strong>Company:</strong> {{ .Project.Company }}</p>
-        <p><strong>Source:</strong> <a href="{{ .Project.Link }}" target="_blank">{{ .Project.Link }}</a></p>
+        <p><strong>Lifespan:</strong> {{ calculateLifespan .Project.DateOpen .Project.DateClose }} years</p>
+        <p><strong>Type:</strong> {{ .Project.Type }}</p>
+        <p><strong>Source:</strong> <a href="{{ .Project.Link }}" target="_blank">{{ domainOnly .Project.Link }}</a></p>
     </div>
 </div>
-{{ template "footer" . }}
 <style>
     .project-container {
         max-width: 800px;
         margin: 40px auto;
         padding: 20px;
         background-color: #1e1e1e;
         border-radius: 10px;
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        color: #e0e0e0;
     }
-    .project-info {
-        margin-top: 20px;
+
+    .project-description {
+        padding: 20px;
+        background-color: #292929;
+        /* slightly lighter shade for emphasis */
+        border-radius: 8px;
+        margin-bottom: 20px;
+        /* space between description and details */
     }
-    .project-info p {
+
+    .project-details p {
         margin: 10px 0;
-        color: #e0e0e0;
         line-height: 1.6;
     }
-    .project-info a {
+
+    .project-details a {
         color: #bb86fc;
     }
-    .project-info a:hover {
+
+    .project-details a:hover {
         text-decoration: underline;
     }
 </style>
-{{ end }}
+{{ template "footer" . }}
+{{ end }}