2024-07-31 11:25:16 +00:00
@page "/"
@using System.Net.Http.Headers
@using System.Text.Json
@using Newtonsoft.Json
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons
@inject NavigationManager NavManager
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<link href="https://blazor.cdn.telerik.com/blazor/6.0.2/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />
<script src="https://blazor.cdn.telerik.com/blazor/6.0.2/telerik-blazor.min.js" defer></script>
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<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
============================================= -->
2024-08-13 16:42:32 +00:00
<title>The Shop Critics</title>
2024-07-31 11:25:16 +00:00
<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">
2024-08-08 17:17:41 +00:00
<TelerikMap @ref="@MapRef" Zoom="@Zoom" Height="@MapHeight" Center="@Center" OnMarkerClick="@OnMarkerClick">
2024-07-31 11:25:16 +00:00
<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 {
2024-08-21 17:39:10 +00:00
public void VisitClickHandler()
{
string destination = "/info/" + CurrentSelection + "&" + CurrentUniqueID;
NavManager.NavigateTo(destination);
2024-07-31 11:25:16 +00:00
2024-08-21 17:39:10 +00:00
}
2024-07-31 11:25:16 +00:00
}
</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>
