CSP-Reporter/src/templates/base.html

158 lines
8.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<!-- SECTION: Navbar Block 3 -->
<section class="w-full bg-gray-900 text-white ">
<nav class="flex flex-col items-center justify-between mx-auto p-8 md:flex-row lg:w-5/6 xl:3/4">
<!-- SECTION : Logo -->
<div class="mr-4 mb-4 md:mb-0 flex bg-red-500 items-center justify-center rounded-full w-8 h-8 sm:w-12 sm:h-12">
<svg
class="fill-current inline-block h-4 text-white "
viewBox="0 0 441 308"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M154.404 267.999C154.269 268 154.135 268 154 268C91.0395 268 40 216.96 40 154C40 91.0395 91.0395 40 154 40C206.215 40 250.231 75.1045 263.734 123H304.879C290.533 52.8067 228.433 0 154 0C68.9482 0 0 68.9482 0 154C0 239.052 68.9482 308 154 308H441V268H154.404L154.404 267.999ZM441 234L152 234V233.9C151.983 233.9 151.967 233.9 151.95 233.9C108.347 233.9 73 198.553 73 154.95C73 111.347 108.347 76 151.95 76C184.181 76 211.901 95.3141 224.168 123H174.233C167.919 118.588 160.237 116 151.95 116C130.438 116 113 133.438 113 154.95C113 176.144 129.927 193.384 151 193.888V194H152H220.581L441 194V234Z"
/>
</svg>
</div>
<!-- !SECTION : Logo -->
<!-- SECTION : Items -->
<ul class="flex w-full md:w-1/3 items-center justify-between uppercase">
<!-- SECTION : Link 1 -->
<li>
<a href="" class="transition-colors duration-150 ease-in-out hover:text-red-500" >About</a>
</li>
<li>
<a href="" class="transition-colors duration-150 ease-in-out hover:text-red-500 ">Contact</a>
</li>
<li>
<a href="/login">
<button class="px-6 h-16 hover:bg-red-600 bg-red-500 focus:ring-red-300 text-white ring ring-transparent text-xl shadow-md rounded-md uppercase font-semibold focus:outline-none">Login</button>
</a>
</li>
</ul>
<!-- !SECTION : Items -->
</nav>
</section>
<!-- !SECTION: Navbar Block 3 -->
{% block content %} {% endblock %}
<!-- SECTION: Footer 3 -->
<section
class="flex py-8 w-full h-full bg-gray-900 text-white "
>
<div class="w-3/4 items-center mx-auto flex flex-col">
<!-- SECTION: Content -->
<div class="flex flex-col w-full">
<div
class="flex items-center flex-col lg:flex-row w-full border-b border-gray-200 pb-8 justify-between"
>
<!-- !SECTION: CTA -->
<h2
class="font-light text-center text-4xl mb-4 lg:mb-0 font-serif"
>
Unlock your full potential.
</h2>
<!-- SECTION: Button -->
<button
class="px-6 h-16 text-white hover:bg-red-600 bg-red-500 ring focus:ring-red-300 ring-transparent text-xl shadow-md rounded-md uppercase font-semibold focus:outline-none"
>
Subscribe
</button>
<!-- !SECTION: Button -->
<!-- !SECTION: CTA -->
</div>
</div>
<!-- !SECTION: Content -->
<div class="w-full mt-4">
<!-- SECTION : Logo -->
<div
class="flex flex-col md:flex-row w-full justify-between px-8 items-center"
>
<div
class="flex flex-col sm:flex-row w-auto items-center mb-4 lg:mb-0"
>
<div
class="flex items-center justify-center rounded-full w-12 h-12 bg-red-500 "
>
<svg
class="fill-current inline-block h-4 text-white "
viewBox="0 0 441 308"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M154.404 267.999C154.269 268 154.135 268 154 268C91.0395 268 40 216.96 40 154C40 91.0395 91.0395 40 154 40C206.215 40 250.231 75.1045 263.734 123H304.879C290.533 52.8067 228.433 0 154 0C68.9482 0 0 68.9482 0 154C0 239.052 68.9482 308 154 308H441V268H154.404L154.404 267.999ZM441 234L152 234V233.9C151.983 233.9 151.967 233.9 151.95 233.9C108.347 233.9 73 198.553 73 154.95C73 111.347 108.347 76 151.95 76C184.181 76 211.901 95.3141 224.168 123H174.233C167.919 118.588 160.237 116 151.95 116C130.438 116 113 133.438 113 154.95C113 176.144 129.927 193.384 151 193.888V194H152H220.581L441 194V234Z"
/>
</svg>
</div>
<p class="text-xs flex-1 text-center px-4 text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
perferendis ad minima magni.
</p>
</div>
<div class="justify-end flex flex-col sm:flex-row items-center">
<p class="text-xs px-2 text-gray-400 text-center">
Your Copyright
</p>
<!-- SECTION: Social -->
<div class="flex justify-between items-center">
<svg
class="w-8 fill-current text-red-500"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M0 0v24h24v-24h-24zm18.862 9.237c.208 4.617-3.235 9.765-9.33 9.765-1.854 0-3.579-.543-5.032-1.475 1.742.205 3.48-.278 4.86-1.359-1.437-.027-2.649-.976-3.066-2.28.515.098 1.021.069 1.482-.056-1.579-.317-2.668-1.739-2.633-3.26.442.246.949.394 1.486.411-1.461-.977-1.875-2.907-1.016-4.383 1.619 1.986 4.038 3.293 6.766 3.43-.479-2.053 1.079-4.03 3.198-4.03.944 0 1.797.398 2.396 1.037.748-.147 1.451-.42 2.085-.796-.245.767-.766 1.41-1.443 1.816.664-.08 1.297-.256 1.885-.517-.44.656-.997 1.234-1.638 1.697z"
/>
</svg>
<svg
class="w-8 fill-current text-red-500"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
/>
</svg>
<svg
class="w-8 fill-current text-red-500 "
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M0 0v24h24v-24h-24zm8 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.397-2.586 7-2.777 7 2.476v6.759z"
/>
</svg>
</div>
<!-- !SECTION: Social -->
</div>
</div>
<!-- !SECTION : Logo -->
</div>
</div>
</section>
<!-- !SECTION: Footer 3 -->
</body>
</html>