180 lines
No EOL
10 KiB
HTML
180 lines
No EOL
10 KiB
HTML
<!-- Menu Section -->
|
|
<div id="menu-section" class="mt-8 sm:mt-16">
|
|
<h2 class="text-2xl sm:text-3xl font-bold mb-4 sm:mb-8">{{ i18n "menu" }}</h2>
|
|
|
|
<!-- Mobile Horizontal Scroll -->
|
|
<div class="md:hidden overflow-x-auto whitespace-nowrap pb-2 mb-4 scrollbar-hide">
|
|
<div class="inline-flex gap-2">
|
|
{{ $categories := .Site.Data.menu.categories }}
|
|
{{ $sortedCategories := sort $categories "sort_order" "asc" }}
|
|
{{ range $sortedCategories }}
|
|
<button
|
|
data-tab="{{ .id }}"
|
|
class="tab-button inline-block px-3 py-1.5 text-sm rounded-full transition-colors duration-200 whitespace-nowrap
|
|
{{ if eq .id "pizzas" }}
|
|
bg-pizza-red text-white
|
|
{{ else }}
|
|
bg-gray-200 dark:bg-pizza-darker text-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-pizza-dark
|
|
{{ end }}">
|
|
{{ .name }}
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Menu Tabs -->
|
|
<div class="hidden md:flex flex-wrap gap-4 mb-8">
|
|
{{ $categories := .Site.Data.menu.categories }}
|
|
{{ $sortedCategories := sort $categories "sort_order" "asc" }}
|
|
{{ range $sortedCategories }}
|
|
<button
|
|
data-tab="{{ .id }}"
|
|
class="tab-button px-8 py-2 text-base rounded-full transition-colors duration-200
|
|
{{ if eq .id "pizzas" }}
|
|
bg-pizza-red text-white
|
|
{{ else }}
|
|
bg-gray-200 dark:bg-pizza-darker text-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-pizza-dark
|
|
{{ end }}">
|
|
{{ .name }}
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Price Legend -->
|
|
<div class="legend-container fixed bottom-4 right-4 z-50 group">
|
|
<!-- The actual legend -->
|
|
<div class="price-legend bg-white/90 dark:bg-pizza-dark/90 backdrop-blur-sm shadow-lg rounded-lg p-4
|
|
transition-all duration-300 group-hover:opacity-0 group-hover:translate-y-1">
|
|
<div class="flex flex-col space-y-3">
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 bg-status-green rounded-full mr-2 animate-pulse"></span>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Abholung</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-3 h-3 bg-status-red rounded-full mr-2 animate-pulse"></span>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Lieferung</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info icon -->
|
|
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100
|
|
transition-all duration-300 group-hover:-translate-y-1";
|
|
title="Zeigt die Preise für Abholung und Lieferung">
|
|
<svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu Content -->
|
|
{{ $categories := .Site.Data.menu.categories }}
|
|
{{ $sortedCategories := sort $categories "sort_order" "asc" }}
|
|
{{ range $sortedCategories }}
|
|
<div id="{{ .id }}-content" class="menu-content {{ if ne .id "pizzas" }}hidden{{ end }} space-y-4 sm:space-y-6">
|
|
{{ if eq .id "pizzas" }}
|
|
{{ range .price_groups }}
|
|
<div class="bg-gray-100 dark:bg-pizza-darker rounded-xl p-6">
|
|
<div class="flex justify-between items-center mb-8 cursor-pointer price-group-header">
|
|
<h3 class="text-xl font-bold">{{ .name }}</h3>
|
|
<svg class="w-6 h-6 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="price-group-content hidden">
|
|
<!-- Size Options -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
{{ range .prices }}
|
|
<div class="text-center">
|
|
<h4 class="font-medium mb-2">{{ .size }}</h4>
|
|
<div class="flex justify-center space-x-4">
|
|
<span class="text-emerald-400">{{ printf "%.2f" .pickup }}€</span>
|
|
<span class="text-pizza-red">/</span>
|
|
<span class="text-pizza-red">{{ printf "%.2f" .delivery }}€</span>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Menu Items -->
|
|
<div class="space-y-4 mt-6 border-t border-gray-200 dark:border-pizza-dark pt-6">
|
|
{{ range .items }}
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<h4 class="font-medium">{{ .name }}</h4>
|
|
<p class="text-gray-600 dark:text-pizza-gray text-sm">{{ .description }}</p>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ else if eq .id "menus" }}
|
|
{{ range .price_groups }}
|
|
<div class="bg-gray-100 dark:bg-pizza-darker rounded-xl p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-bold">{{ .name }}</h3>
|
|
</div>
|
|
|
|
<!-- Menu Description -->
|
|
<p class="text-gray-600 dark:text-pizza-gray mb-4">{{ .description }}</p>
|
|
|
|
<!-- Included Items -->
|
|
<ul class="list-disc list-inside text-gray-600 dark:text-pizza-gray mb-6 space-y-2">
|
|
{{ range .included }}
|
|
<li>{{ . }}</li>
|
|
{{ end }}
|
|
</ul>
|
|
|
|
<!-- Price Options -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4 border-t border-gray-200 dark:border-pizza-dark pt-4">
|
|
{{ range .prices }}
|
|
<div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-pizza-dark last:border-0">
|
|
<span class="font-medium">{{ .base }}</span>
|
|
<div class="font-medium">
|
|
{{ if and (isset . "pickup") (isset . "delivery") }}
|
|
<span class="text-status-green">{{ printf "%.2f" .pickup }}€</span>
|
|
<span class="text-gray-400 mx-1">/</span>
|
|
<span class="text-status-red">{{ printf "%.2f" .delivery }}€</span>
|
|
{{ else }}
|
|
<span class="text-gray-600 dark:text-gray-400">{{ printf "%.2f" .price }}€</span>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
{{ else }}
|
|
<div class="bg-gray-100 dark:bg-pizza-darker rounded-xl p-6">
|
|
<div class="space-y-4">
|
|
{{ range .items }}
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h4 class="font-medium">{{ .name }}</h4>
|
|
<p class="text-gray-600 dark:text-pizza-gray text-sm">{{ .description }}</p>
|
|
</div>
|
|
<div class="font-medium">
|
|
{{ if and (isset . "pickup") (isset . "delivery") }}
|
|
<span class="text-status-green">{{ printf "%.2f" .pickup }}€</span>
|
|
<span class="text-gray-400 mx-1">/</span>
|
|
<span class="text-status-red">{{ printf "%.2f" .delivery }}€</span>
|
|
{{ else if and (isset . "price_small") (isset . "price_large") }}
|
|
<span class="text-gray-600 dark:text-gray-400 text-sm">{{ i18n "portion_small"}}: {{ printf "%.2f" .price_small }}€</span>
|
|
<span class="text-gray-600 mx-1">/</span>
|
|
<span class="text-gray-600 dark:text-gray-400 text-base">{{ i18n "portion_large"}}: {{ printf "%.2f" .price_large }}€</span>
|
|
{{ else }}
|
|
<span class="text-gray-600 dark:text-gray-400">{{ printf "%.2f" .price }}€</span>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
</div> |