Skip to content

Commit

Permalink
Fix: Adjust the UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@wubeZ
wubeZ committed Mar 18, 2024
1 parent 3336077 commit 87c33c5
Show file tree
Hide file tree
Showing 4 changed files with 224 additions and 38 deletions.
37 changes: 32 additions & 5 deletions food_truck_finder/food_trucks/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,56 @@
<title>{{ tittle }}</title>
<link href="{% static 'src/styles.css' %}" rel="stylesheet">
<script href="{% static 'js/map.js' %}"></script>
<script href="{% static 'js/search.js' %}"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Header -->
<header class="sticky top-0 w-full h-24 bg-blue-50 flex items-center">
<div class="">
<h1 class="font-normal text-xl p-4">Food Truck Finder</h1>
<header class="z-40 w-full h-24 bg-white pt-4 px-4 sm:px-6 md:px-8 border-b border-slate-200">
<div class="w-full flex justify-between items-center">
<h1 class="font-semibold text-[#030303] text-lg sm:text-xl md:text-2xl p-4">
<a href="{% url 'food_trucks:index' %}">Food Truck Finder</a>
</h1>
<span class="bg-blue-500 hover:bg-blue-600 px-4 py-2 text-center text-white rounded-md">Explore</span>
</div>
</header>

<div class="">
{% block content %}

{% endblock %}
</div>


<!-- Footer -->
<footer class="h-40 w-full bg-black">
<h1>Footer here some thing to do!</h1>
<footer class="h-40 w-full bg-white border-t border-slate-200 mt-12">
<div class="flex justify-between items-center py-8 px-6 md:px-12">
<div class="w-full">
<h1 class="font-semibold text-[#030303] text-base sm:text-lg md:text-xl">Food Truck Finder</h1>
<p class="text-sm text-gray-600 mr-4 pt-4">Find food trucks near you</p>
</div>

<div class="flex flex-col justify-between items-end w-full">
<p class="text-sm text-gray-600 mr-4">Support</p>
<p class="text-sm text-gray-600 mr-4">Help Center</p>
<p class="text-sm text-gray-600 mr-4">Customer</p>
<p class="text-sm text-gray-600 mr-4">How it works</p>
<p class="text-sm text-gray-600 mr-4">Get in touch</p>
</div>
</div>

<div class="flex justify-center items-center h-12 bg-blue-50 text-black">
<p class="text-sm">© 2024 Food Truck Finder</p>
</div>

</footer>

</body>
</html>

{% block scripts %}
<script src="{% static 'js/map.js' %}"></script>
<script src="{% static 'js/search.js' %}"></script>
{% endblock %}
49 changes: 28 additions & 21 deletions food_truck_finder/food_trucks/templates/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,45 @@

{% block content %}

<section class="flex flex-col md:flex-row justify-between p-4">
<div class="max-w-md mb-4 md:mb-0 md:mr-4">
<section class="flex flex-col lg:flex-row justify-between gap-8 p-4 m-12">
<div class="max-w-md lg:w-1/3 shadow-xl p-4 rounded-xl flex flex-col justify-around bg-cyan-50">
{% if food_truck %}
<h1 class="text-2xl font-bold mb-2">{{ food_truck.name }}</h1>
<p class="text-lg text-gray-600 mb-2">{{ food_truck.facility_type }}</p>
<p class="text-sm text-gray-600 mb-2">{{ food_truck.location_description }}</p>
<p class="text-sm text-gray-600 mb-2">{{ food_truck.address }}</p>
<p class="text-sm text-gray-600 mb-2">{{ food_truck.permit }}</p>
<p class="text-sm text-gray-600 mb-4">{{ food_truck.status }}</p>

<div class=" flex flex-col justify-between gap-2">
<h1 class="text-2xl font-bold pb-4">{{ food_truck.name }}</h1>
<p class="text-base text-gray-600 font-semibold flex gap-8 text-center items-center"> Type <span class="text-sm font-normal text-center">{{ food_truck.facility_type}}</span></p>
<p class="text-base text-gray-600 font-semibold flex gap-8 text-center items-center"> Location <span class="text-sm font-normal text-center">{{ food_truck.location_description}}</span></p>
<p class="text-base text-gray-600 font-semibold flex gap-8 text-center items-center"> Address <span class="text-sm font-normal text-center">{{ food_truck.address}}</span></p>
<p class="text-base text-gray-600 font-semibold flex gap-8 text-center items-center"> Permit <span class="text-sm font-normal text-center">{{ food_truck.permit}}</span></p>

</div>
{% if food_truck.food_items %}
<h2 class="text-lg font-semibold mb-2">Food Items</h2>
<ul class="list-disc ml-4">
{% for food_item in food_truck.food_items %}
<li class="text-sm text-gray-600 mb-1">{{ food_item }}</li>
{% endfor %}
</ul>
<div>
<h2 class="text-lg font-semibold mb-2 mt-4">Food Items</h2>
<ul class="ml-4 flex gap-4">
{% for food_item in food_truck.food_items %}
<li class="text-base text-gray-600">{{ food_item }}</li>
{% endfor %}
</ul>
</div>
{% endif %}

{% if food_truck.open_hours %}
<h2 class="text-lg font-semibold mt-4 mb-2">Open Hours</h2>
<div>
<h2 class="text-lg font-semibold mt-8 mb-2">Open Hours</h2>
{% for day, hours in food_truck.open_hours.items %}
<p class="text-sm text-gray-600 mb-1">{{ day }}</p>
<ul class="list-disc ml-4">
<div class="flex gap-4">
<p class="text-base mb-1 font-semibold text-black bg-cyan-300 px-4 py-1 rounded-lg ">{{ day }}</p>
<ul class="flex flex-wrap gap-4">
{% for hour in hours %}
<li class="text-sm text-gray-600">{{ hour.start_time }} - {{ hour.end_time }}</li>
<li class="text-sm font-medium text-center py-1">{{ hour.start_time }} - {{ hour.end_time }}</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
{% endif %}
</div>
<div id="map" class="w-full md:w-[600px] h-[300px] md:h-[400px]"></div>
</div>
<div id="map" class="lg:w-2/3 h-[300px] md:h-[600px]"></div>
</div>

<!-- Pass data to JavaScript -->
Expand Down
154 changes: 152 additions & 2 deletions food_truck_finder/food_trucks/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,158 @@
{% load static %}
{% block content %}

<section>
<button id="location-button" class="bg-blue-500 text-white px-4 py-2 rounded shadow hover:bg-blue-600">Search Near My Location</button>
<section class="px-4 md:px-8 lg:px-16">
<div class="relative mb-4 shadow-md rounded-lg">
<img src="{% static 'images/food_truck.jpg' %}" alt="Food Truck" class="w-full h-64 object-cover rounded-lg blur-[2px]">
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center w-full">
<h1 class="text-xl sm:text-3xl lg:text-4xl font-bold mb-4">Find the best food trucks in San Francisco</h1>
<p class="text-xs sm:text-lg">Explore a variety of cuisines on wheels near you!</p>
</div>
</div>

<h2 class="text-lg sm:text-2xl font-bold mt-8 mb-4">Find Food Trucks Near You</h2>

<div class="flex flex-col-reverse sm:flex-row justify-center items-center gap-6 sm:gap-2 md:gap-8 mb-8">
<button id="location-button" class="bg-blue-500 max-w-96 text-white px-8 py-3 rounded-xl shadow hover:bg-blue-600 text-xs md:text-sm lg:text-base sm:w-2/5 lg:w-1/3">
Near My Location
<span class="fa fa-location-arrow pl-2 fa-1x"></span>
</button>

<div class="flex w-full">
<input id="search-input" type="text"
placeholder="Search for food trucks by Name"
class="w-full p-2 border-2 border-slate-200 text-sm md:text-base lg:text-lg placeholder:text-sm md:placeholder:text-base placeholder:text-gray-400"
>
<button id="truck-search-button" class="bg-blue-500 text-white px-4 py-2 rounded-r-xl shadow hover:bg-blue-600">
<span class="fa fa-arrow-right fa-2x"></span>
</button>
</div>

</div>


<h2 class="text-lg sm:text-2xl font-bold mt-8 mb-4">Popular Food Trucks</h2>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="col-span-1">
<img src="{% static 'images/card.svg' %}" alt="Food Truck" class="w-full h-80 rounded-xl object-cover">
</div>
<div class="col-span-1">
<img src="{% static 'images/card.svg' %}" alt="Food Truck" class="w-full h-44 mb-4 rounded-xl object-cover hidden md:block">
<img src="{% static 'images/card.svg' %}" alt="Food Truck" class="w-full h-32 rounded-xl object-cover hidden md:block">
</div>
<div class="col-span-1">
<img src="{% static 'images/card.svg' %}" alt="Food Truck" class="w-full h-80 rounded-xl object-cover">
</div>
<div class="col-span-1">
<img src="{% static 'images/card.svg' %}" alt="Food Truck" class="w-full h-32 mb-4 rounded-xl object-cover hidden md:block">
<img src="{% static 'images/card.svg' %}" alt="Food Truck" class="w-full h-44 rounded-xl object-cover hidden md:block">
</div>
</div>


<h2 class="text-lg sm:text-2xl font-bold mt-8 mb-4">Popular Food Items</h2>

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 w-full">
<div class="relative col-span-1 p-2 rounded-2xl max-w-80 h-full bg-[#f0f0f0] mx-auto">
<img src="{% static 'images/card.svg' %}" alt="Street Food" class="w-full h-48 rounded-xl object-cover">
<div class="absolute top-4 left-4">
<p alt="Rating" class="w-10 font-light h-6 py-1 text-center text-white rounded-2xl text-xs bg-slate-800">9.6</p>
</div>
<div class="absolute top-4 right-4">
<p alt="Rating" class="w-6 h-6 py-1 text-center fa fa-star text-white rounded-full bg-black"></p>
</div>
<h3 class="pl-2 text-base font-medium mt-2">Ice Cream</h3>
<p class="pl-2 text-sm text-gray-600">Location</p>

<div class="flex justify-between">
<p class="pl-2 text-base text-black font-semibold mt-2">from $10</p>
<p class="pr-2 text-base text-black mt-2 fa fa-arrow-right">
</p>
</div>
</div>
<div class="relative col-span-1 p-2 rounded-2xl max-w-80 h-full bg-[#f0f0f0] mx-auto">
<img src="{% static 'images/card.svg' %}" alt="Street Food" class="w-full h-48 rounded-xl object-cover">
<div class="absolute top-4 left-4">
<p alt="Rating" class="w-10 font-light h-6 py-1 text-center text-white rounded-2xl text-xs bg-slate-800">9.6</p>
</div>
<div class="absolute top-4 right-4">
<p alt="Rating" class="w-6 h-6 py-1 text-center fa fa-star text-white rounded-full bg-black"></p>
</div>
<h3 class="pl-2 text-base font-medium mt-2">Ice Cream</h3>
<p class="pl-2 text-sm text-gray-600">Location</p>

<div class="flex justify-between">
<p class="pl-2 text-base text-black font-semibold mt-2">from $10</p>
<p class="pr-2 text-base text-black mt-2 fa fa-arrow-right">
</p>
</div>
</div>
<div class="relative col-span-1 p-2 rounded-2xl max-w-80 h-full bg-[#f0f0f0] mx-auto">
<img src="{% static 'images/card.svg' %}" alt="Street Food" class="w-full h-48 rounded-xl object-cover">
<div class="absolute top-4 left-4">
<p alt="Rating" class="w-10 font-light h-6 py-1 text-center text-white rounded-2xl text-xs bg-slate-800">9.6</p>
</div>
<div class="absolute top-4 right-4">
<p alt="Rating" class="w-6 h-6 py-1 text-center fa fa-star text-white rounded-full bg-black"></p>
</div>
<h3 class="pl-2 text-base font-medium mt-2">Ice Cream</h3>
<p class="pl-2 text-sm text-gray-600">Location</p>

<div class="flex justify-between">
<p class="pl-2 text-base text-black font-semibold mt-2">from $10</p>
<p class="pr-2 text-base text-black mt-2 fa fa-arrow-right">
</p>
</div>
</div>
<div class="relative col-span-1 p-2 rounded-2xl max-w-80 h-full bg-[#f0f0f0] mx-auto">
<img src="{% static 'images/card.svg' %}" alt="Street Food" class="w-full h-48 rounded-xl object-cover">
<div class="absolute top-4 left-4">
<p alt="Rating" class="w-10 font-light h-6 py-1 text-center text-white rounded-2xl text-xs bg-slate-800">9.6</p>
</div>
<div class="absolute top-4 right-4">
<p alt="Rating" class="w-6 h-6 py-1 text-center fa fa-star text-white rounded-full bg-black"></p>
</div>
<h3 class="pl-2 text-base font-medium mt-2">Ice Cream</h3>
<p class="pl-2 text-sm text-gray-600">Location</p>

<div class="flex justify-between">
<p class="pl-2 text-base text-black font-semibold mt-2">from $10</p>
<p class="pr-2 text-base text-black mt-2 fa fa-arrow-right">
</p>
</div>
</div>
<div class="relative col-span-1 p-2 rounded-2xl max-w-80 h-full bg-[#f0f0f0] mx-auto">
<img src="{% static 'images/card.svg' %}" alt="Street Food" class="w-full h-48 rounded-xl object-cover">
<div class="absolute top-4 left-4">
<p alt="Rating" class="w-10 font-light h-6 py-1 text-center text-white rounded-2xl text-xs bg-slate-800">9.6</p>
</div>
<div class="absolute top-4 right-4">
<p alt="Rating" class="w-6 h-6 py-1 text-center fa fa-star text-white rounded-full bg-black"></p>
</div>
<h3 class="pl-2 text-base font-medium mt-2">Ice Cream</h3>
<p class="pl-2 text-sm text-gray-600">Location</p>

<div class="flex justify-between">
<p class="pl-2 text-base font-semibold text-black mt-2">from $10</p>
<p class="pr-2 text-base text-black mt-2 fa fa-arrow-right">
</p>
</div>
</div>
</div>


<!-- Subscribe Now -->
<div class="flex flex-col lg:flex-row gap-8 md:gap-4 lg:gap-0 justify-between items-center bg-[#f0f0f0] px-8 py-7 rounded-xl mt-16">
<div class="flex justify-center">
<p alt="Advert" class="w-16 h-16 text-3xl fa fa-flag fa-4x rounded-lg object-cover"></p>
<div class="ml-4">
<h3 class="text-lg font-semibold">Get the best food truck deals</h3>
<p class="text-sm text-gray-600">Subscribe to our newsletter and get the latest food truck deals in San Francisco</p>
</div>
</div>
<button class="bg-blue-500 text-white px-14 text-sm py-2 rounded-xl shadow hover:bg-blue-600">Subscribe now</button>
</div>

</section>

Expand Down
22 changes: 12 additions & 10 deletions food_truck_finder/food_trucks/templates/search_by_location.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,24 @@

<section>
<div class="container">
<div class="w-full mb-12">
<h2 class="text-3xl">Results</h2>
<div class="flex flex-wrap gap-16 justify-center">
<div class="w-full m-12">
<h2 class="text-3xl pl-4">Search Results</h2>
<div class="flex flex-wrap gap-16 justify-center items-center mt-4">
{% for food_truck in food_trucks %}
<a href="{% url 'food_trucks:details' food_truck.id|stringformat:'s' %}">
<div class="p-2 w-80 h-64 hover:shadow-lg hover:scale-105 bg-slate-50 rounded-sm text-center">
<img src="{{ food_truck.image.url }}" alt="{{ food_truck.name }}" class="w-full h-32 object-cover rounded-lg">
<p class="text-2xl text-slate-700">
<div class="p-2 w-80 hover:shadow-lg hover:scale-105 bg-slate-50 rounded-sm flex flex-col justify-between">
<img src="{% static '/images/food_truck.jpg' %}" alt="{{ food_truck.name }}" class="w-full object-cover rounded-lg">
<p class="text-2xl text-slate-700 pt-4">
{{ food_truck.name }}
</p>
<p class="text-sm">
<p class="text-sm p-2">
{{ food_truck.facility_type }}
</p>


<a href="{% url 'food_trucks:details' food_truck.id|stringformat:'s' %}" class="text-blue-500 hover:text-blue-600 flex justify-end">
<span class="text-sm underline px-4">Detail</span>
</a>
</div>
</a>

{% endfor %}
</div>
</div>
Expand Down

0 comments on commit 87c33c5

Please sign in to comment.