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

207
at_django_boilerplate/communications/templates/team_create.html Normal file
View 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%}