create team_create_form and book_appointment_form and create_tickt_form create view and url
This commit is contained in:
@@ -1,143 +1,317 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Book an Appointment - RegisterYourStartup.com{% endblock %}
|
||||
{% block meta_description %}Schedule a consultation with our business experts. Book an appointment for personalized guidance on incorporation, compliance, and business growth strategies.{% endblock %}
|
||||
|
||||
{% 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">
|
||||
Create Support Ticket
|
||||
Schedule Appointment
|
||||
</h1>
|
||||
<p class="text-white/90 max-w-5xl mx-auto text-base md:text-lg">
|
||||
Are you experiencing issues with the B-42 solution or do you have other questions regarding youticketr B-42 account? You're in the right place! Please complete the form, and we'll get in touch with you as soon as possible!
|
||||
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-3xl mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="bg-white shadow-sm rounded-md p-10">
|
||||
<!-- LEFT: Calendar -->
|
||||
<div class="bg-[#425a70] text-white p-8">
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-xl font-semibold mb-8">
|
||||
Support-Ticket erstellen
|
||||
</h1>
|
||||
|
||||
<form class="space-y-6">
|
||||
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Last Name</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Email <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="email"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Subject -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Subject <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">
|
||||
Detailed description <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea rows="4"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-3">
|
||||
Category <span class="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="rounded border-gray-300">
|
||||
Technical Issue
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="rounded border-gray-300">
|
||||
Feature Request
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="rounded border-gray-300">
|
||||
Billing Issue
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input type="checkbox" class="rounded border-gray-300">
|
||||
General Inquiry
|
||||
</label>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Club -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Club / Company</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
|
||||
</div>
|
||||
|
||||
<!-- Device Info -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Device Information</label>
|
||||
<p class="text-xs text-gray-500 mb-1">
|
||||
Information on the device used (e.g. model name)
|
||||
<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>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- System -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">System</label>
|
||||
<p class="text-xs text-gray-500 mb-1">
|
||||
The current version of your operating system
|
||||
<!-- 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>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
|
||||
<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>
|
||||
|
||||
<!-- File Upload -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">File upload</label>
|
||||
<input type="file"
|
||||
class="block w-full text-sm text-gray-600
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded file:border-0
|
||||
file:bg-gray-200 file:text-gray-700
|
||||
hover:file:bg-gray-300">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</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 %}
|
||||
|
||||
207
at_django_boilerplate/communications/templates/team_create.html
Normal file
207
at_django_boilerplate/communications/templates/team_create.html
Normal file
@@ -0,0 +1,207 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Book an Appointment - RegisterYourStartup.com{% endblock %}
|
||||
{% block meta_description %}Schedule a consultation with our business experts. Book an appointment for personalized guidance on incorporation, compliance, and business growth strategies.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="bg-black py-16">
|
||||
<div class="w-full max-w-md py-16 px-4 m-auto">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-3 mb-6 text-white">
|
||||
<button
|
||||
id="backBtn"
|
||||
onclick="prevStep()"
|
||||
class="hidden text-2xl font-bold">
|
||||
←
|
||||
</button>
|
||||
|
||||
<h1 class="font-semibold text-lg">
|
||||
B42 India for teams - Create a team now for free
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="w-full h-2 bg-gray-600 rounded-full overflow-hidden mb-10">
|
||||
<div
|
||||
id="progressBar"
|
||||
class="h-full bg-indigo-400 transition-all duration-300"
|
||||
style="width: 33%">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 1 -->
|
||||
<div class="step">
|
||||
<h2 class="text-center font-semibold mb-6 text-white">Who are you?</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<input class="input" placeholder="Your first name*" />
|
||||
<input class="input" placeholder="Your club*" />
|
||||
<input class="input" placeholder="Your team*" />
|
||||
<select class="input">
|
||||
<option>Category*</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 2 -->
|
||||
<div class="step hidden">
|
||||
<h2 class="text-center font-semibold mb-6 text-white">
|
||||
What do you want to use B42 India for?
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div onclick="selectCard(this)" class="card active text-white">
|
||||
<span>✔</span> Organize my team better
|
||||
</div>
|
||||
<div onclick="selectCard(this)" class="card text-white">
|
||||
📋 Increase training participation
|
||||
</div>
|
||||
<div onclick="selectCard(this)" class="card text-white">
|
||||
💪 Make my team fit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 3 -->
|
||||
<div class="step hidden">
|
||||
<h2 class="text-center font-semibold mb-8 text-white">
|
||||
You can achieve this with B42 India!
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6 text-sm text-gray-300">
|
||||
<div class="border-b border-gray-700 pb-4">
|
||||
👍 <strong class="text-white">Organize yourself professionally</strong><br/>
|
||||
Digital appointment scheduling with absences
|
||||
</div>
|
||||
|
||||
<div class="border-b border-gray-700 pb-4">
|
||||
💬 <strong class="text-white">Improve communication</strong><br/>
|
||||
Feedback for training and games
|
||||
</div>
|
||||
|
||||
<div>
|
||||
📋 <strong class="text-white">Well prepared for team training</strong><br/>
|
||||
Share training plans with your team
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STEP 4 -->
|
||||
|
||||
<div class="step">
|
||||
<h2 class="text-center font-semibold mb-6 text-white">
|
||||
Who are you?
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- Recommendation -->
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
|
||||
<i class="fa-solid fa-thumbs-up text-green-400 text-xl"></i>
|
||||
<span class="font-medium">Recommendation</span>
|
||||
</div>
|
||||
|
||||
<!-- B42 India India Player App -->
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
|
||||
<i class="fa-solid fa-mobile-screen text-blue-400 text-xl"></i>
|
||||
<span class="font-medium">B42 India India Player App</span>
|
||||
</div>
|
||||
|
||||
<!-- Instagram / Google Search -->
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
|
||||
<i class="fa-brands fa-instagram text-pink-400 text-xl"></i>
|
||||
<span class="font-medium"> Google Search</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
|
||||
<i class="fa-brands fa-google text-red-500 text-xl"></i>
|
||||
<span class="font-medium"> Google Search</span>
|
||||
</div>
|
||||
|
||||
<!-- Other -->
|
||||
<div class="flex items-center gap-4 p-4 rounded-xl border border-white/20 bg-white/10 text-white cursor-pointer hover:bg-white/20 transition">
|
||||
<span class="font-medium">Other</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NEXT BUTTON -->
|
||||
<button onclick="nextStep()"
|
||||
class="w-full mt-10 bg-lime-400 text-black font-semibold py-4 rounded-full">
|
||||
NEXT
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #2a2a2a;
|
||||
padding: 16px;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.card.active {
|
||||
border-color: #c6ff00;
|
||||
background: #303030;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- JS -->
|
||||
<script>
|
||||
let step = 0
|
||||
const steps = document.querySelectorAll('.step')
|
||||
const bar = document.getElementById('progressBar')
|
||||
const backBtn = document.getElementById('backBtn')
|
||||
|
||||
function update() {
|
||||
steps.forEach((s, i) => s.classList.toggle('hidden', i !== step))
|
||||
|
||||
// Correct progress calculation
|
||||
const progress = (step / (steps.length - 1)) * 100
|
||||
bar.style.width = `${progress}%`
|
||||
|
||||
backBtn.classList.toggle('hidden', step === 0)
|
||||
}
|
||||
|
||||
function nextStep() {
|
||||
if (step < steps.length - 1) step++
|
||||
update()
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (step > 0) step--
|
||||
update()
|
||||
}
|
||||
|
||||
function selectCard(el) {
|
||||
document.querySelectorAll('.card').forEach(c => c.classList.remove('active'))
|
||||
el.classList.add('active')
|
||||
}
|
||||
|
||||
// initialize on load
|
||||
update()
|
||||
</script>
|
||||
{% endblock%}
|
||||
@@ -0,0 +1,192 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Book an Appointment - RegisterYourStartup.com{% endblock %}
|
||||
{% block meta_description %}Schedule a consultation with our business experts. Book an appointment for personalized guidance on incorporation, compliance, and business growth strategies.{% 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">
|
||||
Create Support Ticket
|
||||
</h1>
|
||||
<p class="text-white/90 max-w-5xl mx-auto text-base md:text-lg">
|
||||
Are you experiencing issues with the B-42 solution or do you have other questions regarding youticketr B-42 account? You're in the right place! Please complete the form, and we'll get in touch with you as soon as possible!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-5xl mx-auto px-4">
|
||||
|
||||
<!-- Card -->
|
||||
<div class="bg-[#303033] shadow-sm rounded-md p-10">
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-xl font-semibold mb-8 text-white">
|
||||
Support-Ticket erstellen
|
||||
</h1>
|
||||
|
||||
<form class="space-y-6">
|
||||
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">Last Name</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">
|
||||
Email <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="email"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Subject -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">
|
||||
Subject <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">
|
||||
Detailed description <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea rows="4"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-3 text-white">
|
||||
Category <span class="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<label class="flex items-center gap-2 text-white">
|
||||
<input type="checkbox" class="rounded border-gray-300 ">
|
||||
Technical Issue
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-white">
|
||||
<input type="checkbox" class="rounded border-gray-300 ">
|
||||
Feature Request
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-white">
|
||||
<input type="checkbox" class="rounded border-gray-300 ">
|
||||
Billing Issue
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-white">
|
||||
<input type="checkbox" class="rounded border-gray-300 ">
|
||||
General Inquiry
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Club -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">Club / Company</label>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
|
||||
</div>
|
||||
|
||||
<!-- Device Info -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">Device Information</label>
|
||||
<p class="text-xs text-gray-500 mb-1 text-white">
|
||||
Information on the device used (e.g. model name)
|
||||
</p>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
|
||||
</div>
|
||||
|
||||
<!-- System -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1 text-white">System</label>
|
||||
<p class="text-xs text-gray-500 mb-1 text-white">
|
||||
The current version of your operating system
|
||||
</p>
|
||||
<input type="text"
|
||||
class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
|
||||
</div>
|
||||
|
||||
<!-- File Upload -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2 text-white">File upload</label>
|
||||
<input type="file"
|
||||
class="block w-full text-sm text-white
|
||||
file:mr-4 file:py-2 file:px-4
|
||||
file:rounded file:border-0
|
||||
file:bg-gray-200 file:text-gray-700
|
||||
hover:file:bg-gray-300">
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-lime-400 hover:bg-lime-500 text-black font-semibold py-3 rounded-md transition"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
</form>
|
||||
</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>
|
||||
|
||||
{% endblock %}
|
||||
@@ -5,4 +5,5 @@ urlpatterns = [
|
||||
path('contact/', views.ContactView.as_view(), name='contact_us_form'),
|
||||
path('book-appointment/', views.AppointmentView.as_view(), name='book_appointment'),
|
||||
path('ticket/', views.Ticket.as_view(), name='ticket'),
|
||||
path('team-create/', views.TeamCreate.as_view(), name='team_create'),
|
||||
]
|
||||
@@ -194,3 +194,6 @@ Please confirm or follow up with the user.
|
||||
class Ticket(TemplateView):
|
||||
template_name = 'ticket.html'
|
||||
|
||||
class TeamCreate(TemplateView):
|
||||
template_name = 'team_create.html'
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
<p class="text-white mb-8 flex-1">
|
||||
Write to us if you have technical problems.
|
||||
</p>
|
||||
<a href="{% url 'book_appointment' %}" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
<a href="{% url 'ticket' %}" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
Create ticket
|
||||
</a>
|
||||
</div>
|
||||
@@ -69,7 +69,7 @@
|
||||
Interested in the B-42 India solution?<br>
|
||||
Book an appointment with us directly here!
|
||||
</p>
|
||||
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
<a href="{% url 'book_appointment' %}" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
make an appointment
|
||||
</a>
|
||||
</div>
|
||||
@@ -122,7 +122,7 @@
|
||||
<p class="text-white mb-8 flex-1">
|
||||
All important questions about the B-42 India Performance App & B-42 India Coach Zone
|
||||
</p>
|
||||
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
<a href="{% url 'faq' %}" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
View FAQs
|
||||
</a>
|
||||
</div>
|
||||
@@ -156,7 +156,7 @@
|
||||
<p class="text-white mb-8 flex-1">
|
||||
This is how coaches, teams and athletes successfully use the B-42 India app.
|
||||
</p>
|
||||
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
<a href="{%url 'success_stories' %}" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
|
||||
Read case studies
|
||||
</a>
|
||||
</div>
|
||||
@@ -216,7 +216,7 @@
|
||||
Fitness, rehabilitation and ball-specific training for ambitious football players in a modern mobile app.
|
||||
</p>
|
||||
|
||||
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition">
|
||||
<a href="{% url 'ticket' %}" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition">
|
||||
Create ticket
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="bg-black py-20 relative overflow-hidden">
|
||||
<!-- Decorative lime curved lines background (top-right) -->
|
||||
<div class="absolute top-0 right-0 w-full max-w-2xl opacity-30 pointer-events-none -z-10">
|
||||
@@ -26,10 +27,10 @@
|
||||
The app for successful coaches & teams that play to win.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<a href="#" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 transition duration-300">
|
||||
<a href="{% url 'team_create' %}" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 transition duration-300">
|
||||
Start now
|
||||
</a>
|
||||
<a href="#" class="inline-block px-8 py-4 bg-white text-gray-900 font-semibold rounded-xl hover:bg-gray-100 transition duration-300">
|
||||
<a href="" class="inline-block px-8 py-4 bg-white text-gray-900 font-semibold rounded-xl hover:bg-gray-100 transition duration-300">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
@@ -156,7 +157,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="max-w-6xl mx-auto mt-28 mb-12 overflow-hidden flex flex-col lg:flex-row">
|
||||
<section id="team" class="max-w-6xl mx-auto mt-28 mb-12 overflow-hidden flex flex-col lg:flex-row ">
|
||||
<!-- Content Section (Left) -->
|
||||
<div class="w-full lg:w-1/2 p-10 lg:p-20 flex flex-col justify-center">
|
||||
<p class="text-blue-500 text-sm font-semibold mb-4">Fit team - without injuries</p>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="min-h-screen">
|
||||
<main class="">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user