<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMUN Registration Form</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-color: #8B4513;
--secondary-color: #A0522D;
--accent-color: #D2691E;
--light-brown: #F5E6D3;
--dark-brown: #654321;
--text-dark: #2c1810;
--text-light: #8B7355;
--border-light: #D4C4B0;
--shadow-light: 0 2px 10px rgba(139, 69, 19, 0.1);
--shadow-medium: 0 8px 25px rgba(139, 69, 19, 0.15);
--shadow-heavy: 0 15px 35px rgba(139, 69, 19, 0.2);
--gold-accent: #DAA520;
--camel-brown: #C19A6B;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #D2691E 0%, #CD853F 50%, #DAA520 100%);
min-height: 100vh;
padding: 20px;
color: var(--text-dark);
}
.form-container {
max-width: 900px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 25px;
box-shadow: var(--shadow-heavy);
overflow: hidden;
animation: slideUp 0.8s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-brown) 100%);
color: white;
padding: 40px 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.form-header h1 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 15px;
position: relative;
z-index: 2;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.form-header p {
font-size: 1.1rem;
opacity: 0.9;
position: relative;
z-index: 2;
}
.form-logo {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--gold-accent);
box-shadow: var(--shadow-medium);
margin: 20px auto 0;
display: block;
position: relative;
z-index: 2;
}
.form-content {
padding: 40px;
}
.section {
margin-bottom: 40px;
padding: 30px;
background: white;
border-radius: 15px;
box-shadow: var(--shadow-light);
border-left: 5px solid var(--primary-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.section-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::before {
content: '';
width: 8px;
height: 8px;
background: var(--gold-accent);
border-radius: 50%;
}
.form-group {
margin-bottom: 25px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-dark);
font-size: 0.95rem;
}
.required {
color: var(--secondary-color);
}
input, select, textarea {
width: 100%;
padding: 15px;
border: 2px solid var(--border-light);
border-radius: 12px;
font-size: 16px;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
background: white;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
transform: translateY(-1px);
}
input[type="file"] {
padding: 12px;
background: var(--light-brown);
border: 2px dashed var(--primary-color);
}
.radio-group, .checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 10px;
}
.radio-item, .checkbox-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: var(--light-brown);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
}
.radio-item:hover, .checkbox-item:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-light);
}
.radio-item input, .checkbox-item input {
width: auto;
margin: 0;
cursor: pointer;
}
.radio-item label, .checkbox-item label {
margin: 0;
cursor: pointer;
font-weight: 400;
}
.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: pointer;
}
.radio-item::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid var(--primary-color);
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.radio-item:has(input[type="radio"]:checked)::before {
background: var(--primary-color);
border-color: var(--primary-color);
}
.radio-item:has(input[type="radio"]:checked)::before::after {
content: '';
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
position: absolute;
}
.checkbox-block {
background: var(--light-brown);
padding: 20px;
border-radius: 12px;
border: 2px solid var(--secondary-color);
margin-top: 20px;
}
.checkbox-block label {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
cursor: pointer;
}
.checkbox-block input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: var(--secondary-color);
}
.submit-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-brown) 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.3), transparent);
transition: left 0.5s;
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.4);
}
.submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
#thankYouMessage {
display: none;
text-align: center;
padding: 50px;
background: linear-gradient(135deg, var(--light-brown) 0%, #E6F3E6 100%);
border-radius: 15px;
border: 3px solid var(--gold-accent);
color: var(--primary-color);
animation: successPulse 0.6s ease-out;
}
@keyframes successPulse {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.success-icon {
font-size: 4rem;
margin-bottom: 20px;
display: block;
}
.success-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
color: var(--primary-color);
}
.success-message {
font-size: 1.1rem;
margin-bottom: 20px;
line-height: 1.6;
}
.success-details {
font-size: 0.95rem;
color: var(--text-light);
background: white;
padding: 15px;
border-radius: 8px;
border-left: 4px solid var(--gold-accent);
}
.hidden {
display: none !important;
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid white;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 768px) {
.form-content {
padding: 20px;
}
.section {
padding: 20px;
}
.form-header h1 {
font-size: 1.8rem;
}
.form-header p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-header">
<h1>BMUN Registration 2025</h1>
<p>Join Balochistan's Premier Model United Nations Conference</p>
<img class="form-logo" src="https://www.jotform.com/uploads/fanplaysroblox/form_files/LOGO.6860472206aea5.29126334.webp" alt="BMUN Logo">
</div>
<div class="form-content">
<div id="thankYouMessage">
<div class="success-icon">🎉</div>
<div class="success-title">Registration Successful!</div>
<div class="success-message">
Thank you for registering for BMUN 2025! Your application has been submitted successfully.
</div>
<div class="success-details">
<strong>What's Next?</strong><br>
• You'll receive a confirmation email shortly<br>
• Our team will review your application<br>
• We'll contact you within 2-3 business days with further details<br>
• Keep an eye on your email for updates about the conference
</div>
</div>
<form id="bmunForm" method="post" enctype="multipart/form-data" autocomplete="on">
<div class="section">
<h2 class="section-title">Personal Information</h2>
<div class="form-row">
<div class="form-group">
<label>First Name <span class="required">*</span></label>
<input type="text" name="firstName" placeholder="Enter your first name" required autocomplete="given-name">
</div>
<div class="form-group">
<label>Last Name <span class="required">*</span></label>
<input type="text" name="lastName" placeholder="Enter your last name" required autocomplete="family-name">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Email Address <span class="required">*</span></label>
<input type=
"email" name=
"email" placeholder=
"[email protected]" required autocomplete=
"email"> </div>
<div class="form-group">
<label>Phone Number <span class="required">*</span></label>
<input type="tel" name="phone" placeholder="(000) 000-0000" required autocomplete="tel">
</div>
</div>
</div>
<div class="section">
<h2 class="section-title">Academic Information</h2>
<div class="form-group">
<label>Institution/School Name <span class="required">*</span></label>
<input type="text" name="institution" placeholder="Your school or university name" required>
</div>
<div class="form-group">
<label>Grade/Year <span class="required">*</span></label>
<input type="text" name="grade" placeholder="e.g., Grade 12, 2nd Year, etc." required>
</div>
<div class="form-group">
<label>How did you hear about BMUN?</label>
<input type="text" name="hearAbout" placeholder="Social media, friends, school, etc.">
</div>
</div>
<div class="section">
<h2 class="section-title">Registration Details</h2>
<div class="form-group">
<label>Registration Type <span class="required">*</span></label>
<div class="radio-group">
<div class="radio-item" onclick="selectRadio('delegate')">
<input type="radio" name="registrationType" value="Delegate" id="delegate" required>
<label for="delegate">Delegate</label>
</div>
<div class="radio-item" onclick="selectRadio('observer')">
<input type="radio" name="registrationType" value="Observer" id="observer" required>
<label for="observer">Observer</label>
</div>
</div>
</div>
<div id="committeeSection" class="form-group hidden">
<label>Preferred Committee <span class="required">*</span></label>
<select name="committee" id="committeeSelect">
<option value="">Please Select a Committee</option>
<option value="UNHRC">UN Human Rights Council (UNHRC)</option>
<option value="PNA">Pakistan National Assembly (PNA)</option>
<option value="UN WOMEN">UN Women</option>
<option value="CCPCJ">Commission on Crime Prevention & Criminal Justice (CCPCJ)</option>
</select>
</div>
</div>
<div class="section hidden" id="experienceSection">
<h2 class="section-title">Public Speaking Experience</h2>
<div class="form-group">
<label>Do you have previous public speaking experience? <span class="required">*</span></label>
<div class="radio-group">
<div class="radio-item" onclick="selectRadio('expYes')">
<input type="radio" name="hasExperience" value="Yes" id="expYes">
<label for="expYes">Yes</label>
</div>
<div class="radio-item" onclick="selectRadio('expNo')">
<input type="radio" name="hasExperience" value="No" id="expNo">
<label for="expNo">No</label>
</div>
</div>
</div>
<div id="experienceDetail" class="form-group hidden">
<label>Please describe your experience</label>
<textarea name="experienceDescription" rows="4" placeholder="Describe your debates, speeches, MUN conferences, or other public speaking experiences..."></textarea>
</div>
</div>
<div class="section">
<h2 class="section-title">Required Documents</h2>
<div class="form-group">
<label>Upload Smart Card/ID with Picture <span class="required">*</span></label>
<input type="file" name="idDocument" accept="image/*,application/pdf,.doc,.docx" required>
<small style="color: var(--text-light); margin-top: 5px; display: block;">
Please upload a clear image of your student ID, smart card, or any official ID with your photo.
</small>
</div>
</div>
<div class="section">
<h2 class="section-title">Verification & Consent</h2>
<div class="checkbox-block">
<label>
<input type="checkbox" name="ageConfirmation" required>
<strong>I confirm that I am 18 years old or under</strong> <span class="required">*</span>
</label>
</div>
<div class="checkbox-block">
<label>
<input type="checkbox" name="codeOfConduct" required>
<strong>I agree to follow all BMUN rules and the Code of Conduct</strong> <span class="required">*</span>
</label>
<small style="color: var(--text-light); margin-top: 8px; display: block;">
By checking this box, you agree to maintain the highest standards of conduct during the conference.
</small>
</div>
</div>
<button type="submit" class="submit-btn" id="submitBtn">Complete Registration</button>
</form>
</div>
</div>
<script>
const form = document.getElementById('bmunForm');
const registrationRadios = document.getElementsByName('registrationType');
const experienceRadios = document.getElementsByName('hasExperience');
const committeeSection = document.getElementById('committeeSection');
const experienceSection = document.getElementById('experienceSection');
const experienceDetail = document.getElementById('experienceDetail');
const committeeSelect = document.getElementById('committeeSelect');
const submitBtn = document.getElementById('submitBtn');
const thankYouMessage = document.getElementById('thankYouMessage');
function selectRadio(radioId) {
document.getElementById(radioId).checked = true;
updateVisibility();
}
function updateVisibility() {
const regType = document.querySelector('input[name="registrationType"]:checked')?.value;
const hasExperience = document.querySelector('input[name="hasExperience"]:checked')?.value;
if (regType === 'Delegate') {
committeeSection.classList.remove('hidden');
committeeSection.classList.add('fade-in');
committeeSelect.required = true;
experienceSection.classList.remove('hidden');
experienceSection.classList.add('fade-in');
experienceRadios.forEach(radio => radio.required = true);
} else {
committeeSection.classList.add('hidden');
committeeSelect.required = false;
experienceSection.classList.add('hidden');
experienceDetail.classList.add('hidden');
experienceRadios.forEach(radio => {
radio.required = false;
radio.checked = false;
});
}
if (hasExperience === 'Yes' && regType === 'Delegate') {
experienceDetail.classList.remove('hidden');
experienceDetail.classList.add('fade-in');
} else {
experienceDetail.classList.add('hidden');
}
}
async function submitToJotForm(formData) {
const jotFormData = new FormData();
jotFormData.append('formID', '251856044462458');
jotFormData.append('jsExecutionTracker', 'build-date-1751748163361');
jotFormData.append('submitSource', 'unknown');
jotFormData.append('submitDate', new Date().toISOString());
jotFormData.append('buildDate', '1751748163361');
jotFormData.append('uploadServerUrl', 'https://upload.jotform.com/upload');
jotFormData.append('eventObserver', '1');
jotFormData.append('simple_spc', '251856044462458-251856044462458');
jotFormData.append('website', '');
jotFormData.append('q3_fullName[first]', formData.get('firstName'));
jotFormData.append('q3_fullName[last]', formData.get('lastName'));
jotFormData.append('q4_emailAddress', formData.get('email'));
jotFormData.append('q5_phoneNumber[full]', formData.get('phone'));
jotFormData.append('q6_institutionschoolName', formData.get('institution'));
jotFormData.append('q7_gradeyear', formData.get('grade'));
jotFormData.append('q8_registrationType', formData.get('registrationType'));
jotFormData.append('q10_preferredCommittee', formData.get('committee') || '');
jotFormData.append('q11_anyPrevious', formData.get('hasExperience') || '');
jotFormData.append('q12_howDid', formData.get('hearAbout') || '');
jotFormData.append('q16_ifYes', formData.get('experienceDescription') || '');
const fileInput = formData.get('idDocument');
if (fileInput && fileInput.size > 0) {
jotFormData.append('q15_uploadYour[]', fileInput);
}
try {
const response = await fetch('https://submit.jotform.com/submit/251856044462458', {
method: 'POST',
body: jotFormData,
mode: 'no-cors'
});
return true;
} catch (error) {
console.log('Form submitted (no-cors mode):', error);
return true;
}
}
registrationRadios.forEach(radio => {
radio.addEventListener('change', updateVisibility);
});
experienceRadios.forEach(radio => {
radio.addEventListener('change', updateVisibility);
});
form.addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(form);
const originalText = submitBtn.textContent;
submitBtn.innerHTML = '<span class="loading-spinner"></span>Submitting...';
submitBtn.disabled = true;
try {
await submitToJotForm(formData);
form.classList.add('hidden');
thankYouMessage.style.display = 'block';
window.scrollTo({
top: 0,
behavior: 'smooth'
});
} catch (error) {
console.error('Submission error:', error);
form.classList.add('hidden');
thankYouMessage.style.display = 'block';
window.scrollTo({
top: 0,
behavior: 'smooth'
});
} finally {
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
}
});
window.addEventListener('DOMContentLoaded', function() {
updateVisibility();
});
</script>
</body>
</html>