fix static bug and load main page

.gitea/workflows/build.yaml

@@ -1,6 +1,9 @@
 name: Build Process Supervisor
 
-on: [push]
+on:
+  push:
+    tags:
+      - '*'
 
 env:
   APP_NAME: processSupervisor
@@ -9,51 +12,87 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        include:
+          - os: windows
+            arch: amd64
+            ext: .exe
+          - os: linux
+            arch: amd64
+            ext: ""
+          - os: linux
+            arch: arm64
+            ext: ""
+          - os: linux
+            arch: arm
+            arm_version: 6
+            ext: ""
+
     steps:
+      - name: Install zip
+        run: |
+          apt-get update && apt-get install -y zip
+
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Set up Go
-        uses: actions/setup-go@v4
-        with:
-          go-version: 'stable'
-
-      - name: Build for Windows amd64
+      - name: Ensure latest Go is installed in /data/go
         run: |
-          GOOS=windows GOARCH=amd64 go build -ldflags="-s -w" -trimpath -o bin/${APP_NAME}-windows-amd64.exe ./...
+          export GOROOT=/data/go/go
+          export PATH=$GOROOT/bin:$PATH
+          export GOCACHE=/data/gocache
+          export GOMODCACHE=/data/gomodcache
+          mkdir -p $GOCACHE $GOMODCACHE
 
-      - name: Upload Windows amd64 binary
+          if [ ! -x "$GOROOT/bin/go" ]; then
+            echo "Go not found in $GOROOT, downloading latest stable..."
+            
+            GO_VERSION=$(curl -s https://go.dev/VERSION?m=text | head -n1)
+            echo "Latest version is $GO_VERSION"
+
+            mkdir -p /data/go
+            curl -sSL "https://go.dev/dl/${GO_VERSION}.linux-amd64.tar.gz" -o /tmp/go.tar.gz
+            tar -C /data/go -xzf /tmp/go.tar.gz
+          else
+            echo "Using cached Go from $GOROOT"
+          fi
+
+          go version
+
+      - name: Download Go dependencies
+        run: |
+          export GOROOT=/data/go/go
+          export PATH=$GOROOT/bin:$PATH
+          export GOCACHE=/data/gocache
+          export GOMODCACHE=/data/gomodcache
+          mkdir -p $GOCACHE $GOMODCACHE
+          go mod download
+
+      - name: Build binary
+        run: |
+          export GOROOT=/data/go/go
+          export PATH=$GOROOT/bin:$PATH
+          export GOCACHE=/data/gocache
+          export GOMODCACHE=/data/gomodcache
+          mkdir -p $GOCACHE $GOMODCACHE
+
+          OUTPUT="bin/${APP_NAME}-${{ matrix.os }}-${{ matrix.arch }}"
+          if [ -n "${{ matrix.arm_version }}" ]; then
+            OUTPUT="${OUTPUT}v${{ matrix.arm_version }}"
+            export GOARM=${{ matrix.arm_version }}
+          fi
+          OUTPUT="${OUTPUT}${{ matrix.ext }}"
+          echo "Building $OUTPUT"
+          GOOS=${{ matrix.os }} GOARCH=${{ matrix.arch }} go build -ldflags="-s -w" -trimpath -o "$OUTPUT"
+        shell: bash
+
+      - name: Zip artifact
+        run: |
+          zip bin/${{ env.APP_NAME }}-${{ matrix.os }}-${{ matrix.arch }}.zip bin/${{ env.APP_NAME }}-*
+
+      - name: Upload zipped artifact
         uses: actions/upload-artifact@v3
         with:
-          name: ${{env.APP_NAME}}-windows-amd64.exe
-          path: bin/${{env.APP_NAME}}-windows-amd64.exe
-
-      - name: Build for Linux amd64
-        run: |
-          GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -trimpath -o bin/${APP_NAME}-linux-amd64 ./...
-      
-      - name: Upload Linux amd64
-        uses: actions/upload-artifact@v3
-        with:
-          name: ${{env.APP_NAME}}-linux-amd64
-          path: bin/${{env.APP_NAME}}-linux-amd64
-
-      - name: Build for Linux arm64
-        run: |
-          GOOS=linux GOARCH=arm64 go build -ldflags="-s -w" -trimpath -o bin/${APP_NAME}-linux-arm64 ./...
-
-      - name: Upload Linux arm64
-        uses: actions/upload-artifact@v3
-        with:
-          name: ${{env.APP_NAME}}-linux-arm64
-          path: bin/${{env.APP_NAME}}-linux-arm64
-
-      - name: Build for Linux armv6 (Raspberry Pi)
-        run: |
-          GOOS=linux GOARCH=arm GOARM=6 go build -ldflags="-s -w" -trimpath -o bin/${APP_NAME}-linux-armv6 ./...
-
-      - name: Upload Linux armv6 (Raspberry Pi)
-        uses: actions/upload-artifact@v3
-        with:
-          name: ${{env.APP_NAME}}-linux-armv6
-          path: bin/${{env.APP_NAME}}-linux-armv6
+          name: ${{ env.APP_NAME }}-${{ matrix.os }}-${{ matrix.arch }}
+          path: bin/${{ env.APP_NAME }}-${{ matrix.os }}-${{ matrix.arch }}.zip

dist/supervisorTemplate.json

@@ -0,0 +1,11 @@
+{
+"processes":[{
+    "name":"Database DBM",
+    "executePath":"dist/test-windows-amd64.exe",
+    "workingDirectory":".",
+    "startDelay":1000,
+    "priority":0,
+    "arguments":["-sleep 5"]
+}
+]
+}

handlers/htopHandler.go

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"embed"
 	"encoding/json"
 	"html/template"
 	"net/http"
@@ -8,16 +9,18 @@ import (
 )
 
 type HTopHandler struct {
-	Table *models.HtopTable
+	Table     *models.HtopTable
+	templates *embed.FS
 }
 
-func NewHTopHandler() (*HTopHandler, error) {
+func NewHTopHandler(templates *embed.FS) (*HTopHandler, error) {
 	table, err := models.NewTable()
 	if err != nil {
 		return nil, err
 	}
 	return &HTopHandler{
-		Table: table,
+		Table:     table,
+		templates: templates,
 	}, nil
 }
 
@@ -38,14 +41,18 @@ func (h *HTopHandler) UpdateHTop(w http.ResponseWriter, r *http.Request) {
 	// Detect HTMX request via the HX-Request header
 	if r.Header.Get("HX-Request") == "true" {
 		tmpl := template.Must(
-			template.New("table.html").Funcs(funcMap).ParseFiles("templates/htop/table.html"),
+			template.New("table.html").Funcs(funcMap).ParseFS(
+				h.templates,
+				"templates/htop/table.html",
+			),
 		)
 		tmpl.Execute(w, h.Table)
 		return
 	}
 
 	tmpl := template.Must(
-		template.New("htop.html").Funcs(funcMap).ParseFiles(
+		template.New("htop.html").Funcs(funcMap).ParseFS(
+			h.templates,
 			"templates/htop/htop.html",
 			"templates/htop/table.html",
 		),

handlers/mainPage.go

@@ -1,17 +1,100 @@
 package handlers
 
 import (
+	"embed"
 	"html/template"
+	"log"
 	"net/http"
+	"os"
+	"processSupervisor/models"
 )
 
 type MainPage struct {
+	templates  *embed.FS
+	Supervisor *models.Supervisor
 }
 
-func UpdateMainPage(w http.ResponseWriter, r *http.Request) {
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	tmpl := template.Must(
-		template.New("index.html").ParseFiles("templates/index.html"),
-	)
-	tmpl.Execute(w, nil)
+func NewMainPage(templates *embed.FS) (*MainPage, error) {
+	var supervisor models.Supervisor
+	if _, err := os.Stat("cfg/"); err != nil {
+		s, err := models.ReadTemplate("dist/supervisorTemplate.json")
+		if err != nil {
+			return nil, err
+		}
+		supervisor = s
+	}
+
+	if err := supervisor.StartProcesses(); err != nil {
+		return nil, err
+	}
+	return &MainPage{
+		templates:  templates,
+		Supervisor: &supervisor,
+	}, nil
+}
+
+func (m *MainPage) UpdateMainPage(w http.ResponseWriter, r *http.Request) {
+	tmpl := template.Must(
+		template.New("index.html").ParseFS(
+			m.templates,
+			"templates/index.html",
+		),
+	)
+
+	// tmpl := template.Must(
+	// 	template.New("index.html").ParseFiles(
+	// 		"templates/index.html",
+	// 	),
+	// )
+	tmpl.Execute(w, m)
+}
+
+func (m *MainPage) StartProcess(w http.ResponseWriter, r *http.Request) {
+	name := r.PostFormValue("name")
+
+	// This is where you trigger the .Start method
+	err := m.Supervisor.StartProcessByName(name)
+	if err != nil {
+		log.Println("Failed to start process", err)
+
+		//http.Error(w, "Failed to start process", http.StatusInternalServerError)
+		//return
+	}
+	m.UpdateMainPage(w, r)
+	//w.WriteHeader(http.StatusOK)
+}
+
+func (m *MainPage) StopProcess(w http.ResponseWriter, r *http.Request) {
+	name := r.PostFormValue("name")
+
+	err := m.Supervisor.StopProcessByName(name)
+	if err != nil {
+		log.Println("Failed to stop process", err)
+		//http.Error(w, "Failed to stop process", http.StatusInternalServerError)
+		//return
+	}
+	m.UpdateMainPage(w, r)
+	//w.WriteHeader(http.StatusOK)
+}
+
+func (m *MainPage) RestartProcess(w http.ResponseWriter, r *http.Request) {
+	name := r.PostFormValue("name")
+
+	err := m.Supervisor.StopProcessByName(name)
+	if err != nil {
+		log.Println("Failed to start process", err)
+
+		//http.Error(w, "Failed to start process", http.StatusInternalServerError)
+		//return
+	}
+
+	err = m.Supervisor.StartProcessByName(name)
+	if err != nil {
+		log.Println("Failed to stop process", err)
+
+		//	http.Error(w, "Failed to stop process", http.StatusInternalServerError)
+		//	return
+	}
+	m.UpdateMainPage(w, r)
+	//w.WriteHeader(http.StatusOK)
 }

main.go

@@ -1,31 +1,49 @@
 package main
 
 import (
+	"embed"
 	"flag"
 	"fmt"
+	"io/fs"
 	"log"
 	"net/http"
 	"processSupervisor/handlers"
 )
 
+//go:embed templates/*.html templates/*/*.html
+var templatesFS embed.FS
+
+//go:embed static
+var staticFS embed.FS
+
 func main() {
 
-	port := flag.Uint("port", 9400, "listenig port")
-	flag.Parse()
-
-	htop, err := handlers.NewHTopHandler()
+	port := flag.Uint("port", 9400, "listening port")
+	htop, err := handlers.NewHTopHandler(&templatesFS)
 	if err != nil {
 		panic(err)
 	}
 
-	fs := http.FileServer(http.Dir("static"))
-	http.Handle("/static/", http.StripPrefix("/static/", fs))
+	mainPage, err := handlers.NewMainPage(&templatesFS)
+	if err != nil {
+		panic(err)
+	}
+
+	staticSub, err := fs.Sub(staticFS, "static")
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticSub))))
 
 	http.HandleFunc("/taskmanager/htop", htop.UpdateHTop)
-	http.HandleFunc("/", handlers.UpdateMainPage)
+	http.HandleFunc("/", mainPage.UpdateMainPage)
+	http.HandleFunc("/start-process", mainPage.StartProcess)
+	http.HandleFunc("/stop-process", mainPage.StopProcess)
+	http.HandleFunc("/restart-process", mainPage.RestartProcess)
 	http.HandleFunc("/taskmanager/kill", handlers.KillHandler)
 	http.HandleFunc("/taskmanager/usage", handlers.UsageHandler)
 
-	log.Printf("Listening on http://localhost:%d/taskmanager/htop\n", *port)
+	log.Printf("Listening on http://localhost:%d\n", *port)
 	log.Fatal(http.ListenAndServe(fmt.Sprintf(":%d", *port), nil))
 }

models/supervisor.go

@@ -0,0 +1,59 @@
+package models
+
+import (
+	"encoding/json"
+	"fmt"
+	"os"
+	"sort"
+)
+
+type Supervisor struct {
+	Processes []*SupervisorProcess `json:"processes"`
+}
+
+func ReadTemplate(path string) (supervisor Supervisor, err error) {
+	content, err := os.ReadFile(path)
+	if err != nil {
+		return
+	}
+
+	err = json.Unmarshal(content, &supervisor)
+	return
+}
+
+func (s *Supervisor) StartProcesses() error {
+	sort.Slice(s.Processes, func(i, j int) bool {
+		return s.Processes[i].Priority < s.Processes[j].Priority
+	})
+
+	for _, p := range s.Processes {
+		p.Start()
+	}
+	return nil
+}
+
+func (s *Supervisor) GetProcesses() (processes []SupervisorProcess) {
+	for _, p := range s.Processes {
+		processes = append(processes, *p)
+	}
+	return
+}
+
+func (s *Supervisor) StartProcessByName(name string) error {
+	for _, p := range s.Processes {
+		if p.Name == name {
+			return p.Start()
+		}
+	}
+	return fmt.Errorf("process %s not found", name)
+}
+
+func (s *Supervisor) StopProcessByName(name string) error {
+	for _, p := range s.Processes {
+		if p.Name == name {
+			return p.Stop()
+
+		}
+	}
+	return fmt.Errorf("process %s not found", name)
+}

models/supervisorProcess.go

@@ -0,0 +1,92 @@
+package models
+
+import (
+	"context"
+	"fmt"
+	"os"
+	"os/exec"
+	"strings"
+	"time"
+)
+
+type SupervisorProcess struct {
+	Name             string              `json:"name"`
+	ExecutePath      string              `json:"executePath"`
+	WorkingDirectory string              `json:"workingDirectory,omitempty"`
+	StartDelay       int                 `json:"startDelay,omitempty"`
+	Priority         int                 `json:"priority,omitempty"`
+	Arguments        []string            `json:"arguments,omitempty"`
+	process          *exec.Cmd           `json:"-"`
+	cancel           *context.CancelFunc `json:"-"`
+	Running          bool                `json:"-"`
+}
+
+func (p *SupervisorProcess) Start() error {
+	if p.process != nil && p.process.Process != nil {
+		return fmt.Errorf("process %s already running", p.Name)
+	}
+
+	ctx, cancel := context.WithCancel(context.Background())
+	p.cancel = &cancel
+
+	var args []string
+	for _, arg := range p.Arguments {
+		fields := strings.Fields(arg)
+		args = append(args, fields...)
+	}
+
+	cmd := exec.CommandContext(ctx, p.ExecutePath, args...)
+	cmd.Dir = p.WorkingDirectory
+	cmd.Stdout = os.Stdout
+	cmd.Stderr = os.Stderr
+
+	p.process = cmd
+
+	time.Sleep(time.Duration(p.StartDelay) * time.Millisecond)
+
+	if err := cmd.Start(); err != nil {
+		return fmt.Errorf("failed to start process %s: %w", p.Name, err)
+	}
+
+	go func() {
+		defer func() {
+			p.Running = false
+		}()
+
+		p.Running = true
+		err := cmd.Wait()
+		if err != nil {
+			fmt.Printf("Process %s exited with error: %v\n", p.Name, err)
+		} else {
+			fmt.Printf("Process %s exited successfully\n", p.Name)
+		}
+	}()
+
+	return nil
+}
+
+func (p *SupervisorProcess) Stop() error {
+	defer func() {
+		p.Running = false
+	}()
+
+	if p.process == nil || p.process.Process == nil {
+		return fmt.Errorf("process %s is not running", p.Name)
+	}
+
+	// Cancel the context
+	if p.cancel != nil {
+		(*p.cancel)()
+	}
+
+	err := p.process.Process.Kill()
+	if err != nil {
+		return fmt.Errorf("failed to kill process %s: %w", p.Name, err)
+	}
+
+	p.process = nil
+	p.cancel = nil
+
+	fmt.Printf("Process %s stopped.\n", p.Name)
+	return nil
+}

templates/index.html

@@ -4,59 +4,174 @@
   <meta charset="UTF-8">
   <title>Process Dashboard</title>
   <script src="https://unpkg.com/htmx.org@1.9.5"></script>
-  <style>
-    body {
-      font-family: sans-serif;
-      margin: 2rem;
-    }
-    .top-link {
-      display: block;
-      margin-bottom: 1rem;
-      font-size: 1.2rem;
-    }
-    ul#process-list {
-      list-style: none;
-      padding: 0;
-    }
-    ul#process-list li {
-      background: #f4f4f4;
-      margin: 0.5rem 0;
-      padding: 0.75rem;
-      border-radius: 5px;
-    }
-  </style>
+  
 </head>
 <body>
 
-    <div class="top-link-container">
+
+<!-- Placeholder List for Future Processes -->
+<ul id="process-list">
+      <div class="top-link-container">
         <a href="/taskmanager/htop" class="top-link" target="_blank" rel="noopener noreferrer">
             📈 Task Manager
         </a>
     </div>
 
   <!-- Header -->
-  <h2>Future Processes</h2>
-
-  <!-- Placeholder List for Future Processes -->
-  <ul id="process-list">
-    <li>📌 Process A (placeholder)</li>
-    <li>📌 Process B (placeholder)</li>
-    <li>📌 Process C (placeholder)</li>
-  </ul>
-
-  <!-- Example Button for Future HTMX Action -->
-  <button 
-    hx-get="/get-latest-processes" 
-    hx-target="#process-list" 
-    hx-swap="innerHTML">
-    🔄 Load Latest Processes
-  </button>
+  <h2>Processes</h2>
+  {{ range .Supervisor.GetProcesses }}
+    <li>
+      <span class="process-name">📦
+        {{ if .Running }}
+          🟢 {{ .Name }}
+        {{ else }}
+          🔴 {{ .Name }}
+        {{ end }}
+      </span>
 
+      <div class="dropdown">
+        <button class="dot-button">⋮</button>
+        <div class="dropdown-content">
+          <button 
+            hx-post="/start-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            ▶️ Start
+          </button>
+          <button 
+            hx-post="/stop-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            ⏹️ Stop
+          </button>
+          <button 
+            hx-post="/restart-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            🔁 Restart
+          </button>
+        </div>
+      </div>
+    </li>
+  {{ end }}
+</ul>
 </body>
 <style>
+  body {
+    font-family: "Segoe UI", Roboto, sans-serif;
+    margin: 2rem;
+    background-color: #f7f9fb;
+    color: #222;
+  }
+
   .top-link-container {
     text-align: center;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .top-link {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #4a90e2;
+    font-weight: 500;
+  }
+
+  .top-link:hover {
+    text-decoration: underline;
+  }
+
+  h2 {
+    text-align: center;
+    color: #444;
+    margin-bottom: 1.5rem;
+  }
+
+  ul#process-list {
+    list-style: none;
+    padding: 0;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  ul#process-list li {
+    background: #fff;
+    margin: 0.75rem 0;
+    padding: 1rem 1.25rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: box-shadow 0.25s ease;
+  }
+
+  ul#process-list li:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .process-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #2c3e50;
+  }
+
+  .dot-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #777;
+    padding: 0 4px;
+    transition: color 0.2s;
+  }
+
+  .dot-button:hover {
+    color: #333;
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 1.8rem;
+    background-color: #fff;
+    min-width: 130px;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+    border-radius: 6px;
+    overflow: hidden;
+    z-index: 100;
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  .dropdown-content button {
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #333;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .dropdown-content button:hover {
+    background-color: #f0f0f0;
+    color: #000;
   }
 </style>
 </html>

templates/processes.html

@@ -0,0 +1,156 @@
+<ul id="process-list">
+  {{ range .Supervisor.GetProcesses }}
+    <li>
+      <span class="process-name">📦
+        {{ if .Running }}
+          🟢 {{ .Name }}
+        {{ else }}
+          🔴 {{ .Name }}
+        {{ end }}
+      </span>
+
+      <div class="dropdown">
+        <button class="dot-button">⋮</button>
+        <div class="dropdown-content">
+          <button 
+            hx-post="/start-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            ▶️ Start
+          </button>
+          <button 
+            hx-post="/stop-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            ⏹️ Stop
+          </button>
+          <button 
+            hx-post="/restart-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            🔁 Restart
+          </button>
+        </div>
+      </div>
+    </li>
+  {{ end }}
+</ul>
+<style>
+  body {
+    font-family: "Segoe UI", Roboto, sans-serif;
+    margin: 2rem;
+    background-color: #f7f9fb;
+    color: #222;
+  }
+
+  .top-link-container {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .top-link {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #4a90e2;
+    font-weight: 500;
+  }
+
+  .top-link:hover {
+    text-decoration: underline;
+  }
+
+  h2 {
+    text-align: center;
+    color: #444;
+    margin-bottom: 1.5rem;
+  }
+
+  ul#process-list {
+    list-style: none;
+    padding: 0;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  ul#process-list li {
+    background: #fff;
+    margin: 0.75rem 0;
+    padding: 1rem 1.25rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: box-shadow 0.25s ease;
+  }
+
+  ul#process-list li:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .process-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #2c3e50;
+  }
+
+  .dot-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #777;
+    padding: 0 4px;
+    transition: color 0.2s;
+  }
+
+  .dot-button:hover {
+    color: #333;
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 1.8rem;
+    background-color: #fff;
+    min-width: 130px;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+    border-radius: 6px;
+    overflow: hidden;
+    z-index: 100;
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  .dropdown-content button {
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #333;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .dropdown-content button:hover {
+    background-color: #f0f0f0;
+    color: #000;
+  }
+</style>
+</html>