wg-ocp-frontend notus-svelte
This commit is contained in:
infidel
27
src/App.svelte
Normal file
27
src/App.svelte
Normal file
@@ -0,0 +1,27 @@
|
||||
<!-- App.svelte -->
|
||||
<script>
|
||||
import { Router, Route } from "svelte-routing";
|
||||
|
||||
// Admin Layout
|
||||
import Admin from "./layouts/Admin.svelte";
|
||||
// Auth Layout
|
||||
import Auth from "./layouts/Auth.svelte";
|
||||
|
||||
// No Layout Pages
|
||||
import Index from "./views/Index.svelte";
|
||||
import Landing from "./views/Landing.svelte";
|
||||
import Profile from "./views/Profile.svelte";
|
||||
|
||||
export let url = "";
|
||||
</script>
|
||||
|
||||
<Router url="{url}">
|
||||
<!-- admin layout -->
|
||||
<Route path="admin/*admin" component="{Admin}" />
|
||||
<!-- auth layout -->
|
||||
<Route path="auth/*auth" component="{Auth}" />
|
||||
<!-- no layout pages -->
|
||||
<Route path="landing" component="{Landing}" />
|
||||
<Route path="profile" component="{Profile}" />
|
||||
<Route path="/" component="{Admin}" />
|
||||
</Router>
|
||||
BIN
src/components/Cards/.CardCreateWGUser.svelte.swp
Normal file
BIN
src/components/Cards/.CardCreateWGUser.svelte.swp
Normal file
Binary file not shown.
BIN
src/components/Cards/.CardSettings.svelte.swp
Normal file
BIN
src/components/Cards/.CardSettings.svelte.swp
Normal file
Binary file not shown.
BIN
src/components/Cards/.CardWGControl.svelte.swp
Normal file
BIN
src/components/Cards/.CardWGControl.svelte.swp
Normal file
Binary file not shown.
BIN
src/components/Cards/.CardWGProfiles.svelte.swp
Normal file
BIN
src/components/Cards/.CardWGProfiles.svelte.swp
Normal file
Binary file not shown.
125
src/components/Cards/CardBarChart.svelte
Normal file
125
src/components/Cards/CardBarChart.svelte
Normal file
@@ -0,0 +1,125 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
// library that creates chart objects in page
|
||||
import Chart from "chart.js";
|
||||
|
||||
// init chart
|
||||
onMount(async () => {
|
||||
let config = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: new Date().getFullYear(),
|
||||
backgroundColor: "#ed64a6",
|
||||
borderColor: "#ed64a6",
|
||||
data: [30, 78, 56, 34, 100, 45, 13],
|
||||
fill: false,
|
||||
barThickness: 8
|
||||
},
|
||||
{
|
||||
label: new Date().getFullYear() - 1,
|
||||
fill: false,
|
||||
backgroundColor: "#4c51bf",
|
||||
borderColor: "#4c51bf",
|
||||
data: [27, 68, 86, 74, 10, 4, 87],
|
||||
barThickness: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: "Orders Chart",
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true,
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "rgba(0,0,0,.4)",
|
||||
},
|
||||
align: "end",
|
||||
position: "bottom",
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Month",
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Value",
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
drawBorder: false,
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.2)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0.15)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
let ctx = document.getElementById("bar-chart").getContext("2d");
|
||||
window.myBar = new Chart(ctx, config);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full max-w-full flex-grow flex-1">
|
||||
<h6 class="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
|
||||
Performance
|
||||
</h6>
|
||||
<h2 class="text-blueGray-700 text-xl font-semibold">
|
||||
Total orders
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-auto">
|
||||
<div class="relative h-350-px">
|
||||
<canvas id="bar-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
111
src/components/Cards/CardCreateWGUser.svelte
Normal file
111
src/components/Cards/CardCreateWGUser.svelte
Normal file
@@ -0,0 +1,111 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="rounded-t bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<form>
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
User Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-username"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="grid-username"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="lucky.jesse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="jesse@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
About Me
|
||||
</h6>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
134
src/components/Cards/CardLineChart.svelte
Normal file
134
src/components/Cards/CardLineChart.svelte
Normal file
@@ -0,0 +1,134 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
// library that creates chart objects in page
|
||||
import Chart from "chart.js";
|
||||
|
||||
// init chart
|
||||
onMount(async () => {
|
||||
var config = {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: new Date().getFullYear(),
|
||||
backgroundColor: "#4c51bf",
|
||||
borderColor: "#4c51bf",
|
||||
data: [65, 78, 66, 44, 56, 67, 75],
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: new Date().getFullYear() - 1,
|
||||
fill: false,
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#fff",
|
||||
data: [40, 68, 86, 74, 56, 60, 87]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: "Sales Charts",
|
||||
fontColor: "white",
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "white",
|
||||
},
|
||||
align: "end",
|
||||
position: "bottom",
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontColor: "rgba(255,255,255,.7)",
|
||||
},
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Month",
|
||||
fontColor: "white",
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineColor: "rgba(0, 0, 0, 0)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontColor: "rgba(255,255,255,.7)",
|
||||
},
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Value",
|
||||
fontColor: "white",
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [3],
|
||||
borderDashOffset: [3],
|
||||
drawBorder: false,
|
||||
color: "rgba(255, 255, 255, 0.15)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
var ctx = document.getElementById("line-chart").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full max-w-full flex-grow flex-1">
|
||||
<h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
|
||||
Overview
|
||||
</h6>
|
||||
<h2 class="text-white text-xl font-semibold">
|
||||
Sales value
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-auto">
|
||||
<!-- Chart -->
|
||||
<div class="relative h-350-px">
|
||||
<canvas id="line-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
167
src/components/Cards/CardPageVisits.svelte
Normal file
167
src/components/Cards/CardPageVisits.svelte
Normal file
@@ -0,0 +1,167 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3 class="font-semibold text-base text-blueGray-700">
|
||||
Page visits
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
|
||||
<button
|
||||
class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
See all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Page name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Visitors
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Unique users
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Bounce rate
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
4,569
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
340
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
|
||||
46,53%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/index.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
3,985
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
319
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-down text-orange-500 mr-4"></i>
|
||||
46,53%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/charts.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
3,513
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
294
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-down text-orange-500 mr-4"></i>
|
||||
36,49%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/tables.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
2,050
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
147
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-up text-emerald-500 mr-4"></i>
|
||||
50,87%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
/argon/profile.html
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
1,795
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
190
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-arrow-down text-red-500 mr-4"></i>
|
||||
46,53%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
84
src/components/Cards/CardProfile.svelte
Normal file
84
src/components/Cards/CardProfile.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script>
|
||||
// core components
|
||||
const team2 = "../assets/img/team-2-800x800.jpg";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg mt-16"
|
||||
>
|
||||
<div class="px-6">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full px-4 flex justify-center">
|
||||
<div class="relative">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team2}"
|
||||
class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-4 text-center mt-20">
|
||||
<div class="flex justify-center py-4 lg:pt-4 pt-8">
|
||||
<div class="mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
22
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Friends</span>
|
||||
</div>
|
||||
<div class="mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Photos</span>
|
||||
</div>
|
||||
<div class="lg:mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
89
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-12">
|
||||
<h3 class="text-xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
|
||||
Jenna Stones
|
||||
</h3>
|
||||
<div
|
||||
class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
|
||||
>
|
||||
<i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
|
||||
Los Angeles, California
|
||||
</div>
|
||||
<div class="mb-2 text-blueGray-600 mt-10">
|
||||
<i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
|
||||
Solution Manager - Creative Tim Officer
|
||||
</div>
|
||||
<div class="mb-2 text-blueGray-600">
|
||||
<i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
|
||||
University of Computer Science
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 py-10 border-t border-blueGray-200 text-center">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full lg:w-9/12 px-4">
|
||||
<p class="mb-4 text-lg leading-relaxed text-blueGray-700">
|
||||
An artist of considerable range, Jenna the name taken by
|
||||
Melbourne-raised, Brooklyn-based Nick Murphy writes, performs and
|
||||
records all of his own music, giving it a warm, intimate feel with a
|
||||
solid groove structure. An artist of considerable range.
|
||||
</p>
|
||||
<a href="#pablo" on:click={(e) => e.preventDefault()} class="font-normal text-red-500">
|
||||
Show more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
186
src/components/Cards/CardSettings.svelte
Normal file
186
src/components/Cards/CardSettings.svelte
Normal file
@@ -0,0 +1,186 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="rounded-t bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<form>
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
User Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-username"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="grid-username"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="lucky.jesse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="jesse@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-first-name"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
id="grid-first-name"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Lucky"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-last-name"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
id="grid-last-name"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Jesse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-12/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-address"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
id="grid-address"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-city"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
id="grid-city"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="New York"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-country"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
id="grid-country"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="United States"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-postal-code"
|
||||
>
|
||||
Postal Code
|
||||
</label>
|
||||
<input
|
||||
id="grid-postal-code"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
value="Postal Code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
About Me
|
||||
</h6>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-12/12 px-4">
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-about-me"
|
||||
>
|
||||
About me
|
||||
</label>
|
||||
<textarea
|
||||
id="grid-about-me"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
rows="4"
|
||||
value="A beautiful UI Kit and Admin for Svelte & Tailwind CSS. It is Free
|
||||
and Open Source."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
190
src/components/Cards/CardSocialTraffic.svelte
Normal file
190
src/components/Cards/CardSocialTraffic.svelte
Normal file
@@ -0,0 +1,190 @@
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3 class="font-semibold text-base text-blueGray-700">
|
||||
Social traffic
|
||||
</h3>
|
||||
</div>
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1 text-right">
|
||||
<button
|
||||
class="bg-indigo-500 text-white active:bg-indigo-600 text-xs font-bold uppercase px-3 py-1 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
See all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Referral
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left"
|
||||
>
|
||||
Visitors
|
||||
</th>
|
||||
<th
|
||||
class="px-6 bg-blueGray-50 text-blueGray-500 align-middle border border-solid border-blueGray-100 py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left min-w-140-px"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Facebook
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
1,480
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">60%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
|
||||
>
|
||||
<div
|
||||
style="width: 60%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Facebook
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
5,480
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">70%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
|
||||
>
|
||||
<div
|
||||
style="width: 70%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Google
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
4,807
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">80%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-purple-200"
|
||||
>
|
||||
<div
|
||||
style="width: 80%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
Instagram
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
3,678
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">75%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-lightBlue-200"
|
||||
>
|
||||
<div
|
||||
style="width: 75%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left"
|
||||
>
|
||||
twitter
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
2,645
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">30%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-orange-200"
|
||||
>
|
||||
<div
|
||||
style="width: 30%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
44
src/components/Cards/CardSpinner.svelte
Normal file
44
src/components/Cards/CardSpinner.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
// core components
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
const bootstrap = "../assets/img/bootstrap.jpg";
|
||||
const angular = "../assets/img/angular.jpg";
|
||||
const sketch = "../assets/img/sketch.jpg";
|
||||
const react = "../assets/img/react.jpg";
|
||||
const vue = "../assets/img/react.jpg";
|
||||
|
||||
const team1 = "../assets/img/team-1-800x800.jpg";
|
||||
const team2 = "../assets/img/team-2-800x800.jpg";
|
||||
const team3 = "../assets/img/team-3-800x800.jpg";
|
||||
const team4 = "../assets/img/team-4-470x470.png";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
Card Tables
|
||||
</h3>
|
||||
<div>
|
||||
<button
|
||||
class="bg-red-500 active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
|
||||
<!-- ... -->
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
51
src/components/Cards/CardStats.svelte
Normal file
51
src/components/Cards/CardStats.svelte
Normal file
@@ -0,0 +1,51 @@
|
||||
<script>
|
||||
// core components
|
||||
|
||||
export let statSubtitle = "...";
|
||||
export let statTitle = "...";
|
||||
// The value must match one of these strings
|
||||
// "up" or "down"
|
||||
export let statArrow = "...";
|
||||
export let statPercent = "...";
|
||||
// can be any of the text color utilities
|
||||
// from tailwindcss
|
||||
export let statPercentColor = "text-emerald-500";
|
||||
export let statDescripiron = "Since last month";
|
||||
export let statIconName = "far fa-chart-bar";
|
||||
// can be any of the background color utilities
|
||||
// from tailwindcss
|
||||
export let statIconColor = "bg-red-500";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg"
|
||||
>
|
||||
<div class="flex-auto p-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="relative w-full pr-4 max-w-full flex-grow flex-1">
|
||||
<h5 class="text-blueGray-400 uppercase font-bold text-xs">
|
||||
{statSubtitle}
|
||||
</h5>
|
||||
<span class="font-semibold text-xl text-blueGray-700">
|
||||
{statTitle}
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative w-auto pl-4 flex-initial">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full {statIconColor}"
|
||||
>
|
||||
<i class="{statIconName}"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-blueGray-400 mt-4">
|
||||
<span class="mr-2 {statPercentColor}">
|
||||
<i
|
||||
class="{statArrow === 'up' ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"
|
||||
></i>
|
||||
{statPercent}%
|
||||
</span>
|
||||
<span class="whitespace-nowrap">{statDescripiron}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
445
src/components/Cards/CardTable.svelte
Normal file
445
src/components/Cards/CardTable.svelte
Normal file
@@ -0,0 +1,445 @@
|
||||
<script>
|
||||
// core components
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
const bootstrap = "../assets/img/bootstrap.jpg";
|
||||
const angular = "../assets/img/angular.jpg";
|
||||
const sketch = "../assets/img/sketch.jpg";
|
||||
const react = "../assets/img/react.jpg";
|
||||
const vue = "../assets/img/react.jpg";
|
||||
|
||||
const team1 = "../assets/img/team-1-800x800.jpg";
|
||||
const team2 = "../assets/img/team-2-800x800.jpg";
|
||||
const team3 = "../assets/img/team-3-800x800.jpg";
|
||||
const team4 = "../assets/img/team-4-470x470.png";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
Card Tables
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="items-center w-full bg-transparent border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Project
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Budget
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Users
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Completion
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{bootstrap}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
Argon Design System
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$2,500 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-orange-500 mr-2"></i> pending
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">60%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
|
||||
>
|
||||
<div
|
||||
style="width: 60%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{angular}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
Angular Now UI Kit PRO
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$1,800 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-emerald-500 mr-2"></i>
|
||||
completed
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">100%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
|
||||
>
|
||||
<div
|
||||
style="width: 100%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{sketch}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
Black Dashboard Sketch
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$3,150 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-red-500 mr-2"></i> delayed
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">73%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-red-200"
|
||||
>
|
||||
<div
|
||||
style="width: 73%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{react}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
React Material Dashboard
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$4,400 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-teal-500 mr-2"></i> on schedule
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">90%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-teal-200"
|
||||
>
|
||||
<div
|
||||
style="width: 90%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"
|
||||
>
|
||||
<img
|
||||
src="{vue}"
|
||||
class="h-12 w-12 bg-white rounded-full border"
|
||||
alt="..."
|
||||
/>
|
||||
<span
|
||||
class="ml-3 font-bold {color === 'light' ? 'btext-blueGray-600' : 'text-whit'}"
|
||||
>
|
||||
React Material Dashboard
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
$2,200 USD
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<i class="fas fa-circle text-emerald-500 mr-2"></i>
|
||||
completed
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src="{team1}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow"
|
||||
/>
|
||||
<img
|
||||
src="{team2}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team3}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
<img
|
||||
src="{team4}"
|
||||
alt="..."
|
||||
class="w-10 h-10 rounded-full border-2 border-blueGray-50 shadow -ml-4"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<span class="mr-2">100%</span>
|
||||
<div class="relative w-full">
|
||||
<div
|
||||
class="overflow-hidden h-2 text-xs flex rounded bg-emerald-200"
|
||||
>
|
||||
<div
|
||||
style="width: 100%;"
|
||||
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
143
src/components/Cards/CardTableInf.svelte
Normal file
143
src/components/Cards/CardTableInf.svelte
Normal file
@@ -0,0 +1,143 @@
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { onMount } from 'svelte';
|
||||
let trColor;
|
||||
let footprint;
|
||||
let infTable = [];
|
||||
onMount(async () => {
|
||||
await axios.get('/api2/wgLogs')
|
||||
.then( response => {
|
||||
infTable = response.data
|
||||
});
|
||||
console.log(infTable);
|
||||
});
|
||||
|
||||
// core components
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
|
||||
function handleMouseOver(e) {
|
||||
trColor = "light";
|
||||
}
|
||||
|
||||
function handleMouseOut(e) {
|
||||
trColor = "dark";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
Accesss Logs
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="table-auto items-center w-full bg-transparent border-collapse">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Mail
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Public Key
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Data In
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Data Out
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Create Time
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
...
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each infTable as infRows}
|
||||
<tr class="{infRows.wgDin < 1 ? 'bg-red-700 border-red-600 text-red-200' : 'None'} ">
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgName }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgMail }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgKey }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgDin/1000000 } MBytes
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgDout/1000000 } MBytes
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgStatus }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.wgTStamp }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
84
src/components/Cards/CardWGControl.svelte
Normal file
84
src/components/Cards/CardWGControl.svelte
Normal file
@@ -0,0 +1,84 @@
|
||||
<script>
|
||||
|
||||
import CardSettings from "components/Cards/CardSettings.svelte";
|
||||
import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
|
||||
import Modal from "components/Modals/Modals.svelte"
|
||||
|
||||
let showModal = false;
|
||||
|
||||
function toggleModal(){
|
||||
showModal = !showModal;
|
||||
console.log("Cunts...");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
<h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
|
||||
Contact Information
|
||||
</h6>
|
||||
<div class="text-center flex justify">
|
||||
<div></div>
|
||||
<div>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click="{toggleModal}"
|
||||
>
|
||||
Create Profile
|
||||
</button>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Apply to System
|
||||
</button>
|
||||
<button
|
||||
class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showModal}
|
||||
<div class="modal z-50 fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none">
|
||||
<div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
|
||||
<div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
|
||||
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalCenteredScrollableLabel">
|
||||
Modal title
|
||||
</h5>
|
||||
<button type="button"
|
||||
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
|
||||
data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body relative p-4">
|
||||
<p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
<p>Just like that.</p>
|
||||
</div>
|
||||
<div
|
||||
class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
|
||||
<button type="button"
|
||||
class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
|
||||
data-bs-dismiss="modal">
|
||||
Close
|
||||
</button>
|
||||
<button type="button"
|
||||
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">
|
||||
Save changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
136
src/components/Cards/CardWGProfiles.svelte
Normal file
136
src/components/Cards/CardWGProfiles.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<script>
|
||||
// import axios from 'axios';
|
||||
// import {onMount} from 'svelte';
|
||||
let footprint;
|
||||
export let wgProfileData = [];
|
||||
// onMount(async () => {
|
||||
// await axios.get('http://127.0.0.1:8000/api2/wgClients')
|
||||
// .then( response => {
|
||||
// wgProfileData = response.data
|
||||
// });
|
||||
// console.log(wgProfileData);
|
||||
// });
|
||||
|
||||
// core components
|
||||
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-4 py-3 border-0">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="relative w-full px-4 max-w-full flex-grow flex-1">
|
||||
<h3
|
||||
class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
|
||||
>
|
||||
User Profiles
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block w-full overflow-x-auto">
|
||||
<!-- Projects table -->
|
||||
<table class="w-full striped hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
#
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Mail
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Assigned IP
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Allowed IP
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Created Time
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each wgProfileData as infRows}
|
||||
<tr>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.data_id }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.name }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.email }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.allocated_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.allowed_ips }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.enabled }
|
||||
</td>
|
||||
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
|
||||
>
|
||||
{ infRows.updated_at }
|
||||
</td>
|
||||
<td
|
||||
class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
|
||||
>
|
||||
<TableDropdown />
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
112
src/components/Dropdowns/IndexDropdown.svelte
Normal file
112
src/components/Dropdowns/IndexDropdown.svelte
Normal file
@@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
Demo Pages
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Admin Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/dashboard"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/settings"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/tables"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Tables
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/maps"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Maps
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Auth Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/login"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/register"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
No Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/landing"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Landing
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/profile"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
64
src/components/Dropdowns/NotificationDropdown.svelte
Normal file
64
src/components/Dropdowns/NotificationDropdown.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="text-blueGray-500 block py-1 px-3"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
<i class="fas fa-bell"></i>
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Another action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Something else here
|
||||
</a>
|
||||
<div class="h-0 my-2 border border-solid border-blueGray-100" />
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Seprated link
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
113
src/components/Dropdowns/PagesDropdown.svelte
Normal file
113
src/components/Dropdowns/PagesDropdown.svelte
Normal file
@@ -0,0 +1,113 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
Demo Pages
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Admin Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/dashboard"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/settings"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/tables"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Tables
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/admin/maps"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Maps
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
Auth Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/login"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/auth/register"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
<div class="h-0 mx-4 my-2 border border-solid border-blueGray-100" />
|
||||
<span
|
||||
class="text-sm pt-2 pb-0 px-4 font-bold block w-full whitespace-nowrap bg-transparent text-blueGray-400"
|
||||
>
|
||||
No Layout
|
||||
</span>
|
||||
<a
|
||||
use:link
|
||||
href="/landing"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Landing
|
||||
</a>
|
||||
<a
|
||||
use:link
|
||||
href="/profile"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
57
src/components/Dropdowns/TableDropdown.svelte
Normal file
57
src/components/Dropdowns/TableDropdown.svelte
Normal file
@@ -0,0 +1,57 @@
|
||||
<script>
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="text-blueGray-500 py-1 px-3"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
<i class="fas fa-ellipsis-v"></i>
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Show Detail
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
76
src/components/Dropdowns/UserDropdown.svelte
Normal file
76
src/components/Dropdowns/UserDropdown.svelte
Normal file
@@ -0,0 +1,76 @@
|
||||
<script>
|
||||
// library for creating dropdown menu appear on click
|
||||
import { createPopper } from "@popperjs/core";
|
||||
|
||||
// core components
|
||||
|
||||
const image = "../assets/img/team-1-800x800.jpg";
|
||||
|
||||
let dropdownPopoverShow = false;
|
||||
|
||||
let btnDropdownRef;
|
||||
let popoverDropdownRef;
|
||||
|
||||
const toggleDropdown = (event) => {
|
||||
event.preventDefault();
|
||||
if (dropdownPopoverShow) {
|
||||
dropdownPopoverShow = false;
|
||||
} else {
|
||||
dropdownPopoverShow = true;
|
||||
createPopper(btnDropdownRef, popoverDropdownRef, {
|
||||
placement: "bottom-start",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<a
|
||||
class="text-blueGray-500 block"
|
||||
href="#pablo"
|
||||
bind:this="{btnDropdownRef}"
|
||||
on:click="{toggleDropdown}"
|
||||
>
|
||||
<div class="items-center flex">
|
||||
<span
|
||||
class="w-12 h-12 text-sm text-white bg-blueGray-200 inline-flex items-center justify-center rounded-full"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="w-full rounded-full align-middle border-none shadow-lg"
|
||||
src="{image}"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
bind:this="{popoverDropdownRef}"
|
||||
class="bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48 {dropdownPopoverShow ? 'block':'hidden'}"
|
||||
>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Another action
|
||||
</a>
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Something else here
|
||||
</a>
|
||||
<div class="h-0 my-2 border border-solid border-blueGray-100" />
|
||||
<a
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>
|
||||
Seprated link
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
163
src/components/Footers/Footer.svelte
Normal file
163
src/components/Footers/Footer.svelte
Normal file
@@ -0,0 +1,163 @@
|
||||
<script>
|
||||
// make dynamic date to be added to footer
|
||||
let date = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<footer class="relative bg-blueGray-200 pt-8 pb-6">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-200 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap text-center lg:text-left">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
|
||||
<h5 class="text-lg mt-0 mb-2 text-blueGray-600">
|
||||
Find us on any of these platforms, we respond 1-2 business days.
|
||||
</h5>
|
||||
<div class="mt-6 lg:mb-0 mb-6">
|
||||
<button
|
||||
class="bg-white text-lightBlue-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-white text-lightBlue-600 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-facebook-square"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-white text-pink-400 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-white text-blueGray-800 shadow-lg font-normal h-10 w-10 items-center justify-center align-center rounded-full outline-none focus:outline-none mr-2"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-github"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class="flex flex-wrap items-top mb-6">
|
||||
<div class="w-full lg:w-4/12 px-4 ml-auto">
|
||||
<span
|
||||
class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
|
||||
>
|
||||
Useful Links
|
||||
</span>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://www.creative-tim.com/presentation?ref=ns-footer"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://blog.creative-tim.com?ref=ns-footer"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://www.github.com/creativetimofficial?ref=ns-footer"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://www.creative-tim.com/bootstrap-themes/free?ref=ns-footer"
|
||||
>
|
||||
Free Products
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<span
|
||||
class="block uppercase text-blueGray-500 text-sm font-semibold mb-2"
|
||||
>
|
||||
Other Resources
|
||||
</span>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://github.com/creativetimofficial/notus-svelte/blob/main/LICENSE.md?ref=ns-footer"
|
||||
>
|
||||
MIT License
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/terms?ref=ns-footer"
|
||||
>
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/privacy?ref=ns-footer"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
|
||||
href="https://creative-tim.com/contact-us?ref=ns-footer"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-6 border-blueGray-300" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4 mx-auto text-center">
|
||||
<div class="text-sm text-blueGray-500 font-semibold py-1">
|
||||
Copyright © {date} Notus Svelte by
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer"
|
||||
class="text-blueGray-500 hover:text-blueGray-800"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
61
src/components/Footers/FooterAdmin.svelte
Normal file
61
src/components/Footers/FooterAdmin.svelte
Normal file
@@ -0,0 +1,61 @@
|
||||
<script>
|
||||
// make dynamic date to be added to footer
|
||||
let date = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<footer class="block py-4">
|
||||
<div class="container mx-auto px-4">
|
||||
<hr class="mb-4 border-b-1 border-blueGray-200" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4">
|
||||
<div
|
||||
class="text-sm text-blueGray-500 font-semibold py-1 text-center md:text-left"
|
||||
>
|
||||
Copyright © {date}
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-admin"
|
||||
class="text-blueGray-500 hover:text-blueGray-700 text-sm font-semibold py-1"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-8/12 px-4">
|
||||
<ul class="flex flex-wrap list-none md:justify-end justify-center">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com/presentation?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://blog.creative-tim.com?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte/blob/main/LICENSE.md?ref=ns-footer-admin"
|
||||
class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
MIT License
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
65
src/components/Footers/FooterSmall.svelte
Normal file
65
src/components/Footers/FooterSmall.svelte
Normal file
@@ -0,0 +1,65 @@
|
||||
<script>
|
||||
// make dynamic date to be added to footer
|
||||
let date = new Date().getFullYear();
|
||||
|
||||
export let absolute = false;
|
||||
</script>
|
||||
|
||||
<footer
|
||||
class="pb-6 {absolute ? 'absolute w-full bottom-0 bg-blueGray-800' : 'relative'}"
|
||||
>
|
||||
<div class="container mx-auto px-4">
|
||||
<hr class="mb-6 border-b-1 border-blueGray-600" />
|
||||
<div class="flex flex-wrap items-center md:justify-between justify-center">
|
||||
<div class="w-full md:w-4/12 px-4">
|
||||
<div
|
||||
class="text-sm text-blueGray-500 font-semibold py-1 text-center md:text-left"
|
||||
>
|
||||
Copyright © {date}
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold py-1"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-8/12 px-4">
|
||||
<ul class="flex flex-wrap list-none md:justify-end justify-center">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Creative Tim
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.creative-tim.com/presentation?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="http://blog.creative-tim.com?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte/blob/main/LICENSE.md?ref=ns-footer-small"
|
||||
class="text-white hover:text-blueGray-300 text-sm font-semibold block py-1 px-3"
|
||||
>
|
||||
MIT License
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
8
src/components/Headers/GlobalHeader.svelte
Normal file
8
src/components/Headers/GlobalHeader.svelte
Normal file
@@ -0,0 +1,8 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative bg-teal-500 md:pt-32 pb-32 pt-12">
|
||||
|
||||
</div>
|
||||
73
src/components/Headers/HeaderStats.svelte
Normal file
73
src/components/Headers/HeaderStats.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script>
|
||||
// core components
|
||||
import axios from 'axios';
|
||||
import { onMount } from 'svelte';
|
||||
import CardStats from "components/Cards/CardStats.svelte";
|
||||
|
||||
let infTable = [];
|
||||
onMount(async () => {
|
||||
await axios.get('/api2/wgClients?param=stats')
|
||||
.then( response => {
|
||||
infTable = response.data
|
||||
});
|
||||
console.log(infTable);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-4 md:px-10 mx-auto w-full">
|
||||
<div>
|
||||
<!-- Card stats -->
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="Connected Now"
|
||||
statTitle="{ infTable.connectedtotal}"
|
||||
statArrow="down"
|
||||
statPercent="3.48"
|
||||
statPercentColor="text-red-500"
|
||||
statDescripiron="Since last week"
|
||||
statIconName="fas fa-chart-pie"
|
||||
statIconColor="bg-teal-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="Total Clients"
|
||||
statTitle="{ infTable.clienttotal }"
|
||||
statArrow="down"
|
||||
statPercent="1.10"
|
||||
statPercentColor="text-orange-500"
|
||||
statDescripiron="Since yesterday"
|
||||
statIconName="fas fa-users"
|
||||
statIconColor="bg-teal-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="TRAFFIC TOTAL"
|
||||
statTitle="{ infTable.traffictotal }"
|
||||
statArrow="up"
|
||||
statPercent="3.48"
|
||||
statPercentColor="text-emerald-500"
|
||||
statDescripiron="Since last month"
|
||||
statIconName="far fa-chart-bar"
|
||||
statIconColor="bg-teal-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
|
||||
<CardStats
|
||||
statSubtitle="Never Connnected"
|
||||
statTitle="{infTable.brokentotal}"
|
||||
statArrow="up"
|
||||
statPercent="12"
|
||||
statPercentColor="text-emerald-500"
|
||||
statDescripiron="Since last month"
|
||||
statIconName="fas fa-users"
|
||||
statIconColor="bg-red-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
89
src/components/Maps/MapExample.svelte
Normal file
89
src/components/Maps/MapExample.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
|
||||
// init google maps
|
||||
onMount(async () => {
|
||||
let google = window.google;
|
||||
let map = document.getElementById("map-canvas");
|
||||
let lat = map.getAttribute("data-lat");
|
||||
let lng = map.getAttribute("data-lng");
|
||||
|
||||
const myLatlng = new google.maps.LatLng(lat, lng);
|
||||
const mapOptions = {
|
||||
zoom: 12,
|
||||
scrollwheel: false,
|
||||
center: myLatlng,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
styles: [
|
||||
{
|
||||
featureType: "administrative",
|
||||
elementType: "labels.text.fill",
|
||||
stylers: [{ color: "#444444" }],
|
||||
},
|
||||
{
|
||||
featureType: "landscape",
|
||||
elementType: "all",
|
||||
stylers: [{ color: "#f2f2f2" }],
|
||||
},
|
||||
{
|
||||
featureType: "poi",
|
||||
elementType: "all",
|
||||
stylers: [{ visibility: "off" }],
|
||||
},
|
||||
{
|
||||
featureType: "road",
|
||||
elementType: "all",
|
||||
stylers: [{ saturation: -100 }, { lightness: 45 }],
|
||||
},
|
||||
{
|
||||
featureType: "road.highway",
|
||||
elementType: "all",
|
||||
stylers: [{ visibility: "simplified" }],
|
||||
},
|
||||
{
|
||||
featureType: "road.arterial",
|
||||
elementType: "labels.icon",
|
||||
stylers: [{ visibility: "off" }],
|
||||
},
|
||||
{
|
||||
featureType: "transit",
|
||||
elementType: "all",
|
||||
stylers: [{ visibility: "off" }],
|
||||
},
|
||||
{
|
||||
featureType: "water",
|
||||
elementType: "all",
|
||||
stylers: [{ color: "#ed8936" }, { visibility: "on" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
map = new google.maps.Map(map, mapOptions);
|
||||
|
||||
const marker = new google.maps.Marker({
|
||||
position: myLatlng,
|
||||
map: map,
|
||||
animation: google.maps.Animation.DROP,
|
||||
title: "Hello World!",
|
||||
});
|
||||
|
||||
const contentString =
|
||||
'<div class="info-window-content"><h2>Notus Svelte</h2>' +
|
||||
"<p>A beautiful UI Kit and Admin for Tailwind CSS. It is Free and Open Source.</p></div>";
|
||||
|
||||
const infowindow = new google.maps.InfoWindow({
|
||||
content: contentString,
|
||||
});
|
||||
|
||||
google.maps.event.addListener(marker, "click", function () {
|
||||
infowindow.open(map, marker);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="map-canvas"
|
||||
class="relative w-full rounded h-600-px"
|
||||
data-lat="40.748817"
|
||||
data-lng="-73.985428"
|
||||
></div>
|
||||
1
src/components/Modals/Modals.svelte
Normal file
1
src/components/Modals/Modals.svelte
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
43
src/components/Navbars/AdminNavbar.svelte
Normal file
43
src/components/Navbars/AdminNavbar.svelte
Normal file
@@ -0,0 +1,43 @@
|
||||
<script>
|
||||
// core components
|
||||
import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
|
||||
</script>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav
|
||||
class="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4"
|
||||
>
|
||||
<div
|
||||
class="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4"
|
||||
>
|
||||
<!-- Brand -->
|
||||
<a
|
||||
class="text-white text-sm uppercase hidden lg:inline-block font-semibold"
|
||||
href="#pablo" on:click={(e) => e.preventDefault()}
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<!-- Form -->
|
||||
<form
|
||||
class="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3"
|
||||
>
|
||||
<div class="relative flex w-full flex-wrap items-stretch">
|
||||
<span
|
||||
class="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
|
||||
>
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search here..."
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<!-- User -->
|
||||
<ul class="flex-col md:flex-row list-none items-center hidden md:flex">
|
||||
<UserDropdown />
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
109
src/components/Navbars/AuthNavbar.svelte
Normal file
109
src/components/Navbars/AuthNavbar.svelte
Normal file
@@ -0,0 +1,109 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import PagesDropdown from "components/Dropdowns/PagesDropdown.svelte";
|
||||
|
||||
let navbarOpen = false;
|
||||
|
||||
function setNavbarOpen() {
|
||||
navbarOpen = !navbarOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="top-0 absolute z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg"
|
||||
>
|
||||
<div
|
||||
class="container px-4 mx-auto flex flex-wrap items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"
|
||||
>
|
||||
<a
|
||||
use:link
|
||||
class="text-white text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
<button
|
||||
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
|
||||
type="button"
|
||||
on:click="{setNavbarOpen}"
|
||||
>
|
||||
<i class="text-white fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="lg:flex flex-grow items-center bg-white lg:bg-opacity-0 lg:shadow-none rounded shadow-lg {navbarOpen ? 'block':'hidden'}"
|
||||
id="example-navbar-warning"
|
||||
>
|
||||
<ul class="flex flex-col lg:flex-row list-none mr-auto">
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-auth-navbar"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2"
|
||||
/>
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
|
||||
<li class="flex items-center">
|
||||
<PagesDropdown />
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F%23%2F"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 fab fa-facebook text-lg leading-lg"
|
||||
/>
|
||||
<span class="lg:hidden inline-block ml-2">Share</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Svelte%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Svelte%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 fab fa-twitter text-lg leading-lg"
|
||||
/>
|
||||
<span class="lg:hidden inline-block ml-2">Tweet</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="lg:text-white lg:hover:text-blueGray-200 text-blueGray-700 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-auth-navbar"
|
||||
target="_blank"
|
||||
>
|
||||
<i
|
||||
class="lg:text-blueGray-200 text-blueGray-400 fab fa-github text-lg leading-lg"
|
||||
/>
|
||||
<span class="lg:hidden inline-block ml-2">Star</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<button
|
||||
class="bg-white text-blueGray-700 active:bg-blueGray-50 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<i class="fas fa-arrow-alt-circle-down"></i> Download
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
101
src/components/Navbars/IndexNavbar.svelte
Normal file
101
src/components/Navbars/IndexNavbar.svelte
Normal file
@@ -0,0 +1,101 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import IndexDropdown from "components/Dropdowns/IndexDropdown.svelte";
|
||||
|
||||
let navbarOpen = false;
|
||||
|
||||
function setNavbarOpen() {
|
||||
navbarOpen = !navbarOpen;
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="top-0 fixed z-50 w-full flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-white shadow"
|
||||
>
|
||||
<div
|
||||
class="container px-4 mx-auto flex flex-wrap items-center justify-between"
|
||||
>
|
||||
<div
|
||||
class="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start"
|
||||
>
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
<button
|
||||
class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
|
||||
type="button"
|
||||
on:click="{setNavbarOpen}"
|
||||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="lg:flex flex-grow items-center {navbarOpen ? 'block':'hidden'}"
|
||||
id="example-navbar-warning"
|
||||
>
|
||||
<ul class="flex flex-col lg:flex-row list-none mr-auto">
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index-navbar"
|
||||
>
|
||||
<i class="text-blueGray-400 far fa-file-alt text-lg leading-lg mr-2" />
|
||||
Docs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
|
||||
<li class="flex items-center">
|
||||
<IndexDropdown />
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F%23%2F"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="text-blueGray-400 fab fa-facebook text-lg leading-lg" />
|
||||
<span class="lg:hidden inline-block ml-2">Share</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnotus-svelte%2F&text=Start%20your%20development%20with%20a%20Free%20Tailwind%20CSS%20and%20Svelte%20UI%20Kit%20and%20Admin.%20Let%20Notus%20Svelte%20amaze%20you%20with%20its%20cool%20features%20and%20build%20tools%20and%20get%20your%20project%20to%20a%20whole%20new%20level."
|
||||
target="_blank"
|
||||
>
|
||||
<i class="text-blueGray-400 fab fa-twitter text-lg leading-lg" />
|
||||
<span class="lg:hidden inline-block ml-2">Tweet</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<a
|
||||
class="hover:text-blueGray-500 text-blueGray-700 px-3 py-2 flex items-center text-xs uppercase font-bold"
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index-navbar"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="text-blueGray-400 fab fa-github text-lg leading-lg" />
|
||||
<span class="lg:hidden inline-block ml-2">Star</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="flex items-center">
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 text-xs font-bold uppercase px-4 py-2 rounded shadow hover:shadow-lg outline-none focus:outline-none lg:mr-1 lg:mb-0 ml-3 mb-3 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<i class="fas fa-arrow-alt-circle-down"></i> Download
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
347
src/components/Sidebar/Sidebar.svelte
Normal file
347
src/components/Sidebar/Sidebar.svelte
Normal file
@@ -0,0 +1,347 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import NotificationDropdown from "components/Dropdowns/NotificationDropdown.svelte";
|
||||
import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
|
||||
|
||||
let collapseShow = "hidden";
|
||||
|
||||
function toggleCollapseShow(classes) {
|
||||
collapseShow = classes;
|
||||
}
|
||||
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class="md:left-0 md:block md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-nowrap md:overflow-hidden shadow-xl bg-white flex flex-wrap items-center justify-between relative md:w-64 z-10 py-4 px-6"
|
||||
>
|
||||
<div
|
||||
class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
|
||||
>
|
||||
<!-- Toggler -->
|
||||
<button
|
||||
class="cursor-pointer text-black opacity-50 md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
|
||||
type="button"
|
||||
on:click={() => toggleCollapseShow('bg-white m-2 py-3 px-6')}
|
||||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<!-- Brand -->
|
||||
<a
|
||||
use:link
|
||||
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
<!-- User -->
|
||||
<ul class="md:hidden items-center flex flex-wrap list-none">
|
||||
<li class="inline-block relative">
|
||||
<NotificationDropdown />
|
||||
</li>
|
||||
<li class="inline-block relative">
|
||||
<UserDropdown />
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Collapse -->
|
||||
<div
|
||||
class="md:flex md:flex-col md:items-stretch md:opacity-100 md:relative md:mt-4 md:shadow-none shadow absolute top-0 left-0 right-0 z-40 overflow-y-auto overflow-x-hidden h-auto items-center flex-1 rounded {collapseShow}"
|
||||
>
|
||||
<!-- Collapse header -->
|
||||
<div
|
||||
class="md:min-w-full md:hidden block pb-4 mb-4 border-b border-solid border-blueGray-200"
|
||||
>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-6/12">
|
||||
<a
|
||||
use:link
|
||||
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
||||
href="/"
|
||||
>
|
||||
Notus Svelte
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-6/12 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="cursor-pointer text-black opacity-50 md:hidden px-3 py-1 text-xl leading-none bg-transparent rounded border border-solid border-transparent"
|
||||
on:click={() => toggleCollapseShow('hidden')}
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form -->
|
||||
<form class="mt-6 mb-4 md:hidden">
|
||||
<div class="mb-3 pt-0">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
class="border-0 px-3 py-2 h-12 border border-solid border-blueGray-500 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-base leading-snug shadow-none outline-none focus:outline-none w-full font-normal"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Admin Layout Pages
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none">
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/dashboard"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/dashboard') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-tv mr-2 text-sm {location.href.indexOf('/admin/dashboard') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/wgLogs"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
WireGuard Logs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/wgProfiles"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
WireGuard Profiles
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/settings"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/settings') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-tools mr-2 text-sm {location.href.indexOf('/admin/settings') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/tables"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
href="/admin/maps"
|
||||
class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/maps') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
|
||||
>
|
||||
<i
|
||||
class="fas fa-map-marked mr-2 text-sm {location.href.indexOf('/admin/maps') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
|
||||
></i>
|
||||
Maps
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Auth Layout Pages
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/auth/login"
|
||||
>
|
||||
<i class="fas fa-fingerprint text-blueGray-300 mr-2 text-sm"></i>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/auth/register"
|
||||
>
|
||||
<i class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"></i>
|
||||
Register
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
No Layout Pages
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/landing"
|
||||
>
|
||||
<i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm"></i>
|
||||
Landing Page
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="items-center">
|
||||
<a
|
||||
use:link
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="/profile"
|
||||
>
|
||||
<i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm"></i>
|
||||
Profile Page
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Divider -->
|
||||
<hr class="my-4 md:min-w-full" />
|
||||
<!-- Heading -->
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Documentation
|
||||
</h6>
|
||||
<!-- Navigation -->
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/colors/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"></i>
|
||||
Styles
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base"></i>
|
||||
CSS Components
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-angular mr-2 text-blueGray-300 text-base"></i>
|
||||
Angular
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-js-square mr-2 text-blueGray-300 text-base"></i>
|
||||
Javascript
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
|
||||
NextJS
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
|
||||
React
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fas fa-link mr-2 text-blueGray-300 text-base"></i>
|
||||
Svelte
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
|
||||
target="_blank"
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
>
|
||||
<i class="fab fa-vuejs mr-2 text-blueGray-300 text-base"></i>
|
||||
VueJS
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
24
src/components/Types/spinner.type.ts
Normal file
24
src/components/Types/spinner.type.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
export type SpinnerTypes = {
|
||||
size: string | number;
|
||||
color: string;
|
||||
unit: string;
|
||||
duration: string;
|
||||
pause: boolean;
|
||||
};
|
||||
|
||||
export type Circle2Types = {
|
||||
colorOuter: string;
|
||||
colorCenter: string;
|
||||
colorInner: string;
|
||||
durationMultiplier: number;
|
||||
durationOuter: string;
|
||||
durationInner: string;
|
||||
durationCenter: string;
|
||||
} & SpinnerTypes;
|
||||
|
||||
export type Circle3Types = {
|
||||
ballTopLeft: string;
|
||||
ballTopRight: string;
|
||||
ballBottomLeft: string;
|
||||
ballBottomRight: string;
|
||||
} & SpinnerTypes;
|
||||
40
src/layouts/Admin.svelte
Normal file
40
src/layouts/Admin.svelte
Normal file
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import { Router, Route } from "svelte-routing";
|
||||
|
||||
// components for this layout
|
||||
import AdminNavbar from "components/Navbars/AdminNavbar.svelte";
|
||||
import Sidebar from "components/Sidebar/Sidebar.svelte";
|
||||
import HeaderStats from "components/Headers/HeaderStats.svelte";
|
||||
import FooterAdmin from "components/Footers/FooterAdmin.svelte";
|
||||
import GlobalHeader from "components/Headers/GlobalHeader.svelte";
|
||||
|
||||
// pages for this layout
|
||||
import Dashboard from "views/admin/Dashboard.svelte";
|
||||
import Settings from "views/admin/Settings.svelte";
|
||||
import Tables from "views/admin/Tables.svelte";
|
||||
import wgLogs from "views/admin/wgLogs.svelte";
|
||||
import wgProfiles from "views/admin/wgProfiles.svelte";
|
||||
import Maps from "views/admin/Maps.svelte";
|
||||
|
||||
export let location;
|
||||
export let admin = "";
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<Sidebar location={location}/>
|
||||
<div class="relative md:ml-64 bg-blueGray-100">
|
||||
<AdminNavbar />
|
||||
<GlobalHeader />
|
||||
<div class="px-4 md:px-10 mx-auto w-full -m-24">
|
||||
<Router url="admin">
|
||||
<Route path="dashboard" component="{Dashboard}" />
|
||||
<Route path="settings" component="{Settings}" />
|
||||
<Route path="tables" component="{Tables}" />
|
||||
<Route path="wgLogs" component="{wgLogs}" />
|
||||
<Route path="wgProfiles" component="{wgProfiles}" />
|
||||
<Route path="maps" component="{Maps}" />
|
||||
</Router>
|
||||
<FooterAdmin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
src/layouts/Auth.svelte
Normal file
32
src/layouts/Auth.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<script>
|
||||
import { Router, Route } from "svelte-routing";
|
||||
|
||||
// components for this layout
|
||||
import AuthNavbar from "components/Navbars/AuthNavbar.svelte";
|
||||
import FooterSmall from "components/Footers/FooterSmall.svelte";
|
||||
|
||||
// pages for this layout
|
||||
import Login from "views/auth/Login.svelte";
|
||||
import Register from "views/auth/Register.svelte";
|
||||
|
||||
const registerBg2 = "../assets/img/register_bg_2.png";
|
||||
export let location;
|
||||
export let auth = "";
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<AuthNavbar />
|
||||
<main>
|
||||
<section class="relative w-full h-full py-40 min-h-screen">
|
||||
<div
|
||||
class="absolute top-0 w-full h-full bg-blueGray-800 bg-no-repeat bg-full"
|
||||
style="background-image: url({registerBg2});"
|
||||
></div>
|
||||
<Router url="auth">
|
||||
<Route path="login" component="{Login}" />
|
||||
<Route path="register" component="{Register}" />
|
||||
</Router>
|
||||
<FooterSmall absolute="true" />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
7
src/main.js
Normal file
7
src/main.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById("app"),
|
||||
});
|
||||
|
||||
export default app;
|
||||
744
src/views/Index.svelte
Normal file
744
src/views/Index.svelte
Normal file
@@ -0,0 +1,744 @@
|
||||
<script>
|
||||
import { Link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import IndexNavbar from "components/Navbars/IndexNavbar.svelte";
|
||||
import Footer from "components/Footers/Footer.svelte";
|
||||
|
||||
const patternVue = "/assets/img/pattern_svelte.png";
|
||||
const componentBtn = "/assets/img/component-btn.png";
|
||||
const componentProfileCard = "/assets/img/component-profile-card.png";
|
||||
const componentInfoCard = "/assets/img/component-info-card.png";
|
||||
const componentInfo2 = "/assets/img/component-info-2.png";
|
||||
const componentMenu = "/assets/img/component-menu.png";
|
||||
const componentBtnPink = "/assets/img/component-btn-pink.png";
|
||||
const documentation = "/assets/img/documentation.png";
|
||||
const login = "/assets/img/login.jpg";
|
||||
const profile = "/assets/img/profile.jpg";
|
||||
const landing = "/assets/img/landing.jpg";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<IndexNavbar />
|
||||
<section class="header relative pt-16 items-center flex h-screen max-h-860-px">
|
||||
<div class="container mx-auto items-center flex flex-wrap">
|
||||
<div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-4">
|
||||
<div class="pt-32 sm:pt-0">
|
||||
<h2 class="font-semibold text-4xl text-blueGray-600">
|
||||
Notus Svelte - A beautiful extension for Tailwind CSS.
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
|
||||
Notus Svelte is Free and Open Source. It does not change any of the CSS from
|
||||
<a
|
||||
href="https://tailwindcss.com/?ref=creativetim"
|
||||
class="text-blueGray-600"
|
||||
target="_blank"
|
||||
>
|
||||
Tailwind CSS.
|
||||
</a>
|
||||
It features multiple HTML elements and it comes with dynamic
|
||||
components for ReactJS, Vue and Angular.
|
||||
</p>
|
||||
<div class="mt-12">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index"
|
||||
class="github-star ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
||||
target="_blank"
|
||||
>
|
||||
Github Star
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="absolute top-0 b-auto right-0 pt-16 sm:w-6/12 -mt-48 sm:mt-0 w-10/12 max-h-860-px"
|
||||
src="{patternVue}"
|
||||
alt="..."
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section class="mt-48 md:mt-40 pb-40 relative bg-blueGray-100">
|
||||
<div
|
||||
class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-100 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div
|
||||
class="w-10/12 md:w-6/12 lg:w-4/12 px-12 md:px-4 mr-auto ml-auto -mt-32"
|
||||
>
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-red-400"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
|
||||
class="w-full align-middle rounded-t-lg"
|
||||
/>
|
||||
<blockquote class="relative p-8 mb-4">
|
||||
<svg
|
||||
preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 583 95"
|
||||
class="absolute left-0 w-full block h-95-px -top-94-px"
|
||||
>
|
||||
<polygon
|
||||
points="-30,95 583,95 583,65"
|
||||
class="text-red-400 fill-current"
|
||||
></polygon>
|
||||
</svg>
|
||||
<h4 class="text-xl font-bold text-white">
|
||||
Great for your awesome project
|
||||
</h4>
|
||||
<p class="text-md font-light mt-2 text-white">
|
||||
Putting together a page has never been easier than matching
|
||||
together pre-made components. From landing pages presentation to
|
||||
login areas, you can easily customise and built your pages.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-6/12 px-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-6/12 px-4">
|
||||
<div class="relative flex flex-col mt-4">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-sitemap"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">
|
||||
CSS Components
|
||||
</h6>
|
||||
<p class="mb-4 text-blueGray-500">
|
||||
Notus Svelte comes with a huge number of Fully Coded CSS
|
||||
components.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col min-w-0">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-drafting-compass"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">
|
||||
JavaScript Components
|
||||
</h6>
|
||||
<p class="mb-4 text-blueGray-500">
|
||||
We also feature many dynamic components for React, NextJS, Vue
|
||||
and Angular.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 px-4">
|
||||
<div class="relative flex flex-col min-w-0 mt-4">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-newspaper"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">Pages</h6>
|
||||
<p class="mb-4 text-blueGray-500">
|
||||
This extension also comes with 3 sample pages. They are fully
|
||||
coded so you can start working instantly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col min-w-0">
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-file-alt"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mb-1 font-semibold">
|
||||
Documentation
|
||||
</h6>
|
||||
<p class="mb-4 text-blueGray-500">
|
||||
Built by developers for developers. You will love how easy is
|
||||
to to work with Notus Svelte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto overflow-hidden pb-20">
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-sitemap text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal">
|
||||
CSS Components
|
||||
</h3>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
|
||||
Every element that you need in a product comes built in as a
|
||||
component. All components fit perfectly with each other and can have
|
||||
different colours.
|
||||
</p>
|
||||
<div class="block pb-6">
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Buttons
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Inputs
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Labels
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Menus
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Navbars
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Pagination
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Progressbars
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Typography
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"
|
||||
>
|
||||
View All
|
||||
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-5/12 px-4 mr-auto ml-auto mt-32">
|
||||
<div class="relative flex flex-col min-w-0 w-full mb-6 mt-48 md:mt-0">
|
||||
<img
|
||||
alt="..."
|
||||
src="{componentBtn}"
|
||||
class="w-full align-middle rounded absolute shadow-lg max-w-100-px left-145-px -top-29-px z-3"
|
||||
/>
|
||||
<img
|
||||
alt="..."
|
||||
src="{componentProfileCard}"
|
||||
class="w-full align-middle rounded-lg absolute shadow-lg max-w-210-px left-260-px -top-160-px"
|
||||
/>
|
||||
<img
|
||||
alt="..."
|
||||
src="{componentInfoCard}"
|
||||
class="w-full align-middle rounded-lg absolute shadow-lg max-w-180-px left-40-px -top-225-px z-2"
|
||||
/>
|
||||
<img
|
||||
alt="..."
|
||||
src="{componentInfo2}"
|
||||
class="w-full align-middle rounded-lg absolute shadow-2xl max-w-200-px -left-50-px top-25-px"
|
||||
/>
|
||||
<img
|
||||
alt="..."
|
||||
src="{componentMenu}"
|
||||
class="w-full align-middle rounded absolute shadow-lg max-w-580-px -left-20-px top-210-px"
|
||||
/>
|
||||
<img
|
||||
alt="..."
|
||||
src="{componentBtnPink}"
|
||||
class="w-full align-middle rounded absolute shadow-xl max-w-120-px left-195-px top-95-px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center pt-32">
|
||||
<div class="w-full md:w-6/12 px-4 mr-auto ml-auto mt-32">
|
||||
<div class="justify-center flex flex-wrap relative">
|
||||
<div class="my-4 w-full lg:w-6/12 px-4">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="bg-red-600 shadow-lg rounded-lg text-center p-8"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
|
||||
src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/svelte.jpg"
|
||||
/>
|
||||
<p class="text-lg text-white mt-4 font-semibold">
|
||||
Svelte
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="bg-lightBlue-500 shadow-lg rounded-lg text-center p-8 mt-8">
|
||||
<img
|
||||
alt="..."
|
||||
class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
|
||||
src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react.jpg"
|
||||
/>
|
||||
<p class="text-lg text-white mt-4 font-semibold">
|
||||
ReactJS
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="bg-blueGray-700 shadow-lg rounded-lg text-center p-8 mt-8"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
|
||||
src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/nextjs.jpg"
|
||||
/>
|
||||
<p class="text-lg text-white mt-4 font-semibold">
|
||||
NextJS
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="my-4 w-full lg:w-6/12 px-4 lg:mt-16">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/js/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="bg-yellow-500 shadow-lg rounded-lg text-center p-8">
|
||||
<img
|
||||
alt="..."
|
||||
class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
|
||||
src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/js.png"
|
||||
/>
|
||||
<p class="text-lg text-white mt-4 font-semibold">
|
||||
JavaScript
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/angular/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="bg-red-700 shadow-lg rounded-lg text-center p-8 mt-8">
|
||||
<img
|
||||
alt="..."
|
||||
class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
|
||||
src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/angular.jpg"
|
||||
/>
|
||||
<p class="text-lg text-white mt-4 font-semibold">
|
||||
Angular
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/vue/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="bg-emerald-500 shadow-lg rounded-lg text-center p-8 mt-8"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="shadow-md rounded-full max-w-full w-16 mx-auto p-2 bg-white"
|
||||
src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/vue.jpg"
|
||||
/>
|
||||
<p class="text-lg text-white mt-4 font-semibold">
|
||||
Vue.js
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-4/12 px-12 md:px-4 ml-auto mr-auto mt-48">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-drafting-compass text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal">
|
||||
Javascript Components
|
||||
</h3>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
|
||||
In order to create a great User Experience some components require
|
||||
JavaScript. In this way you can manipulate the elements on the page
|
||||
and give more options to your users.
|
||||
</p>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600">
|
||||
We created a set of Components that are dynamic and come to help you.
|
||||
</p>
|
||||
<div class="block pb-6">
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Alerts
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Dropdowns
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Menus
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Modals
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Navbars
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Popovers
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Tabs
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-white uppercase last:mr-0 mr-2 mt-2"
|
||||
>
|
||||
Tooltips
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
class="font-bold text-blueGray-700 hover:text-blueGray-500 ease-linear transition-all duration-150"
|
||||
>
|
||||
View all
|
||||
<i class="fa fa-angle-double-right ml-1 leading-relaxed"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 pb-32 pt-48">
|
||||
<div class="items-center flex flex-wrap">
|
||||
<div class="w-full md:w-5/12 ml-auto px-12 md:px-4">
|
||||
<div class="md:pr-12">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-file-alt text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-semibold">
|
||||
Complex Documentation
|
||||
</h3>
|
||||
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
|
||||
This extension comes a lot of fully coded examples that help you get
|
||||
started faster. You can adjust the colors and also the programming
|
||||
language. You can change the text and images and you're good to go.
|
||||
</p>
|
||||
<ul class="list-none mt-6">
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
|
||||
>
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500">
|
||||
Built by Developers for Developers
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
|
||||
>
|
||||
<i class="fab fa-html5"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500">
|
||||
Carefully crafted code for Components
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-500 bg-blueGray-50 mr-3"
|
||||
>
|
||||
<i class="far fa-paper-plane"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500">
|
||||
Dynamic Javascript Components
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-6/12 mr-auto px-4 pt-24 md:pt-0">
|
||||
<img
|
||||
alt="..."
|
||||
class="max-w-full rounded-lg shadow-xl"
|
||||
style="
|
||||
transform: scale(1) perspective(1040px) rotateY(-11deg)
|
||||
rotateX(2deg) rotate(2deg);
|
||||
"
|
||||
src="{documentation}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="justify-center text-center flex flex-wrap mt-24">
|
||||
<div class="w-full md:w-6/12 px-12 md:px-4">
|
||||
<h2 class="font-semibold text-4xl">Beautiful Example Pages</h2>
|
||||
<p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-500">
|
||||
Notus Svelte is a completly new product built using our past
|
||||
experience in web templates. Take the examples we made for you and start
|
||||
playing with them.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block relative z-1 bg-blueGray-600">
|
||||
<div class="container mx-auto">
|
||||
<div class="justify-center flex flex-wrap">
|
||||
<div class="w-full lg:w-12/12 px-4 -mt-24">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h5 class="text-xl font-semibold pb-4 text-center">
|
||||
Login Page
|
||||
</h5>
|
||||
<Link to="/auth/login">
|
||||
<div
|
||||
class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="align-middle border-none max-w-full h-auto rounded-lg"
|
||||
src="{login}"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h5 class="text-xl font-semibold pb-4 text-center">
|
||||
Profile Page
|
||||
</h5>
|
||||
<Link to="/profile">
|
||||
<div
|
||||
class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="align-middle border-none max-w-full h-auto rounded-lg"
|
||||
src="{profile}"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h5 class="text-xl font-semibold pb-4 text-center">
|
||||
Landing Page
|
||||
</h5>
|
||||
<Link to="/landing">
|
||||
<div
|
||||
class="hover:-mt-4 relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="align-middle border-none max-w-full h-auto rounded-lg"
|
||||
src="{landing}"
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-blueGray-600 overflow-hidden">
|
||||
<div class="container mx-auto pb-64">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full md:w-5/12 px-12 md:px-4 ml-auto mr-auto md:mt-64">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-code-branch text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal text-white">
|
||||
Open Source
|
||||
</h3>
|
||||
<p class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-400">
|
||||
Since
|
||||
<a
|
||||
href="https://tailwindcss.com/?ref=creativetim"
|
||||
class="text-blueGray-300"
|
||||
target="_blank"
|
||||
>
|
||||
Tailwind CSS
|
||||
</a>
|
||||
is an open source project we wanted to continue this movement too. You
|
||||
can give this version a try to feel the design and also test the
|
||||
quality of the code!
|
||||
</p>
|
||||
<p class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-400">
|
||||
Get it free on Github and please help us spread the news with a Star!
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index"
|
||||
target="_blank"
|
||||
class="github-star mt-4 inline-block text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
Github Star
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-4/12 px-4 mr-auto ml-auto mt-32 relative">
|
||||
<i
|
||||
class="fab fa-github text-blueGray-700 text-55 absolute -top-150-px -right-100 left-auto opacity-80"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pb-16 bg-blueGray-200 relative pt-32">
|
||||
<div
|
||||
class="-mt-20 top-0 bottom-auto left-0 right-0 w-full absolute h-20"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-200 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto">
|
||||
<div
|
||||
class="flex flex-wrap justify-center bg-white shadow-xl rounded-lg -mt-64 py-16 px-12 relative z-10"
|
||||
>
|
||||
<div class="w-full text-center lg:w-8/12">
|
||||
<p class="text-4xl text-center">
|
||||
<span role="img" aria-label="love">
|
||||
😍
|
||||
</span>
|
||||
</p>
|
||||
<h3 class="font-semibold text-3xl">
|
||||
Do you love this Starter Kit?
|
||||
</h3>
|
||||
<p class="text-blueGray-500 text-lg leading-relaxed mt-4 mb-4">
|
||||
Cause if you do, it can be yours now. Hit the buttons below to
|
||||
navigate to get the Free version for your next project. Build a new
|
||||
web app or give an old project a new look!
|
||||
</p>
|
||||
<div class="sm:block flex flex-col mt-10">
|
||||
<a
|
||||
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus?ref=ns-index"
|
||||
target="_blank"
|
||||
class="get-started text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-2 bg-red-400 active:bg-red-500 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/creativetimofficial/notus-svelte?ref=ns-index"
|
||||
target="_blank"
|
||||
class="github-star sm:ml-1 text-white font-bold px-6 py-4 rounded outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 active:bg-blueGray-600 uppercase text-sm shadow hover:shadow-lg ease-linear transition-all duration-150"
|
||||
>
|
||||
<i class="fab fa-github text-lg mr-1"></i>
|
||||
<span>Help With a Star</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center mt-16"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Footer />
|
||||
603
src/views/Landing.svelte
Normal file
603
src/views/Landing.svelte
Normal file
@@ -0,0 +1,603 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
import AuthNavbar from "components/Navbars/AuthNavbar.svelte";
|
||||
import Footer from "components/Footers/Footer.svelte";
|
||||
|
||||
const team1 = "/assets/img/team-1-800x800.jpg";
|
||||
const team2 = "/assets/img/team-2-800x800.jpg";
|
||||
const team3 = "/assets/img/team-3-800x800.jpg";
|
||||
const team4 = "/assets/img/team-4-470x470.png";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<AuthNavbar />
|
||||
<main>
|
||||
<div
|
||||
class="relative pt-16 pb-32 flex content-center items-center justify-center min-h-screen-75"
|
||||
>
|
||||
<div
|
||||
class="absolute top-0 w-full h-full bg-center bg-cover"
|
||||
style="
|
||||
background-image: url(https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80);
|
||||
"
|
||||
>
|
||||
<span
|
||||
id="blackOverlay"
|
||||
class="w-full h-full absolute opacity-75 bg-black"
|
||||
></span>
|
||||
</div>
|
||||
<div class="container relative mx-auto">
|
||||
<div class="items-center flex flex-wrap">
|
||||
<div class="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center">
|
||||
<div class="pr-12">
|
||||
<h1 class="text-white font-semibold text-5xl">
|
||||
Your story starts with us.
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-blueGray-200">
|
||||
This is a simple example of a Landing Page you can build using
|
||||
Notus Svelte. It features multiple CSS components
|
||||
based on the Tailwind CSS design system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-70-px"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-200 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="pb-20 bg-blueGray-200 -mt-24">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
|
||||
>
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400"
|
||||
>
|
||||
<i class="fas fa-award"></i>
|
||||
</div>
|
||||
<h6 class="text-xl font-semibold">Awarded Agency</h6>
|
||||
<p class="mt-2 mb-4 text-blueGray-500">
|
||||
Divide details about your product or agency work into parts. A
|
||||
paragraph describing a feature will be enough.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-4/12 px-4 text-center">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
|
||||
>
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-lightBlue-400"
|
||||
>
|
||||
<i class="fas fa-retweet"></i>
|
||||
</div>
|
||||
<h6 class="text-xl font-semibold">Free Revisions</h6>
|
||||
<p class="mt-2 mb-4 text-blueGray-500">
|
||||
Keep you user engaged by providing meaningful information.
|
||||
Remember that by this time, the user is curious.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 w-full md:w-4/12 px-4 text-center">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
|
||||
>
|
||||
<div class="px-4 py-5 flex-auto">
|
||||
<div
|
||||
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-emerald-400"
|
||||
>
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
</div>
|
||||
<h6 class="text-xl font-semibold">Verified Company</h6>
|
||||
<p class="mt-2 mb-4 text-blueGray-500">
|
||||
Write a few lines about each one. A paragraph describing a
|
||||
feature will be enough. Keep you user engaged!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center mt-32">
|
||||
<div class="w-full md:w-5/12 px-4 mr-auto ml-auto">
|
||||
<div
|
||||
class="text-blueGray-500 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-white"
|
||||
>
|
||||
<i class="fas fa-user-friends text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl mb-2 font-semibold leading-normal">
|
||||
Working with us is a pleasure
|
||||
</h3>
|
||||
<p
|
||||
class="text-lg font-light leading-relaxed mt-4 mb-4 text-blueGray-600"
|
||||
>
|
||||
Don't let your uses guess by attaching tooltips and popoves to any
|
||||
element. Just make sure you enable them first via JavaScript.
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-light leading-relaxed mt-0 mb-4 text-blueGray-600"
|
||||
>
|
||||
The kit comes with three pre-built pages to help you get started
|
||||
faster. You can change the text and images and you're good to go.
|
||||
Just make sure you enable them first via JavaScript.
|
||||
</p>
|
||||
<a use:link href="/" class="font-bold text-blueGray-700 mt-8">
|
||||
Check Notus Svelte!
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-4/12 px-4 mr-auto ml-auto">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg bg-red-400"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80"
|
||||
class="w-full align-middle rounded-t-lg"
|
||||
/>
|
||||
<blockquote class="relative p-8 mb-4">
|
||||
<svg
|
||||
preserveAspectRatio="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 583 95"
|
||||
class="absolute left-0 w-full block h-95-px -top-94-px"
|
||||
>
|
||||
<polygon
|
||||
points="-30,95 583,95 583,65"
|
||||
class="text-red-400 fill-current"
|
||||
></polygon>
|
||||
</svg>
|
||||
<h4 class="text-xl font-bold text-white">
|
||||
Top Notch Services
|
||||
</h4>
|
||||
<p class="text-md font-light mt-2 text-white">
|
||||
The Arctic Ocean freezes every winter and much of the sea-ice
|
||||
then thaws every summer, and that process will continue
|
||||
whatever happens.
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative py-20">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-white fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="items-center flex flex-wrap">
|
||||
<div class="w-full md:w-4/12 ml-auto mr-auto px-4">
|
||||
<img
|
||||
alt="..."
|
||||
class="max-w-full rounded-lg shadow-lg"
|
||||
src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full md:w-5/12 ml-auto mr-auto px-4">
|
||||
<div class="md:pr-12">
|
||||
<div
|
||||
class="text-red-600 p-3 text-center inline-flex items-center justify-center w-16 h-16 mb-6 shadow-lg rounded-full bg-red-300"
|
||||
>
|
||||
<i class="fas fa-rocket text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-semibold">A growing company</h3>
|
||||
<p class="mt-4 text-lg leading-relaxed text-blueGray-500">
|
||||
The extension comes with three pre-built pages to help you get
|
||||
started faster. You can change the text and images and you're
|
||||
good to go.
|
||||
</p>
|
||||
<ul class="list-none mt-6">
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200 mr-3"
|
||||
>
|
||||
<i class="fas fa-fingerprint"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500">
|
||||
Carefully crafted components
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200 mr-3"
|
||||
>
|
||||
<i class="fab fa-html5"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500">
|
||||
Amazing page examples
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200 mr-3"
|
||||
>
|
||||
<i class="far fa-paper-plane"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-blueGray-500">Dynamic components</h4>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pt-20 pb-48">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center text-center mb-24">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h2 class="text-4xl font-semibold">Here are our heroes</h2>
|
||||
<p class="text-lg leading-relaxed m-4 text-blueGray-500">
|
||||
According to the National Oceanic and Atmospheric Administration,
|
||||
Ted, Scambos, NSIDClead scentist, puts the potentially record
|
||||
maximum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team1}"
|
||||
class="shadow-lg rounded-full mx-auto max-w-120-px"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Ryan Tompson</h5>
|
||||
<p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
|
||||
Web Developer
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team2}"
|
||||
class="shadow-lg rounded-full mx-auto max-w-120-px"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Romina Hadid</h5>
|
||||
<p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
|
||||
Marketing Specialist
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-google"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-lightBlue-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team3}"
|
||||
class="shadow-lg rounded-full mx-auto max-w-120-px"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Alexa Smith</h5>
|
||||
<p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
|
||||
UI/UX Designer
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-google"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-instagram"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
|
||||
<div class="px-6">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team4}"
|
||||
class="shadow-lg rounded-full mx-auto max-w-120-px"
|
||||
/>
|
||||
<div class="pt-6 text-center">
|
||||
<h5 class="text-xl font-bold">Jenna Kardi</h5>
|
||||
<p class="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
|
||||
Founder and CEO
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<button
|
||||
class="bg-pink-500 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-dribbble"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-red-600 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-google"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-lightBlue-400 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-twitter"></i>
|
||||
</button>
|
||||
<button
|
||||
class="bg-blueGray-700 text-white w-8 h-8 rounded-full outline-none focus:outline-none mr-1 mb-1"
|
||||
type="button"
|
||||
>
|
||||
<i class="fab fa-instagram"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pb-20 relative block bg-blueGray-800">
|
||||
<div
|
||||
class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20 h-20"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-800 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 lg:pt-24 lg:pb-64">
|
||||
<div class="flex flex-wrap text-center justify-center">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<h2 class="text-4xl font-semibold text-white">
|
||||
Build something
|
||||
</h2>
|
||||
<p class="text-lg leading-relaxed mt-4 mb-4 text-blueGray-400">
|
||||
Put the potentially record low maximum sea ice extent tihs year
|
||||
down to low ice. According to the National Oceanic and Atmospheric
|
||||
Administration, Ted, Scambos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-12 justify-center">
|
||||
<div class="w-full lg:w-3/12 px-4 text-center">
|
||||
<div
|
||||
class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-medal text-xl"></i>
|
||||
</div>
|
||||
<h6 class="text-xl mt-5 font-semibold text-white">
|
||||
Excelent Services
|
||||
</h6>
|
||||
<p class="mt-2 mb-4 text-blueGray-400">
|
||||
Some quick example text to build on the card title and make up the
|
||||
bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/12 px-4 text-center">
|
||||
<div
|
||||
class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-poll text-xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl mt-5 font-semibold text-white">
|
||||
Grow your market
|
||||
</h5>
|
||||
<p class="mt-2 mb-4 text-blueGray-400">
|
||||
Some quick example text to build on the card title and make up the
|
||||
bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full lg:w-3/12 px-4 text-center">
|
||||
<div
|
||||
class="text-blueGray-800 p-3 w-12 h-12 shadow-lg rounded-full bg-white inline-flex items-center justify-center"
|
||||
>
|
||||
<i class="fas fa-lightbulb text-xl"></i>
|
||||
</div>
|
||||
<h5 class="text-xl mt-5 font-semibold text-white">
|
||||
Launch time
|
||||
</h5>
|
||||
<p class="mt-2 mb-4 text-blueGray-400">
|
||||
Some quick example text to build on the card title and make up the
|
||||
bulk of the card's content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative block py-24 lg:pt-0 bg-blueGray-800">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-wrap justify-center lg:-mt-64 -mt-48">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200"
|
||||
>
|
||||
<div class="flex-auto p-5 lg:p-10">
|
||||
<h4 class="text-2xl font-semibold">
|
||||
Want to work with us?
|
||||
</h4>
|
||||
<p class="leading-relaxed mt-1 mb-4 text-blueGray-500">
|
||||
Complete this form and we will get back to you in 24 hours.
|
||||
</p>
|
||||
<div class="relative w-full mb-3 mt-8">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="full-name"
|
||||
>
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
id="full-name"
|
||||
type="text"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="email"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="message"
|
||||
>
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows="4"
|
||||
cols="80"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full"
|
||||
placeholder="Type a message..."
|
||||
/>
|
||||
</div>
|
||||
<div class="text-center mt-6">
|
||||
<button
|
||||
class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
149
src/views/Profile.svelte
Normal file
149
src/views/Profile.svelte
Normal file
@@ -0,0 +1,149 @@
|
||||
<script>
|
||||
// core components
|
||||
import AuthNavbar from "components/Navbars/AuthNavbar.svelte";
|
||||
import Footer from "components/Footers/Footer.svelte";
|
||||
|
||||
const team2 = "/assets/img/team-2-800x800.jpg";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<AuthNavbar />
|
||||
<main class="profile-page">
|
||||
<section class="relative block h-500-px">
|
||||
<div
|
||||
class="absolute top-0 w-full h-full bg-center bg-cover"
|
||||
style="
|
||||
background-image: url(https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2710&q=80);
|
||||
"
|
||||
>
|
||||
<span
|
||||
id="blackOverlay"
|
||||
class="w-full h-full absolute opacity-50 bg-black"
|
||||
></span>
|
||||
</div>
|
||||
<div
|
||||
class="top-auto bottom-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden h-70-px"
|
||||
style="transform: translateZ(0);"
|
||||
>
|
||||
<svg
|
||||
class="absolute bottom-0 overflow-hidden"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="none"
|
||||
version="1.1"
|
||||
viewBox="0 0 2560 100"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<polygon
|
||||
class="text-blueGray-200 fill-current"
|
||||
points="2560 0 2560 100 0 100"
|
||||
></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative py-16 bg-blueGray-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-xl rounded-lg -mt-64"
|
||||
>
|
||||
<div class="px-6">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full lg:w-3/12 px-4 lg:order-2 flex justify-center">
|
||||
<div class="relative">
|
||||
<img
|
||||
alt="..."
|
||||
src="{team2}"
|
||||
class="shadow-xl rounded-full h-auto align-middle border-none absolute -m-16 -ml-20 lg:-ml-16 max-w-150-px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-full lg:w-4/12 px-4 lg:order-3 lg:text-right lg:self-center"
|
||||
>
|
||||
<div class="py-6 px-3 mt-32 sm:mt-0">
|
||||
<button
|
||||
class="bg-red-400 active:bg-red-500 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4 lg:order-1">
|
||||
<div class="flex justify-center py-4 lg:pt-4 pt-8">
|
||||
<div class="mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
22
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Friends</span>
|
||||
</div>
|
||||
<div class="mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Photos</span>
|
||||
</div>
|
||||
<div class="lg:mr-4 p-3 text-center">
|
||||
<span
|
||||
class="text-xl font-bold block uppercase tracking-wide text-blueGray-600"
|
||||
>
|
||||
89
|
||||
</span>
|
||||
<span class="text-sm text-blueGray-400">Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-12">
|
||||
<h3
|
||||
class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2"
|
||||
>
|
||||
Jenna Stones
|
||||
</h3>
|
||||
<div
|
||||
class="text-sm leading-normal mt-0 mb-2 text-blueGray-400 font-bold uppercase"
|
||||
>
|
||||
<i class="fas fa-map-marker-alt mr-2 text-lg text-blueGray-400"></i>
|
||||
Los Angeles, California
|
||||
</div>
|
||||
<div class="mb-2 text-blueGray-600 mt-10">
|
||||
<i class="fas fa-briefcase mr-2 text-lg text-blueGray-400"></i>
|
||||
Solution Manager - Creative Tim Officer
|
||||
</div>
|
||||
<div class="mb-2 text-blueGray-600">
|
||||
<i class="fas fa-university mr-2 text-lg text-blueGray-400"></i>
|
||||
University of Computer Science
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-10 py-10 border-t border-blueGray-200 text-center">
|
||||
<div class="flex flex-wrap justify-center">
|
||||
<div class="w-full lg:w-9/12 px-4">
|
||||
<p class="mb-4 text-lg leading-relaxed text-blueGray-700">
|
||||
An artist of considerable range, Jenna the name taken by
|
||||
Melbourne-raised, Brooklyn-based Nick Murphy writes,
|
||||
performs and records all of his own music, giving it a warm,
|
||||
intimate feel with a solid groove structure. An artist of
|
||||
considerable range.
|
||||
</p>
|
||||
<a
|
||||
href="#pablo"
|
||||
on:click={(e) => e.preventDefault()}
|
||||
class="font-normal text-red-500"
|
||||
>
|
||||
Show more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
BIN
src/views/admin/.wgProfiles.svelte.swp
Normal file
BIN
src/views/admin/.wgProfiles.svelte.swp
Normal file
Binary file not shown.
33
src/views/admin/Dashboard.svelte
Normal file
33
src/views/admin/Dashboard.svelte
Normal file
@@ -0,0 +1,33 @@
|
||||
<script>
|
||||
// core components
|
||||
import CardLineChart from "components/Cards/CardLineChart.svelte";
|
||||
import CardBarChart from "components/Cards/CardBarChart.svelte";
|
||||
import CardPageVisits from "components/Cards/CardPageVisits.svelte";
|
||||
import CardSocialTraffic from "components/Cards/CardSocialTraffic.svelte";
|
||||
import HeaderStats from "components/Headers/HeaderStats.svelte";
|
||||
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="mt-3 mb-6">
|
||||
<HeaderStats />
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
|
||||
<CardLineChart />
|
||||
</div>
|
||||
<div class="w-full xl:w-4/12 px-4">
|
||||
<CardBarChart />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-4">
|
||||
<div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
|
||||
<CardPageVisits />
|
||||
</div>
|
||||
<div class="w-full xl:w-4/12 px-4">
|
||||
<CardSocialTraffic />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/views/admin/Maps.svelte
Normal file
15
src/views/admin/Maps.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
// core components
|
||||
import MapExample from "components/Maps/MapExample.svelte";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full px-4">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
|
||||
>
|
||||
<MapExample />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
src/views/admin/Settings.svelte
Normal file
15
src/views/admin/Settings.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<script>
|
||||
// core components
|
||||
import CardSettings from "components/Cards/CardSettings.svelte";
|
||||
import CardProfile from "components/Cards/CardProfile.svelte";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-8/12 px-4">
|
||||
<CardSettings />
|
||||
</div>
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<CardProfile />
|
||||
</div>
|
||||
</div>
|
||||
18
src/views/admin/Tables.svelte
Normal file
18
src/views/admin/Tables.svelte
Normal file
@@ -0,0 +1,18 @@
|
||||
<script>
|
||||
// core components
|
||||
import CardTableInf from "components/Cards/CardTableInf.svelte";
|
||||
import CardTable from "components/Cards/CardTable.svelte";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap mt-4">
|
||||
<div class="w-full mb-12 px-4">
|
||||
<CardTableInf />
|
||||
</div>
|
||||
<div class="w-full mb-12 px-4">
|
||||
<CardTable />
|
||||
</div>
|
||||
<div class="w-full mb-12 px-4">
|
||||
<CardTable color="dark" />
|
||||
</div>
|
||||
</div>
|
||||
13
src/views/admin/wgLogs.svelte
Normal file
13
src/views/admin/wgLogs.svelte
Normal file
@@ -0,0 +1,13 @@
|
||||
<script>
|
||||
// core components
|
||||
import axios from 'axios';
|
||||
import CardTableInf from "components/Cards/CardTableInf.svelte";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap mt-4">
|
||||
<div class="w-full mb-12 px-4">
|
||||
<CardTableInf
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
23
src/views/admin/wgProfiles.svelte
Normal file
23
src/views/admin/wgProfiles.svelte
Normal file
@@ -0,0 +1,23 @@
|
||||
<script>
|
||||
// core components
|
||||
import axios from 'axios';
|
||||
import {onMount} from 'svelte';
|
||||
import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
|
||||
import CardWGControl from "components/Cards/CardWGControl.svelte";
|
||||
export let location;
|
||||
let wgProfileFetch = [];
|
||||
onMount(async () => {
|
||||
await axios.get('http://192.168.10.2:8000/api2/wgClients')
|
||||
.then( response => {
|
||||
wgProfileFetch = response.data
|
||||
});
|
||||
console.log(wgProfileFetch);
|
||||
});
|
||||
</script>
|
||||
|
||||
<CardWGControl />
|
||||
<div class="flex flex-wrap mt-4 mb-8">
|
||||
<CardWGProfile
|
||||
wgProfileData = { wgProfileFetch }
|
||||
/>
|
||||
</div>
|
||||
112
src/views/auth/Login.svelte
Normal file
112
src/views/auth/Login.svelte
Normal file
@@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import { link } from "svelte-routing";
|
||||
|
||||
// core components
|
||||
const github = "../assets/img/github.svg";
|
||||
const google = "../assets/img/google.svg";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<div class="flex content-center items-center justify-center h-full">
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200 border-0"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-6 py-6">
|
||||
<div class="text-center mb-3">
|
||||
<h6 class="text-blueGray-500 text-sm font-bold">
|
||||
Sign in with
|
||||
</h6>
|
||||
</div>
|
||||
<div class="btn-wrapper text-center">
|
||||
<button
|
||||
class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<img alt="..." class="w-5 mr-1" src="{github}" />
|
||||
Github
|
||||
</button>
|
||||
<button
|
||||
class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<img alt="..." class="w-5 mr-1" src="{google}" />
|
||||
Google
|
||||
</button>
|
||||
</div>
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
</div>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<div class="text-blueGray-400 text-center mb-3 font-bold">
|
||||
<small>Or sign in with credentials</small>
|
||||
</div>
|
||||
<form>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="grid-password"
|
||||
type="password"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
id="customCheckLogin"
|
||||
type="checkbox"
|
||||
class="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
|
||||
/>
|
||||
<span class="ml-2 text-sm font-semibold text-blueGray-600">
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-6">
|
||||
<button
|
||||
class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-6 relative">
|
||||
<div class="w-1/2">
|
||||
<a href="#pablo" on:click={(e) => e.preventDefault()} class="text-blueGray-200">
|
||||
<small>Forgot password?</small>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-1/2 text-right">
|
||||
<a use:link href="/auth/register" class="text-blueGray-200">
|
||||
<small>Create new account</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
117
src/views/auth/Register.svelte
Normal file
117
src/views/auth/Register.svelte
Normal file
@@ -0,0 +1,117 @@
|
||||
<script>
|
||||
// core components
|
||||
const github = "../assets/img/github.svg";
|
||||
const google = "../assets/img/google.svg";
|
||||
export let location;
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<div class="flex content-center items-center justify-center h-full">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200 border-0"
|
||||
>
|
||||
<div class="rounded-t mb-0 px-6 py-6">
|
||||
<div class="text-center mb-3">
|
||||
<h6 class="text-blueGray-500 text-sm font-bold">
|
||||
Sign up with
|
||||
</h6>
|
||||
</div>
|
||||
<div class="btn-wrapper text-center">
|
||||
<button
|
||||
class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<img alt="..." class="w-5 mr-1" src="{github}" />
|
||||
Github
|
||||
</button>
|
||||
<button
|
||||
class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
<img alt="..." class="w-5 mr-1" src="{google}" />
|
||||
Google
|
||||
</button>
|
||||
</div>
|
||||
<hr class="mt-6 border-b-1 border-blueGray-300" />
|
||||
</div>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
|
||||
<div class="text-blueGray-400 text-center mb-3 font-bold">
|
||||
<small>Or sign up with credentials</small>
|
||||
</div>
|
||||
<form>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-name"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="grid-name"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-email"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="grid-email"
|
||||
type="email"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="grid-password"
|
||||
type="password"
|
||||
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
id="customCheckLogin"
|
||||
type="checkbox"
|
||||
class="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
|
||||
/>
|
||||
<span class="ml-2 text-sm font-semibold text-blueGray-600">
|
||||
I agree with the
|
||||
<a href="#pablo" on:click={(e) => e.preventDefault()} class="text-red-500">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-6">
|
||||
<button
|
||||
class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user