diff --git a/templates/project/test.go.html b/templates/project/test.go.html
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..42acab5786dcd9401e195ce2678c299a0d2df55d 100644
--- a/templates/project/test.go.html
+++ b/templates/project/test.go.html
@@ -0,0 +1,211 @@
+<!--{{ define "requirement-collection" }}-->
+
+
+<!--
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8">
+ <title>Anforderungsübersicht</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+ rel="stylesheet"
+ />
+</head>
+<body>
+ <div class="container mt-5">
+ <h1>Anforderungsübersicht</h1>
+
+<table class="table table-hover">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col">ID</th>
+ <th scope="col">Beschreibung</th>
+ <th scope="col">Status</th>
+ <th scope="col">Aktionen</th>
+ </tr>
+ </thead>
+ <tbody class="table-group-divider">
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>John</td>
+ <td>Doe</td>
+ <td>@social</td>
+ </tr>
+
+ </tbody>
+</table>
+</body>
+</html>
+-->
+
+
+
+
+
+
+<!--
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8" />
+ <title>Anforderungsübersicht</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+<body>
+ <div class="container mt-5">
+ <h1>Anforderungsübersicht</h1>
+
+ <form class="d-flex" role="search">
+ <input class="form-control me-2" type="search" placeholder="Suche" aria-label="Suche">
+ <button class="btn btn-outline-success" type="submit" aria-label="Suchen">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+ <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+ </svg>
+ </button>
+</form>
+
+
+ <table class="table table-hover">
+ <thead class="table-dark">
+ <tr>
+ <th>ID</th>
+ <th>Beschreibung</th>
+ <th>Status</th>
+ <th>Aktionen</th>
+ </tr>
+ </thead>
+ <tbody class="table-group-divider">
+ {{range .Requirements}}
+ <tr>
+ <td>{{.ID}}</td>
+ <td>{{.Beschreibung}}</td>
+ <td>
+ <div class="dropdown">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ Offen
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Offen</a></li>
+ <li><a class="dropdown-item" href="#">In Bearbeitung</a></li>
+ <li><a class="dropdown-item" href="#">Geschlossen</a></li>
+ </ul>
+ </div>
+ </td>
+ <td><button class="btn btn-sm btn-primary">Bearbeiten</button></td>
+ </tr>
+ {{else}}
+ <tr>
+ <td colspan="4" class="text-center">Keine Anforderungen vorhanden</td>
+ </tr>
+ {{end}}
+ </tbody>
+ </table>
+ </div>
+</body>
+</html>
+-->
+
+
+
+
+
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+ <meta charset="UTF-8" />
+ <title>Anforderungsübersicht</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+
+ <style>
+ .search-input-wrapper {
+ position: relative;
+ width: 100%;
+ max-width: 400px; /* Optional, max Breite */
+ }
+ .search-input-wrapper svg {
+ position: absolute;
+ left: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
+ color: #6c757d; /* Bootstrap Grauton */
+ width: 16px;
+ height: 16px;
+ z-index: 2;
+ pointer-events: auto;
+ }
+ .search-input-wrapper input {
+ padding-left: 38px; /* Platz für Icon */
+ }
+ </style>
+</head>
+<body>
+ <div class="container mt-5">
+ <h1>Anforderungsübersicht</h1>
+ <!-- This is the Search bar -->
+ <form class="d-flex" role="search" onsubmit="event.preventDefault(); alert('Suche: ' + document.getElementById('searchInput').value);">
+ <div class="search-input-wrapper me-2">
+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" onclick="document.getElementById('searchInput').focus();" aria-label="Such-Icon" role="button" tabindex="0" onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); document.getElementById('searchInput').focus(); }">
+ <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+ </svg>
+ <input id="searchInput" class="form-control" type="search" placeholder="Suche" aria-label="Suche" />
+ </div>
+ <button class="btn btn-outline-success" type="submit" aria-label="Suchen">Suchen</button>
+ </form>
+
+ <!--This is the Table with a hover function-->
+ <table class="table table-hover mt-4">
+ <thead class="table-dark">
+ <tr>
+ <th>ID</th>
+ <th>Beschreibung</th>
+ <th>Status</th>
+ <th>Aktionen</th>
+ </tr>
+ </thead>
+ <tbody class="table-group-divider">
+ {{range .Requirements}}
+ <tr>
+ <td>{{.ID}}</td>
+ <td>{{.Beschreibung}}</td>
+ <td>
+ <div class="dropdown">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+ Offen
+ </button>
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="#">Offen</a></li>
+ <li><a class="dropdown-item" href="#">In Bearbeitung</a></li>
+ <li><a class="dropdown-item" href="#">Geschlossen</a></li>
+ </ul>
+ </div>
+ </td>
+ <td><button class="btn btn-sm btn-primary">Bearbeiten</button></td>
+ </tr>
+ {{else}}
+ <tr>
+ <td colspan="4" class="text-center">Keine Anforderungen vorhanden</td>
+ </tr>
+ {{end}}
+ </tbody>
+ </table>
+ </div>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>