|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MSME Connect | Empowering Small Businesses</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
:root { |
|
|
--primary: #2563eb; |
|
|
--secondary: #1e40af; |
|
|
--accent: #3b82f6; |
|
|
--highlight: #93c5fd; |
|
|
--light: #f8fafc; |
|
|
--dark: #1e293b; |
|
|
} |
|
|
|
|
|
.bg-hero { |
|
|
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), |
|
|
url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.12); |
|
|
} |
|
|
|
|
|
.partner-logo { |
|
|
filter: grayscale(100%); |
|
|
opacity: 0.6; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.partner-logo:hover { |
|
|
filter: grayscale(0%); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.8s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.delay-100 { animation-delay: 0.1s; } |
|
|
.delay-200 { animation-delay: 0.2s; } |
|
|
.delay-300 { animation-delay: 0.3s; } |
|
|
.delay-400 { animation-delay: 0.4s; } |
|
|
.delay-500 { animation-delay: 0.5s; } |
|
|
|
|
|
|
|
|
.error { |
|
|
border-color: #ef4444 !important; |
|
|
} |
|
|
.error-message { |
|
|
color: #ef4444; |
|
|
font-size: 0.875rem; |
|
|
margin-top: 0.25rem; |
|
|
} |
|
|
.success-message { |
|
|
background-color: #10b981; |
|
|
color: white; |
|
|
padding: 1rem; |
|
|
border-radius: 0.5rem; |
|
|
margin-bottom: 1rem; |
|
|
text-align: center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans text-slate-800 bg-slate-50"> |
|
|
<?php |
|
|
// Database connection |
|
|
$servername = "localhost"; |
|
|
$username = "root"; // Ganti dengan username MySQL Anda |
|
|
$password = ""; // Ganti dengan password MySQL Anda |
|
|
$dbname = "msme_connect"; // Ganti dengan nama database Anda |
|
|
|
|
|
// Create connection |
|
|
$conn = new mysqli($servername, $username, $password, $dbname); |
|
|
|
|
|
// Check connection |
|
|
if ($conn->connect_error) { |
|
|
die("Connection failed: " . $conn->connect_error); |
|
|
} |
|
|
|
|
|
// Initialize variables |
|
|
$business_name = $first_name = $last_name = $email = $phone = $sector = ""; |
|
|
$errors = array(); |
|
|
$success = false; |
|
|
|
|
|
// Form submission |
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") { |
|
|
// Validate and sanitize inputs |
|
|
$business_name = clean_input($_POST["business_name"]); |
|
|
if (empty($business_name)) { |
|
|
$errors["business_name"] = "Business name is required"; |
|
|
} |
|
|
|
|
|
$first_name = clean_input($_POST["first_name"]); |
|
|
if (empty($first_name)) { |
|
|
$errors["first_name"] = "First name is required"; |
|
|
} |
|
|
|
|
|
$last_name = clean_input($_POST["last_name"]); |
|
|
if (empty($last_name)) { |
|
|
$errors["last_name"] = "Last name is required"; |
|
|
} |
|
|
|
|
|
$email = clean_input($_POST["email"]); |
|
|
if (empty($email)) { |
|
|
$errors["email"] = "Email is required"; |
|
|
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { |
|
|
$errors["email"] = "Invalid email format"; |
|
|
} |
|
|
|
|
|
$phone = clean_input($_POST["phone"]); |
|
|
if (empty($phone)) { |
|
|
$errors["phone"] = "Phone number is required"; |
|
|
} |
|
|
|
|
|
$sector = clean_input($_POST["sector"]); |
|
|
if (empty($sector)) { |
|
|
$errors["sector"] = "Business sector is required"; |
|
|
} |
|
|
|
|
|
$agree_terms = isset($_POST["agree_terms"]) ? 1 : 0; |
|
|
if (!$agree_terms) { |
|
|
$errors["agree_terms"] = "You must agree to the terms and conditions"; |
|
|
} |
|
|
|
|
|
// If no errors, insert into database |
|
|
if (empty($errors)) { |
|
|
$stmt = $conn->prepare("INSERT INTO business_registrations (business_name, first_name, last_name, email, phone, sector, agree_terms) |
|
|
VALUES (?, ?, ?, ?, ?, ?, ?)"); |
|
|
$stmt->bind_param("ssssssi", $business_name, $first_name, $last_name, $email, $phone, $sector, $agree_terms); |
|
|
|
|
|
if ($stmt->execute()) { |
|
|
$success = true; |
|
|
// Reset form fields |
|
|
$business_name = $first_name = $last_name = $email = $phone = $sector = ""; |
|
|
} else { |
|
|
$errors["database"] = "Error: " . $stmt->error; |
|
|
} |
|
|
|
|
|
$stmt->close(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Function to clean input data |
|
|
function clean_input($data) { |
|
|
$data = trim($data); |
|
|
$data = stripslashes($data); |
|
|
$data = htmlspecialchars($data); |
|
|
return $data; |
|
|
} |
|
|
|
|
|
// Close connection |
|
|
$conn->close(); |
|
|
?> |
|
|
|
|
|
|
|
|
<header class="fixed w-full bg-white shadow-md z-50 transition-all duration-300"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<i class="fas fa-store text-blue-700 text-3xl mr-2"></i> |
|
|
<span class="text-2xl font-bold text-blue-800">MSME<span class="text-blue-600">Connect</span></span> |
|
|
</a> |
|
|
|
|
|
|
|
|
<button id="menu-toggle" class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl text-blue-800"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="font-semibold text-blue-800 hover:text-blue-600 transition">Home</a> |
|
|
<a href="#about" class="font-semibold text-slate-600 hover:text-blue-800 transition">About</a> |
|
|
<a href="#services" class="font-semibold text-slate-600 hover:text-blue-800 transition">Services</a> |
|
|
<a href="#benefits" class="font-semibold text-slate-600 hover:text-blue-800 transition">Benefits</a> |
|
|
<a href="#success" class="font-semibold text-slate-600 hover:text-blue-800 transition">Success Stories</a> |
|
|
<a href="#contact" class="font-semibold text-slate-600 hover:text-blue-800 transition">Contact</a> |
|
|
<a href="#register" class="font-semibold bg-blue-700 text-white px-4 py-2 rounded-lg hover:bg-blue-800 transition">Register Now</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav id="mobile-menu" class="md:hidden hidden mt-4 space-y-3 pb-3"> |
|
|
<a href="#home" class="block font-medium text-slate-700 hover:text-blue-700 transition">Home</a> |
|
|
<a href="#about" class="block font-medium text-slate-700 hover:text-blue-700 transition">About</a> |
|
|
<a href="#services" class="block font-medium text-slate-700 hover:text-blue-700 transition">Services</a> |
|
|
<a href="#benefits" class="block font-medium text-slate-700 hover:text-blue-700 transition">Benefits</a> |
|
|
<a href="#success" class="block font-medium text-slate-700 hover:text-blue-700 transition">Success Stories</a> |
|
|
<a href="#contact" class="block font-medium text-slate-700 hover:text-blue-700 transition">Contact</a> |
|
|
<a href="#register" class="block mt-2 w-full bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg text-center hover:bg-blue-800 transition">Register Now</a> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="register" class="py-20 bg-blue-700 text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2 animate-fade-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Grow Your MSME?</h2> |
|
|
<p class="text-xl opacity-90 mb-6 leading-relaxed"> |
|
|
Join our network of successful MSMEs gaining access to financing, markets, training and support services. |
|
|
</p> |
|
|
<p class="text-xl opacity-90 mb-8 leading-relaxed"> |
|
|
Registration is free and takes less than 5 minutes. Let's build your business together! |
|
|
</p> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Who can join?</h3> |
|
|
<div class="grid grid-cols-2 gap-4 text-white/90"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<p>Micro enterprises (1-10 employees)</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<p>Small businesses (11-50 employees)</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<p>Medium businesses (51-250 employees)</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-5 w-5 mt-1 mr-3"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<p>Startups & entrepreneurs</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 bg-white rounded-xl shadow-2xl overflow-hidden animate-fade-in delay-200"> |
|
|
<div class="p-8"> |
|
|
<h3 class="text-2xl font-bold text-blue-800 mb-6">Register Your Business</h3> |
|
|
|
|
|
<?php if ($success): ?> |
|
|
<div class="success-message"> |
|
|
Thank you for registering! We will contact you soon. |
|
|
</div> |
|
|
<?php endif; ?> |
|
|
|
|
|
<?php if (isset($errors['database'])): ?> |
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert"> |
|
|
<?php echo $errors['database']; ?> |
|
|
</div> |
|
|
<?php endif; ?> |
|
|
|
|
|
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>#register" novalidate> |
|
|
<div class="mb-4"> |
|
|
<label for="business_name" class="block text-slate-700 text-sm font-medium mb-2">Business Name *</label> |
|
|
<input type="text" id="business_name" name="business_name" |
|
|
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['business_name']) ? 'error' : ''; ?>" |
|
|
value="<?php echo htmlspecialchars($business_name); ?>"> |
|
|
<?php if (isset($errors['business_name'])): ?> |
|
|
<p class="error-message"><?php echo $errors['business_name']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label for="first_name" class="block text-slate-700 text-sm font-medium mb-2">First Name *</label> |
|
|
<input type="text" id="first_name" name="first_name" |
|
|
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['first_name']) ? 'error' : ''; ?>" |
|
|
value="<?php echo htmlspecialchars($first_name); ?>"> |
|
|
<?php if (isset($errors['first_name'])): ?> |
|
|
<p class="error-message"><?php echo $errors['first_name']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
<div> |
|
|
<label for="last_name" class="block text-slate-700 text-sm font-medium mb-2">Last Name *</label> |
|
|
<input type="text" id="last_name" name="last_name" |
|
|
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['last_name']) ? 'error' : ''; ?>" |
|
|
value="<?php echo htmlspecialchars($last_name); ?>"> |
|
|
<?php if (isset($errors['last_name'])): ?> |
|
|
<p class="error-message"><?php echo $errors['last_name']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-slate-700 text-sm font-medium mb-2">Email Address *</label> |
|
|
<input type="email" id="email" name="email" |
|
|
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['email']) ? 'error' : ''; ?>" |
|
|
value="<?php echo htmlspecialchars($email); ?>"> |
|
|
<?php if (isset($errors['email'])): ?> |
|
|
<p class="error-message"><?php echo $errors['email']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="phone" class="block text-slate-700 text-sm font-medium mb-2">Phone Number *</label> |
|
|
<input type="tel" id="phone" name="phone" |
|
|
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['phone']) ? 'error' : ''; ?>" |
|
|
value="<?php echo htmlspecialchars($phone); ?>"> |
|
|
<?php if (isset($errors['phone'])): ?> |
|
|
<p class="error-message"><?php echo $errors['phone']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="sector" class="block text-slate-700 text-sm font-medium mb-2">Business Sector *</label> |
|
|
<select id="sector" name="sector" |
|
|
class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition <?php echo isset($errors['sector']) ? 'error' : ''; ?>"> |
|
|
<option value="">Select sector</option> |
|
|
<option value="agriculture" <?php echo ($sector == 'agriculture') ? 'selected' : ''; ?>>Agriculture</option> |
|
|
<option value="manufacturing" <?php echo ($sector == 'manufacturing') ? 'selected' : ''; ?>>Manufacturing</option> |
|
|
<option value="retail" <?php echo ($sector == 'retail') ? 'selected' : ''; ?>>Retail</option> |
|
|
<option value="services" <?php echo ($sector == 'services') ? 'selected' : ''; ?>>Services</option> |
|
|
<option value="technology" <?php echo ($sector == 'technology') ? 'selected' : ''; ?>>Technology</option> |
|
|
<option value="other" <?php echo ($sector == 'other') ? 'selected' : ''; ?>>Other</option> |
|
|
</select> |
|
|
<?php if (isset($errors['sector'])): ?> |
|
|
<p class="error-message"><?php echo $errors['sector']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="agree_terms" class="flex items-start"> |
|
|
<input type="checkbox" id="agree_terms" name="agree_terms" |
|
|
class="rounded text-blue-600 focus:ring-blue-500 border-slate-300 mt-1 <?php echo isset($errors['agree_terms']) ? 'error' : ''; ?>" |
|
|
<?php echo isset($_POST['agree_terms']) ? 'checked' : ''; ?>> |
|
|
<span class="ml-2 text-slate-700">I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a></span> |
|
|
</label> |
|
|
<?php if (isset($errors['agree_terms'])): ?> |
|
|
<p class="error-message"><?php echo $errors['agree_terms']; ?></p> |
|
|
<?php endif; ?> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105"> |
|
|
Complete Registration |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
|
|
|
menu.classList.toggle('hidden'); |
|
|
|
|
|
|
|
|
if (menu.classList.contains('hidden')) { |
|
|
icon.classList.remove('fa-times'); |
|
|
icon.classList.add('fa-bars'); |
|
|
} else { |
|
|
icon.classList.remove('fa-bars'); |
|
|
icon.classList.add('fa-times'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
document.getElementById('menu-toggle').querySelector('i').classList.remove('fa-times'); |
|
|
document.getElementById('menu-toggle').querySelector('i').classList.add('fa-bars'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
|
const header = document.querySelector('header'); |
|
|
if (window.scrollY > 100) { |
|
|
header.classList.add('shadow-lg'); |
|
|
header.classList.add('bg-white/95'); |
|
|
header.classList.add('backdrop-blur-sm'); |
|
|
} else { |
|
|
header.classList.remove('shadow-lg'); |
|
|
header.classList.remove('bg-white/95'); |
|
|
header.classList.remove('backdrop-blur-sm'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const animateElements = document.querySelectorAll('.animate-fade-in'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = 1; |
|
|
entry.target.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
animateElements.forEach(element => { |
|
|
element.style.opacity = 0; |
|
|
element.style.transform = 'translateY(20px)'; |
|
|
element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
|
|
observer.observe(element); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('form').addEventListener('submit', function(e) { |
|
|
let isValid = true; |
|
|
const form = e.target; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.error').forEach(el => { |
|
|
el.classList.remove('error'); |
|
|
}); |
|
|
document.querySelectorAll('.error-message').forEach(el => { |
|
|
el.style.display = 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
const requiredFields = [ |
|
|
'business_name', |
|
|
'first_name', |
|
|
'last_name', |
|
|
'email', |
|
|
'phone', |
|
|
'sector', |
|
|
'agree_terms' |
|
|
]; |
|
|
|
|
|
requiredFields.forEach(fieldId => { |
|
|
const field = form[fieldId]; |
|
|
if (field) { |
|
|
if (field.type === 'checkbox') { |
|
|
if (!field.checked) { |
|
|
isValid = false; |
|
|
const label = field.closest('label'); |
|
|
if (label) { |
|
|
label.classList.add('error'); |
|
|
} |
|
|
|
|
|
const errorElement = document.createElement('p'); |
|
|
errorElement.className = 'error-message'; |
|
|
errorElement.textContent = 'You must agree to the terms and conditions'; |
|
|
label.after(errorElement); |
|
|
} |
|
|
} else if (!field.value.trim()) { |
|
|
isValid = false; |
|
|
field.classList.add('error'); |
|
|
|
|
|
const errorElement = document.createElement('p'); |
|
|
errorElement.className = 'error-message'; |
|
|
errorElement.textContent = 'This field is required'; |
|
|
field.after(errorElement); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const emailField = form['email']; |
|
|
if (emailField && emailField.value.trim()) { |
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
|
|
if (!emailRegex.test(emailField.value.trim())) { |
|
|
isValid = false; |
|
|
emailField.classList.add('error'); |
|
|
|
|
|
const errorElement = document.createElement('p'); |
|
|
errorElement.className = 'error-message'; |
|
|
errorElement.textContent = 'Please enter a valid email address'; |
|
|
emailField.after(errorElement); |
|
|
} |
|
|
} |
|
|
|
|
|
if (!isValid) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const firstError = document.querySelector('.error'); |
|
|
if (firstError) { |
|
|
firstError.scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'center' |
|
|
}); |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
