Migration to pure server architecture and extinguishing of the million fires that Blazor lit as a result

This commit is contained in:
Josh Deck 2024-07-31 07:25:16 -04:00
parent 48f6a54c6c
commit 4f2a725d12
1131 changed files with 209361 additions and 198 deletions

View File

@ -12,7 +12,7 @@
============================================= -->
<div id="logo" class="me-lg-0 ms-lg-auto">
<a href="demo-car.html">
<img class="logo-default" srcset="demos/car/images/logo.png, demos/car/images/logo@2x.png 2x" src="demos/car/images/logo@2x.png" alt="Canvas Logo">
<img class="logo-default" srcset="img/logo.jpg, img/logo.jpg@2x.png 2x" src="img/logo.jpg@2x.png" alt="TheShopCritics Logo">
</a>
</div><!-- #logo end -->
@ -26,9 +26,9 @@
============================================= -->
<nav class="primary-menu with-arrows">
<ul class="menu-container">
<li class="menu-item current"><a class="menu-link" href="demo-car.html"><div>Home</div></a></li>
<li class="menu-item current"><a class="menu-link" href=""><div>Home</div></a></li>
<!-- Mega Menu -->
<li class="menu-item"><a class="menu-link" href="demo-car-listing.html"><div>Browse By State</div></a></li>
<li class="menu-item"><a class="menu-link" href="/info"><div>Browse By State</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-dealers.html"><div>Dealers</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-accessories.html"><div>Accessories</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-interiors.html"><div>Interiors</div></a></li>

View File

@ -2,6 +2,8 @@
@using System.Net.Http.Headers
@using System.Text.Json
@using Newtonsoft.Json
@inject NavigationManager NavManager
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
@ -156,118 +158,19 @@
</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; } = "&copy; <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">
<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 type="text" name="template-contactform-date" value="" class="form-control text-start">
<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 type="text" class="form-control text-start" name="template-contactform-end">
<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">
@ -275,7 +178,7 @@
<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>
<button @onclick="SubmitLocation" class="button button-3d button-rounded button-white button-light button-large w-100 m-0">Submit</button>
</div>
</div>
</form>
@ -308,35 +211,22 @@
}
</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> <!-- 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>
</div>

View File

@ -0,0 +1,182 @@
using Microsoft.AspNetCore.Components;
using Newtonsoft.Json;
using Telerik.Blazor.Components;
using TSC2.Server;
namespace TSC2.Client.Pages
{
public partial class Home : ComponentBase
{
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 ShopName { get; set; } = "";
public string CSZ { get; set; } = "";
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; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
private bool initialized = false;
// User info
string ip = "";
LocationDetails? userLoc;
protected override async Task OnInitializedAsync() // Executes every page load; run inexpensive rendering code here
{
if (userLoc != null)
{
Center = [userLoc.latitude, userLoc.longitude];
Zoom = 13;
}
InitializeMapMarkers(Center);
MapRef?.Refresh();
}
protected override async Task OnAfterRenderAsync(bool firstRender) // Executes the first time the component is rendered; expensive/run-once code is run here
{ // to ensure that API and service calls are not done multiple times.
if (!firstRender)
return;
HttpClient client = new();
var ip = await client.GetStringAsync("https://api.ipify.org"); // TODO: replace with internal IP lookup and add additional services as needed
var response = await client.GetStringAsync(String.Format("https://ipapi.co/{0}/json/", ip));
Console.WriteLine(DateTime.Now.ToString() + " | " + response);
userLoc = JsonConvert.DeserializeObject<LocationDetails>(response);
if (userLoc != null)
{
Center = [userLoc.latitude, userLoc.longitude];
Zoom = 13;
}
InitializeMapMarkers(Center);
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 void SubmitLocation()
{
string str = String.Format(("Shop Name: {0} \n CSZ: {1}"), ShopName, CSZ);
Console.WriteLine(str);
// Search based on the input provided in the ShopName and CSZ fields
// TODO
// Call Geocoding API to get coordinates for making the map jump
// TODO
var jsonString = "{\"latitude\": \"42.295920\",\"longitude\":\"-83.444780\"}";
LocationDetails? json = JsonConvert.DeserializeObject<LocationDetails>(jsonString);
// Move the map
if (json != null)
{
Center = [json.latitude, json.longitude];
Zoom = 13;
}
InitializeMapMarkers(Center);
if (MapRef != null)
MapRef.Refresh();
}
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; } = "";
}
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);
}
}
}

View File

@ -0,0 +1,479 @@
@page "/info/{Shop}"
<!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 &amp; Used Car Sale Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mukta+Vaani:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="demos/car/css/car-icons/style.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/car/car.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>@Shop - The Shop Critics</title>
<style>
</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">
<!-- Page Title
============================================= -->
<section class="page-title page-title-parallax parallax scroll-detect dark" style="padding: 140px 0;">
<img src="demos/car/images/accessories/page-title.jpg" class="parallax-bg">
<div class="container">
<div class="page-title-row">
<div class="page-title-content">
<h1>@Shop -- Questions &amp; Answers</h1>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Cars</a></li>
<li class="breadcrumb-item active" aria-current="page">FAQs</li>
</ol>
</nav>
</div>
</div>
</section><!-- .page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="heading-block">
<h2>Some of your Questions:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum tempore autem distinctio qui iure aspernatur doloribus porro blanditiis perspiciatis alias.</p>
</div>
<h4 class="mb-3">Marketplace <small>(4)</small></h4>
<div class="accordion mb-5 accordion-border">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I become an author?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Helpful Resources for Authors
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How much money can I make?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I pay for items on the Marketplaces?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
</div>
<h4 class="mb-3">Authors <small>(5)</small></h4>
<div class="accordion mb-5 accordion-border" data-state="closed">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Can I offer my items for free on a promotional basis?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I become an author?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
An Introduction to the Marketplaces for Authors
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I pay for items on the Marketplaces?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Helpful Resources for Authors
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
</div>
<h4 class="mb-3">Item Discussion <small>(3)</small></h4>
<div class="accordion mb-5 accordion-border" data-state="closed">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
What Images, Videos, Code Can I Use in my Items?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Can I use trademarked names in my items?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How can I get support for an item?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
</div>
<h4 class="mb-3">Affiliates <small>(2)</small></h4>
<div class="accordion mb-5 accordion-border" data-state="closed">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How does the Tuts+ Premium affiliate program work?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Tips for Increasing Your Referral Income
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-md-6 col-lg-12">
<div class="card bg-dark dark mb-5 pb-2 px-2">
<div class="card-body">
<h3 class="mb-3 text-uppercase ls-1">About Us</h3>
<h3 class="card-title mb-3">Special title treatment</h3>
<p class="card-text text-white-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab magni saepe, quam dolore, unde commodi fugit voluptatibus excepturi tenetur delectus iusto, aut porro qui earum magnam, doloribus nostrum laborum sed laudantium incidunt. Provident incidunt odio, labore magni, unde quam modi.</p>
<a href="demo-car-dealers.html" class="button button-3d button-rounded m-0">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-12">
<div class="card">
<img class="card-img-top" src="demos/car/images/call.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="mb-1 color">Call Toll Free:</h4>
<h2 class="card-title mb-2"><i class="bi-telephone position-relative me-1 color" style="top: 4px;"></i> 1800(2345)(6789)</h2>
<p class="card-text">We are 24/7 available. Our expert staff is standing by to answer your questions. You can also contact by email: <a class="btn-link" href="mailto:noreply@canvas.com">noreply@canvas.com</a></p>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 mt-4">
<h3 class="mb-3">Car Reviews</h3>
<div class="fslider testimonial p-0" data-animation="slide" data-arrows="false">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide">
<div class="row">
<div class="col-auto pt-2">
<img class="rounded-circle" src="images/testimonials/1.jpg" width="64" height="64" alt="Customer Testimonails">
</div>
<div class="col">
<p class="mb-3 font-secondary">Seamlessly conceptualize multimedia based web services for optimal human capital. Collaboratively evisculate e-business value.</p>
<h4 class="h6 mb-0 fw-medium">Siri Alexa</h4>
<small class="text-muted">Apple Inc.</small>
</div>
</div>
</div>
<div class="slide">
<div class="row">
<div class="col-auto pt-2">
<img class="rounded-circle" src="images/testimonials/2.jpg" width="64" height="64" alt="Customer Testimonails">
</div>
<div class="col">
<p class="mb-3 font-secondary">Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias.</p>
<h4 class="h6 mb-0 fw-medium">Collis Ta'eed</h4>
<small class="text-muted">Envato Inc.</small>
</div>
</div>
</div>
<div class="slide">
<div class="row">
<div class="col-auto pt-2">
<a href="#"><img class="rounded-circle" src="images/testimonials/1.jpg" alt="Customer Testimonails"></a>
</div>
<div class="col">
<p class="mb-3 font-secondary">Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
<h4 class="h6 mb-0 fw-medium">John Doe</h4>
<small class="text-muted">XYZ Inc.</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>&copy; 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>
<!-- JavaScripts
============================================= -->
<script src="js/plugins.min.js"></script>
<script src="js/functions.bundle.js"></script>
</body>
</html>
@code{
private void TestFunction() {
Console.WriteLine(Shop);
}
}

View File

@ -0,0 +1,16 @@

using Microsoft.AspNetCore.Components;
namespace TSC2.Client.Pages
{
public partial class Info : ComponentBase
{
[Parameter]
public string Shop { get; set; } = "DEFAULT_NAME";
public void DoAThing()
{
Console.WriteLine("This is a mimic of a sql query... DO NOT LOOK AT THIS PLEASE");
}
}
}

View File

@ -19,7 +19,7 @@
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\csharp\" />
<Folder Include="wwwroot\img\" />
</ItemGroup>
</Project>

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -1,28 +1,37 @@
namespace TSC2.Server
namespace TSC2.Server;
public class MapDriver
{
public class MapDriver
public static List<(double[], string)> InitializeMarkers(double[] inputCoords)
{
public static List<(double[], string)> InitializeMarkers(double[] inputCoords)
// Initialization
List<(double[], string)> results = [];
// Read list of addresses and names from DB and contact search API to get location
List<(double[] Coords, string Name)> db = new List<(double[], string)> ();
db.Add(([42.4649, -83.3684], "1"));
db.Add(([42.6649, -83.5684], "2"));
db.Add(([42.8649, -83.7684], "3"));
foreach (var entry in db)
{
// Initialization
List<(double[], string)> results = [];
(double[] Coords, string Name) info = ([], "");
// Read list of addresses and names from DB and contact search API to get location
List<(double[] Coords, string Name)> db = new List<(double[], string)> ();
db.Add(([42.4649, -83.3684], "1"));
db.Add(([42.6649, -83.5684], "2"));
db.Add(([42.8649, -83.7684], "3"));
foreach (var entry in db)
{
(double[] Coords, string Name) info = ([], "");
// Read address and contact POI
info.Coords = entry.Coords; // TODO: replace with API lookup for the current entry's address
info.Name = entry.Name; // TODO: replace with name found in DB
// Read address and contact POI
info.Coords = entry.Coords; // TODO: replace with API lookup for the current entry's address
info.Name = entry.Name; // TODO: replace with name found in DB
results.Add(info);
}
return results;
results.Add(info);
}
return results;
}
public static double[] GetCoordinates(string shopName, string CSZ)
{
// Use information provided to search for the place using an api
// Parse the result and return coords
return [];
}
}

View File

@ -5,13 +5,6 @@ VisualStudioVersion = 17.9.34723.18
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TSC2", "TSC2\TSC2.csproj", "{A2DB5769-F77B-4507-B21A-FE7B741E34DA}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TSC2.Client", "TSC2.Client\TSC2.Client.csproj", "{AE1B8C38-0370-4823-AC49-AC5B2C98EF46}"
ProjectSection(ProjectDependencies) = postProject
{9A0439E0-B95A-47E9-8668-7BB6125A347B} = {9A0439E0-B95A-47E9-8668-7BB6125A347B}
EndProjectSection
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TSC2.Server", "TSC2.Server\TSC2.Server.csproj", "{9A0439E0-B95A-47E9-8668-7BB6125A347B}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
@ -22,14 +15,6 @@ Global
{A2DB5769-F77B-4507-B21A-FE7B741E34DA}.Debug|Any CPU.Build.0 = Debug|Any CPU
{A2DB5769-F77B-4507-B21A-FE7B741E34DA}.Release|Any CPU.ActiveCfg = Release|Any CPU
{A2DB5769-F77B-4507-B21A-FE7B741E34DA}.Release|Any CPU.Build.0 = Release|Any CPU
{AE1B8C38-0370-4823-AC49-AC5B2C98EF46}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{AE1B8C38-0370-4823-AC49-AC5B2C98EF46}.Debug|Any CPU.Build.0 = Debug|Any CPU
{AE1B8C38-0370-4823-AC49-AC5B2C98EF46}.Release|Any CPU.ActiveCfg = Release|Any CPU
{AE1B8C38-0370-4823-AC49-AC5B2C98EF46}.Release|Any CPU.Build.0 = Release|Any CPU
{9A0439E0-B95A-47E9-8668-7BB6125A347B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{9A0439E0-B95A-47E9-8668-7BB6125A347B}.Debug|Any CPU.Build.0 = Debug|Any CPU
{9A0439E0-B95A-47E9-8668-7BB6125A347B}.Release|Any CPU.ActiveCfg = Release|Any CPU
{9A0439E0-B95A-47E9-8668-7BB6125A347B}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE

View File

@ -7,16 +7,22 @@
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="TSC2.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="@RenderMode.InteractiveAuto" />
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/5.1.1/kendo-theme-default/swatches/default-ocean-blue.css" />
<script src="https://blazor.cdn.telerik.com/blazor/5.1.1/telerik-blazor.min.js" defer></script>
<link href="lib/blazor-ui/swatches/default-main.css" rel="stylesheet" type="text/css" />
<link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/6.0.2/kendo-theme-default/swatches/default-ocean-blue.css" />
<script src="https://blazor.cdn.telerik.com/blazor/6.0.2/telerik-blazor.min.js" defer></script>
<HeadOutlet @rendermode="@RenderMode.InteractiveServer"/>
</head>
<body>
<Routes @rendermode="@RenderMode.InteractiveAuto" />
<Routes @rendermode="@RenderMode.InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
</body>

View File

@ -0,0 +1,37 @@
namespace TSC2.Components;
public class MapDriver
{
public static List<(double[], string)> InitializeMarkers(double[] inputCoords)
{
// Initialization
List<(double[], string)> results = [];
// Read list of addresses and names from DB and contact search API to get location
List<(double[] Coords, string Name)> db = new List<(double[], string)>();
db.Add(([42.4649, -83.3684], "1"));
db.Add(([42.6649, -83.5684], "2"));
db.Add(([42.8649, -83.7684], "3"));
foreach (var entry in db)
{
(double[] Coords, string Name) info = ([], "");
// Read address and contact POI
info.Coords = entry.Coords; // TODO: replace with API lookup for the current entry's address
info.Name = entry.Name; // TODO: replace with name found in DB
results.Add(info);
}
return results;
}
public static double[] GetCoordinates(string shopName, string CSZ)
{
// Use information provided to search for the place using an api
// Parse the result and return coords
return [];
}
}

View File

@ -0,0 +1,122 @@
@inherits LayoutComponentBase
<TelerikRootComponent>
<!-- Header
============================================= -->
<header id="header" class="full-header header-size-custom" data-sticky-shrink="false">
<div id="header-wrap">
<div class="container-fluid">
<div class="header-row flex-lg-row-reverse">
<!-- Logo
============================================= -->
<div id="logo" class="me-lg-0 ms-lg-auto">
<a href="demo-car.html">
<img class="logo-default" srcset="img/logo.jpg, img/logo.jpg@2x.png 2x" src="img/logo.jpg@2x.png" alt="TheShopCritics Logo">
</a>
</div><!-- #logo end -->
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu with-arrows">
<ul class="menu-container">
<li class="menu-item current"><a class="menu-link" href=""><div>Home</div></a></li>
<!-- Mega Menu -->
<li class="menu-item"><a class="menu-link" href="/info"><div>Browse By State</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-dealers.html"><div>Dealers</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-accessories.html"><div>Accessories</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-interiors.html"><div>Interiors</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-faqs.html"><div>FAQs</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-blog.html"><div>Blog</div></a></li>
<li class="menu-item"><a class="menu-link" href="demo-car-contact.html"><div>Contacts</div></a></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<main>
@Body
</main>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mukta+Vaani:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="demos/car/css/car-icons/style.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/components/bs-select.css"><!-- Bootstrap Select CSS -->
<link rel="stylesheet" href="css/components/bs-switches.css"><!-- Bootstrap Switch CSS -->
<link rel="stylesheet" href="css/components/datepicker.css"><!-- Datepicker Slider CSS -->
<link rel="stylesheet" href="css/components/ion.rangeslider.css"><!-- Range Slider CSS -->
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/car/car.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JavaScripts
============================================= -->
<script src="js/plugins.min.js"></script>
<script src="js/functions.bundle.js"></script>
<!-- Bootstrap Select Plugin -->
<script src="js/components/bs-select.js"></script>
<!-- Bootstrap Switch Plugin -->
<script src="js/components/bs-switches.js"></script>
<!-- Datepicker Slider Plugin -->
<script src="js/components/datepicker.js"></script>
<!-- Range Slider Plugin -->
<script src="js/components/rangeslider.min.js"></script>
<script>
jQuery(".bt-switch").bootstrapSwitch();
jQuery(function () {
jQuery('.travel-date-group').datepicker({
autoclose: true,
startView: 2,
minViewMode: 2,
todayHighlight: false,
defaultViewDate: { year: 2010, month: 01, day: 01 }
});
jQuery(".price-range").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 10000,
from: 1000,
prefix: "$"
});
});
</script>
</TelerikRootComponent>

View File

@ -0,0 +1,29 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">TSC2</a>
</div>
</div>
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="bi bi-plus-square-fill" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="weather">
<span class="bi bi-list-nested" aria-hidden="true"></span> Weather
</NavLink>
</div>
</nav>
</div>

View File

@ -0,0 +1,11 @@
@page "/map"
<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>
@code {
void SayHelloHandler()
{
Console.WriteLine("TRYING");
}
}

View File

@ -0,0 +1,18 @@
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}

View File

@ -0,0 +1,437 @@
@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 &amp; Used Car Sale Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">
<!-- Document Title
============================================= -->
<title>Dealers - Car | Canvas</title>
<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>
<br />
@helloString
@code {
MarkupString helloString;
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
}
<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="[40.68, 74.04]" 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 &amp; 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 &amp; 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 &amp; 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>&copy; 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>

View File

@ -0,0 +1,166 @@
using Microsoft.AspNetCore.Components;
using Newtonsoft.Json;
using Telerik.Blazor.Components;
using TSC2.Components;
namespace TSC2.Components.Pages
{
public partial class Home
{
TelerikMap MapRef { get; set; } = new TelerikMap();
public double Zoom { get; set; } = 1;
public static double[] Center = [40.68, 74.04];
public string MapHeight { get; set; } = "800px";
public string ShopName { get; set; } = "";
public string CSZ { get; set; } = "";
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; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
private bool initialized = false;
// User info
string ip = "";
protected override void OnInitialized() // Executes every page load; run inexpensive rendering code here
{
Console.WriteLine("MapRef null? : " + (MapRef == null ? "yes" : "no"));
InitializeMapMarkers(Center);
MapRef?.Refresh();
Console.WriteLine("Initial refresh");
Center = [40.68, 74.04];
Zoom = 11;
Console.WriteLine("Map initialized @ " + Center[0] + " " + Center[1]);
InitializeMapMarkers(Center);
MapRef?.Refresh();
Console.WriteLine("IsVisible: " + (MapRef == null ? "false" : "true"));
}
public void OnMarkerClick(MapMarkerClickEventArgs args)
{
var dataItem = args.DataItem as MarkerModel;
CurrentSelection = dataItem.Title;
CurrentBlurb = dataItem.Blurb;
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 void SubmitLocation()
{
string str = String.Format(("Shop Name: {0} \n CSZ: {1}"), ShopName, CSZ);
Console.WriteLine(str);
// Search based on the input provided in the ShopName and CSZ fields
// TODO
// Call Geocoding API to get coordinates for making the map jump
// TODO
var jsonString = "{\"latitude\": \"42.295920\",\"longitude\":\"-83.444780\"}";
LocationDetails? json = JsonConvert.DeserializeObject<LocationDetails>(jsonString);
// Move the map
if (json != null)
{
Center = [json.latitude, json.longitude];
Zoom = 13;
}
InitializeMapMarkers(Center);
if (MapRef != null)
MapRef.Refresh();
}
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; } = "";
}
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 void ToggleModal()
{
Console.WriteLine("TOGGLING");
//await Console.Out.WriteLineAsync("IWNAJNQADJK" + isVisible);
if (isVisible)
isVisible = false;
else
isVisible = true;
//await Task.Delay(1);
MapRef?.Refresh();
}
}
}

View File

@ -0,0 +1,479 @@
@page "/info/{Shop}"
<!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 &amp; Used Car Sale Websites with Canvas Template. Get Canvas to build powerful websites easily with the Highly Customizable &amp; Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mukta+Vaani:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="demos/car/css/car-icons/style.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/car/car.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>@Shop - The Shop Critics</title>
<style>
</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">
<!-- Page Title
============================================= -->
<section class="page-title page-title-parallax parallax scroll-detect dark" style="padding: 140px 0;">
<img src="demos/car/images/accessories/page-title.jpg" class="parallax-bg">
<div class="container">
<div class="page-title-row">
<div class="page-title-content">
<h1>@Shop -- Questions &amp; Answers</h1>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Cars</a></li>
<li class="breadcrumb-item active" aria-current="page">FAQs</li>
</ol>
</nav>
</div>
</div>
</section><!-- .page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="heading-block">
<h2>Some of your Questions:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum tempore autem distinctio qui iure aspernatur doloribus porro blanditiis perspiciatis alias.</p>
</div>
<h4 class="mb-3">Marketplace <small>(4)</small></h4>
<div class="accordion mb-5 accordion-border">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I become an author?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Helpful Resources for Authors
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How much money can I make?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I pay for items on the Marketplaces?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
</div>
<h4 class="mb-3">Authors <small>(5)</small></h4>
<div class="accordion mb-5 accordion-border" data-state="closed">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Can I offer my items for free on a promotional basis?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I become an author?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
An Introduction to the Marketplaces for Authors
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How do I pay for items on the Marketplaces?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Helpful Resources for Authors
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
</div>
<h4 class="mb-3">Item Discussion <small>(3)</small></h4>
<div class="accordion mb-5 accordion-border" data-state="closed">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
What Images, Videos, Code Can I Use in my Items?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Can I use trademarked names in my items?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How can I get support for an item?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, fugiat iste nisi tempore nesciunt nemo fuga? Nesciunt, delectus laboriosam nisi repudiandae nam fuga saepe animi recusandae. Asperiores, provident, esse, doloremque, adipisci eaque alias dolore molestias assumenda quasi saepe nisi ab illo ex nesciunt nobis laboriosam iusto quia nulla ad voluptatibus iste beatae voluptas corrupti facilis accusamus recusandae sequi debitis reprehenderit quibusdam. Facilis eligendi a exercitationem nisi et placeat excepturi velit!</div>
</div>
<h4 class="mb-3">Affiliates <small>(2)</small></h4>
<div class="accordion mb-5 accordion-border" data-state="closed">
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
How does the Tuts+ Premium affiliate program work?
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
<div class="accordion-header">
<div class="accordion-icon">
<i class="accordion-closed bi-check-circle-fill"></i>
<i class="accordion-open bi-x-circle-fill"></i>
</div>
<div class="accordion-title">
Tips for Increasing Your Referral Income
</div>
</div>
<div class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, placeat, architecto rem dolorem dignissimos repellat veritatis in et eos doloribus magnam aliquam ipsa alias assumenda officiis quasi sapiente suscipit veniam odio voluptatum. Enim at asperiores quod velit minima officia accusamus cumque eligendi consequuntur fuga? Maiores, quasi, voluptates, exercitationem fuga voluptatibus a repudiandae expedita omnis molestiae alias repellat perferendis dolores dolor.</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-md-6 col-lg-12">
<div class="card bg-dark dark mb-5 pb-2 px-2">
<div class="card-body">
<h3 class="mb-3 text-uppercase ls-1">About Us</h3>
<h3 class="card-title mb-3">Special title treatment</h3>
<p class="card-text text-white-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab magni saepe, quam dolore, unde commodi fugit voluptatibus excepturi tenetur delectus iusto, aut porro qui earum magnam, doloribus nostrum laborum sed laudantium incidunt. Provident incidunt odio, labore magni, unde quam modi.</p>
<a href="demo-car-dealers.html" class="button button-3d button-rounded m-0">Read More</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-12">
<div class="card">
<img class="card-img-top" src="demos/car/images/call.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="mb-1 color">Call Toll Free:</h4>
<h2 class="card-title mb-2"><i class="bi-telephone position-relative me-1 color" style="top: 4px;"></i> 1800(2345)(6789)</h2>
<p class="card-text">We are 24/7 available. Our expert staff is standing by to answer your questions. You can also contact by email: <a class="btn-link" href="mailto:noreply@canvas.com">noreply@canvas.com</a></p>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 mt-4">
<h3 class="mb-3">Car Reviews</h3>
<div class="fslider testimonial p-0" data-animation="slide" data-arrows="false">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide">
<div class="row">
<div class="col-auto pt-2">
<img class="rounded-circle" src="images/testimonials/1.jpg" width="64" height="64" alt="Customer Testimonails">
</div>
<div class="col">
<p class="mb-3 font-secondary">Seamlessly conceptualize multimedia based web services for optimal human capital. Collaboratively evisculate e-business value.</p>
<h4 class="h6 mb-0 fw-medium">Siri Alexa</h4>
<small class="text-muted">Apple Inc.</small>
</div>
</div>
</div>
<div class="slide">
<div class="row">
<div class="col-auto pt-2">
<img class="rounded-circle" src="images/testimonials/2.jpg" width="64" height="64" alt="Customer Testimonails">
</div>
<div class="col">
<p class="mb-3 font-secondary">Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias.</p>
<h4 class="h6 mb-0 fw-medium">Collis Ta'eed</h4>
<small class="text-muted">Envato Inc.</small>
</div>
</div>
</div>
<div class="slide">
<div class="row">
<div class="col-auto pt-2">
<a href="#"><img class="rounded-circle" src="images/testimonials/1.jpg" alt="Customer Testimonails"></a>
</div>
<div class="col">
<p class="mb-3 font-secondary">Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
<h4 class="h6 mb-0 fw-medium">John Doe</h4>
<small class="text-muted">XYZ Inc.</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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>&copy; 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>
<!-- JavaScripts
============================================= -->
<script src="js/plugins.min.js"></script>
<script src="js/functions.bundle.js"></script>
</body>
</html>
@code{
private void TestFunction() {
Console.WriteLine(Shop);
}
}

View File

@ -0,0 +1,16 @@

using Microsoft.AspNetCore.Components;
namespace TSC2.Components.Pages
{
public partial class Info : ComponentBase
{
[Parameter]
public string Shop { get; set; } = "DEFAULT_NAME";
public void DoAThing()
{
Console.WriteLine("This is a mimic of a sql query... DO NOT LOOK AT THIS PLEASE");
}
}
}

View File

@ -0,0 +1,63 @@
@page "/weather"
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate a loading indicator
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}

View File

@ -0,0 +1,6 @@
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
</Router>

View File

@ -5,6 +5,7 @@
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Telerik.Blazor.Components
@using Telerik.Blazor
@using TSC2
@using TSC2.Client
@using TSC2.Components

View File

@ -1,25 +1,18 @@
using TSC2.Client.Pages;
using TSC2.Components;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents()
.AddInteractiveWebAssemblyComponents();
builder.Services.AddRazorComponents(options => options.DetailedErrors = builder.Environment.IsDevelopment()).AddInteractiveServerComponents();
builder.Services.AddTelerikBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
if (!app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
@ -30,8 +23,6 @@ app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode()
.AddInteractiveWebAssemblyRenderMode()
.AddAdditionalAssemblies(typeof(Counter).Assembly);
.AddInteractiveServerRenderMode();
app.Run();
app.Run();

View File

@ -1,20 +1,18 @@
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<ProjectReference Include="..\TSC2.Client\TSC2.Client.csproj" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.0" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<PackageReference Include="Telerik.UI.for.Blazor.Trial" Version="5.1.1" />
<Content Include="Components\Pages\Home.razor.cs" />
<Content Include="Components\Pages\Info.razor.cs" />
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\csharp\" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.0" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="6.0.2" />
</ItemGroup>
</Project>
<ProjectExtensions><VisualStudio><UserProperties UseCdnSupport="False" UseFontIcons="True" /></VisualStudio></ProjectExtensions>
</Project>

View File

@ -1,4 +1,5 @@
{
"DetailedErrors": true,
"Logging": {
"LogLevel": {
"Default": "Information",

5
TSC2/libman.json Normal file
View File

@ -0,0 +1,5 @@
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": []
}

4076
TSC2/wwwroot/css/animate.css vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,518 @@
.fc-calendar-container {
position: relative;
width: 100%;
height: auto;
}
.fc-calendar {
width: 100%;
height: 100%;
}
.fc-calendar .fc-head {
background: #ccc;
color: #fff;
}
.fc-calendar .fc-body {
position: relative;
width: 100%;
height: 100%;
height: -moz-calc(100% - 30px);
height: -webkit-calc(100% - 30px);
height: calc(100% - 30px);
border: 1px solid #ddd;
}
.fc-calendar .fc-row {
width: 100%;
border-bottom: 1px solid #ddd;
}
.fc-four-rows .fc-row {
height: 25%;
}
.fc-five-rows .fc-row {
height: 20%;
}
.fc-six-rows .fc-row {
height: 16.66%;
height: -moz-calc(100%/6);
height: -webkit-calc(100%/6);
height: calc(100%/6);
}
.fc-calendar .fc-row > div,
.fc-calendar .fc-head > div {
display: inline-block;
height: 100%;
width: 14.28%; /* 100% / 7 */
width: -moz-calc(100%/7);
width: -webkit-calc(100%/7);
width: calc(100%/7);
position: relative;
}
/* IE 9 is rounding up the calc it seems */
.ie9 .fc-calendar .fc-row > div,
.ie9 .fc-calendar .fc-head > div {
width: 14.2%;
}
.fc-calendar .fc-row > div {
border-right: 1px solid #ddd;
padding: 4px;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.fc-calendar .fc-head > div {
text-align: center;
}
.fc-calendar .fc-row > div > span.fc-date {
width: 30px;
height: 20px;
font-size: 20px;
line-height: 20px;
font-weight: 700;
color: #ddd;
text-shadow: 0 -1px 0 rgba(255,255,255,0.8);
bottom: 5px;
right: 5px;
text-align: right;
}
.fc-calendar .fc-starttime,
.fc-calendar .fc-endtime {
display: none;
}
.fc-calendar .fc-row > div > span.fc-weekday {
padding-left: 5px;
display: none;
}
.fc-calendar .fc-row > div.fc-today {
background: #fff4c3;
}
.fc-calendar .fc-row > div.fc-out {
opacity: 0.6;
}
.fc-calendar .fc-row > div:last-child,
.fc-calendar .fc-head > div:last-child {
border-right: none;
}
.fc-calendar .fc-row:last-child {
border-bottom: none;
}
/* Custom Events Calendar
-----------------------------------------------------------------*/
.events-calendar {
position: relative;
width: 100%;
height: auto;
}
.fc-calendar-container {
height: auto;
bottom: 0px;
width: 100%;
}
.events-calendar-header {
height: 50px;
position: relative;
}
.events-calendar-header h2,
.events-calendar-header h3 {
float: left;
text-shadow: none;
margin-bottom: 0;
}
.events-calendar-header h2 {
width: 60%;
}
.events-calendar-header h2 a,
.events-calendar-header h2 span {
font-size: 18px;
white-space: nowrap;
}
.events-calendar-header h3 {
width: 40%;
color: #666;
font-size: 20px;
text-align: right;
padding-top: 7px;
padding-right: 130px;
}
.events-calendar-header h3 span { color: #666; }
.events-calendar-header nav {
position: absolute;
right: 0;
top: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.events-calendar-header nav span {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
position: relative;
color: transparent;
cursor: pointer;
background: #444;
margin: 0 1px;
font-size: 14px;
border-radius: 0 3px 3px 0;
box-shadow: none;
}
.events-calendar-header nav span:first-child {
border-radius: 3px 0 0 3px;
}
.events-calendar-header nav span:hover {
background: #222;
}
.events-calendar-header span i {
color: #FFF;
text-align: center;
width: 100%;
}
.events-calendar-header nav span:last-child {
margin-left: 20px;
border-radius: 3px;
}
.fc-calendar {
background: #F5F5F5;
width: 100%;
height: auto;
margin-top: 10px;
border-radius: 5px;
}
.fc-calendar .fc-head {
background: #444;
color: rgba(255,255,255,0.9);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
border-radius: 5px 5px 0 0;
height: 40px;
line-height: 40px;
padding: 0 20px;
}
.fc-calendar .fc-head > div {
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.fc-calendar .fc-row > div > span.fc-date {
position: absolute;
color: #333;
text-shadow: none;
font-size: 28px;
font-weight: 300;
bottom: auto;
right: auto;
top: 10px;
left: 8px;
text-align: left;
text-shadow: none;
}
.fc-calendar .fc-body {
border: none;
height: 568px;
padding: 20px;
}
.fc-calendar .fc-row {
box-shadow: inset 0 -1px 0 #E5E5E5;
border: none;
}
.fc-calendar .fc-row:last-child {
box-shadow: none !important;
}
.fc-calendar .fc-row:first-child > div:first-child {
border-radius: 5px 0 0 0;
}
.fc-calendar .fc-row:first-child > div:last-child {
border-radius: 0 5px 0 0;
}
.fc-calendar .fc-row:last-child > div:first-child {
border-radius: 0 0 0 5px;
}
.fc-calendar .fc-row:last-child > div:last-child {
border-radius: 0 0 5px 0;
}
.fc-calendar .fc-row > div {
box-shadow: -1px 0 0 #E5E5E5;
border: none;
padding: 10px;
}
.fc-calendar .fc-row > div:first-child{
box-shadow: none !important;
}
.fc-calendar .fc-row > div.fc-today {
background: #1E73BE;
box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
}
.fc-calendar .fc-row > div.fc-today > span.fc-date {
color: #FFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.fc-calendar .fc-row > div.fc-today:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -o-llinear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -ms-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}
.fc-calendar .fc-row > div > div {
margin-top: 35px;
}
.fc-calendar .fc-row > div > div a,
.fc-calendar .fc-row > div > div span {
position: relative;
z-index: 1;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 12px;
display: inline-block;
padding: 3px 5px;
border-radius: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-bottom: 1px;
background: #1E73BE;
-webkit-transition: background-color .3s ease-in-out;
-moz-transition: background-color .3s ease-in-out;
-ms-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
}
.fc-calendar .fc-row > div > div a:hover { background: #444 !important; }
.fc-calendar .fc-row > div.fc-today > div a,
.fc-calendar .fc-row > div.fc-today > div span {
color: #FFF;
background: rgba(255,255,255,0.2);
}
.dark .events-calendar-header h2,
.dark .events-calendar-header h3 {
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.dark .events-calendar-header h2 { color: #FFF; }
.dark .events-calendar-header h2 a,
.dark .events-calendar-header h2 span { color: rgba(255,255,255,0.3); }
.dark .events-calendar-header h2 a { color: rgba(255,255,255,0.5); }
.dark .events-calendar-header h2 a:hover { color: rgba(255,255,255,0.9); }
.dark .events-calendar-header h3 {
color: #CCC;
color: rgba(255,255,255,0.6);
}
.dark .events-calendar-header h3 span { color: #CCC; }
.dark .events-calendar-header nav span {
background: rgba(255,255,255,0.3);
box-shadow: inset 0 1px rgba(255,255,255,0.2);
}
.dark .events-calendar-header nav span:hover { background: rgba(255,255,255,0.5); }
.dark .events-calendar-header span i { color: #FFF; }
.dark .fc-calendar { background: rgba(255,255,255,0.1); }
.dark .fc-calendar .fc-head {
background: rgba(255,255,255,0.2);
color: rgba(255,255,255,0.9);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.dark .fc-calendar .fc-head > div { text-shadow: 0 1px 1px rgba(0,0,0,0.4); }
.dark .fc-calendar .fc-row > div > span.fc-date {
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.dark .fc-calendar .fc-row { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.10); }
.dark .fc-calendar .fc-row > div { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.10); }
.dark .fc-calendar .fc-row > div.fc-today {
background: transparent;
box-shadow: inset 0 0 100px rgba(255,255,255,0.2);
}
.dark .fc-calendar .fc-row > div > div a,
.dark .fc-calendar .fc-row > div > div span {
color: rgba(255,255,255,0.7);
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
background: rgba(255,255,255,0.1);
}
.dark .fc-calendar .fc-row > div > div a:hover { background: rgba(255,255,255,0.3) !important; }
@media screen and (max-width: 991px) {
.events-calendar-header,
.events-calendar-header nav,
.events-calendar,
.fc-calendar-container,
.fc-calendar,
.fc-calendar .fc-head,
.fc-calendar .fc-row > div > span.fc-date {
position: relative;
top: auto;
left: auto;
bottom: auto;
right: auto;
height: auto;
width: auto;
}
.fc-calendar .fc-body { height: auto; }
.fc-calendar { margin: 20px 0; }
.events-calendar-header h2,
.events-calendar-header h3 {
float: none;
width: auto;
text-align: left;
padding: 0;
}
.fc-calendar .fc-row,
.ie9 .fc-calendar .fc-row > div,
.fc-calendar .fc-row > div {
height: auto;
width: 100%;
border: none;
}
.fc-calendar .fc-row > div {
float: none;
min-height: 50px;
box-shadow: inset 0 -1px #E5E5E5 !important;
border-radius: 0px !important;
}
.fc-calendar .fc-row > div:first-child { box-shadow: inset 0 -1px #E5E5E5 !important; }
.fc-calendar .fc-row > div:empty{
min-height: 0;
height: 0;
box-shadow: none !important;
padding: 0;
}
.fc-calendar .fc-row {
box-shadow: none;
}
.fc-calendar .fc-head {
display: none;
}
.fc-calendar .fc-row > div > div {
margin-top: 0px;
padding-left: 10px;
max-width: 68%;
display: inline-block;
}
.fc-calendar .fc-row > div.fc-today {
background: #1E73BE;
}
.fc-calendar .fc-row > div.fc-today:after {
display: none;
}
.fc-calendar .fc-row > div > span.fc-date {
width: 30px;
display: inline-block;
text-align: right;
}
.fc-calendar .fc-row > div > span.fc-weekday {
display: inline-block;
width: 40px;
color: #999;
font-size: 10px;
text-transform: uppercase;
}
.dark .fc-calendar .fc-row > div { box-shadow: inset 0 -1px rgba(255,255,255,0.2) !important; }
.dark .fc-calendar .fc-row > div.fc-today { background: rgba(255, 255, 255, 0.2); }
.dark .fc-calendar .fc-row > div > span.fc-weekday,
.fc-calendar .fc-row > div.fc-today > span.fc-weekday {
color: #fff;
color: rgba(255,255,255,0.7);
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,11 @@
/*!
* bootstrap-star-rating v4.1.0
* http://plugins.krajee.com/star-rating
*
* Author: Kartik Visweswaran
* Copyright: 2013 - 2021, Kartik Visweswaran, Krajee.com
*
* Licensed under the BSD 3-Clause
* https://github.com/kartik-v/bootstrap-star-rating/blob/master/LICENSE.md
*/
.rating-loading{width:25px;height:25px;font-size:0;color:#fff;background:top left no-repeat;border:none}.rating-container .rating-stars{position:relative;cursor:pointer;vertical-align:middle;display:inline-block;overflow:hidden;white-space:nowrap}.rating-container .rating-stars:focus{outline:dotted 1px}.rating-input{display:absolute;cursor:pointer;width:100%;height:1px;bottom:0;left:0;font-size:1px;border:none;background:0 0;opacity:0;padding:0;margin:0}.caption-badge,.rating-container .caption .label{line-height:1;text-align:center;border-radius:.25rem}.rating-container.is-display-only .rating-stars{cursor:default}.rating-disabled .rating-stars{cursor:not-allowed}.rating-container .star{display:inline-block;margin:0 2px;text-align:center}.rating-container .empty-stars{color:#aaa}.rating-container .filled-stars{position:absolute;left:0;top:0;margin:auto;color:#fde16d;white-space:nowrap;overflow:hidden;-webkit-text-stroke:1px #777;text-shadow:1px 1px #999}.rating-rtl{float:right}.rating-animate .filled-stars{transition:width .25s ease}.rating-rtl .filled-stars{left:auto;right:0;transition:none;-webkit-transform:matrix(-1,0,0,1,0,0);transform:matrix(-1,0,0,1,0,0)}.rating-rtl.is-star .filled-stars{right:.06em}.rating-rtl.is-heart .empty-stars{margin-right:.07em}.rating-container .clear-rating{color:#aaa;cursor:not-allowed;display:inline-block;vertical-align:middle;font-size:60%;padding-right:5px}.clear-rating-active{cursor:pointer!important}.clear-rating-active:hover{color:#843534}.rating-container .caption .label{display:inline-block;padding:.25em .4em;vertical-align:baseline}.rating-container .caption{color:#999;display:inline-block;vertical-align:middle;line-height:1;margin-left:5px;margin-right:0}.rating-rtl .caption{margin-right:5px;margin-left:0}@media print{.rating-container .clear-rating{display:none}}.rating-xl{font-size:48px}.rating-lg{font-size:40px}.rating-md{font-size:32px}.rating-sm{font-size:24px}.rating-xs{font-size:16px}.rating-xl .caption{font-size:20px}.rating-lg .caption{font-size:18px}.rating-md .caption{font-size:16px}.rating-sm .caption{font-size:14px}.rating-xs .caption{font-size:12px}.caption-badge{font-family:Arial,Helvetica,sans-serif;display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;color:#fff;white-space:nowrap;vertical-align:baseline}.caption-secondary{background-color:#6c757d}.caption-danger{background-color:#dc3545}.caption-warning{background-color:#ffc107;color:#212529}.caption-info{background-color:#0dcaf0;color:#212529}.caption-primary{background-color:#0d6efd}.caption-success{background-color:#198754}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,520 @@
/* ========================================================================
* bootstrap-switch - v3.3.2
* ====================================================================== */
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 2px;
border: 1px solid;
border-color: #CCC;
position: relative;
text-align: left;
overflow: hidden;
line-height: 8px;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.bootstrap-switch .bootstrap-switch-container {
display: inline-block;
top: 0;
border-radius: 2px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: inline-block !important;
height: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
}
.bootstrap-switch .bootstrap-switch-handle-on i,
.bootstrap-switch .bootstrap-switch-handle-off i {
position: relative;
font-size: 16px;
left: -1px;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
color: #fff;
background: #337ab7;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
color: #fff;
background: #5bc0de;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
color: #fff;
background: #5cb85c;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
background: #f0ad4e;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
color: #fff;
background: #d9534f;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
color: #000;
background: #eeeeee;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor {
color: #FFF;
background: #1ABC9C;
background: var(--themecolor);
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-black,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-black {
color: #FFF;
background: #000;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-white,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-white {
color: #000;
background: #F5F5F5;
}
.bootstrap-switch .bootstrap-switch-label {
text-align: center;
margin-top: -1px;
margin-bottom: -1px;
z-index: 100;
color: #333333;
background: #ffffff;
}
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 1px;
border-top-left-radius: 1px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
margin: 0;
z-index: -1;
opacity: 0;
filter: alpha(opacity=0);
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
padding: 6px 16px;
font-size: 18px;
line-height: 1.3333333;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-readonly,
.bootstrap-switch.bootstrap-switch-indeterminate { cursor: default !important; }
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-webkit-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 1px;
border-top-left-radius: 1px;
}
.bootstrap-switch.bootstrap-switch-focused {
outline: 0;
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
border-bottom-right-radius: 1px;
border-top-right-radius: 1px;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
border-bottom-left-radius: 1px;
border-top-left-radius: 1px;
}
.bootstrap-switch-label:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 3px;
margin-top: -2px;
margin-left: -5px;
display: inline-block;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
}
/* --------------------------------------------------------------
SWITCH
-------------------------------------------------------------- */
.switch-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.switch-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* --------------------------------------------------------------
SWITCH 1 - ROUND
----------------------------------------------------------------- */
input.switch-toggle-round + label {
padding: 2px;
width: 60px;
height: 30px;
background-color: #DDD;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
input.switch-toggle-round + label:before,
input.switch-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
input.switch-toggle-round + label:before {
right: 1px;
background-color: #F1F1F1;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
input.switch-toggle-round + label:after {
width: 28px;
background-color: #FFF;
-webkit-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transition: margin 0.4s;
-moz-transition: margin 0.4s;
-o-transition: margin 0.4s;
transition: margin 0.4s;
}
input.switch-toggle-round:checked + label:before {
background-color: #1ABC9C;
background-color: var(--themecolor);
}
input.switch-toggle-round:checked + label:after { margin-left: 30px; }
/* --------------------------------------------------------------
SWITCH 1 - ROUND- MINI
----------------------------------------------------------------- */
input.switch-rounded-mini.switch-toggle-round + label {
padding: 1px;
width: 32px;
height: 16px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
input.switch-rounded-mini.switch-toggle-round + label:before {
-webkit-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
input.switch-rounded-mini.switch-toggle-round + label:after { width: 15px; }
input.switch-rounded-mini.switch-toggle-round:checked + label:after { margin-left: 15px; }
/* --------------------------------------------------------------
SWITCH 1 - ROUND- LARGE
----------------------------------------------------------------- */
input.switch-rounded-large.switch-toggle-round + label {
width: 90px;
height: 45px;
-webkit-border-radius: 45px;
-o-border-radius: 45px;
border-radius: 45px;
}
input.switch-rounded-large.switch-toggle-round + label:before {
-webkit-border-radius: 45px;
-o-border-radius: 45px;
border-radius: 45px;
}
input.switch-rounded-large.switch-toggle-round + label:after { width: 43px; }
input.switch-rounded-large.switch-toggle-round:checked + label:after { margin-left: 45px; }
/* --------------------------------------------------------------
SWITCH 1 - ROUND- XLARGE
----------------------------------------------------------------- */
input.switch-rounded-xlarge.switch-toggle-round + label {
width: 120px;
height: 60px;
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.switch-rounded-xlarge.switch-toggle-round + label:before {
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.switch-rounded-xlarge.switch-toggle-round + label:after { width: 58px; }
input.switch-rounded-xlarge.switch-toggle-round:checked + label:after { margin-left: 60px; }
/* -----------------------------------------------------------
SWITCH 2 - ROUND FLAT
-------------------------------------------------------------- */
input.switch-toggle-flat + label {
padding: 2px;
width: 60px;
height: 30px;
background-color: #DDD;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
input.switch-toggle-flat + label:before,
input.switch-toggle-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.switch-toggle-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #FFF;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
input.switch-toggle-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 22px;
background-color: #DDD;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
-ms-border-radius: 22px;
-o-border-radius: 22px;
border-radius: 22px;
-webkit-transition: margin 0.4s, background 0.4s;
-moz-transition: margin 0.4s, background 0.4s;
-o-transition: margin 0.4s, background 0.4s;
transition: margin 0.4s, background 0.4s;
}
input.switch-toggle-flat:checked + label {
background-color: #1ABC9C;
background-color: var(--themecolor);
}
input.switch-toggle-flat:checked + label:after {
margin-left: 30px;
background-color: #1ABC9C;
background-color: var(--themecolor);
}
/* -----------------------------------------------------------
SWITCH 2 - FLAT - MINI
-------------------------------------------------------------- */
input.switch-flat-mini.switch-toggle-flat + label {
padding: 1px;
width: 32px;
height: 16px;
-webkit-border-radius: 16px;
-o-border-radius: 16px;
border-radius: 16px;
}
input.switch-flat-mini.switch-toggle-flat + label:before {
top: 1px;
left: 1px;
bottom: 1px;
right: 1px;
-webkit-border-radius: 16px;
-o-border-radius: 16px;
border-radius: 16px;
}
input.switch-flat-mini.switch-toggle-flat + label:after {
top: 2px;
left: 2px;
bottom: 2px;
width: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
}
input.switch-flat-mini.switch-toggle-flat:checked + label:after { margin-left: 16px; }
/* -----------------------------------------------------------
SWITCH 2 - FLAT - LARGE
-------------------------------------------------------------- */
input.switch-flat-large.switch-toggle-flat + label {
width: 90px;
height: 45px;
-webkit-border-radius: 45px;
-o-border-radius: 45px;
border-radius: 45px;
}
input.switch-flat-large.switch-toggle-flat + label:before {
-webkit-border-radius: 45px;
-o-border-radius: 45px;
border-radius: 45px;
}
input.switch-flat-large.switch-toggle-flat + label:after {
width: 37px;
-webkit-border-radius: 37px;
-o-border-radius: 37px;
border-radius: 37px;
}
input.switch-flat-large.switch-toggle-flat:checked + label:after { margin-left: 45px; }
/* -----------------------------------------------------------
SWITCH 2 - FLAT - XLARGE
-------------------------------------------------------------- */
input.switch-flat-xlarge.switch-toggle-flat + label {
padding: 2px;
width: 120px;
height: 60px;
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.switch-flat-xlarge.switch-toggle-flat + label:before {
-webkit-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.switch-flat-xlarge.switch-toggle-flat + label:after {
width: 52px;
-webkit-border-radius: 52px;
-o-border-radius: 52px;
border-radius: 52px;
}
input.switch-flat-xlarge.switch-toggle-flat:checked + label:after { margin-left: 60px; }

View File

@ -0,0 +1,184 @@
/**
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
*
* @version v3.4 for Bootstrap 4.x
* @homepage https://bttstrp.github.io/bootstrap-switch
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
* & djibe
* @license Apache-2.0
*/
.bootstrap-switch {
display: inline-block;
direction: ltr;
cursor: pointer;
border-radius: 4px;
border: 1px solid #ccc;
position: relative;
text-align: left;
overflow: hidden;
line-height: 8px;
z-index: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
.bootstrap-switch .bootstrap-switch-container {
display: inline-block;
top: 0;
border-radius: 4px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label {
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
display: table-cell;
vertical-align: middle;
padding: 6px 12px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
background: #007bff;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
background: #eee;
color: rgba(0, 0, 0, 0.87);
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
background: #6c757d;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
background: #17a2b8;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
background: #28a745;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning {
background: #ffc107;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
background: #dc3545;
color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-themecolor,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-themecolor {
color: #FFF;
background: var(--cnvs-themecolor);
border-color: transparent !important;
outline: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.bootstrap-switch .bootstrap-switch-label {
text-align: center;
margin-top: -1px;
margin-bottom: -1px;
z-index: 100;
color: #333;
background: #fff;
padding: 8px 12px;
}
.bootstrap-switch span::before {
content: "\200b";
}
.bootstrap-switch .bootstrap-switch-handle-on {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.bootstrap-switch .bootstrap-switch-handle-off {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
position: absolute !important;
top: 0;
left: 0;
margin: 0;
z-index: -1;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
padding: 6px 16px;
font-size: 18px;
line-height: 1.3333333;
}
.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly, .bootstrap-switch.bootstrap-switch-indeterminate {
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off, .bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
-webkit-transition: margin-left 0.5s;
transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
border-radius: 0 3px 3px 0;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
border-radius: 3px 0 0 3px;
}
.bootstrap-switch.bootstrap-switch-focused {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label, .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}

View File

@ -0,0 +1,341 @@
/* ========================================================================
Dark - timepicker.css
======================================================================== */
.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-bottom: 7px solid #444; }
.dark .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-bottom-color: #222; }
.dark .bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-top-color: #DDD; }
.dark .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-top-color: #222; }
.dark .bootstrap-datetimepicker-widget table th.disabled,
.dark .bootstrap-datetimepicker-widget table th.disabled:hover { color: #AAA; }
.dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #444; }
.dark .bootstrap-datetimepicker-widget table td.cw { color: #AAA; }
.dark .bootstrap-datetimepicker-widget table td.day:hover,
.dark .bootstrap-datetimepicker-widget table td.hour:hover,
.dark .bootstrap-datetimepicker-widget table td.minute:hover,
.dark .bootstrap-datetimepicker-widget table td.second:hover { background: #444; }
.dark .bootstrap-datetimepicker-widget table td.old,
.dark .bootstrap-datetimepicker-widget table td.new { color: #AAA; }
.dark .bootstrap-datetimepicker-widget table td.active,
.dark .bootstrap-datetimepicker-widget table td.active:hover { color: #222; }
.dark .bootstrap-datetimepicker-widget table td.active.today:before { border-bottom-color: #222; }
.dark .bootstrap-datetimepicker-widget table td.disabled,
.dark .bootstrap-datetimepicker-widget table td.disabled:hover { color: #AAA; }
.dark .bootstrap-datetimepicker-widget table td span:hover { background: #444; }
.dark .bootstrap-datetimepicker-widget table td span.active { color: #222; }
.dark .bootstrap-datetimepicker-widget table td span.old { color: #AAA; }
.dark .bootstrap-datetimepicker-widget table td span.disabled,
.dark .bootstrap-datetimepicker-widget table td span.disabled:hover { color: #AAA; }
/* ========================================================================
select-boxes.css
======================================================================== */
.dark .select2-dropdown {
background-color: #333;
border-color: #555;
}
.dark .select2-close-mask { background-color: #333; }
.dark .select2-container--default .select2-selection--single {
background-color: #333;
border-color: #555;
}
.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #EEE; }
.dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; }
.dark .select2-container--default .select2-selection--multiple {
background-color: #333;
border-color: #555;
}
.dark .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; }
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #444;
border-color: #555;
}
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; }
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EEE; }
.dark .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #444; }
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
border-color: #555;
background-color: #555;
color: #EEE;
}
.dark .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; }
.dark .select2-container--default .select2-results__option[aria-selected=true] { background-color: #444; }
.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: #EEE; }
.dark .select2-container--classic .select2-selection--single {
background-color: #444;
border-color: #555;
background-image: -webkit-linear-gradient(top, white 50%, #444 100%);
background-image: -o-linear-gradient(top, white 50%, #444 100%);
background-image: linear-gradient(to bottom, white 50%, #444 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44444444', endColorstr='#44EEEEEE', GradientType=0);
}
.dark .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; }
.dark .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; }
.dark .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; }
.dark .select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #444;
border-left-color: #555;
background-image: -webkit-linear-gradient(top, #444 50%, #444 100%);
background-image: -o-linear-gradient(top, #444 50%, #444 100%);
background-image: linear-gradient(to bottom, #444 50%, #444 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44EEEEEE', endColorstr='#44CCCCCC', GradientType=0);
}
.dark .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border-right-color: #555; }
.dark .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
background-image: -webkit-linear-gradient(top, white 0%, #444 50%);
background-image: -o-linear-gradient(top, white 0%, #444 50%);
background-image: linear-gradient(to bottom, white 0%, #444 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44444444', endColorstr='#44EEEEEE', GradientType=0);
}
.dark .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
background-image: -webkit-linear-gradient(top, #444 50%, white 100%);
background-image: -o-linear-gradient(top, #444 50%, white 100%);
background-image: linear-gradient(to bottom, #444 50%, white 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#44EEEEEE', endColorstr='#444', GradientType=0);
}
.dark .select2-container--classic .select2-selection--multiple {
background-color: #333;
border-color: #555;
}
.dark .select2-container--classic .select2-selection--multiple:focus { border-color: #5897fb; }
.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #444;
border-color: #555;
}
.dark .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #EEE; }
.dark .select2-container--classic .select2-search--dropdown .select2-search__field { border-color: #555; }
.dark .select2-container--classic .select2-dropdown { background-color: #333;}
.dark .select2-container--classic .select2-results__option[aria-disabled=true] { color: #444; }
.dark .select2-container--classic .select2-results__option--highlighted[aria-selected] { color: #333; }
.dark .select2-container--default.select2-container--disabled .select2-selection--single { background-color: rgba(255,255,255,0.1); }
/* ========================================================================
radio-checkbox.css
======================================================================== */
.dark .checkbox-style-1-label:before,
.dark .radio-style-1-label:before,
.dark .checkbox-style-2-label:before,
.dark .radio-style-2-label:before,
.dark .checkbox-style-3-label:before,
.dark .radio-style-3-label:before {
background: #333;
border-color: #444;
}
.dark .radio-style:checked + .radio-style-1-label:before { background: #CCC; }
/* Checkbox-small + Radio-small */
.dark .checkbox-style-1-label.checkbox-small:before,
.dark .radio-style-1-label.radio-small:before,
.dark .checkbox-style-2-label.checkbox-small:before,
.dark .radio-style-2-label.radio-small:before,
.dark .checkbox-style-3-label.checkbox-small:before,
.dark .radio-style-3-label.radio-small:before { border-color: #444; }
/* Style-2 */
.dark .checkbox-style:checked + .checkbox-style-2-label:before { box-shadow: inset 0px 0px 0px 4px #000; }
.dark .radio-style:checked + .radio-style-2-label:before {
background: #CCC;
box-shadow: inset 0px 0px 0px 4px #333;
}
.dark .checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #000; }
.dark .radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #000; }
/* style-3 */
.dark .checkbox-style:checked + .checkbox-style-3-label:before,
.dark .radio-style:checked + .radio-style-3-label:before { color: #222; }
.dark .radio-style:checked + .radio-style-3-label:before {
color: #CCC;
border-color: #CCC;
}
/* style-3 - Small */
.dark .checkbox-style + .checkbox-style-3-label.checkbox-small:before,
.dark .radio-style + .radio-style-3-label.radio-small:before { border-color: #555; }
/* ========================================================================
ion.rangeslider.css
======================================================================== */
.dark .irs-bar-edge,
.dark .irs-line-mid,
.dark .irs-line-left,
.dark .irs-line-right { background-color: #444; }
/*========================================================================
daterangepicker.css
======================================================================== */
.dark .daterangepicker { background: #222; }
.dark .daterangepicker.opensleft:before {
border-bottom-color: #444;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.dark .daterangepicker.opensleft:after {
border-bottom-color: #555;
border-left-color: transparent;
}
.dark .daterangepicker.openscenter:before {
border-bottom-color: #444;
border-left-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dark .daterangepicker.openscenter:after {
border-bottom-color: #222;
border-left-color: transparent;
}
.dark .daterangepicker.opensright:before {
border-bottom-color: #444;
border-left-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dark .daterangepicker.opensright:after {
border-bottom-color: #222;
border-left-color: transparent;
}
.dark .daterangepicker.dropup:before{ border-top-color: #444; }
.dark .daterangepicker.dropup:after{ border-top-color: #222; }
.dark .daterangepicker .calendar-table {
border-color: #444;
background: #222;
}
.dark .daterangepicker td.off, .dark .daterangepicker td.off.in-range, .dark .daterangepicker td.off.start-date, .dark .daterangepicker td.off.end-date {
color: #999;
background: #222;
}
.dark .daterangepicker td.disabled, .dark .daterangepicker option.disabled { color: #999; }
.dark .daterangepicker td.available:hover, .dark .daterangepicker th.available:hover { background: #555; }
.dark .daterangepicker td.in-range {
background: #444;
border-radius: 0;
}
.dark .daterangepicker td.active, .dark .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: #3071a9;
color: #EEE;
}
.dark .daterangepicker td.week, .dark .daterangepicker th.week { color: #444; }
.dark .reportrange { border-color: #444 !important; }
/* Text Input Above Each Calendar */
.dark .daterangepicker .input-mini {
border-color: #444;
color: #555;
}
.dark .daterangepicker .input-mini.active { border-color: #357ebd; }
.dark .daterangepicker .calendar-time select.disabled { color: #444; }
.daterangepicker .daterangepicker_input i { color: #333; }
/* Predefined Ranges */
.dark .daterangepicker .ranges li {
background: #333;
border-color: #333;
color: #EEE;
}
.dark .daterangepicker .ranges li.active, .dark .daterangepicker .ranges li:hover {
background: #08c;
border-color: #08c;
color: #EEE;
}
.dark .input-daterange .input-group-addon {
background-color: #222;
border-color: #111;
text-shadow: none;
}
/* ========================================================================
* bs-switches.css
* ====================================================================== */
.dark .bootstrap-switch { border-color: #444; }
.dark .bootstrap-switch .bootstrap-switch-label {
color: #EEE;
background: #222;
}
.dark .bootstrap-switch-label:after {
border-top-color: #444;
border-bottom-color: #444;
}
/* Switches
-------------------------------------------------------------- */
.dark input.switch-toggle-round + label { background-color: #444; }
.dark input.switch-toggle-round + label:before,
.dark input.switch-toggle-flat + label:before { background-color: #222; }
.dark input.switch-toggle-flat + label,
.dark input.switch-toggle-flat + label:after { background-color: #AAA; }
.dark input.switch-toggle-round + label:after {
background-color: #AAA;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,410 @@
.daterangepicker {
position: absolute;
color: inherit;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ddd;
width: 278px;
max-width: none;
padding: 0;
margin-top: 7px;
top: 100px;
left: 20px;
z-index: 3001;
display: none;
font-family: arial;
font-size: 15px;
line-height: 1em;
}
.daterangepicker:before, .daterangepicker:after {
position: absolute;
display: inline-block;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker:before {
top: -7px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #ccc;
}
.daterangepicker:after {
top: -6px;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
}
.daterangepicker.opensleft:before {
right: 9px;
}
.daterangepicker.opensleft:after {
right: 10px;
}
.daterangepicker.openscenter:before {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.openscenter:after {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.opensright:before {
left: 9px;
}
.daterangepicker.opensright:after {
left: 10px;
}
.daterangepicker.drop-up {
margin-top: -7px;
}
.daterangepicker.drop-up:before {
top: initial;
bottom: -7px;
border-bottom: initial;
border-top: 7px solid #ccc;
}
.daterangepicker.drop-up:after {
top: initial;
bottom: -6px;
border-bottom: initial;
border-top: 6px solid #fff;
}
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
float: none;
}
.daterangepicker.single .drp-selected {
display: none;
}
.daterangepicker.show-calendar .drp-calendar {
display: block;
}
.daterangepicker.show-calendar .drp-buttons {
display: block;
}
.daterangepicker.auto-apply .drp-buttons {
display: none;
}
.daterangepicker .drp-calendar {
display: none;
max-width: 270px;
}
.daterangepicker .drp-calendar.left {
padding: 8px 0 8px 8px;
}
.daterangepicker .drp-calendar.right {
padding: 8px;
}
.daterangepicker .drp-calendar.single .calendar-table {
border: none;
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
color: #fff;
border: solid black;
border-width: 0 2px 2px 0;
border-radius: 0;
display: inline-block;
padding: 3px;
}
.daterangepicker .calendar-table .next span {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.daterangepicker .calendar-table .prev span {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
white-space: nowrap;
text-align: center;
vertical-align: middle;
min-width: 32px;
width: 32px;
height: 24px;
line-height: 24px;
font-size: 12px;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
}
.daterangepicker .calendar-table {
border: 1px solid #fff;
border-radius: 4px;
background-color: #fff;
}
.daterangepicker .calendar-table table {
width: 100%;
margin: 0;
border-spacing: 0;
border-collapse: collapse;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
background-color: #eee;
border-color: transparent;
color: inherit;
}
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc;
}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
background-color: #fff;
border-color: transparent;
color: #999;
}
.daterangepicker td.in-range {
background-color: #ebf4f8;
border-color: transparent;
color: #000;
border-radius: 0;
}
.daterangepicker td.start-date {
border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
border-radius: 4px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: transparent;
color: #fff;
}
.daterangepicker th.month {
width: auto;
}
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999;
cursor: not-allowed;
text-decoration: line-through;
}
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
}
.daterangepicker select.monthselect {
margin-right: 2%;
width: 56%;
}
.daterangepicker select.yearselect {
width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px;
margin: 0 auto;
background: #eee;
border: 1px solid #eee;
padding: 2px;
outline: 0;
font-size: 12px;
}
.daterangepicker .calendar-time {
text-align: center;
margin: 4px auto 0 auto;
line-height: 30px;
position: relative;
}
.daterangepicker .calendar-time select.disabled {
color: #ccc;
cursor: not-allowed;
}
.daterangepicker .drp-buttons {
clear: both;
text-align: right;
padding: 8px;
border-top: 1px solid #ddd;
display: none;
line-height: 12px;
vertical-align: middle;
}
.daterangepicker .drp-selected {
display: inline-block;
font-size: 12px;
padding-right: 8px;
}
.daterangepicker .drp-buttons .btn {
margin-left: 8px;
font-size: 12px;
font-weight: bold;
padding: 4px 8px;
}
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker.show-ranges.rtl .drp-calendar.right {
border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.ltr .drp-calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker .ranges {
float: none;
text-align: left;
margin: 0;
}
.daterangepicker.show-calendar .ranges {
margin-top: 8px;
}
.daterangepicker .ranges ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
}
.daterangepicker .ranges li {
font-size: 12px;
padding: 8px 12px;
cursor: pointer;
}
.daterangepicker .ranges li:hover {
background-color: #eee;
}
.daterangepicker .ranges li.active {
background-color: #08c;
color: #fff;
}
/* Larger Screen Styling */
@media (min-width: 564px) {
.daterangepicker {
width: auto;
}
.daterangepicker .ranges ul {
width: 140px;
}
.daterangepicker.single .ranges ul {
width: 100%;
}
.daterangepicker.single .drp-calendar.left {
clear: none;
}
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
float: left;
}
.daterangepicker {
direction: ltr;
text-align: left;
}
.daterangepicker .drp-calendar.left {
clear: left;
margin-right: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.daterangepicker .drp-calendar.right {
margin-left: 0;
}
.daterangepicker .drp-calendar.right .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
padding-right: 8px;
}
.daterangepicker .ranges, .daterangepicker .drp-calendar {
float: left;
}
}
@media (min-width: 730px) {
.daterangepicker .ranges {
width: auto;
}
.daterangepicker .ranges {
float: left;
}
.daterangepicker.rtl .ranges {
float: right;
}
.daterangepicker .drp-calendar.left {
clear: none !important;
}
}

View File

@ -0,0 +1,269 @@
/* Ion.RangeSlider
// css version 2.0.3
// © 2013-2014 Denis Ineshin | IonDen.com
// ===================================================================================================================*/
/* =====================================================================================================================
// RangeSlider */
.irs {
position: relative; display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.irs-line {
position: relative; display: block;
overflow: hidden;
outline: none !important;
}
.irs-line-left, .irs-line-mid, .irs-line-right {
position: absolute; display: block;
top: 0;
}
.irs-line-left {
left: 0; width: 11%;
}
.irs-line-mid {
left: 9%; width: 82%;
}
.irs-line-right {
right: 0; width: 11%;
}
.irs-bar {
position: absolute; display: block;
left: 0; width: 0;
}
.irs-bar-edge {
position: absolute; display: block;
top: 0; left: 0;
}
.irs-shadow {
position: absolute; display: none;
left: 0; width: 0;
}
.irs-slider {
position: absolute; display: block;
cursor: pointer;
z-index: 1;
}
.irs-slider.single {
}
.irs-slider.from {
}
.irs-slider.to {
}
.irs-slider.type_last {
z-index: 2;
}
.irs-min {
position: absolute; display: block;
left: 0;
cursor: default;
}
.irs-max {
position: absolute; display: block;
right: 0;
cursor: default;
}
.irs-from, .irs-to, .irs-single {
position: absolute; display: block;
top: 0; left: 0;
cursor: default;
white-space: nowrap;
}
.irs-grid {
position: absolute; display: none;
bottom: 0; left: 0;
width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
display: block;
}
.irs-grid-pol {
position: absolute;
top: 0; left: 0;
width: 1px; height: 8px;
background: #000;
}
.irs-grid-pol.small {
height: 4px;
}
.irs-grid-text {
position: absolute;
bottom: 0; left: 0;
white-space: nowrap;
text-align: center;
font-size: 9px; line-height: 9px;
padding: 0 3px;
color: #000;
}
.irs-disable-mask {
position: absolute; display: block;
top: 0; left: -1%;
width: 102%; height: 100%;
cursor: default;
background: rgba(0,0,0,0.0);
z-index: 2;
}
.lt-ie9 .irs-disable-mask {
background: #000;
filter: alpha(opacity=0);
cursor: not-allowed;
}
.irs-disabled {
opacity: 0.4;
}
.irs-hidden-input {
position: absolute !important;
display: block !important;
top: 0 !important;
left: 0 !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
z-index: -9999 !important;
background: none !important;
border-style: solid !important;
border-color: transparent !important;
}
/* Ion.RangeSlider, Nice Skin
// css version 2.0.3
// © Denis Ineshin, 2014 https://github.com/IonDen
// ===================================================================================================================*/
/* =====================================================================================================================
// Skin details */
.irs-slider {
background: url(rangeslider/sprite-skin-nice.png) repeat-x;
}
.irs-bar-edge,
.irs-line-mid,
.irs-line-left,
.irs-line-right {
background-color: #EEE;
border-radius: 100px;
}
.irs {
height: 40px;
}
.irs-with-grid {
height: 60px;
}
.irs-line {
height: 8px; top: 25px;
}
.irs-line-left {
height: 8px;
background-position: 0 -30px;
}
.irs-line-mid {
height: 8px;
background-position: 0 0;
}
.irs-line-right {
height: 8px;
background-position: 100% -30px;
}
.irs-bar {
height: 8px;
top: 25px;
background-color: #1ABC9C;
background-color: var(--themecolor);
border-radius: 100px
}
.irs-bar-edge {
top: 25px;
height: 8px;
width: 11px;
background-position: 0 -90px;
}
.irs-shadow {
height: 8px;
top: 25px;
background: rgba(0,0,0,0.9);
opacity: 0.15;
}
.lt-ie9 .irs-shadow {
filter: alpha(opacity=15);
}
.irs-slider {
width: 22px; height: 22px;
top: 17px;
background-position: 0 -120px;
}
.irs-min, .irs-max {
color: #999;
font-size: 11px;
line-height: 1.333;
text-shadow: none;
top: -8px;
padding: 3px;
background: rgba(0,0,0,0.05);
-moz-border-radius: 2px;
border-radius: 2px;
}
.irs-from, .irs-to, .irs-single {
color: #FFF;
top: -8px;
font-size: 11px;
line-height: 1.333;
text-shadow: none;
padding: 3px;
background: #1ABC9C;
background: var(--themecolor);
-moz-border-radius: 2px;
border-radius: 2px;
}
.irs-from:after, .irs-single:after, .irs-to:after {
content: "";
position: absolute;
display: block;
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #1ABC9C;
border-top-color: var(--themecolor);
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single { background: #DDD; }
.irs-grid-pol { background: #AAA; }
.irs-grid-text { color: #AAA }
.irs-disabled { }

View File

@ -0,0 +1,691 @@
@charset "UTF-8";
/**
Ion.RangeSlider, 2.3.1
© Denis Ineshin, 2010 - 2019, IonDen.com
Build date: 2019-12-19 16:51:02
*/
.irs {
--cnvs-range-slider-top: 25px;
--cnvs-range-slider-bottom: 16px;
--cnvs-range-slider-line_height: 12px;
--cnvs-range-slider-handle_width: 16px;
--cnvs-range-slider-handle_height: 18px;
--cnvs-range-slider-custom_radius: 4px;
--cnvs-range-slider-line_color: var(--cnvs-contrast-200);
--cnvs-range-slider-bar_color: var(--cnvs-themecolor);
--cnvs-range-slider-handle_color_1: var(--cnvs-range-slider-bar_color);
--cnvs-range-slider-handle_color_2: var(--cnvs-contrast-500);
--cnvs-range-slider-minmax_text_color: var(--cnvs-contrast-600);
--cnvs-range-slider-minmax_bg_color: var(--cnvs-range-slider-line_color);
--cnvs-range-slider-label_color_1: var(--cnvs-range-slider-bar_color);
--cnvs-range-slider-label_color_2: white;
--cnvs-range-slider-grid_color_1: var(--cnvs-range-slider-line_color);
--cnvs-range-slider-grid_color_2: var(--cnvs-range-slider-minmax_text_color);
position: relative;
display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 12px;
font-family: Arial, sans-serif;
}
.irs-line {
position: relative;
display: block;
overflow: hidden;
outline: none !important;
}
.irs-bar {
position: absolute;
display: block;
left: 0;
width: 0;
}
.irs-shadow {
position: absolute;
display: none;
left: 0;
width: 0;
}
.irs-handle {
position: absolute;
display: block;
box-sizing: border-box;
cursor: default;
z-index: 1;
}
.irs-handle.type_last {
z-index: 2;
}
.irs-min, .irs-max {
position: absolute;
display: block;
cursor: default;
}
.irs-min {
left: 0;
}
.irs-max {
right: 0;
}
.irs-from, .irs-to, .irs-single {
position: absolute;
display: block;
top: 0;
left: 0;
cursor: default;
white-space: nowrap;
}
.irs-grid {
position: absolute;
display: none;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
}
.irs-with-grid .irs-grid {
display: block;
}
.irs-grid-pol {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 8px;
background: #000;
}
.irs-grid-pol.small {
height: 4px;
}
.irs-grid-text {
position: absolute;
bottom: 0;
left: 0;
white-space: nowrap;
text-align: center;
font-size: 9px;
line-height: 9px;
padding: 0 3px;
color: #000;
}
.irs-disable-mask {
position: absolute;
display: block;
top: 0;
left: -1%;
width: 102%;
height: 100%;
cursor: default;
background: rgba(0, 0, 0, 0);
z-index: 2;
}
.lt-ie9 .irs-disable-mask {
background: #000;
filter: alpha(opacity=0);
cursor: not-allowed;
}
.irs-disabled {
opacity: 0.4;
}
.irs-hidden-input {
position: absolute !important;
display: block !important;
top: 0 !important;
left: 0 !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
outline: none !important;
z-index: -9999 !important;
background: none !important;
border-style: solid !important;
border-color: transparent !important;
}
.irs--flat {
height: 40px;
}
.irs--flat.irs-with-grid {
height: 60px;
}
.irs--flat .irs-line {
top: var(--cnvs-range-slider-top);
height: var(--cnvs-range-slider-line_height);
background-color: var(--cnvs-range-slider-line_color);
border-radius: var(--cnvs-range-slider-custom_radius);
}
.irs--flat .irs-bar {
top: var(--cnvs-range-slider-top);
height: var(--cnvs-range-slider-line_height);
background-color: var(--cnvs-range-slider-bar_color);
}
.irs--flat .irs-bar--single {
border-radius: var(--cnvs-range-slider-custom_radius) 0 0 var(--cnvs-range-slider-custom_radius);
}
.irs--flat .irs-shadow {
height: 1px;
bottom: var(--cnvs-range-slider-bottom);
background-color: var(--cnvs-range-slider-line_color);
}
.irs--flat .irs-handle {
top: 22px;
width: var(--cnvs-range-slider-handle_width);
height: var(--cnvs-range-slider-handle_height);
background-color: transparent;
}
.irs--flat .irs-handle > i:first-child {
position: absolute;
display: block;
top: 0;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
background-color: var(--cnvs-range-slider-handle_color_1);
}
.irs--flat .irs-handle.state_hover > i:first-child, .irs--flat .irs-handle:hover > i:first-child {
background-color: var(--cnvs-range-slider-handle_color_2);
}
.irs--flat .irs-min,
.irs--flat .irs-max {
top: 0;
padding: 1px 3px;
color: var(--cnvs-range-slider-minmax_text_color);
font-size: 10px;
line-height: 1.333;
text-shadow: none;
background-color: var(--cnvs-range-slider-minmax_bg_color);
border-radius: var(--cnvs-range-slider-custom_radius);
}
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
color: var(--cnvs-range-slider-label_color_2);
font-size: 10px;
line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
background-color: var(--cnvs-range-slider-label_color_1);
border-radius: var(--cnvs-range-slider-custom_radius);
}
.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: var(--cnvs-range-slider-label_color_1);
}
.irs--flat .irs-grid-pol {
background-color: var(--cnvs-range-slider-grid_color_1);
}
.irs--flat .irs-grid-text {
color: var(--cnvs-range-slider-grid_color_2);
}
.irs--big {
height: 55px;
}
.irs--big.irs-with-grid {
height: 70px;
}
.irs--big .irs-line {
top: 33px;
height: 12px;
background-color: white;
background: linear-gradient(to bottom, #ddd -50%, white 150%);
border: 1px solid #ccc;
border-radius: 12px;
}
.irs--big .irs-bar {
top: 33px;
height: 12px;
background-color: #92bce0;
border: 1px solid #428bca;
background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
}
.irs--big .irs-bar--single {
border-radius: 12px 0 0 12px;
}
.irs--big .irs-shadow {
height: 1px;
bottom: 16px;
background-color: rgba(66, 139, 202, 0.5);
}
.irs--big .irs-handle {
top: 25px;
width: 30px;
height: 30px;
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #cbcfd5;
background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
border-radius: 30px;
}
.irs--big .irs-handle.state_hover,
.irs--big .irs-handle:hover {
border-color: rgba(0, 0, 0, 0.45);
background-color: #939ba7;
background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
}
.irs--big .irs-min,
.irs--big .irs-max {
top: 0;
padding: 1px 5px;
color: white;
text-shadow: none;
background-color: #9f9f9f;
border-radius: 3px;
}
.irs--big .irs-from,
.irs--big .irs-to,
.irs--big .irs-single {
color: white;
text-shadow: none;
padding: 1px 5px;
background-color: #428bca;
background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
border-radius: 3px;
}
.irs--big .irs-grid-pol {
background-color: #428bca;
}
.irs--big .irs-grid-text {
color: #428bca;
}
.irs--modern {
height: 55px;
}
.irs--modern.irs-with-grid {
height: 55px;
}
.irs--modern .irs-line {
top: 25px;
height: 5px;
background-color: #d1d6e0;
background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
border: 1px solid #a3adc1;
border-bottom-width: 0;
border-radius: 5px;
}
.irs--modern .irs-bar {
top: 25px;
height: 5px;
background: #20b426;
background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
}
.irs--modern .irs-bar--single {
border-radius: 5px 0 0 5px;
}
.irs--modern .irs-shadow {
height: 1px;
bottom: 21px;
background-color: rgba(209, 214, 224, 0.5);
}
.irs--modern .irs-handle {
top: 37px;
width: 12px;
height: 13px;
border: 1px solid #a3adc1;
border-top-width: 0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 3px;
}
.irs--modern .irs-handle > i:nth-child(1) {
position: absolute;
display: block;
top: -4px;
left: 1px;
width: 6px;
height: 6px;
border: 1px solid #a3adc1;
background: white;
transform: rotate(45deg);
}
.irs--modern .irs-handle > i:nth-child(2) {
position: absolute;
display: block;
box-sizing: border-box;
top: 0;
left: 0;
width: 10px;
height: 12px;
background: #e9e6e6;
background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
border-radius: 0 0 3px 3px;
}
.irs--modern .irs-handle > i:nth-child(3) {
position: absolute;
display: block;
box-sizing: border-box;
top: 3px;
left: 3px;
width: 4px;
height: 5px;
border-left: 1px solid #a3adc1;
border-right: 1px solid #a3adc1;
}
.irs--modern .irs-handle.state_hover,
.irs--modern .irs-handle:hover {
border-color: #7685a2;
background: #c3c7cd;
background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
}
.irs--modern .irs-handle.state_hover > i:nth-child(1),
.irs--modern .irs-handle:hover > i:nth-child(1) {
border-color: #7685a2;
}
.irs--modern .irs-handle.state_hover > i:nth-child(3),
.irs--modern .irs-handle:hover > i:nth-child(3) {
border-color: #48536a;
}
.irs--modern .irs-min,
.irs--modern .irs-max {
top: 0;
font-size: 10px;
line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
color: white;
background-color: #d1d6e0;
border-radius: 5px;
}
.irs--modern .irs-from,
.irs--modern .irs-to,
.irs--modern .irs-single {
font-size: 10px;
line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
background-color: #20b426;
color: white;
border-radius: 5px;
}
.irs--modern .irs-from:before,
.irs--modern .irs-to:before,
.irs--modern .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #20b426;
}
.irs--modern .irs-grid {
height: 25px;
}
.irs--modern .irs-grid-pol {
background-color: #dedede;
}
.irs--modern .irs-grid-text {
color: silver;
font-size: 13px;
}
.irs--sharp {
height: 50px;
font-size: 12px;
line-height: 1;
}
.irs--sharp.irs-with-grid {
height: 57px;
}
.irs--sharp .irs-line {
top: 30px;
height: 2px;
background-color: black;
border-radius: 2px;
}
.irs--sharp .irs-bar {
top: 30px;
height: 2px;
background-color: #ee22fa;
}
.irs--sharp .irs-bar--single {
border-radius: 2px 0 0 2px;
}
.irs--sharp .irs-shadow {
height: 1px;
bottom: 21px;
background-color: rgba(0, 0, 0, 0.5);
}
.irs--sharp .irs-handle {
top: 25px;
width: 10px;
height: 10px;
background-color: #a804b2;
}
.irs--sharp .irs-handle > i:first-child {
position: absolute;
display: block;
top: 100%;
left: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #a804b2;
}
.irs--sharp .irs-handle.state_hover,
.irs--sharp .irs-handle:hover {
background-color: black;
}
.irs--sharp .irs-handle.state_hover > i:first-child,
.irs--sharp .irs-handle:hover > i:first-child {
border-top-color: black;
}
.irs--sharp .irs-min,
.irs--sharp .irs-max {
color: white;
font-size: 14px;
line-height: 1;
top: 0;
padding: 3px 4px;
opacity: 0.4;
background-color: #a804b2;
border-radius: 2px;
}
.irs--sharp .irs-from,
.irs--sharp .irs-to,
.irs--sharp .irs-single {
font-size: 14px;
line-height: 1;
text-shadow: none;
padding: 3px 4px;
background-color: #a804b2;
color: white;
border-radius: 2px;
}
.irs--sharp .irs-from:before,
.irs--sharp .irs-to:before,
.irs--sharp .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #a804b2;
}
.irs--sharp .irs-grid {
height: 25px;
}
.irs--sharp .irs-grid-pol {
background-color: #dedede;
}
.irs--sharp .irs-grid-text {
color: silver;
font-size: 13px;
}
.irs--round {
height: 50px;
}
.irs--round.irs-with-grid {
height: 65px;
}
.irs--round .irs-line {
top: 36px;
height: 4px;
background-color: var(--cnvs-range-slider-bar_color);
border-radius: 4px;
}
.irs--round .irs-bar {
top: 36px;
height: 4px;
background-color: var(--cnvs-range-slider-bar_color);
}
.irs--round .irs-bar--single {
border-radius: 4px 0 0 4px;
}
.irs--round .irs-shadow {
height: 4px;
bottom: 21px;
background-color: rgba(222, 228, 236, 0.5);
}
.irs--round .irs-handle {
top: 26px;
width: 24px;
height: 24px;
border: 4px solid var(--cnvs-range-slider-bar_color);
background-color: white;
border-radius: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
}
.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
background-color: #f0f6ff;
}
.irs--round .irs-min,
.irs--round .irs-max {
color: #333;
font-size: 14px;
line-height: 1;
top: 0;
padding: 3px 5px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
font-size: 14px;
line-height: 1;
text-shadow: none;
padding: 3px 5px;
background-color: var(--cnvs-range-slider-bar_color);
color: white;
border-radius: 4px;
}
.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: var(--cnvs-range-slider-bar_color);
}
.irs--round .irs-grid {
height: 25px;
}
.irs--round .irs-grid-pol {
background-color: #dedede;
}
.irs--round .irs-grid-text {
color: silver;
font-size: 13px;
}
.irs--square {
height: 50px;
}
.irs--square.irs-with-grid {
height: 60px;
}
.irs--square .irs-line {
top: 31px;
height: 4px;
background-color: #dedede;
}
.irs--square .irs-bar {
top: 31px;
height: 4px;
background-color: black;
}
.irs--square .irs-shadow {
height: 2px;
bottom: 21px;
background-color: #dedede;
}
.irs--square .irs-handle {
top: 25px;
width: 16px;
height: 16px;
border: 3px solid black;
background-color: white;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.irs--square .irs-handle.state_hover,
.irs--square .irs-handle:hover {
background-color: #f0f6ff;
}
.irs--square .irs-min,
.irs--square .irs-max {
color: #333;
font-size: 14px;
line-height: 1;
top: 0;
padding: 3px 5px;
background-color: rgba(0, 0, 0, 0.1);
}
.irs--square .irs-from,
.irs--square .irs-to,
.irs--square .irs-single {
font-size: 14px;
line-height: 1;
text-shadow: none;
padding: 3px 5px;
background-color: black;
color: white;
}
.irs--square .irs-grid {
height: 25px;
}
.irs--square .irs-grid-pol {
background-color: #dedede;
}
.irs--square .irs-grid-text {
color: silver;
font-size: 11px;
}
/*# sourceMappingURL=ion.rangeslider.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1 @@
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

View File

@ -0,0 +1,99 @@
/* Style-1 + Style-2 */
.checkbox-style,
.radio-style {
opacity: 0;
position: absolute;
}
.checkbox-style, .radio-style,
.checkbox-style-1-label, .radio-style-1-label,
.checkbox-style-2-label, .radio-style-2-label,
.checkbox-style-3-label, .radio-style-3-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-style-1-label, .radio-style-1-label,
.checkbox-style-2-label, .radio-style-2-label,
.checkbox-style-3-label, .radio-style-3-label { position: relative; }
.checkbox-style-1-label:before, .radio-style-1-label:before,
.checkbox-style-2-label:before, .radio-style-2-label:before,
.checkbox-style-3-label:before, .radio-style-3-label:before {
content: '';
background: #FFF;
border: 2px solid #DDD;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
padding: 4px;
margin-right: 10px;
line-height: 1;
text-align: center;
}
.radio-style-1-label:before,
.radio-style-2-label:before,
.radio-style-3-label:before { border-radius: 50%; }
.checkbox-style:checked + .checkbox-style-1-label:before {
background: #1ABC9C;
background: var(--themecolor);
}
.radio-style:checked + .radio-style-1-label:before { background: #CCC; }
/* Checkbox-small + Radio-small */
.checkbox-style-1-label.checkbox-small:before,
.radio-style-1-label.radio-small:before,
.checkbox-style-2-label.checkbox-small:before,
.radio-style-2-label.radio-small:before,
.checkbox-style-3-label.checkbox-small:before,
.radio-style-3-label.radio-small:before {
border: 2px solid #DDD;
width: 16px;
height: 16px;
margin: 0 8px 1px 0;
}
/* Style-2 */
.checkbox-style:checked + .checkbox-style-2-label:before {
background: #1ABC9C;
background: var(--themecolor);
box-shadow: inset 0px 0px 0px 4px #fff;
}
.radio-style:checked + .radio-style-2-label:before {
background: #ccc;
box-shadow: inset 0px 0px 0px 4px #fff;
}
.checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
/* style-3 */
.checkbox-style:checked + .checkbox-style-3-label:before,
.radio-style:checked + .radio-style-3-label:before {
content: "\e116";
font-family: 'lined-icons';
background: #1ABC9C;
background: var(--themecolor);
color: #FFF;
}
.radio-style:checked + .radio-style-3-label:before {
color: #BBB;
background-color: transparent;
}
/* style-3 - Small */
.checkbox-style + .checkbox-style-3-label.checkbox-small:before,
.radio-style + .radio-style-3-label.radio-small:before {
border: 1px solid #BBB;
width: 16px;
height: 16px;
margin: 0 8px 1px 0;
font-size: 7px;
line-height: .8;
}

View File

@ -0,0 +1,93 @@
/* Style-1 + Style-2 */
.checkbox-style,
.radio-style {
opacity: 0;
position: absolute;
}
.checkbox-style, .radio-style,
.checkbox-style-1-label, .radio-style-1-label,
.checkbox-style-2-label, .radio-style-2-label,
.checkbox-style-3-label, .radio-style-3-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-style-1-label, .radio-style-1-label,
.checkbox-style-2-label, .radio-style-2-label,
.checkbox-style-3-label, .radio-style-3-label { position: relative; }
.checkbox-style-1-label:before, .radio-style-1-label:before,
.checkbox-style-2-label:before, .radio-style-2-label:before,
.checkbox-style-3-label:before, .radio-style-3-label:before {
content: '';
background: #FFF;
border: 2px solid #DDD;
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin-right: 10px;
line-height: 20px;
text-align: center;
}
.radio-style-1-label:before,
.radio-style-2-label:before,
.radio-style-3-label:before { border-radius: 50%; }
.checkbox-style:checked + .checkbox-style-1-label:before { background: var(--cnvs-themecolor); }
.radio-style:checked + .radio-style-1-label:before { background: #CCC; }
/* Checkbox-small + Radio-small */
.checkbox-style-1-label.checkbox-small:before,
.radio-style-1-label.radio-small:before,
.checkbox-style-2-label.checkbox-small:before,
.radio-style-2-label.radio-small:before,
.checkbox-style-3-label.checkbox-small:before,
.radio-style-3-label.radio-small:before {
border: 2px solid #DDD;
width: 16px;
height: 16px;
margin: 0 8px 1px 0;
}
/* Style-2 */
.checkbox-style:checked + .checkbox-style-2-label:before {
background: var(--cnvs-themecolor);
box-shadow: inset 0px 0px 0px 4px #fff;
}
.radio-style:checked + .radio-style-2-label:before {
background: #ccc;
box-shadow: inset 0px 0px 0px 4px #fff;
}
.checkbox-style:checked + .checkbox-style-2-label.checkbox-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
.radio-style:checked + .radio-style-2-label.radio-small:before { box-shadow: inset 0px 0px 0px 2px #fff; }
/* style-3 */
.checkbox-style:checked + .checkbox-style-3-label:before,
.radio-style:checked + .radio-style-3-label:before {
content: "\F633";
font-family: "bootstrap-icons";
background: var(--cnvs-themecolor);
color: #FFF;
}
.radio-style:checked + .radio-style-3-label:before {
color: #BBB;
background-color: transparent;
}
/* style-3 - Small */
.checkbox-style + .checkbox-style-3-label.checkbox-small:before,
.radio-style + .radio-style-3-label.radio-small:before {
border: 1px solid #BBB;
width: 16px;
height: 16px;
margin: 0 8px 1px 0;
font-size: 7px;
line-height: .8;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 694 B

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,7 @@
/* ----------------------------------------------------------------
Custom CSS
Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

View File

@ -0,0 +1,175 @@
@import url("icons/font-awesome.css"); /* Ref: https://fontawesome.com/search?o=r&m=free */
@import url("icons/bootstrap-icons.css"); /* Ref: https://icons.getbootstrap.com/#icons */
@import url("icons/unicons.css"); /* Ref: https://iconscout.com/unicons/explore/line */
[class*="fa-"],
[class*=" fa-"],
[class*="bi-"],
[class*=" bi-"],
[class*="uil-"],
[class*=" uil-"] {
display: inline-block;
line-height: inherit;
font-display: swap;
}
[class*="fa-"]::before,
[class*=" fa-"]::before,
[class*="bi-"]::before,
[class*=" bi-"]::before,
[class*="uil-"]::before,
[class*=" uil-"]::before {
display: inline-flex;
align-self: center;
justify-self: center;
line-height: inherit;
}
.icon-lg {
font-size: 1.3333333333333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.icon-2x {
font-size: 2em;
}
.icon-3x {
font-size: 3em;
}
.icon-4x {
font-size: 4em;
}
.icon-5x {
font-size: 5em;
}
.icon-fw {
width: 1.2857142857142858em;
text-align: center;
}
.icon-border {
padding: 0.2em 0.25em 0.15em;
border: solid 0.08em #eeeeee;
border-radius: 0.1em;
}
.icon.pull-left {
margin-right: 0.3em;
}
.icon.pull-right {
margin-left: 0.3em;
}
.icon-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
.icon-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.icon-rotate-180 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.icon-rotate-270 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.icon-flip-horizontal {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
.icon-stacked {
position: relative;
display: inline-block;
width: 2em;
height: 2em;
line-height: 2em;
vertical-align: middle;
}
.icon-stacked-1x,
.icon-stacked-2x {
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
.rtl .icon-stacked-1x,
.rtl .icon-stacked-2x {
left: auto;
right: 0;
}
.icon-stacked-1x {
line-height: inherit;
}
.icon-stacked-2x {
font-size: 2em;
}
.icon-inverse {
color: #ffffff;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More