Compare commits

...

2 Commits

  1. 80
      public/frontend/css/style.css
  2. 82
      public/frontend/plugin/zabuto_calendar.min.css
  3. 5
      public/frontend/plugin/zabuto_calendar.min.js
  4. 107
      resources/views/appointment.blade.php
  5. 7
      resources/views/layout/app.blade.php
  6. 6
      resources/views/welcome.blade.php
  7. 6
      routes/web.php

@ -57,7 +57,17 @@ h2{
line-height: 22px; line-height: 22px;
color: #2B2A29 !important; color: #2B2A29 !important;
} }
.header .appointment-btn{
text-decoration: none;
color: #FFFFFF;
background: #326CBF;
padding: 10px 1rem;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size: 17px;
line-height: 22px;
}
.nav-link:hover, .nav-link:hover,
.nav-link:active { .nav-link:active {
color: #326CBF !important; color: #326CBF !important;
@ -434,7 +444,8 @@ Responsive Codes
.blog-detail-section, .blog-detail-section,
.faq-section, .faq-section,
.student-visa-section, .student-visa-section,
.services-page-section{ .services-page-section,
.appointment-section{
padding: 3rem 6rem; padding: 3rem 6rem;
} }
.services-section .row, .services-section .row,
@ -1443,6 +1454,67 @@ Responsive Codes
text-align: center; text-align: center;
color: #111111; color: #111111;
} }
/* appointment page css */
.appointment-cards{
display: flex;
flex-direction: column;
gap: 20px;
}
.appointment-card{
background-color: #E5F0FF;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: #000000;
padding: 10px 20px;
border-radius: 20px;
width: 360px;
}
.appointment-card-img{
width: 50px;
}
.claender-top{
display: flex;
gap: 10px;
}
.zabuto-calendar{
margin-top: 20px !important;
}
table.lightgrey-weekends tbody td:nth-child(n+6) {
background-color: #f3f3f3;
}
.appointment-section h1{
color: #296AC7;
margin-bottom: 2rem;
}
.calender-section h3{
font-size: 18px;
color: #9f9f9f;
}
.calender-section h2{
color: #296AC7;
}
.calender-disable{
pointer-events: none;
cursor: not-allowed;
}
.calender-disable:hover{
cursor: not-allowed;
}
.available-dates{
background: #f0f0f0;
display: inline-block;
text-align: center;
justify-content: center;
color: #272626;
padding: 10px;
margin-top: 1rem;
}
.available-dates h5{
margin-bottom: 0;
}
/* appointment page css ends */
/* Footer Css */ /* Footer Css */
.footer{ .footer{
@ -1522,7 +1594,9 @@ Responsive Codes
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.blog-info h6{ .blog-info h6,
.claender-top p,
.claender-top h5{
margin-bottom: 0; margin-bottom: 0;
} }
.socials-icon{ .socials-icon{

@ -0,0 +1,82 @@
/*! Zabuto Calendar - v2.1.0 - 2022-12-29
* https://github.com/zabuto/calendar
* Copyright (c) 2022 Anke Heijnen; Licensed MIT */
.zabuto-calendar {
width: 100%;
margin: 0;
padding: 0
}
.zabuto-calendar__navigation__item--next,
.zabuto-calendar__navigation__item--prev {
text-align: center;
cursor: pointer
}
.zabuto-calendar__navigation__item--header {
text-align: center
}
.zabuto-calendar__navigation__item--header__title {
cursor: pointer;
font-weight: bolder
}
.zabuto-calendar__days-of-week__item {
text-align: center
}
.zabuto-calendar__day {
text-align: center
}
.zabuto-calendar__day--today {
text-align: center
}
.zabuto-calendar.table td,
.zabuto-calendar.table th {
vertical-align: middle
}
.zabuto-calendar.table thead td {
padding-top: 14px;
padding-bottom: 14px;
background-color: #fafafa
}
.zabuto-calendar.table-bordered thead td {
border: 0
}
.zabuto-calendar.table thead th {
background-color: #f0f0f0
}
.zabuto-calendar.table>thead:first-child>tr:first-child>td {
border-top: 1px solid #ddd
}
.zabuto-calendar.table>thead>tr>th {
border-bottom: 2px solid #ddd
}
.zabuto-calendar.table>tbody td {
width: calc(100% / 7)
}
.zabuto-calendar.table>tbody>tr:last-child>td {
border-bottom: 1px solid #ddd
}
.zabuto-calendar.table>tbody td .badge {
font-size: 100%
}
.zabuto-calendar.clickable>tbody td {
cursor: pointer
}
.zabuto-calendar.table.clickable>tbody td:hover {
background-color: #f0f0f0
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,107 @@
@extends('layout.app')
@section('title')
<title>Book an Appointment</title>
<meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
<meta name="robots" content="index, follow" />
<meta property="og:url" content="" />
<meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
<meta property="og:title" content="ET-Visas"/>
<meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection
@section('content')
<section class="appointment-section">
<div class="row">
<div class="col-md-5">
<h1>Book an Appointment</h1>
<div class="appointment-cards">
<a href="" class="appointment-card">
<div class="appointment-card-img">
<img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
</div>
<div>
<h3>Education Services</h3>
</div>
</a>
<a href="" class="appointment-card">
<div class="appointment-card-img">
<img src="{{url('frontend/icons/visa-approved.svg')}}" class="img-fluid" alt="">
</div>
<div>
<h3>Visa Services</h3>
</div>
</a>
</div>
</div>
<div class="col-md-7">
<div class="calender-section">
<div class="claender-top">
<p>Time Zone:</p>
<h5>Australia / Sydney</h5>
</div>
<h2>Select available date</h2>
<h3>Education services | 30 mins</h3>
<div id="demo-calendar-apppearance"></div>
<div class="available-dates">
<h5 id='available-dates'></h5>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('script')
<script>
var $calender = $("#demo-calendar-apppearance");
$(document).ready(function () {
$calender.zabuto_calendar({
classname: 'table clickable table-bordered lightgrey-weekends',
week_starts: 'monday',
show_days: true,
today_markup: '<span class="badge bg-primary">[day]</span>',
navigation_markup: {
prev: '<i class="fas fa-chevron-circle-left"></i>',
next: '<i class="fas fa-chevron-circle-right"></i>'
}
});
var dates = [7, 8, 9]
var availableDates = document.getElementById('available-dates')
$calender.on('zabuto:calendar:day', function (e) {
var now = new Date();
if (e.today) {
$(e.element).css('color', 'blue');
} else if (e.date.getTime() < now.getTime()) {
$(e.element).click(function() { return false })
}
else if(dates){
dates.forEach((date) => {
if(e.element[0].innerText == date){
availableDates.innerText=[dates]
}
else{
availableDates.innerText=""
return false;
}
console.log(date)
});
// for (let i = 0; i < dates.length; i++){
// if(e.element[0].innerText == dates[i]){
// console.log(true)
// }
// else{
// console.log(dates[i])
// }
// }
}
else {
$(e.element).click(function() { return false })
}
writeToEventLog('zabuto:calendar:day' + ' date=' + e.date.toDateString() + ' value=' + e.value + ' today=' + e.today);
})
});
function writeToEventLog(message) {
}
</script>
@endsection

@ -122,6 +122,9 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="{{url('/faqs')}}">FAQs</a> <a class="nav-link" href="{{url('/faqs')}}">FAQs</a>
</li> </li>
<li>
<a href="{{url('/appointment')}}" class="appointment-btn">BOOK AN APPOINTMENT</a>
</li>
</ul> </ul>
<div class="mobile-navbar-btn"> <div class="mobile-navbar-btn">
<img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt=""> <img src="{{url('frontend/icons/menu.png')}}" name="menu-outline" class="mobile-nav-icon" alt="">
@ -283,6 +286,10 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<!-- require the plugin files -->
<link href="{{url('frontend/plugin/zabuto_calendar.min.css')}}" rel="stylesheet">
<script src="{{url('frontend/plugin/zabuto_calendar.min.js')}}"></script>
@yield('script') @yield('script')
<script> <script>
$.ajaxSetup({ $.ajaxSetup({

@ -152,7 +152,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="why-us-desc"> <div class="why-us-desc">
{!!$about_us->skip(1)->first()->description!!} {!!$about_us->skip(1)->first()->description ?? '' !!}
<!-- <h1>Why Choose Us</h1> <!-- <h1>Why Choose Us</h1>
<p>A remarkable number of Nepalese students from across the world, from diverse backgrounds, have achieved their international education goals successfully through us, the best Study Abroad Consultants in Nepal.</p> --> <p>A remarkable number of Nepalese students from across the world, from diverse backgrounds, have achieved their international education goals successfully through us, the best Study Abroad Consultants in Nepal.</p> -->
<div class="why-us-lists"> <div class="why-us-lists">
@ -160,7 +160,7 @@
<img src="{{url('frontend/icons/exclusive.svg')}}" class="img-fluid" alt=""> <img src="{{url('frontend/icons/exclusive.svg')}}" class="img-fluid" alt="">
</div> </div>
<div class="list-des"> <div class="list-des">
{!!$about_us->skip(1)->first()->sub_description!!} {!!$about_us->skip(1)->first()->sub_description ?? ''!!}
</div> </div>
</div> </div>
<div class="why-us-lists"> <div class="why-us-lists">
@ -168,7 +168,7 @@
<img src="{{url('frontend/icons/coin.svg')}}" class="img-fluid" alt=""> <img src="{{url('frontend/icons/coin.svg')}}" class="img-fluid" alt="">
</div> </div>
<div class="list-des"> <div class="list-des">
{!!$about_us->skip(1)->first()->bottom_description!!} {!!$about_us->skip(1)->first()->bottom_description ?? '' !!}
</div> </div>
</div> </div>
<!--<div class="why-us-lists">--> <!--<div class="why-us-lists">-->

@ -295,9 +295,9 @@ Route::get('/career_counselling', function () {
Route::get('/insurance', function () { Route::get('/insurance', function () {
return view('insurance'); return view('insurance');
}); });
// Route::get('/study-abroad-detail', function () { Route::get('/appointment', function () {
// return view('study-abroad-detail'); return view('appointment');
// }); });
// Route::get('/visa', function () { // Route::get('/visa', function () {
// return view('visa'); // return view('visa');
// }); // });

Loading…
Cancel
Save