- needed to position the dropdown content */
+.dropbtn:hover,
+.dropbtn:focus {
+ background-color: #e5e7eb;
+}
+
.dropdown {
position: fixed;
right: 20px;
top: 5px;
}
-/* Style the arrow */
.dropdown-arrow {
- color: black;
+ color: var(--color-text);
font-size: 12px;
align-items: center;
}
-/* Dropdown Content (Hidden by Default) */
.dropdown-content {
right: 0;
display: none;
position: absolute;
- background-color: #f1f1f1;
- min-width: 160px;
- max-width: 160px;
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
- z-index: 1;
+ background-color: #fff;
+ min-width: 200px;
+ max-width: 240px;
+ border: 1px solid var(--color-border);
+ border-radius: 10px;
+ padding: 0.25rem 0;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12),
+ 0 3px 6px rgba(0, 0, 0, 0.08);
+ z-index: 1001;
+}
+
+.dropdown-content[hidden] {
+ display: none;
}
-/* Links inside the dropdown */
.dropdown-content a {
- color: black;
+ color: var(--color-text);
padding: 12px 16px;
text-decoration: none;
display: block;
}
-/* Change color of dropdown links on hover */
.dropdown-content a:hover {
- background-color: #ddd;
+ background-color: #f3f4f6;
}
-/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
-/* Profile Picture */
+/* ==========================
+ Profile Picture
+ ========================== */
.profile-pic {
display: inline-block;
vertical-align: middle;
@@ -258,4 +376,184 @@ input[type=password] {
width: 100%;
height: auto;
object-fit: cover;
+}
+
+/* ==========================
+ Dashboard (Cards, Grid)
+ ========================== */
+.title {
+ color: var(--color-text);
+ font-size: 2rem;
+ line-height: 1.2;
+ margin: 1rem 0 0.25rem;
+}
+
+.subtitle {
+ color: var(--color-muted);
+ margin: 0 0 1.25rem 0;
+}
+
+.dashboard-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 1rem;
+}
+
+.card {
+ background: var(--color-bg-card);
+ color: var(--color-text);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-sm);
+ overflow: hidden;
+}
+
+.card-header {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid var(--color-border);
+ background: rgba(0, 0, 0, 0.02);
+}
+
+.card-title {
+ font-size: 1.1rem;
+ margin: 0;
+}
+
+.card-body {
+ padding: 1rem;
+}
+
+.card-body p {
+ margin: 0.5rem 0;
+}
+
+.card-body .muted {
+ color: var(--color-muted);
+}
+
+.list {
+ list-style: none;
+ padding-left: 1rem;
+ margin: 0;
+}
+
+.list li {
+ margin: 0.35rem 0;
+}
+
+.card hr {
+ border: 0;
+ border-top: 1px solid var(--color-border);
+ margin: 0.75rem 0;
+}
+
+/* ==========================
+ Utilities
+ ========================== */
+.muted {
+ color: var(--color-muted);
+}
+
+.small {
+ font-size: 0.875rem;
+}
+
+.actions p {
+ margin: 0.5rem 0;
+}
+
+[hidden] {
+ display: none !important;
+}
+
+.visually-hidden {
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ white-space: nowrap;
+}
+
+.actions .logout-form {
+ margin: 0.5rem 0;
+ display: inline-block;
+}
+
+/* ==========================
+ Media Queries
+ ========================== */
+@media screen and (max-width: 600px) {
+ form {
+ width: 100%;
+ max-width: none;
+ padding: 1rem;
+ }
+
+ #footer {
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 10px 0 0 20px;
+ }
+}
+
+/* ==========================
+ Dark Mode
+ ========================== */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-bg: #0b1220;
+ --color-bg-card: #0f172a;
+ --color-text: #e5e7eb;
+ --color-muted: #9ca3af;
+ --color-border: #1f2937;
+ }
+
+ .header {
+ background-color: var(--color-bg);
+ color: var(--color-text);
+ border-bottom-color: var(--color-border);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+ }
+
+ #footer {
+ background-color: var(--color-bg);
+ color: var(--color-text);
+ border-top-color: var(--color-border);
+ }
+
+ .dropdown-content {
+ background-color: #111827;
+ border-color: #374151;
+ }
+
+ .dropdown-content a {
+ color: #e5e7eb;
+ }
+
+ .dropdown-content a:hover {
+ background-color: #1f2937;
+ }
+
+ .btn-secondary {
+ background: #374151;
+ color: #e5e7eb;
+ border-color: #4b5563;
+ }
+
+ .card-header {
+ background: rgba(255, 255, 255, 0.04);
+ }
+}
+
+.dropdown-username {
+ text-align: center;
+ color: var(--color-text);
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding: .25rem 1rem;
}
\ No newline at end of file
diff --git a/config/server/server.go b/config/server/server.go
index 6c13ae6..e9826e2 100644
--- a/config/server/server.go
+++ b/config/server/server.go
@@ -10,10 +10,14 @@ func Server(host string, db *gorm.DB) {
router := gin.Default()
router.ForwardedByClientIP = true
router.SetTrustedProxies([]string{"localhost"})
- router.Static("assets", "./assets")
+ // Serve static assets (CSS, JS, images, etc.)
+ router.Static("/assets", "./assets")
+
+ // Register all routes
routes.AuthRoutes(router, db)
+ // Load all templates
files := []string{
"views/user/authentication/login.html", "views/user/authentication/signup.html",
"views/user/authentication/logout.html",
@@ -23,5 +27,7 @@ func Server(host string, db *gorm.DB) {
}
router.LoadHTMLFiles(files...)
+
+ // Start the server
router.Run(host)
}
diff --git a/views/app/dashboard.html b/views/app/dashboard.html
index 43eaab3..e9a6821 100644
--- a/views/app/dashboard.html
+++ b/views/app/dashboard.html
@@ -1,9 +1,63 @@
{{ template "header.html" . }}
-
- Golang Web App Template Dashboard
-
-
- This is the main app. This is a protected route. You can only access this page if you are logged in.
-
+
Dashboard
+
Welcome{{if .user}}, {{.user}}{{end}}. You are logged in and can manage your
+ account from here.
-{{template "footer.html"}}
\ No newline at end of file
+
+
+
+
+
+
+ Signed in as {{if .user}}{{.user}}{{else}}your account{{end}}.
+
+
This is a protected area of the application.
+
+
+
+
+
+
+
+
+
+
+
Looking for something else? Use the navigation above.
+
+
+{{ template "footer.html" . }}
\ No newline at end of file
diff --git a/views/app/index.html b/views/app/index.html
index c6b9903..0d36565 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -1,10 +1,36 @@
{{ template "header.html" . }}
-
- Golang Web App Template
-
-
- This is a template for the main app. This is not a protected route. You can access this page without being logged in.
-
+
+
+
+
+
+ This is a starter template for building your Go web application. Use it as a foundation to create
+ secure,
+ interactive pages with reusable components.
+
+
+ This page is publicly accessible. You do not need to log in to view it.
+
+
+
+
+
+
+
+ - Log in to access your dashboard and manage your account.
+ - Sign up to create a new account and start using the app.
+ - Explore the code and customize components to fit your needs.
+
+
+
-{{template "footer.html"}}
\ No newline at end of file
+{{ template "footer.html" }}
\ No newline at end of file
diff --git a/views/layout/footer.html b/views/layout/footer.html
index 12f431d..e80e25e 100644
--- a/views/layout/footer.html
+++ b/views/layout/footer.html
@@ -1,10 +1,37 @@
{{define "footer.html"}}