anurag.r/B42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create team_create_form and book_appointment_form and create_tickt_form create view and url

Browse Source
This commit is contained in:
Khushi Tamor
2026-01-09 12:45:38 +05:30
parent ad2f0ac941
commit a883d37e7c
9 changed files with 706 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
at_django_boilerplate/communications/templates/book_appointment.html
View File

@@ -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">
<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">
<!-- 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>
<!-- Title -->
<h1 class="text-xl font-semibold mb-8">
Support-Ticket erstellen
</h1>
<h2 class="text-center text-xl font-semibold mb-1">
Meet with Andreas Gschaider
</h2>
<form class="space-y-6">
<p class="text-center text-lg font-bold mb-6">
January 2026
</p>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<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>
<!-- 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>
<span class="opacity-50">11</span>
<span class="opacity-50">12</span>
<!-- 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>
<!-- 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>
<!-- Category -->
<div>
<label class="block text-sm font-medium mb-3">
Category <span class="text-red-500">*</span>
</label>
<span class="font-semibold">14</span>
<span class="opacity-50">15</span>
<span class="opacity-50">16</span>
<span class="opacity-50">17</span>
<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>
</div>
</div>
<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>
<!-- 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)
</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">System</label>
<p class="text-xs text-gray-500 mb-1">
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">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>
<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>
{% endblock %}
<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 %}