417 lines
13 KiB
Plaintext
417 lines
13 KiB
Plaintext
@page "/"
|
|
@using System.Net.Http.Headers
|
|
@using System.Text.Json
|
|
@using Newtonsoft.Json
|
|
@inject NavigationManager NavManager
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html dir="ltr" lang="en-US">
|
|
<head>
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="IE=edge">
|
|
<meta name="author" content="SemiColonWeb">
|
|
<meta name="description" content="Create New & Used Car Sale Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
|
|
<!-- Document Title
|
|
============================================= -->
|
|
<title>Dealers - Car | Canvas</title>
|
|
|
|
<style>
|
|
|
|
.dropdown-toggle::after {
|
|
margin-left: 0.255em;
|
|
}
|
|
|
|
.dark .irs-bar {
|
|
background-color: #CCC
|
|
}
|
|
|
|
.dark .irs-grid-text {
|
|
color: #EEE
|
|
}
|
|
|
|
.slide-caption {
|
|
position: absolute;
|
|
opacity: 0;
|
|
max-width: none !important;
|
|
-webkit-transition: opacity .4s .4s, transform .4s .4s ease-in-out;
|
|
-o-transition: opacity .4s .4s, transform .4s .4s ease-in-out;
|
|
transition: opacity .4s .4s, transform .4s .4s ease-in-out;
|
|
-webkit-transform: translateY(50px);
|
|
-ms-transform: translateY(50px);
|
|
-o-transform: translateY(50px);
|
|
transform: translateY(50px);
|
|
}
|
|
|
|
.flex-viewport {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.slide-caption.slider-caption-bottom {
|
|
padding: 20px;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
height: auto !important;
|
|
left: 0;
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
.slide-caption.slider-caption-bottom p {
|
|
margin-bottom: 0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.slide.flex-active-slide .slide-caption {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
-o-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.slide .slide-caption.card {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
top: 20px;
|
|
font-size: 18px;
|
|
-webkit-transform: translateY(0);
|
|
-ms-transform: translateY(0);
|
|
-o-transform: translateY(0);
|
|
transform: translateY(0);
|
|
-webkit-transition: opacity .4s .6s;
|
|
-o-transition: opacity .4s .6s;
|
|
transition: opacity .4s .6s;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body class="stretched side-push-panel" data-loader-html="<div><img src='demos/car/images/page-loader.gif' alt='Loader'></div>">
|
|
|
|
<!-- Side Panel Overlay -->
|
|
<div class="body-overlay"></div>
|
|
|
|
<!-- Side Panel -->
|
|
<div id="side-panel">
|
|
|
|
<div id="side-panel-trigger-close" class="side-panel-trigger"><a href="#"><i class="bi-x-lg"></i></a></div>
|
|
|
|
<div class="side-panel-wrap">
|
|
|
|
<div class="widget">
|
|
|
|
<a href="index.html"><img src="demos/car/images/logo@2x.png" alt="Canvas Logo" height="50"></a>
|
|
|
|
<p>It has always been, and will always be, about quality. We're passionate about ethically sourcing the finest coffee beans, roasting them with great care. We'd like to hear your message!</p>
|
|
|
|
<div class="widget quick-contact-widget form-widget border-0 pt-0">
|
|
|
|
<h4>Quick Contact</h4>
|
|
<div class="form-result"></div>
|
|
<form id="quick-contact-form" name="quick-contact-form" action="include/form.php" method="post" class="quick-contact-form mb-0">
|
|
<div class="form-process">
|
|
<div class="css3-spinner">
|
|
<div class="css3-spinner-scaler"></div>
|
|
</div>
|
|
</div>
|
|
<input type="text" class="required form-control mb-2" id="quick-contact-form-name" name="quick-contact-form-name" value="" placeholder="Full Name">
|
|
<input type="text" class="required form-control email mb-2" id="quick-contact-form-email" name="quick-contact-form-email" value="" placeholder="Email Address">
|
|
<textarea class="required form-control mb-2 short-textarea" id="quick-contact-form-message" name="quick-contact-form-message" rows="4" cols="30" placeholder="Message"></textarea>
|
|
<input type="text" class="d-none" id="quick-contact-form-botcheck" name="quick-contact-form-botcheck" value="">
|
|
<input type="hidden" name="prefix" value="quick-contact-form-">
|
|
<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="button button-small button-3d m-0" value="submit">Send Email</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Document Wrapper
|
|
============================================= -->
|
|
<div id="wrapper">
|
|
|
|
<!-- Slider
|
|
============================================= -->
|
|
<div id="slider" class="slider-element h-auto">
|
|
<div class="slider-inner">
|
|
<div class="row align-items-stretch flex-md-row-reverse mx-0">
|
|
<div class="col-md-8 col-sm-12 px-0 min-vh-40">
|
|
<TelerikMap @ref="MapRef" Zoom="@Zoom" Height="@MapHeight" Center="@Center" OnMarkerClick="@OnMarkerClick">
|
|
<MapLayers>
|
|
<MapLayer Type="@MapLayersType.Tile"
|
|
Attribution="@Attribution"
|
|
Subdomains="@Subdomains"
|
|
UrlTemplate="@UrlTemplate">
|
|
</MapLayer>
|
|
<MapLayer Type="@MapLayersType.Marker"
|
|
Data="@MapMarkers"
|
|
LocationField="@nameof(MarkerModel.LatLng)"
|
|
TitleField="@nameof(MarkerModel.Title)">
|
|
</MapLayer>
|
|
</MapLayers>
|
|
</TelerikMap>
|
|
</div>
|
|
|
|
<div class="col-md-4 col-sm-12 px-0">
|
|
<div class="card bg-color rounded-0 shadow-sm p-4 h-100" style="background-color: #6aa84f">
|
|
<div class="card-body">
|
|
<h3 class="text-white">Find Your Shop:</h3>
|
|
<form action="#" class="mb-0">
|
|
<div class="row">
|
|
<div class="col-12 mt-3">
|
|
<label class="text-white" for="template-contactform-date">Shop Name</label>
|
|
<input @bind="@ShopName" name ="template-contactform-date" class="form-control text-start">
|
|
<label class="mt-3 text-white" for="template-contactform-date">City, State, ZIP</label>
|
|
<input @bind=CSZ type="text" class="form-control text-start" name="template-contactform-end">
|
|
</div>
|
|
|
|
<div class="col-12 mt-3 dark input-daterange travel-date-group">
|
|
<label class="text-white">Price Range</label>
|
|
<input class="price-range">
|
|
</div>
|
|
<div class="col-12 mt-4">
|
|
<button @onclick="SubmitLocation" class="button button-3d button-rounded button-white button-light button-large w-100 m-0">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div> <!-- Shop info pane-->
|
|
|
|
<div style="width: 1500px">
|
|
<TelerikWindow Modal="true"
|
|
@bind-Visible="@isVisible"
|
|
CloseOnOverlayClick="true"
|
|
Width="600px"
|
|
Height="300px">
|
|
<WindowTitle>
|
|
@CurrentSelection
|
|
</WindowTitle>
|
|
<WindowContent>
|
|
@CurrentBlurb
|
|
<br /><br /><br />
|
|
<TelerikButton OnClick="@VisitClickHandler" Class="visit-button">
|
|
Visit Page
|
|
<style>
|
|
.visit-button {
|
|
position: absolute;
|
|
top: 75%;
|
|
left: 50%;
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</TelerikButton>
|
|
|
|
@code{
|
|
public void VisitClickHandler()
|
|
{
|
|
Console.WriteLine("Visiting page" + CurrentSelection);
|
|
string destination = "/info/" + CurrentSelection;
|
|
NavManager.NavigateTo(destination);
|
|
|
|
}
|
|
}
|
|
</WindowContent>
|
|
<WindowActions>
|
|
<WindowAction Name="Close" />
|
|
</WindowActions>
|
|
</TelerikWindow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content
|
|
============================================= -->
|
|
<section id="content">
|
|
|
|
<div class="content-wrap py-0">
|
|
|
|
<div class="section m-0">
|
|
<div class="container">
|
|
<div class="row py-5">
|
|
<div class="col-md-4 mb-md-3 mb-5">
|
|
<div class="feature-box fbox-plain">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-car-battery"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Long Battery Life</h3>
|
|
<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-md-3 mb-5">
|
|
<div class="feature-box fbox-plain">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-car-cogs2"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>24x7 Service</h3>
|
|
<p>Complete control on each & every element that provides endless customization.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-md-3 mb-5">
|
|
<div class="feature-box fbox-plain">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-car-pump"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Petrol, Diesel & LPG</h3>
|
|
<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mt-0 mt-md-5">
|
|
<div class="feature-box fbox-plain">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-car-meter"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Powerful Dashboard</h3>
|
|
<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mt-5">
|
|
<div class="feature-box fbox-plain">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-car-paint"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Differnt Color Options</h3>
|
|
<p>Complete control on each & every element that provides endless customization.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mt-5">
|
|
<div class="feature-box fbox-plain">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-car-wheel"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>All wheel Drive</h3>
|
|
<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr style="width:85%; margin:auto; border-color:#1b380d; color:#1b380d; height:3px" />
|
|
<br />
|
|
|
|
|
|
<div class="section m-0">
|
|
<div class="container">
|
|
<div class="heading-block mb-4 text-center">
|
|
<h2>Popular Cars</h2>
|
|
</div>
|
|
|
|
<!-- Portfolio Items
|
|
============================================= -->
|
|
<div id="portfolio" class="portfolio row gutter-20 col-mb-30">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- #content end -->
|
|
<!-- Footer
|
|
============================================= -->
|
|
<footer id="footer" class="dark border-0" style="background-color: #080808;">
|
|
<div class="container-fluid px-5">
|
|
<!-- Footer Widgets
|
|
============================================= -->
|
|
<div class="footer-widgets-wrap">
|
|
|
|
<div class="row col-mb-50 justify-content-between">
|
|
<div class="col-lg-7">
|
|
|
|
<div class="row col-mb-30">
|
|
<div class="col-6 col-lg-3">
|
|
<div class="widget widget_links widget-li-noicon">
|
|
<h4>Hire</h4>
|
|
<ul>
|
|
<li><a href="#">Documentation</a></li>
|
|
<li><a href="#">Feedback</a></li>
|
|
<li><a href="#">Plugins</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="widget widget_links widget-li-noicon">
|
|
<h4>Community</h4>
|
|
<ul>
|
|
<li><a href="#">Documentation</a></li>
|
|
<li><a href="#">Feedback</a></li>
|
|
<li><a href="#">Plugins</a></li>
|
|
<li><a href="#">Support Forums</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="widget widget_links widget-li-noicon">
|
|
<h4>Learn</h4>
|
|
<ul>
|
|
<li><a href="#">Documentation</a></li>
|
|
<li><a href="#">Feedback</a></li>
|
|
<li><a href="#">Plugins</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-lg-3">
|
|
<div class="widget widget_links widget-li-noicon">
|
|
<h4>About</h4>
|
|
<ul>
|
|
<li><a href="#">Documentation</a></li>
|
|
<li><a href="#">Feedback</a></li>
|
|
<li><a href="#">Plugins</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-5 text-center text-lg-end">
|
|
<img src="demos/car/images/logo-footer.png" alt="Image" height="50">
|
|
<br>
|
|
<div style="color: #444">
|
|
<span>© Canvas Automotive. All Rights Reserved.</span>
|
|
<div class="clear"></div>
|
|
<p style="margin-top: 10px;">Objectively restore standards compliant opportunities whereas one-to-one collaboration and idea-sharing.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- .footer-widgets-wrap end -->
|
|
</div>
|
|
</footer><!-- #footer end -->
|
|
|
|
</div><!-- #wrapper end -->
|
|
<!-- Go To Top
|
|
============================================= -->
|
|
<div id="gotoTop" class="uil uil-angle-up"></div>
|
|
|
|
<!-- Contact Button
|
|
============================================= -->
|
|
<div id="contact-me" class="bi-envelope side-panel-trigger bg-color"></div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |