385 lines
24 KiB
HTML
385 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="rtl" lang="ar">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
|
<title>تكافل | إنشاء حساب جديد</title>
|
|
<meta content="" name="description">
|
|
<meta content="" name="keywords">
|
|
|
|
<!-- Favicons -->
|
|
<link href="assets/img/favicon.png" rel="icon">
|
|
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
|
|
|
<!-- Vendor CSS Files -->
|
|
<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
|
|
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
|
|
<link href="assets/lib/bootstrap3/bootstrap.min.css" rel="stylesheet">
|
|
<link href="assets/lib/bootstrap3/bootstrap-theme.min.css" rel="stylesheet">
|
|
<link href="assets/lib/mdi/css/materialdesignicons.css" rel="stylesheet">
|
|
<link href="assets/lib/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet">
|
|
<link href="assets/lib/owl-carousel/assets/owl.theme.default.min.css" rel="stylesheet">
|
|
|
|
<!-- Template Main CSS File -->
|
|
<link href="assets/css/header.css" rel="stylesheet"/>
|
|
<link href="assets/css/footer.css" rel="stylesheet"/>
|
|
<link href="assets/css/registration.css" rel="stylesheet">
|
|
|
|
<!-- =======================================================
|
|
* Template Name: Takaful
|
|
* Template URL: https://exp-sa.com/takaful-bootstrap-template/
|
|
* Author: exp-sa.com
|
|
======================================================== -->
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<nav class="navbar navbar-default">
|
|
<div class="container">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
|
|
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<a class="" href="#">
|
|
<img src="assets/img/logo.png" alt="">
|
|
</a>
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">الرئيسية</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false">عن الجمعية</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">نبذة عن الجمعية</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false">تواصل معنا</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">نبذة عن الجمعية</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false">المتجر</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">نبذة عن الجمعية</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false">الحوكمة</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">نبذة عن الجمعية</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="active"><a href="#">الكفالات</a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<div class="search-button">
|
|
<img src="assets/img/search.png" alt="">
|
|
</div>
|
|
</li>
|
|
<li><a href="#"><img src="assets/img/user.png" alt="" /> <span>تسجيل الدخول</span></a></li>
|
|
<li><a href="#"><img src="assets/img/shopping-cart.png" alt="" /></a></li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="registration-section">
|
|
<div class="col-md-12 benifits_wrapper">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="stepper_header d-flex flex-wrap">
|
|
<div class="step d-flex flex-column align-items-center active" data-toggle="steper"
|
|
data-taget="#section-tag">
|
|
<img src="assets/img/step_3_act.png" alt="1" />
|
|
<div class="step_content">
|
|
حدد شاراتك
|
|
</div>
|
|
</div>
|
|
<div class="step d-flex flex-column align-items-center" data-toggle="steper"
|
|
data-taget="#section-account">
|
|
<img src="assets/img/step_1_act.png" alt="2" />
|
|
<div class="step_content">
|
|
انشاء حساب
|
|
</div>
|
|
</div>
|
|
<div class="step d-flex flex-column align-items-center" data-toggle="steper"
|
|
data-taget="#section-confirm">
|
|
<img src="assets/img/step_2_inact.png" alt="3" />
|
|
<div class="step_content">
|
|
تأكيد الحساب
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 steper-content user_reg_form">
|
|
<!-- SECTION TAG -->
|
|
<div class="col-md-12 code_wrapper specify_char steper-step-content active" id="section-tag">
|
|
<div class="col-md-10 col-md-offset-1">
|
|
<h6 class="text-center"> من فضلك حدد شاراتك ( نوع حسابك ) ، مثال : هل أنت متطوع ؟</h6>
|
|
<div class="col-md-12" id="form">
|
|
<div class="character_row mb-4">
|
|
<div class="char_img">
|
|
<div class="specify_img">
|
|
<img src="assets/img/member.png" alt="kafel" />
|
|
<input type="radio" class="radio_btn" name="specify" value="sponsor" checked="checked"/>
|
|
</div>
|
|
<h5> كافل </h5>
|
|
</div>
|
|
<div class="char_img">
|
|
<div class="specify_img">
|
|
<img src="assets/img/employee.png" alt="employee" />
|
|
<input type="radio" class="radio_btn" name="specify" value="employee" />
|
|
</div>
|
|
<h5> موظف </h5>
|
|
</div>
|
|
<div class="char_img">
|
|
<div class="specify_img">
|
|
<img src="assets/img/member.png" alt="member" />
|
|
<input type="radio" class="radio_btn" name="specify" value="member" />
|
|
</div>
|
|
<h5> عضو مجلس </h5>
|
|
</div>
|
|
<div class="char_img">
|
|
<div class="specify_img">
|
|
<img src="assets/img/resturant_owner.png" alt="resturant_owner" />
|
|
<input type="radio" class="radio_btn" name="specify"
|
|
value="صاحب مطعم" />
|
|
</div>
|
|
<h5> صاحب مطعم </h5>
|
|
</div>
|
|
<div class="char_img">
|
|
<div class="specify_img">
|
|
<img src="assets/img/volanteere.png" alt="volunteer" />
|
|
<input type="radio" class="radio_btn" name="specify" value="volunteer" />
|
|
</div>
|
|
<h5> متطوع</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12" style="padding: 0;">
|
|
<button type="button" class="btn btn-primary main_link next" id="next-step-button">التالي</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SECTION ACCOUNT -->
|
|
<div class="col-md-12 steper-step-content form_wrapper" id="section-account">
|
|
<div class="col-md-10 col-md-offset-1 step-content-body">
|
|
<h5>قم بتعبئة البيانات التالية </h5>
|
|
<form id="registartionForm" method="post">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="form-group">
|
|
<label for="first_name"> الاسم الأول</label>
|
|
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="الأسم الأول" required="required">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="form-group">
|
|
<label for="second_name">الاسم الثاني</label>
|
|
<input type="text" class="form-control" name="second_name" id="second_name" placeholder="الاسم الثاني" required="required">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="form-group">
|
|
<label for="middle_name">الاسم الثالث</label>
|
|
<input type="text" class="form-control" name="middle_name" id="middle_name" placeholder="الاسم الثالث" required="required">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="form-group">
|
|
<label for="family_name">الاسم الأخير</label>
|
|
<input type="text" class="form-control" name="family_name" id="family_name" placeholder="الأسم الأخير" required="required">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="form-group">
|
|
<label for="mobile">رقم الهاتف</label>
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text" id="basic-addon3">+966</span>
|
|
</div>
|
|
<input type="text" class="form-control" maxlength="6" id="mobile" name="mobile" placeholder="Ex: 123456" aria-describedby="basic-addon3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="form-group">
|
|
<label for="email">البريد الالكتروني</label>
|
|
<input type="email" class="form-control" name="email" id="email" placeholder="email@example.com">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="form-group">
|
|
<label for="city_id">المدينة</label>
|
|
<select name="city_id" id="city_id" class="form-control custom-select"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="form-group">
|
|
<label for="gender">الجنس</label>
|
|
<div class="gender d-flex">
|
|
<div class="mail d-flex align-items-center">
|
|
<input type="radio" class="d-inline-block w-auto" id="gender-male" name="gender" value="male" checked>
|
|
<label class="mb-0"> ذكر </label>
|
|
</div>
|
|
<div class="femail d-flex align-items-center">
|
|
<input type="radio" class="d-inline-block w-auto" id="gender-female" name="gender" value="female">
|
|
<label class="mb-0"> انثى </label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="form-group">
|
|
<label for="activation_mode"> اختار طريقة تفعيل حسابك </label>
|
|
<select class="form-control custom-select" id="activation_mode" name="activation_mode" required>
|
|
<option value="phone" selected>عبر رسالة جوال </option>
|
|
<option value="email">البريد الالكتروني </option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="submit">
|
|
<input type="hidden" name="account_type" value=""/>
|
|
<input type="hidden" name="user_type" value=""/>
|
|
<button type="submit">انشاء حساب</button>
|
|
</div>
|
|
<div class="login">
|
|
هل لديك حساب بالفعل ؟ <a href="#"> تسجيل الدخول </a>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
<div class="step-loader"><p><span class="loader"></span><br><span>جاري إنشاء الحساب ...</span></p></div>
|
|
</div>
|
|
|
|
<!-- SECTION CONFIRM -->
|
|
<div class="col-md-12 steper-step-content code_wrapper" id="section-confirm">
|
|
<div class="col-md-8 col-md-offset-2">
|
|
<h6> من فضلك ادخل رمز التأكيد المكون من 4 أرقام </h6>
|
|
<p> قم بادخال الرقم الذي تم ارساله على هاتفك المحمول </p>
|
|
<a href="#"> تعديل الرقم ؟ </a>
|
|
<div id="form">
|
|
<div class="d-flex inputs">
|
|
<input type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
|
|
<input type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
|
|
<input type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
|
|
<input type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
|
|
</div>
|
|
<div class="resend d-flex justify-content-between">
|
|
<a href="#"> اعادة ارسال الرمز </a>
|
|
<span>انتظر 45 ثانية </span>
|
|
</div>
|
|
<button class="btn btn-primary btn-embossed">تأكيد</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-3 footer-desc">
|
|
<img src="assets/img/footer-logo.png" alt="" />
|
|
<p>جمعية تكافل الخيرية لرعاية الأيتام بمنطقة المدينة المنورة وهي جمعية أهلية تطوعية غير ربحية ذات
|
|
شخصية إعتبارية ولها ذمة مالية مستقلة.</p>
|
|
<ul class="list-inline social-accounts">
|
|
<li><a href=""><i class="mdi mdi-instagram"></i></a></li>
|
|
<li><a href=""><i class="mdi mdi-twitter"></i></a></li>
|
|
<li><a href=""><i class="mdi mdi-facebook"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-9 footer-links">
|
|
<div class="col-md-3">
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">الرئيسية</a></li>
|
|
<li><a href="#">من نحن</a></li>
|
|
<li><a href="#">تواصل معنا</a></li>
|
|
<li><a href="#">سياسة الخصوصية</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">الخدمات</a></li>
|
|
<li><a href="#">المتجر</a></li>
|
|
<li><a href="#">التبرعات</a></li>
|
|
<li><a href="#">الأسئلة الشائعة</a></li>
|
|
<li><a href="#">طرق الدفع</a></li>
|
|
<li><a href="#">الشكاوي و المقترحات</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">حسابك</a></li>
|
|
<li><a href="#">تبرعاتك</a></li>
|
|
<li><a href="#">المساعدة</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<h3>تواصل معنا أسرع عبر</h3>
|
|
<ul class="list-unstyled">
|
|
<li><span></span> <a href="#"><span>(002)12247078846</span></a></li>
|
|
<li><span></span> <a href="#"><span>(002)12247078846</span></a></li>
|
|
<li><span></span> <a href="#"><span>contact@takaful-store.com</span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 footer-bottom">
|
|
<img src="assets/img/visa.png" alt="" />
|
|
<img src="assets/img/mastercard.png" alt="" />
|
|
<img src="assets/img/paypal.png" alt="" />
|
|
</div>
|
|
<div class="col-md-12 footer-copyright">
|
|
<p><span>جميع الحقوق محفوظة لشركة الخبير للتسويق الإلكتروني</span> <span>© 2022</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JS SCRIPTS -->
|
|
<script src="assets/lib/bootstrap3/jquery.min.js"></script>
|
|
<script src="assets/lib/bootstrap3/bootstrap.min.js"></script>
|
|
<script src="assets/lib/owl-carousel/owl.carousel.min.js"></script>
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="assets/js/registration.js" refer></script>
|
|
</body>
|
|
|
|
</html> |