second commit
This commit is contained in:
@ -8,18 +8,58 @@
|
||||
|
||||
{# CSS Block #}
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='dist/css/output.css') }}">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{# Header Block #}
|
||||
{% block header %}
|
||||
<header>
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/about">About</a>
|
||||
</nav>
|
||||
</header>
|
||||
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
|
||||
<div class="container flex flex-wrap items-center justify-between mx-auto">
|
||||
<a href="https://flowbite.com/" class="flex items-center">
|
||||
<img src="https://pics.ekstrah.com/0p36up.png" class="h-6 mr-3 sm:h-9" alt="Flowbite Logo">
|
||||
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Tidal Search</span>
|
||||
</a>
|
||||
<div class="flex md:order-2">
|
||||
<button type="button"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get
|
||||
started</button>
|
||||
<button data-collapse-toggle="navbar-cta" type="button"
|
||||
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-cta" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-cta">
|
||||
<ul
|
||||
class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<a href="#"
|
||||
class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
|
||||
aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{# Main Content Block #}
|
||||
@ -30,14 +70,39 @@
|
||||
|
||||
{# Footer Block #}
|
||||
{% block footer %}
|
||||
<footer>
|
||||
<p>© 2024 My Site. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<footer class="bg-white rounded-lg shadow dark:bg-gray-900 m-4">
|
||||
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
|
||||
<div class="sm:flex sm:items-center sm:justify-between">
|
||||
<a href="https://flowbite.com/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
|
||||
<img src="https://pics.ekstrah.com/0p36up.png" class="h-8" alt="Flowbite Logo" />
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Dongho Kim</span>
|
||||
</a>
|
||||
<ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
|
||||
<li>
|
||||
<a href="#" class="hover:underline me-4 md:me-6">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline me-4 md:me-6">Licensing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:underline">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||
<span class="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://flowbite.com/" class="hover:underline">Ailaplacelab</a>. All Rights Reserved.</span>
|
||||
</div>
|
||||
</footer>
|
||||
{% endblock %}
|
||||
|
||||
{# JavaScript Block #}
|
||||
{% block javascript %}
|
||||
<script src="{{ url_for('static', path='/js/main.js') }}"></script>
|
||||
{% endblock %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,19 +2,33 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<h1>Welcome to the Home Page</h1>
|
||||
<p>This is the home page content.</p>
|
||||
<div class="h-lvh place-content-center">
|
||||
<form class="max-w-lg mx-auto flex-auto mb-14 w-5/6" method="POST" action="/search">
|
||||
<div class="flex">
|
||||
<label for="search-dropdown" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Your st</label>
|
||||
<!-- Replace button with select for native dropdown -->
|
||||
<select name="category" class="flex-shrink-0 z-10 py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600">
|
||||
<option value="Artists">Artists</option>
|
||||
<option value="Playlist">Playlist</option>
|
||||
<option value="Song">Song</option>
|
||||
<option value="Albums">Albums</option>
|
||||
</select>
|
||||
|
||||
<div class="relative w-full">
|
||||
<input type="search" name="query" id="search-dropdown"
|
||||
class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
|
||||
placeholder="Search Mockups, Logos, Design Templates..." required />
|
||||
<button type="submit"
|
||||
class="absolute top-0 end-0 p-2.5 text-sm font-medium h-full text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
|
||||
</svg>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user