318 lines
8.8 KiB
HTML
Executable File
318 lines
8.8 KiB
HTML
Executable File
{% extends 'public_base.html' %}
|
|
{% load static %}
|
|
{% block title %}Help & Support{% endblock %}
|
|
{% block content %}
|
|
|
|
<section class="bg-black py-16">
|
|
|
|
<div class="w-full mx-auto text-center py-20 px-4">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
|
Schedule Appointment
|
|
</h1>
|
|
<p class="text-white/90 max-w-5xl mx-auto text-base md:text-lg">
|
|
You are curious and want to learn more, or you have a question about using B-42? Book an appointment with us directly!
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
|
|
|
|
<!-- LEFT: Calendar -->
|
|
<div class="bg-[#425a70] text-white p-8">
|
|
|
|
<!-- Icon -->
|
|
<div class="flex justify-center mb-4">
|
|
<div class="w-20 h-20 rounded-full flex items-center justify-center">
|
|
<img
|
|
src="{% static 'images/logo.png' %}"
|
|
alt="B42 Logo"
|
|
class=" object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2 class="text-center text-xl font-semibold mb-1">
|
|
Meet with Andreas Gschaider
|
|
</h2>
|
|
|
|
<p class="text-center text-lg font-bold mb-6">
|
|
January 2026
|
|
</p>
|
|
|
|
<!-- Weekdays -->
|
|
<div class="grid grid-cols-7 text-xs text-center mb-3 font-semibold">
|
|
<span>SUN</span><span>MON</span><span>TUE</span>
|
|
<span>WED</span><span>THU</span><span>FRI</span><span>SAT</span>
|
|
</div>
|
|
|
|
<!-- Calendar Days -->
|
|
<div class="grid grid-cols-7 gap-2 text-center text-sm">
|
|
<span></span><span></span><span></span><span></span>
|
|
<span class="opacity-50">1</span>
|
|
<span class="opacity-50">2</span>
|
|
<span class="opacity-50">3</span>
|
|
|
|
<span class="opacity-50">4</span>
|
|
<span class="opacity-50">5</span>
|
|
<span class="opacity-50">6</span>
|
|
<span class="opacity-50">7</span>
|
|
<span class="opacity-50">8</span>
|
|
<span class="opacity-50">9</span>
|
|
<span class="opacity-50">10</span>
|
|
|
|
<span class="opacity-50">11</span>
|
|
<span class="opacity-50">12</span>
|
|
|
|
<!-- Active date -->
|
|
<button
|
|
onclick="selectDate('January 13, 2026')"
|
|
class="bg-white text-[#425a70] rounded-full w-9 h-9 mx-auto font-semibold">
|
|
13
|
|
</button>
|
|
|
|
<span class="font-semibold">14</span>
|
|
<span class="opacity-50">15</span>
|
|
<span class="opacity-50">16</span>
|
|
<span class="opacity-50">17</span>
|
|
|
|
<span class="opacity-50">18</span>
|
|
<span class="opacity-50">19</span>
|
|
<span class="font-semibold">20</span>
|
|
<span class="font-semibold">21</span>
|
|
<span class="font-semibold">22</span>
|
|
<span class="opacity-50">23</span>
|
|
<span class="opacity-50">24</span>
|
|
|
|
<span class="opacity-50">25</span>
|
|
<span class="opacity-50">26</span>
|
|
<span class="font-semibold">27</span>
|
|
<span class="font-semibold">28</span>
|
|
<span class="font-semibold">29</span>
|
|
<span class="opacity-50">30</span>
|
|
<span class="opacity-50">31</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: Time Slots -->
|
|
<div class="p-8">
|
|
|
|
<!-- Duration -->
|
|
<h3 class="font-semibold mb-3">How long do you need?</h3>
|
|
<div class="flex border rounded overflow-hidden w-fit mb-6">
|
|
<button class="px-6 py-2 bg-gray-200 text-sm font-medium">30 mins</button>
|
|
<button class="px-6 py-2 bg-white border-l text-sm">1 hour</button>
|
|
</div>
|
|
|
|
<!-- Selected Date -->
|
|
<h3 class="font-semibold mb-1">What time works best?</h3>
|
|
<p class="text-sm text-gray-600 mb-1">
|
|
Showing times for <span id="selectedDate" class="font-semibold">January 13, 2026</span>
|
|
</p>
|
|
<p class="text-xs text-blue-600 mb-4">
|
|
UTC +05:30 New Delhi, Mumbai, Calcutta
|
|
</p>
|
|
|
|
<!-- Time slots -->
|
|
<div class="max-h-80 overflow-y-auto space-y-3 pr-2">
|
|
<button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:00 pm</button>
|
|
<button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:15 pm</button>
|
|
<button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:30 pm</button>
|
|
<button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">6:45 pm</button>
|
|
<button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">7:00 pm</button>
|
|
<button onclick="selectTime(this)" class="w-full border rounded py-3 hover:bg-gray-50">7:15 pm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="bg-[#6f7df5] w-full">
|
|
|
|
<div class="max-w-6xl mx-auto px-4 py-28 text-center">
|
|
|
|
<!-- Small top text -->
|
|
<p class="text-white text-sm font-semibold tracking-wide uppercase mb-4 text-white">
|
|
Ready to start your B-42 journey?
|
|
</p>
|
|
|
|
<!-- Main heading -->
|
|
<h1 class="text-white text-4xl md:text-5xl font-extrabold mb-4 text-white">
|
|
The Soccer Training Platform
|
|
</h1>
|
|
|
|
<!-- Subheading -->
|
|
<p class="text-white/90 text-sm md:text-base font-semibold mb-10 uppercase text-white">
|
|
Get everything you need for Team success
|
|
</p>
|
|
|
|
<!-- CTA Button -->
|
|
<a
|
|
href="#"
|
|
class="inline-flex items-center gap-3 bg-lime-400 hover:bg-lime-500 text-black font-semibold px-8 py-3 rounded-full transition"
|
|
>
|
|
<span class="inline-flex items-center justify-center w-5 h-5 bg-black rounded-full">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-3 h-3 text-lime-400 ml-[1px]"
|
|
fill="currentColor"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path d="M6 4l6 4-6 4V4z" />
|
|
</svg>
|
|
</span>
|
|
Start now
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<!-- JS -->
|
|
<script>
|
|
function selectDate(date) {
|
|
document.getElementById("selectedDate").innerText = date;
|
|
}
|
|
|
|
function selectTime(btn) {
|
|
document.querySelectorAll("button").forEach(b => b.classList.remove("bg-blue-50", "border-blue-500"));
|
|
btn.classList.add("bg-blue-50", "border-blue-500");
|
|
alert("Time selected: " + btn.innerText);
|
|
}
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% comment %} <section class="min-h-screen bg-gradient-to-b from-[#1a1a1a] to-[#111] flex items-center justify-center px-4">
|
|
|
|
<div class="w-full max-w-md text-center text-white">
|
|
|
|
<!-- Heading -->
|
|
<h1 class="text-2xl font-semibold mb-2">Log in</h1>
|
|
<p class="text-sm text-gray-300 mb-8">
|
|
Register in the CoachZone
|
|
</p>
|
|
|
|
<!-- Email -->
|
|
<div class="mb-4">
|
|
<input
|
|
type="email"
|
|
placeholder="E-mail address"
|
|
class="w-full bg-transparent border border-gray-600 rounded-full px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-lime-400"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="relative mb-2">
|
|
<input
|
|
type="password"
|
|
placeholder="password"
|
|
class="w-full bg-transparent border border-gray-600 rounded-full px-5 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-lime-400"
|
|
/>
|
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 cursor-pointer">
|
|
👁
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Forgot -->
|
|
<div class="text-right mb-6">
|
|
<a href="#" class="text-lime-400 text-xs hover:underline">
|
|
Forgotten your password?
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Login Button -->
|
|
<button
|
|
class="w-full bg-gray-600 text-black font-semibold py-3 rounded-full mb-6 cursor-not-allowed opacity-70"
|
|
disabled
|
|
>
|
|
LOG IN
|
|
</button>
|
|
|
|
<!-- Register -->
|
|
<p class="text-sm text-gray-300 mb-3">
|
|
Don't have an account yet?
|
|
</p>
|
|
|
|
<button
|
|
class="w-full bg-lime-400 hover:bg-lime-500 text-black font-bold py-3 rounded-full mb-6 transition"
|
|
>
|
|
CREATE TEAM AND ACCOUNT NOW
|
|
</button>
|
|
|
|
<!-- Divider -->
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex-1 h-px bg-gray-600"></div>
|
|
<span class="text-sm text-gray-400">or</span>
|
|
<div class="flex-1 h-px bg-gray-600"></div>
|
|
</div>
|
|
|
|
<!-- Social Buttons -->
|
|
<div class="space-y-3">
|
|
|
|
<!-- Google -->
|
|
<button
|
|
class="w-full bg-white text-black py-2 rounded-full flex items-center justify-center gap-3 text-sm font-medium"
|
|
>
|
|
<img src="https://www.svgrepo.com/show/475656/google-color.svg" class="w-5 h-5" />
|
|
Sign in with Google
|
|
</button>
|
|
|
|
<!-- Facebook -->
|
|
<button
|
|
class="w-full bg-[#1877f2] text-white py-2 rounded-full flex items-center justify-center gap-3 text-sm font-medium"
|
|
>
|
|
<img src="https://www.svgrepo.com/show/475647/facebook-color.svg" class="w-5 h-5" />
|
|
Log in with Facebook
|
|
</button>
|
|
|
|
<!-- Apple -->
|
|
<button
|
|
class="w-full bg-black text-white py-2 rounded-full flex items-center justify-center gap-3 text-sm font-medium"
|
|
>
|
|
<img src="https://www.svgrepo.com/show/511330/apple.svg" class="w-5 h-5 invert" />
|
|
Sign in with Apple
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> {% endcomment %}
|