2024-05-09 17:54:34 +00:00
@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)
{
2024-05-13 17:59:51 +00:00
2024-05-09 17:54:34 +00:00
var dataItem = args.DataItem as MarkerModel;
2024-05-13 17:59:51 +00:00
CurrentSelection = dataItem.Title;
CurrentBlurb = dataItem.Blurb;
await ToggleModal();
2024-05-09 17:54:34 +00:00
Console.WriteLine(dataItem.Title);
}
public List<MarkerModel> MapMarkers { get; set; } = new List<MarkerModel>()
{
new MarkerModel()
{
Title = ""
}
};
private void InitializeMapMarkers(double[] coords)
{
2024-05-13 17:59:51 +00:00
// Server call to load map markers into a list of tuples
2024-05-09 17:54:34 +00:00
List<(double[], string)> localMarkers = MapDriver.InitializeMarkers(coords);
foreach (var current in localMarkers)
{
2024-05-13 17:59:51 +00:00
MapMarkers.Add(new MarkerModel() {
2024-05-09 17:54:34 +00:00
LatLng = current.Item1,
2024-05-13 17:59:51 +00:00
Title = current.Item2,
Blurb = string.Format("This is {0}'s blurb. This will be replaced when a lookup is created.", current.Item2)
});
2024-05-09 17:54:34 +00:00
}
}
public class MarkerModel
{
public double[] LatLng { get; set; } = [42.4649, -83.3684];
public string Title { get; set; } = "";
2024-05-13 17:59:51 +00:00
public string Blurb { get; set; } = "";
2024-05-09 17:54:34 +00:00
}
2024-05-13 17:59:51 +00:00
2024-05-09 17:54:34 +00:00
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">
2024-05-13 17:59:51 +00:00
<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>
2024-05-09 17:54:34 +00:00
</div>
<div> <!-- Shop info drawer C# -->
@code{
2024-05-13 17:59:51 +00:00
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;
2024-05-09 17:54:34 +00:00
2024-05-13 17:59:51 +00:00
public async Task ToggleModal()
2024-05-09 17:54:34 +00:00
{
2024-05-13 17:59:51 +00:00
if (isVisible)
isVisible = false;
else
isVisible = true;
await Task.Delay(1);
}
public void VisitClickHandler() {
Console.WriteLine("Visiting page" + CurrentSelection);
2024-05-09 17:54:34 +00:00
}
}
</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>
