527 lines
17 KiB
Plaintext
527 lines
17 KiB
Plaintext
@page "/"
|
|
@using System.Net.Http.Headers
|
|
@using System.Text.Json
|
|
@using Newtonsoft.Json
|
|
|
|
<!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>
|
|
|
|
@code {
|
|
TelerikMap? MapRef { get; set; }
|
|
public double Zoom { get; set; } = 1;
|
|
public static double[] Center = [40.68, 74.04];
|
|
public string MapHeight { get; set; } = "800px";
|
|
|
|
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
|
|
public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
|
|
public string Attribution { get; set; } = "© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
HttpClient client = new();
|
|
var ip = await client.GetStringAsync("https://api.ipify.org"); // Free API to get public IP of user
|
|
|
|
var response = await client.GetStringAsync(String.Format("https://ipapi.co/{0}/json/", ip));
|
|
Console.WriteLine(response);
|
|
LocationDetails? json = JsonConvert.DeserializeObject<LocationDetails>(response);
|
|
if (json != null)
|
|
{
|
|
Center = [json.latitude, json.longitude];
|
|
Zoom = 13;
|
|
}
|
|
|
|
InitializeMapMarkers(Center);
|
|
if (MapRef != null)
|
|
MapRef.Refresh();
|
|
}
|
|
|
|
public async void OnMarkerClick(MapMarkerClickEventArgs args)
|
|
{
|
|
|
|
var dataItem = args.DataItem as MarkerModel;
|
|
CurrentSelection = dataItem.Title;
|
|
CurrentBlurb = dataItem.Blurb;
|
|
await ToggleModal();
|
|
Console.WriteLine(dataItem.Title);
|
|
}
|
|
|
|
public List<MarkerModel> MapMarkers { get; set; } = new List<MarkerModel>()
|
|
{
|
|
new MarkerModel()
|
|
{
|
|
Title = ""
|
|
}
|
|
};
|
|
|
|
private void InitializeMapMarkers(double[] coords)
|
|
{
|
|
// Server call to load map markers into a list of tuples
|
|
List<(double[], string)> localMarkers = MapDriver.InitializeMarkers(coords);
|
|
foreach (var current in localMarkers)
|
|
{
|
|
MapMarkers.Add(new MarkerModel() {
|
|
LatLng = current.Item1,
|
|
Title = current.Item2,
|
|
Blurb = string.Format("This is {0}'s blurb. This will be replaced when a lookup is created.", current.Item2)
|
|
});
|
|
}
|
|
}
|
|
|
|
public class MarkerModel
|
|
{
|
|
public double[] LatLng { get; set; } = [42.4649, -83.3684];
|
|
public string Title { get; set; } = "";
|
|
public string Blurb { get; set; } = "";
|
|
}
|
|
|
|
private class LocationDetails
|
|
{
|
|
public string ip { get; set; } = "";
|
|
public string network { get; set; } = "";
|
|
public string version { get; set; } = "";
|
|
public string city { get; set; } = "";
|
|
public string region { get; set; } = "";
|
|
public string region_code { get; set; } = "";
|
|
public string country { get; set; } = "";
|
|
public string country_code { get; set; } = "";
|
|
public string country_code_iso3 { get; set; } = "";
|
|
public string country_capital { get; set; } = "";
|
|
public string country_tld { get; set; } = "";
|
|
public string continent_code { get; set; } = "";
|
|
public bool in_eu { get; set; } = false;
|
|
public string postal { get; set; } = "";
|
|
public double latitude { get; set; } = -1;
|
|
public double longitude { get; set; } = -1;
|
|
public string timezone { get; set; } = "";
|
|
public string utc_offset { get; set; } = "";
|
|
public string country_calling_code { get; set; } = "";
|
|
public string currency { get; set; } = "";
|
|
public string currency_name { get; set; } = "";
|
|
public string languages { get; set; } = "";
|
|
public string country_area { get; set; } = "";
|
|
public string country_population { get; set; } = "";
|
|
public string asn { get; set; } = "";
|
|
public string org { get; set; } = "";
|
|
}
|
|
}
|
|
</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="#" method="post" class="mb-0">
|
|
<div class="row">
|
|
<div class="col-12 mt-3">
|
|
<label class="text-white" for="template-contactform-date">Shop Name</label>
|
|
<input type="text" name="template-contactform-date" value="" class="form-control text-start">
|
|
<label class="mt-3 text-white" for="template-contactform-date">City, State, ZIP</label>
|
|
<input 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 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>
|
|
</WindowContent>
|
|
<WindowActions>
|
|
<WindowAction Name="Close" />
|
|
</WindowActions>
|
|
</TelerikWindow>
|
|
</div>
|
|
|
|
<div> <!-- Shop info drawer C# -->
|
|
@code{
|
|
public TelerikPopover? Popover { get; set; }
|
|
public string CurrentSelection { get; set; } = "123412341234onetwothreefour";
|
|
public string CurrentBlurb { get; set; } = "This is a blurb for a shop. I believe it is rather dastardly.";
|
|
public bool isVisible = false;
|
|
|
|
public async Task ToggleModal()
|
|
{
|
|
if (isVisible)
|
|
isVisible = false;
|
|
else
|
|
isVisible = true;
|
|
await Task.Delay(1);
|
|
}
|
|
|
|
public void VisitClickHandler() {
|
|
Console.WriteLine("Visiting page" + CurrentSelection);
|
|
}
|
|
}
|
|
</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> |