EventBuzz_Backend/microsite-v2-templates/event-up/template.html

801 lines
28 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{meta.title}}</title>
<link rel="stylesheet" href="{{assetUrl assetsBaseUrl 'css/bootstrap.min.css'}}">
<link rel="stylesheet" href="{{assetUrl assetsBaseUrl 'fonts/line-icons.css'}}">
<link rel="stylesheet" href="{{assetUrl assetsBaseUrl 'css/nivo-lightbox.css'}}">
<link rel="stylesheet" href="{{assetUrl assetsBaseUrl 'css/animate.css'}}">
<link rel="stylesheet" href="{{assetUrl assetsBaseUrl 'css/main.css'}}">
<link rel="stylesheet" href="{{assetUrl assetsBaseUrl 'css/responsive.css'}}">
<style>
:root {
--eventup-accent: {{theme.accent}};
--eventup-accent-start: {{theme.accentStart}};
--eventup-accent-end: {{theme.accentEnd}};
--eventup-accent-hover-start: {{theme.accentHoverStart}};
--eventup-accent-hover-end: {{theme.accentHoverEnd}};
--eventup-heading-color: {{theme.headingColor}};
--eventup-accent-shadow-25: rgba(24, 154, 149, 0.25);
--eventup-accent-shadow-40: rgba(24, 154, 149, 0.40);
}
{{#if sections.hero.image.url}}
#hero-area.hero-area-bg { background-image: url('{{resolveAsset assetsBaseUrl sections.hero.image.url}}'); }
{{/if}}
</style>
<script id="eventup-microsite-config" type="application/json">{{json this}}</script>
<link
rel="icon"
type="image/png"
href="{{resolveAsset assetsBaseUrl sections.uploadFavicon.favicon}}"
/>
</head>
<body>
{{#if_show sections.logo}}
<nav class="navbar navbar-expand-lg bg-inverse fixed-top scrolling-navbar">
<div class="container">
<a href="#header-wrap" class="navbar-brand">
{{#if sections.logo.header.url}}
<img src="{{resolveAsset assetsBaseUrl sections.logo.header.url}}" alt="{{sections.logo.header.alt}}" style="max-height:{{sections.logo.header.maxHeight}}px">
{{/if}}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="lni-menu"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto w-100 justify-content-end">
<li class="nav-item active"><a class="nav-link" href="#header-wrap">Home</a></li>
{{#if_show sections.about}}<li class="nav-item"><a class="nav-link" href="#about">About</a></li>{{/if_show}}
{{#if_show sections.speakers}}<li class="nav-item"><a class="nav-link" href="#team">Speakers</a></li>{{/if_show}}
{{#if_show sections.event_schedule}}<li class="nav-item"><a class="nav-link" href="#schedules">Schedule</a></li>{{/if_show}}
{{#if_show sections.sponsors}}<li class="nav-item"><a class="nav-link" href="#sponsors">Sponsors</a></li>{{/if_show}}
{{#if_show sections.contact}}<li class="nav-item"><a class="nav-link" href="#contact-map">Contact</a></li>{{/if_show}}
{{#if sections.logo.registerButton.text}}
{{#if sections.logo.registerButton.text}}
<li class="nav-item nav-item--register">
<a class="btn btn-common"
href="{{sections.logo.registerButton.url}}"
target="_blank"
rel="noopener noreferrer">
{{sections.logo.registerButton.text}}
</a>
</li>
{{/if}}
{{/if}}
</ul>
</div>
</div>
</nav>
<div class="navbar-spacer" aria-hidden="true"></div>
{{/if_show}}
<header id="header-wrap">
{{#if_show sections.hero}}
<div id="hero-area" class="hero-area-bg" data-site-component="hero">
<div class="overlay"></div>
<div class="container-fluid hero-split-container">
<div class="row hero-split align-items-center no-gutters">
<div class="col-lg-6 col-md-6 col-12 hero-split__media">
{{#if sections.logo.hero.url}}
<div class="hero-logo-wrap">
<img class="hero-logo" src="{{resolveAsset assetsBaseUrl sections.logo.hero.url}}" alt="{{sections.logo.hero.alt}}">
</div>
{{/if}}
</div>
<div class="col-lg-6 col-md-6 col-12 hero-split__content">
<div class="hero-split__text">
<h2 class="head-title hero-brand-title">{{sections.hero.event_name}}</h2>
<p class="banner-info">{{sections.hero.date_venue}}</p>
{{#if sections.hero.cta.text}}
<div class="banner-btn">
<a href="{{sections.hero.cta.url}}" class="btn btn-common" data-hero-cta-link{{#if (eq sections.hero.cta.target "_blank")}} target="_blank" rel="noopener noreferrer"{{/if}}>{{sections.hero.cta.text}}</a>
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{/if_show}}
</header>
{{#if sections.hero.countdown.show}}
<section id="count" data-site-component="countdown">
<div class="container">
<div class="row justify-content-center">
<div class="col-10">
<div class="count-wrapper text-center">
<div class="time-countdown wow fadeInUp" data-wow-delay="0.2s">
<div id="clock" class="time-count"></div>
</div>
</div>
</div>
</div>
</div>
</section>
{{/if}}
{{#if_show sections.about}}
<section id="about" class="section-padding" data-site-component="about">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="about-content">
<div class="about-text">
<h2>{{sections.about.heading}}</h2>
<div>{{{sections.about.content}}}</div>
</div>
{{#if (eq sections.about.media.type "image")}}{{#if sections.about.media.image}}
<div class="eventup-section-media"><img src="{{resolveAsset assetsBaseUrl sections.about.media.image}}" alt="{{sections.about.heading}}"></div>
{{/if}}{{/if}}
{{#if (eq sections.about.media.type "video")}}{{#if sections.about.media.video}}
<div class="eventup-section-media"><video controls preload="metadata" src="{{resolveAsset assetsBaseUrl sections.about.media.video}}"></video></div>
{{/if}}{{/if}}
{{#if (eq sections.about.media.type "youtube")}}{{#if sections.about.media.youtube}}
<div class="eventup-section-media"><iframe src="{{youtubeEmbed sections.about.media.youtube}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
{{/if}}{{/if}}
</div>
</div>
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.video}}
<section class="ready-to-play" data-site-component="video">
{{#if (eq sections.video.media.type "video")}}
{{#if sections.video.media.video}}
<video
id="heroVideo"
class="hero-video"
autoplay
muted
loop
playsinline>
<source src="{{resolveAsset assetsBaseUrl sections.video.media.video}}">
</video>
<div class="video-overlay"></div>
<div class="video-controls">
<button id="playPauseBtn" class="video-btn">
<i class="lni-pause"></i>
</button>
<button id="muteBtn" class="video-btn">
<i class="lni-volume-mute"></i>
</button>
</div>
{{/if}}
{{/if}}
{{#if (eq sections.video.media.type "youtube")}}
{{#if sections.video.media.youtube}}
<iframe
class="hero-video"
src="{{youtubeEmbed sections.video.media.youtube}}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
{{/if}}
{{/if}}
<!-- <div class="video-overlay"></div> -->
<!-- <div class="video-content">
<h2>{{sections.video.heading}}</h2>
</div> -->
</section>
{{/if_show}}
{{#if_show sections.informationBar}}
<section id="information-bar" data-site-component="information-bar">
<div class="container">
<div class="row inforation-wrapper">
{{#each sections.informationBar.items}}
<div class="col-lg-3 col-md-6 col-xs-12">
<div class="info-bar-item">
<i class="{{this.icon}} info-bar-item__icon"></i>
<div class="info-bar-item__text">
<b class="info-bar-item__label">{{this.label}}</b>
<span class="info-bar-item__value">{{this.value}}</span>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.event_highlights}}
<section id="intro" class="intro section-padding" data-site-component="event_highlights">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title-header text-center">
<h2 class="section-title wow fadeInUp">{{sections.event_highlights.heading}}</h2>
{{#if sections.event_highlights.subtitle}}<p class="wow fadeInDown">{{sections.event_highlights.subtitle}}</p>{{/if}}
</div>
</div>
</div>
<div class="row intro-wrapper">
{{#each sections.event_highlights.items}}
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="single-intro-text mb-70">
<i class="{{this.icon}}"></i>
<h3>{{this.title}}</h3>
<p>{{this.description}}</p>
<!-- <span class="count-number">0{{@index}}</span> -->
<span class="count-number">0{{inc @index}}</span>
</div>
</div>
{{/each}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.event_stats}}
<section class="counter-section section-padding" data-site-component="event_stats">
<div class="container">
<div class="row">
{{#each sections.event_stats.items}}
<div class="col-lg-3 col-md-6 col-xs-12 work-counter-widget">
<div class="counter">
<div class="icon"><i class="{{this.icon}}"></i></div>
<div class="counter-content">
<div class="counterUp">{{this.value}}</div>
<p>{{this.label}}</p>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.speakers}}
<section id="team" class="section-padding text-center speakers" data-site-component="speakers">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title-header text-center">
<h2 class="section-title wow fadeInUp">{{sections.speakers.heading}}</h2>
{{#if sections.speakers.subtitle}}<p class="wow fadeInDown">{{sections.speakers.subtitle}}</p>{{/if}}
</div>
</div>
</div>
<div class="row speakers-area wow fadeInDown">
{{#each sections.speakers.items}}
<div class="col-lg-3 col-md-6 col-xs-12 mb-4">
<div class="speaker-card">
{{#if this.image}}<img src="{{resolveAsset @root.assetsBaseUrl this.image}}" alt="{{this.name}}" class="img-fluid rounded-circle mb-3" style="width:140px;height:140px;object-fit:cover">{{/if}}
<h4>{{this.name}}</h4>
<p class="text-muted">{{this.role}}</p>
</div>
</div>
{{/each}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.event_schedule}}
<section id="schedules" class="schedule section-padding" data-site-component="event_schedule">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title-header text-center">
<h2 class="section-title wow fadeInUp">{{sections.event_schedule.heading}}</h2>
{{#if sections.event_schedule.subtitle}}<p class="wow fadeInDown">{{sections.event_schedule.subtitle}}</p>{{/if}}
</div>
</div>
</div>
{{#each sections.event_schedule.days}}
<div class="mb-5">
<h4 class="text-center mb-3">{{this.label}}{{#if this.date}} — {{this.date}}{{/if}}</h4>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
{{#each this.sessions}}
<tr>
<td style="width:28%">{{this.time}}</td>
<td style="width:18%">{{this.type}}</td>
<td>{{this.title}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
{{/each}}
</div>
</section>
{{/if_show}}
{{#if_show sections.pricing.show}}
<section id="pricing" class="section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title-header text-center">
<h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
{{sections.pricing.heading}}
</h2>
<p class="wow fadeInDown" data-wow-delay="0.2s">
{{sections.pricing.subtitle}}
</p>
</div>
</div>
</div>
<div class="row">
{{#each sections.pricing.plans}}
<div class="col-lg-4 col-md-6 col-xs-12 mb-3">
<div class="price-block-wrapper {{#if featured}}active{{/if}}">
<div class="colmun-title">
<h5>{{title}}</h5>
</div>
<div class="price">
<h2>{{price}}</h2>
<span>{{duration}}</span>
</div>
<div class="pricing-list">
<ul>
{{#each features}}
<li>
{{#if included}}
<i class="lni-check-mark-circle"></i>
{{else}}
<i class="lni-close"></i>
{{/if}}
<span class="text">{{text}}</span>
</li>
{{/each}}
</ul>
</div>
<a href="{{buttonLink}}" class="btn btn-common">
{{buttonText}}
</a>
</div>
</div>
{{/each}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.about_crest}}
<section id="about-crest" class="section-padding" data-site-component="about_crest">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h2>{{sections.about_crest.heading}}</h2>
<div>{{{sections.about_crest.content}}}</div>
{{#if sections.about_crest.cta.text}}
<p class="mt-3"><a href="{{sections.about_crest.cta.url}}" class="btn btn-common">{{sections.about_crest.cta.text}}</a></p>
{{/if}}
</div>
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.latest_news.show}}
<section id="blog" class="section-padding">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title-header text-center">
<h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
{{sections.latest_news.heading}}
</h2>
<p class="wow fadeInDown" data-wow-delay="0.2s">
{{sections.latest_news.subtitle}}
</p>
</div>
</div>
</div>
<div class="row">
{{#each sections.latest_news.news}}
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="blog-item">
<div class="blog-image">
<a href="{{link}}">
<img
class="img-fluid"
src="{{resolveAsset @root.assetsBaseUrl image}}"
alt="{{title}}">
</a>
</div>
<div class="descr">
<div class="icon">
<i class="{{icon}}"></i>
</div>
<h3 class="title">
<a href="{{link}}">
{{title}}
</a>
</h3>
<p>{{description}}</p>
</div>
<div class="meta-tags">
<span class="date">
<i class="lni-calendar"></i>
{{date}}
</span>
<span class="comments">
<i class="lni-comment-alt"></i>
<a href="{{link}}">
{{comments}} Comments
</a>
</span>
</div>
</div>
</div>
{{/each}}
{{#if sections.latest_news.buttonText}}
<div class="col-12 text-center">
<a href="{{sections.latest_news.buttonLink}}" class="btn btn-common">
{{sections.latest_news.buttonText}}
</a>
</div>
{{/if}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.sponsors}}
<section id="sponsors" class="section-padding" data-site-component="sponsors">
<div class="container">
{{#unless sections.sponsors.hideHeading}}
<div class="section-title-header text-center">
<h2 class="section-title">{{sections.sponsors.heading}}</h2>
{{#if sections.sponsors.subtitle}}<p>{{sections.sponsors.subtitle}}</p>{{/if}}
</div>
{{/unless}}
<div class="sponsors-groups text-center">
{{#each sections.sponsors.groups}}
<div class="mb-4">
{{#unless ../sections.sponsors.hideGroupTitles}}<h5 class="mb-3">{{this.title}}</h5>{{/unless}}
<div class="row justify-content-center align-items-center">
{{#each this.items}}
<div class="col-6 col-md-3 col-lg-2 mb-3">
<img src="{{resolveAsset @root.assetsBaseUrl this.image}}" alt="{{this.alt}}" class="img-fluid">
</div>
{{/each}}
</div>
</div>
{{/each}}
{{#if sections.sponsors.buttonText}}
<div class="text-center mt-5">
<a
href="{{sections.sponsors.buttonUrl}}"
class="btn btn-common"
>
{{sections.sponsors.buttonText}}
</a>
</div>
{{/if}}
</div>
</div>
</section>
{{/if_show}}
{{#if_show sections.contact.show}}
<section id="contact-map" class="section-padding" data-site-component="contact">
<div class="container">
<div class="section-title-header text-center">
<h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
{{sections.contact.heading}}
</h2>
{{#if sections.contact.subtitle}}
<p class="wow fadeInDown" data-wow-delay="0.2s">
{{sections.contact.subtitle}}
</p>
{{/if}}
</div>
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-7">
<form role="form" method="post" id="contactForm" name="contact-form" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input
type="text"
class="form-control"
name="name"
placeholder="Name"
required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input
type="email"
class="form-control"
name="email"
placeholder="Email"
required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input
type="text"
class="form-control"
name="subject"
placeholder="Subject">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea
class="form-control"
rows="6"
name="message"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group contact-captcha-group">
<label
class="contact-captcha-label"
for="contactCaptcha">
Security check
</label>
<div class="contact-captcha-row">
<span
class="contact-captcha-question"
data-contact-captcha-question
aria-live="polite">
Loading...
</span>
<input
type="text"
class="form-control contact-captcha-input"
id="contactCaptcha"
data-contact-captcha-answer
inputmode="numeric"
autocomplete="off"
placeholder="Answer"
required>
<button
type="button"
class="btn btn-common contact-captcha-reload"
data-contact-captcha-reload
aria-label="Reload captcha">
↻
</button>
</div>
</div>
</div>
<div class="eb-contact-honeypot" aria-hidden="true">
<input
type="text"
name="_gotcha"
tabindex="-1"
autocomplete="off">
</div>
<div class="col-md-12">
<div class="form-submit">
<button
type="submit"
class="btn btn-common"
id="form-submit">
Send Message
</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
</div>
</div>
</div>
</form>
</div>
</div>
{{#if sections.contact.phones}}
<div class="row justify-content-center mt-5">
<div class="col-lg-8 text-center">
<ul class="list-unstyled">
{{#each sections.contact.phones}}
<li class="mb-2">
<strong>{{label}}:</strong>
<a href="tel:{{tel}}">{{number}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{/if}}
{{#if sections.contact.address}}
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<p>{{sections.contact.address}}</p>
</div>
</div>
{{/if}}
</div>
</section>
{{/if_show}}
{{#if_show sections.map}}
<section id="google-map-area" data-site-component="map">
<div class="container-fluid">
<iframe title="Event location map" style="border:0; height: {{sections.map.height}}px; width: 100%;" src="{{sections.map.embedUrl}}" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
{{/if_show}}
{{#if_show sections.footer}}
<footer>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="footer-otherinfo row align-items-start">
<div class="col-lg-4 footer-col-brand">
{{#if sections.logo.footer.url}}
<div class="footer-logo mb-3">
<img src="{{resolveAsset assetsBaseUrl sections.logo.footer.url}}" width="220" class="img-fluid" alt="{{sections.logo.footer.alt}}">
</div>
{{/if}}
{{#if sections.footer.tagline}}<p class="footer-tagline">{{sections.footer.tagline}}</p>{{/if}}
</div>
<div class="col-lg-4 footer-col-links">
<h6 class="footer-section-heading mb-4">{{sections.footer.linksHeading}}</h6>
<ul class="footer-link-list list-unstyled">
{{#each sections.footer.links}}
<li><a href="{{this.url}}" data-footer-link{{#if (eq this.target "_blank")}} target="_blank" rel="noopener noreferrer"{{/if}}>{{this.text}}</a></li>
{{/each}}
</ul>
</div>
<div class="col-lg-4 footer-col-social">
<h6 class="footer-section-heading mb-4">{{sections.footer.social.heading}}</h6>
<ul class="footer-social-list list-unstyled d-flex gap-3">
{{#each sections.footer.social.links}}
<li><a href="{{this.url}}" aria-label="{{this.label}}"><i class="{{this.icon}}"></i></a></li>
{{/each}}
</ul>
</div>
</div>
<div class="site-info">
<p>Powered by <a href="https://eventbuzz.live" rel="nofollow" target="_blank">EventBuzz.live</a></p>
</div>
</div>
</div>
</div>
</footer>
{{/if_show}}
<a href="#" class="back-to-top"><i class="lni-chevron-up"></i></a>
<div id="preloader">
<div class="sk-circle">
<div class="sk-circle1 sk-child"></div><div class="sk-circle2 sk-child"></div><div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div><div class="sk-circle5 sk-child"></div><div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div><div class="sk-circle8 sk-child"></div><div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div><div class="sk-circle11 sk-child"></div><div class="sk-circle12 sk-child"></div>
</div>
</div>
<script src="{{assetUrl assetsBaseUrl 'js/jquery-min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/popper.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/bootstrap.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/jquery.countdown.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/waypoints.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/jquery.counterup.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/jquery.nav.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/jquery.easing.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/wow.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/nivo-lightbox.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/video.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/registration-modal.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/feedback-fab.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/contact-form.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/marketing-popup.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/main.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/form-validator.min.js'}}"></script>
<script src="{{assetUrl assetsBaseUrl 'js/eventup-ssr-bridge.js'}}"></script>
<script>const video = document.getElementById("heroVideo");
const playBtn = document.getElementById("playPauseBtn");
const muteBtn = document.getElementById("muteBtn");
playBtn.onclick = function(){
if(video.paused){
video.play();
playBtn.innerHTML='<i class="lni-pause"></i>';
}else{
video.pause();
playBtn.innerHTML='<i class="lni-play"></i>';
}
}
muteBtn.onclick = function(){
video.muted=!video.muted;
if(video.muted){
muteBtn.innerHTML='<i class="lni-volume-mute"></i>';
}else{
muteBtn.innerHTML='<i class="lni-volume"></i>';
}
}</script>
</body>
</html>