kkroesch · January 24, 2024 10:12
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="de">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <link href="/static/style.css" rel="stylesheet">
 </head>

 <body>
  {% include 'nav.html' %}
  <div class="content">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Keine Ergebnisse</h5>
                <h6 class="card-subtitle mb-2 text-muted">Keine Dokumente mit diesem Schlüsselwort gefunden.</h6>
            </div>
        </div>
    </div>

    <!-- SCRIPTS -->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>

 </html>
diff --git a/nav.html b/nav.html
 <nav class="navbar navbar-expand-lg navbar-light bg-info p-3">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">iQ</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class=" collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ms-auto ">
                <li class="nav-item">
                    <a class="nav-link mx-2" aria-current="page" href="/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link mx-2"
                        href="https://opensearch.org/docs/latest/clients/python-low-level/">OpenSearch</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link mx-2" href="https://haystack.deepset.ai/">Haystack</a>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto d-none d-lg-inline-flex">
                <li class="nav-item mx-2">
                    <a class="nav-link" href="/analyze" title="Analyze with ML"><i class="fa-solid fa-magnifying-glass-chart"></i></a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="/settings" title="Settings"><i class="fa-solid fa-gear"></i></a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="/account" title="Account"><i class="fa-solid fa-user"></i></a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link" href="https://github.com/kkroesch/iq" target="_blank" title="Project Homepage"><i
                            class="fab fa-github"></i></a>
                </li>
            </ul>
        </div>
    </div>
 </nav>
diff --git a/searchbox.html b/searchbox.html
 <div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-6"><span class="logo text-muted">iQ</span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="search-box">
                <form method="GET" action="/q">
                    <input type="text" class="form-control" placeholder="Suchbegriff" name="query"
                        value="{{ query }}">
                    <span class="search-icon">
                        <i class="fa fa-search"></i>
                    </span>
                </form>
            </div>
        </div>
    </div>
 </div>
diff --git a/style.css b/style.css
 .search-box {
    position: relative;
    margin-top: 20px;
 }

 .search-box input[type="text"] {
    border-radius: 5px;
    padding-right: 35px;
 }

 .search-box .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
 }

 .logo {
    font-size: 48pt;
    font-weight: bold;
    text-align: center;
 }

 .favicon {
    padding-right: 0.5em;
 }

 .card { border: none; }
 .card ul {
    display: flex;
    padding: 0;
    list-style: none;
    max-height: .5em;
 }

 .card li {
    margin-right: 2em;
    padding-right: .3em;
 }

 em {
    background-color: gold;
    padding: 2px;
 }

 .navbar-custom {
    border-bottom: 4px solid #f8f9fa;
 }

 .navbar-custom .navbar-nav .nav-link {
    color: #6c757d;
 }

 .navbar-toggler {
    border-color: #6c757d;
 }

 .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }

 h3.results-section {
    border-bottom: 1px solid #6c757d;
    font-size: larger;
 }

 @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
 }

 .fade-in {
    animation: fadeIn ease 0.5s;
    animation-fill-mode: forwards;
 }
	<!DOCTYPE html>
	<html lang="de">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{ title }}</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
	<link href="/static/style.css" rel="stylesheet">
	</head>

	<body>
	{% include 'nav.html' %}
	<div class="content">
	<div class="card">
	<div class="card-body">
	<h5 class="card-title">Keine Ergebnisse</h5>
	<h6 class="card-subtitle mb-2 text-muted">Keine Dokumente mit diesem Schlüsselwort gefunden.</h6>
	</div>
	</div>
	</div>

	<!-- SCRIPTS -->

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	</body>

	</html>
	<div class="container">
	<div class="row">
	<div class="col-md-6 offset-md-6"><span class="logo text-muted">iQ</span>
	</div>
	</div>
	<div class="row">
	<div class="col-md-6 offset-md-3">
	<div class="search-box">
	<form method="GET" action="/q">
	<input type="text" class="form-control" placeholder="Suchbegriff" name="query"
	value="{{ query }}">
	<span class="search-icon">
	<i class="fa fa-search"></i>
	</span>
	</form>
	</div>
	</div>
	</div>
	</div>
	.search-box {
	position: relative;
	margin-top: 20px;
	}

	.search-box input[type="text"] {
	border-radius: 5px;
	padding-right: 35px;
	}

	.search-box .search-icon {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #aaa;
	}

	.logo {
	font-size: 48pt;
	font-weight: bold;
	text-align: center;
	}

	.favicon {
	padding-right: 0.5em;
	}

	.card { border: none; }
	.card ul {
	display: flex;
	padding: 0;
	list-style: none;
	max-height: .5em;
	}

	.card li {
	margin-right: 2em;
	padding-right: .3em;
	}

	em {
	background-color: gold;
	padding: 2px;
	}

	.navbar-custom {
	border-bottom: 4px solid #f8f9fa;
	}

	.navbar-custom .navbar-nav .nav-link {
	color: #6c757d;
	}

	.navbar-toggler {
	border-color: #6c757d;
	}

	.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	h3.results-section {
	border-bottom: 1px solid #6c757d;
	font-size: larger;
	}

	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	.fade-in {
	animation: fadeIn ease 0.5s;
	animation-fill-mode: forwards;
	}