<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تسجيل التدريب الصيفي - كلية طب الأسنان</title>
<style>
/* General Styles & Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Cairo', Tahoma, sans-serif;
/* New professional blue gradient from the logo's color palette */
background: linear-gradient(135deg, #0d2845 0%, #173d61 50%, #224d77 100%);
min-height: 100vh;
padding: 20px;
direction: rtl;
line-height: 1.6;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}
/* Container */
.container {
max-width: 720px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(15px);
border-radius: 24px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
overflow: hidden;
animation: slideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
width: 100%;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Header Section */
.header {
/* Deeper blue gradient matching the logo's primary color */
background: linear-gradient(135deg, #0d2845, #173d61);
padding: 50px 40px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.header-content {
position: relative;
z-index: 2;
}
.college-logo-img { /* Class for the actual image logo */
width: 120px; /* Slightly larger for prominence */
height: 120px;
margin: 0 auto 20px;
border-radius: 50%;
object-fit: contain; /* Ensure logo scales correctly without distortion */
border: 4px solid rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
background-color: white; /* Clean background for the logo image */
padding: 5px; /* Small padding inside border */
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); } /* Less aggressive pulse */
}
.header h1 {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header p {
font-size: 18px;
opacity: 0.95;
font-weight: 300;
}
/* Form Styling */
.form {
padding: 50px 40px;
}
.progress-bar {
width: 100%;
height: 8px; /* Slightly thicker */
background: #e0e7ee; /* Lighter blue-gray for the unfilled part */
border-radius: 10px;
margin-bottom: 40px;
overflow: hidden;
}
.progress-fill {
height: 100%;
/* Gradient matching header/logo primary colors */
background: linear-gradient(90deg, #0d2845, #224d77);
width: 0%;
transition: width 0.3s ease;
border-radius: 10px;
}
.section {
margin-bottom: 40px;
padding: 30px;
background: #f8faff; /* Very light blue background for sections */
border-radius: 20px;
border: 1px solid #dbe2ed; /* Soft border */
transition: all 0.3s ease;
}
.section:hover {
background: #eff5fc; /* Slightly darker on hover */
border-color: #c9daeb;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.section-title {
font-size: 20px;
font-weight: 600;
color: #0d2845; /* Main dark blue from logo */
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 3px;
background: #224d77; /* Accent blue from logo */
border-radius: 2px;
}
.section-icon {
font-size: 24px;
color: #224d77; /* Accent blue */
}
.form-group {
margin-bottom: 25px;
position: relative;
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(20px);
}
.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.form-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #2c3e50; /* Darker text for labels */
font-size: 15px;
transition: color 0.3s ease;
}
.required {
color: #e74c3c; /* A slightly softer red for errors */
margin-right: 4px;
font-size: 16px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 16px 20px;
border: 2px solid #dde1e6; /* Softer border */
border-radius: 16px;
font-size: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
direction: rtl;
font-family: inherit;
color: #374151;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #224d77; /* Accent blue on focus */
box-shadow: 0 0 0 4px rgba(34, 77, 119, 0.15); /* Softer shadow */
transform: translateY(-2px);
}
.form-group input:hover,
.form-group select:hover {
border-color: #b0c2d9; /* Lighter blue on hover */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* Subtle hover shadow */
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.stage-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 15px;
}
.stage-card {
position: relative;
cursor: pointer;
border: 2px solid #dde1e6;
border-radius: 16px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.stage-card:hover {
border-color: #224d77; /* Accent blue on hover */
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(34, 77, 119, 0.1);
}
.stage-card.selected {
border-color: #0d2845; /* Darker blue when selected */
background: linear-gradient(135deg, rgba(13, 40, 69, 0.05), rgba(34, 77, 119, 0.05));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(13, 40, 69, 0.2);
}
.stage-card input[type="radio"] {
display: none;
}
.stage-number {
font-size: 28px;
font-weight: 700;
color: #0d2845; /* Dark blue */
margin-bottom: 8px;
transition: color 0.3s ease;
}
.stage-card.selected .stage-number {
color: #173d61; /* Slightly lighter dark blue */
}
.stage-text {
font-size: 14px;
color: #6a737f; /* Soft gray for text */
font-weight: 500;
transition: color 0.3s ease;
}
.stage-card.selected .stage-text {
color: #3f4e60; /* Darker gray when selected */
}
.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #9ea7b4; /* Soft gray icon */
font-size: 18px;
pointer-events: none;
transition: color 0.3s ease;
}
.form-group:focus-within .input-icon {
color: #224d77; /* Accent blue on focus */
}
.submit-btn {
width: 100%;
/* Primary brand gradient */
background: linear-gradient(135deg, #0d2845, #224d77);
color: white;
border: none;
padding: 20px 32px;
border-radius: 16px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 30px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.submit-btn:hover::before {
left: 100%;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(13, 40, 69, 0.4); /* Stronger shadow on hover */
}
.submit-btn:active {
transform: translateY(-1px);
}
.submit-btn:disabled {
background: #cccccc;
cursor: not-allowed;
box-shadow: none;
transform: none;
opacity: 0.8;
}
.success-message {
display: none;
/* Green for success */
background: linear-gradient(135deg, #27ae60, #2ecc71);
color: white;
padding: 20px;
border-radius: 16px;
margin-top: 25px;
text-align: center;
animation: bounceIn 0.6s ease;
font-weight: 600;
box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { opacity: 1; transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
.help-text {
font-size: 13px;
color: #7f8c8d; /* Soft gray for help text */
margin-top: 6px;
font-style: italic;
text-align: right;
}
.error-message {
color: #e74c3c; /* Red for errors */
font-size: 13px;
margin-top: 6px;
display: none;
text-align: right;
font-weight: 500;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
body {
padding: 10px;
}
.container {
margin: 0;
border-radius: 16px;
}
.header {
padding: 40px 30px;
}
.form {
padding: 40px 30px;
}
.section {
padding: 25px 20px;
}
.form-row {
grid-template-columns: 1fr;
gap: 20px;
}
.stage-cards {
grid-template-columns: 1fr;
gap: 15px;
}
.header h1 {
font-size: 26px;
}
.header p {
font-size: 16px;
}
.form-group input,
.form-group select {
padding: 14px 16px;
}
.submit-btn {
padding: 16px 24px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-content">
<img src="Picture1.png" alt="Al Ayen University College of Dentistry Logo" class="college-logo-img">
<h1>التدريب الصيفي</h1>
<p>كلية طب الأسنان - الجامعة العراقية الأهلية</p>
<p style="font-size: 14px; opacity: 0.8; margin-top: 8px;">المرحلة الرابعة والخامسة</p>
</div>
</div>
<form class="form" id="dentalForm">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="section">
<div class="section-title">
<span class="section-icon">👤</span>
المعلومات الشخصية
</div>
<div class="form-group">
<label for="studentName">
<span class="required">*</span>
الاسم الثلاثي
</label>
<input type="text" id="studentName" name="studentName" required
placeholder="اكتب اسمك الثلاثي كما هو مسجل في الكلية">
<div class="help-text">يجب أن يتطابق مع الاسم المسجل رسمياً</div>
</div>
<div class="form-group">
<label for="phoneNumber">
<span class="required">*</span>
رقم الهاتف
</label>
<div style="position: relative;">
<input type="tel" id="phoneNumber" name="phoneNumber" required
placeholder="07xxxxxxxxx" maxlength="11">
<span class="input-icon">📱</span>
</div>
<div class="help-text">رقم الهاتف المحمول للتواصل الطارئ</div>
<div class="error-message" id="phoneError">يرجى إدخال رقم هاتف عراقي صحيح (يبدأ بـ 07 ويتكون من 11 رقم)</div>
</div>
</div>
<div class="section">
<div class="section-title">
<span class="section-icon">🎓</span>
المعلومات الأكاديمية
</div>
<div class="form-group">
<label>
<span class="required">*</span>
المرحلة الدراسية
</label>
<div class="stage-cards">
<div class="stage-card" onclick="selectStage('fourth')">
<input type="radio" name="stage" value="المرحلة الرابعة" id="fourth" required>
<div class="stage-number">4</div>
<div class="stage-text">المرحلة الرابعة</div>
</div>
<div class="stage-card" onclick="selectStage('fifth')">
<input type="radio" name="stage" value="المرحلة الخامسة" id="fifth" required>
<div class="stage-number">5</div>
<div class="stage-text">المرحلة الخامسة</div>
</div>
</div>
<div class="error-message" id="stageError" style="margin-top: 10px;">يرجى اختيار المرحلة الدراسية</div>
</div>
</div>
<div class="section">
<div class="section-title">
<span class="section-icon">📍</span>
معلومات الموقع
</div>
<div class="form-row">
<div class="form-group">
<label for="governorate">
<span class="required">*</span>
المحافظة
</label>
<select id="governorate" name="governorate" required>
<option value="">اختر المحافظة</option>
<option value="بغداد">بغداد</option>
<option value="البصرة">البصرة</option>
<option value="نينوى">نينوى</option>
<option value="أربيل">أربيل</option>
<option value="النجف">النجف</option>
<option value="كربلاء">كربلاء</option>
<option value="بابل">بابل</option>
<option value="الأنبار">الأنبار</option>
<option value="ديالى">ديالى</option>
<option value="ذي قار">ذي قار</option>
<option value="المثنى">المثنى</option>
<option value="القادسية">القادسية</option>
<option value="ميسان">ميسان</option>
<option value="واسط">واسط</option>
<option value="صلاح الدين">صلاح الدين</option>
<option value="كركوك">كركوك</option>
<option value="دهوك">دهوك</option>
<option value="السليمانية">السليمانية</option>
</select>
</div>
<div class="form-group">
<label for="district">
<span class="required">*</span>
القضاء
</label>
<input type="text" id="district" name="district" required
placeholder="اكتب اسم القضاء">
</div>
</div>
<div class="form-group">
<label for="subDistrict">
الناحية (اختياري)
</label>
<div style="position: relative;">
<input type="text" id="subDistrict" name="subDistrict"
placeholder="اكتب اسم الناحية إن وجدت">
<span class="input-icon">🗺️</span>
</div>
<div class="help-text">يمكنك ترك هذا الحقل فارغاً إذا لم ينطبق عليك</div>
</div>
<div class="form-group">
<label for="nearestPoint">
<span class="required">*</span>
أقرب نقطة دالة (معلم مشهور)
</label>
<div style="position: relative;">
<input type="text" id="nearestPoint" name="nearestPoint" required
placeholder="مثال: جامع الحي، مدرسة النور، مجمع الخليج التجاري">
<span class="input-icon">🏛️</span>
</div>
<div class="help-text">معلم مشهور يسهل الوصول إليه لتحديد موقعك</div>
</div>
</div>
<div class="section">
<div class="section-title">
<span class="section-icon">🏥</span>
معلومات التدريب
</div>
<div class="form-group">
<label for="healthCenter">
<span class="required">*</span>
اسم المركز الصحي المفضل للتدريب
</label>
<div style="position: relative;">
<input type="text" id="healthCenter" name="healthCenter" required
placeholder="اكتب اسم المركز الصحي أو المستشفى">
<span class="input-icon">🏥</span>
</div>
<div class="help-text">المركز الصحي الأقرب لسكنك أو المفضل لديك</div>
</div>
</div>
<button type="submit" class="submit-btn">
تسجيل في التدريب الصيفي
</button>
<div class="success-message" id="successMessage">
✅ شكراً لملء البيانات، سيتم إبلاغكم بالمستجدات قريباً.
</div>
</form>
</div>
<script>
const form = document.getElementById('dentalForm');
const successMessage = document.getElementById('successMessage');
const progressFill = document.getElementById('progressFill');
const phoneInput = document.getElementById('phoneNumber');
const phoneError = document.getElementById('phoneError');
const stageError = document.getElementById('stageError');
const stageRadios = document.querySelectorAll('input[name="stage"]');
const stageCards = document.querySelectorAll('.stage-card');
// Function to update the progress bar
function updateProgress() {
const requiredInputs = form.querySelectorAll('input[required]:not([type="radio"]), select[required]');
let filledCount = 0;
const totalRequiredFields = requiredInputs.length + 1; // +1 for the stage radio group
requiredInputs.forEach(input => {
if (input.value.trim() !== '') {
filledCount++;
}
});
if (Array.from(stageRadios).some(radio => radio.checked)) {
filledCount++;
}
const percentage = (filledCount / totalRequiredFields) * 100;
progressFill.style.width = percentage + '%';
}
// Function to handle stage selection
function selectStage(stageId) {
stageCards.forEach(card => {
card.classList.remove('selected');
});
const selectedCard = document.querySelector(`#${stageId}`).closest('.stage-card');
selectedCard.classList.add('selected');
document.getElementById(stageId).checked = true;
stageError.style.display = 'none';
updateProgress();
}
// Validate phone number on input
phoneInput.addEventListener('input', function() {
const phoneRegex = /^07[0-9]{9}$/;
const isValid = phoneRegex.test(this.value);
if (this.value.trim() !== '' && !isValid) {
phoneError.style.display = 'block';
this.style.borderColor = '#e74c3c';
} else {
phoneError.style.display = 'none';
this.style.borderColor = '#dde1e6';
}
updateProgress();
});
// Event listeners for progress bar updates
form.addEventListener('input', updateProgress);
form.addEventListener('change', updateProgress);
// Form submission handler
form.addEventListener('submit', function(e) {
e.preventDefault();
let allFieldsValid = true;
form.querySelectorAll('[required]').forEach(input => {
if (input.type === 'radio') {
const radioGroupName = input.name;
if (!document.querySelector(`input[name="${radioGroupName}"]:checked`)) {
allFieldsValid = false;
stageError.style.display = 'block';
} else {
stageError.style.display = 'none';
}
} else if (!input.value.trim()) {
allFieldsValid = false;
input.style.borderColor = '#e74c3c';
} else {
input.style.borderColor = '#dde1e6';
}
});
const phoneRegex = /^07[0-9]{9}$/;
if (!phoneRegex.test(phoneInput.value)) {
allFieldsValid = false;
phoneError.style.display = 'block';
phoneInput.style.borderColor = '#e74c3c';
}
if (!allFieldsValid) {
alert('يرجى ملء جميع الحقول المطلوبة بشكل صحيح.');
return;
}
const formData = new FormData(form);
const data = {};
for (let [key, value] of formData.entries()) {
data[key] = value;
}
const submitBtn = this.querySelector('.submit-btn');
submitBtn.textContent = 'جارٍ التسجيل...';
submitBtn.disabled = true;
// ***** هنا تم تعديل الرابط إلى الرابط الذي قدمته *****
const googleAppsScriptURL = 'https://script.google.com/macros/s/AKfycbyb-Izcz92-PWOrYhJ13Iu8mKoWM_ADxI5LIF2c42KNCLAFmNfeAmS93j2WO_ULIZaUpg/exec';
// ******************************************************
fetch(googleAppsScriptURL, {
method: 'POST',
mode: 'no-cors',
cache: 'no-cache',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams(data).toString()
})
.then(response => {
console.log('Form submission initiated to Apps Script. Check Google Sheet for data.');
successMessage.style.display = 'block';
form.style.display = 'none';
setTimeout(() => {
successMessage.style.display = 'none';
form.style.display = 'block';
form.reset();
stageCards.forEach(card => {
card.classList.remove('selected');
});
progressFill.style.width = '0%';
submitBtn.textContent = 'تسجيل في التدريب الصيفي';
submitBtn.disabled = false;
form.querySelectorAll('input, select').forEach(input => {
input.style.borderColor = '#dde1e6';
});
phoneError.style.display = 'none';
stageError.style.display = 'none';
}, 5000);
})
.catch(error => {
console.error('Error submitting form:', error);
alert('حدث خطأ أثناء إرسال البيانات. يرجى المحاولة مرة أخرى.');
submitBtn.textContent = 'تسجيل في التدريب الصيفي';
submitBtn.disabled = false;
});
});
// Initialize progress bar and animations on page load
window.addEventListener('load', function() {
updateProgress();
});
// Enhanced keyboard navigation
document.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && e.target.tagName !== 'BUTTON') {
e.preventDefault();
const focusableElements = Array.from(form.querySelectorAll('input, select, button, .stage-card'));
const currentIndex = focusableElements.indexOf(document.activeElement);
if (currentIndex !== -1 && currentIndex < focusableElements.length - 1) {
const nextElement = focusableElements[currentIndex + 1];
if (nextElement) {
nextElement.focus();
}
} else if (currentIndex === focusableElements.length - 1) {
form.submit();
}
}
});
window.selectStage = selectStage;
</script>
</body>
</html>