500 lines
17 KiB
Plaintext
500 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;
|
|
UpdateDrawer();
|
|
await ToggleDrawer();
|
|
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
|
|
});
|
|
}
|
|
}
|
|
|
|
public class MarkerModel
|
|
{
|
|
public double[] LatLng { get; set; } = [42.4649, -83.3684];
|
|
public string Title { 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">
|
|
<TelerikDrawer @ref="@Drawer" Data="Data" MiniMode="false" Mode="@Mode" Position="@Position" Width="600px">
|
|
<DrawerContent>
|
|
</DrawerContent>
|
|
</TelerikDrawer>
|
|
</div>
|
|
|
|
<div> <!-- Shop info drawer C# -->
|
|
@code{
|
|
public TelerikDrawer<DrawerItem>? Drawer { get; set; }
|
|
public DrawerMode Mode { get; set; }
|
|
public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>();
|
|
public DrawerPosition Position = DrawerPosition.End;
|
|
public class DrawerItem {
|
|
public string? Text { get; set; }
|
|
public ISvgIcon? Icon { get; set; }
|
|
public bool Separator { get; set; }
|
|
}
|
|
|
|
public void UpdateDrawer()
|
|
{
|
|
Data = new List<DrawerItem>
|
|
{
|
|
new DrawerItem { Text = "HelloWorld"},
|
|
new DrawerItem { Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."},
|
|
};
|
|
}
|
|
public async Task ToggleDrawer() => await Drawer.ToggleAsync();
|
|
}
|
|
</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> |