mirror of
https://github.com/JustusPlays78/SectorFileUpdater.git
synced 2025-04-29 10:10:57 +00:00
feat: tailwindcss
This commit is contained in:
parent
2087b95562
commit
9c45227337
@ -1,5 +1,5 @@
|
|||||||
// Global Variabels
|
// Global Variabels
|
||||||
let selectDirBtn = document.getElementById('select-dir');
|
let settingsProfileDirselectbutton = document.getElementById('settingsProfileDirselectbutton');
|
||||||
let dirBox = document.getElementById('dirBox');
|
let dirBox = document.getElementById('dirBox');
|
||||||
let usernameInput = document.getElementById('username');
|
let usernameInput = document.getElementById('username');
|
||||||
let passwordInput = document.getElementById('password');
|
let passwordInput = document.getElementById('password');
|
||||||
@ -30,6 +30,6 @@ saveCredBtn.addEventListener('click', (e) => {
|
|||||||
save();
|
save();
|
||||||
});
|
});
|
||||||
|
|
||||||
selectDirBtn.addEventListener('click', (e) => {
|
settingsProfileDirselectbutton.addEventListener('click', (e) => {
|
||||||
changeUserpath();
|
changeUserpath();
|
||||||
});
|
});
|
||||||
@ -6,10 +6,7 @@ document.querySelector('.loopple-alert.loopple-alert-dismissible .close').onclic
|
|||||||
}, 1000);}
|
}, 1000);}
|
||||||
|
|
||||||
document.getElementById('download').addEventListener('click', () => {
|
document.getElementById('download').addEventListener('click', () => {
|
||||||
|
});
|
||||||
},
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,8 @@ const { contextBridge, ipcRenderer } = require('electron')
|
|||||||
|
|
||||||
process.once('loaded', () => {
|
process.once('loaded', () => {
|
||||||
window.addEventListener('message', evt => {
|
window.addEventListener('message', evt => {
|
||||||
if (evt.data.type === 'select-dirs') {
|
if (evt.data.type === 'settingsProfileDirselectbutton') {
|
||||||
ipcRenderer.send('select-dirs')
|
ipcRenderer.send('settingsProfileDirselectbutton')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -14,12 +14,6 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</head>
|
</head>
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
$("#header").load("./header.html");
|
|
||||||
$("#footer").load("./footer.html");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<body class="ecsu-bg-dark-out text-white">
|
<body class="ecsu-bg-dark-out text-white">
|
||||||
@ -27,7 +21,7 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 class="text-white">Settings</h3>
|
<h3 class="text-white">Settings</h3>
|
||||||
<button id="select-dir">Select Directory</button>
|
<button id="settingsProfileDirselectbutton">Select Directory</button>
|
||||||
<input type="text" id="dirBox" name="name" size="50" readonly />
|
<input type="text" id="dirBox" name="name" size="50" readonly />
|
||||||
<progress id="progressbar" max="100" value="0"></progress>
|
<progress id="progressbar" max="100" value="0"></progress>
|
||||||
<p id="progressbarText"></p>
|
<p id="progressbarText"></p>
|
||||||
@ -175,15 +169,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script src="./data_structure.js"></script>
|
<script src="components/js/data_structure.js"></script>
|
||||||
<script src="./html_elements.js"></script>
|
<script src="components/js/html_elements.js"></script>
|
||||||
<script src="./renderer.js"></script>
|
<script src="renderer.js"></script>
|
||||||
<script src="./startup.js"></script>
|
<script src="components/js/startup.js"></script>
|
||||||
<script src="./save.js"></script>
|
<script src="components/js/save.js"></script>
|
||||||
<script src="./getFiles.js"></script>
|
<script src="components/js/getFiles.js"></script>
|
||||||
<script src="./download.js"></script>
|
<script src="components/js/download.js"></script>
|
||||||
<script src="./git_ops.js"></script>
|
<script src="components/js/git_ops.js"></script>
|
||||||
<script src="./append_to_file.js"></script>
|
<script src="components/js/append_to_file.js"></script>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -31,5 +31,14 @@
|
|||||||
<!--Footer-->
|
<!--Footer-->
|
||||||
<div id="footer"></div>
|
<div id="footer"></div>
|
||||||
<script src="./components/js/frontend_handler.js"></script>
|
<script src="./components/js/frontend_handler.js"></script>
|
||||||
|
<script src="components/js/data_structure.js"></script>
|
||||||
|
<script src="components/js/html_elements.js"></script>
|
||||||
|
<script src="renderer.js"></script>
|
||||||
|
<script src="components/js/startup.js"></script>
|
||||||
|
<script src="components/js/save.js"></script>
|
||||||
|
<script src="components/js/getFiles.js"></script>
|
||||||
|
<script src="components/js/download.js"></script>
|
||||||
|
<script src="components/js/git_ops.js"></script>
|
||||||
|
<script src="components/js/append_to_file.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -26,7 +26,7 @@ function removeFileItems() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeUserpath() {
|
export function changeUserpath() {
|
||||||
ipcRenderer.send('app-path');
|
ipcRenderer.send('app-path');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,278 +0,0 @@
|
|||||||
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
|
|
||||||
crossorigin="anonymous">
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
$("#header").load("header.html");
|
|
||||||
$("#footer").load("footer.html");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<body class="g-sidenav-show bg-dark">
|
|
||||||
<div class="main-content" id="panel">
|
|
||||||
|
|
||||||
<!--Header-->
|
|
||||||
<div id="header"></div>
|
|
||||||
|
|
||||||
<!--CONTENT-->
|
|
||||||
<div class="card mb-4 ecsu-bg-dark-light-out" id="login">
|
|
||||||
<div class="card-body">
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-8 ">
|
|
||||||
<h6 class="mb-0 text-white">Credentials</h6>
|
|
||||||
</div>
|
|
||||||
<div class="col-4"><button class="btn btn-sm ecsu-btn-dark " id="savecred">Save your Credentials</button></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="form-group form-switch ps-0">
|
|
||||||
<label class="form-control-label text-white" for="input-username">Name</label><input class="form-check-input ms-auto" type="checkbox" id="saverealname">
|
|
||||||
<input type="text" id="input-username" class="form-control" placeholder="Name" id="realname">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="form-group form-switch ps-0">
|
|
||||||
<label class="form-control-label text-white" for="input-email">CID</label><input class="form-check-input ms-auto" type="checkbox" id="saveuser" >
|
|
||||||
<input type="email" id="input-email" class="form-control" placeholder="1234567" id="username">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="form-group form-switch ps-0">
|
|
||||||
<label class="form-control-label text-white" for="input-first-name">Password</label><input class="form-check-input ms-auto" type="checkbox" id="savepw" >
|
|
||||||
<input type="password" id="input-first-name" class="form-control" placeholder="password" id="password">
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-6">
|
|
||||||
<div class="form-group form-switch ps-0">
|
|
||||||
<label class="form-control-label text-white" for="input-last-name">CPDLC HoppieCode</label><input class="form-check-input ms-auto" type="checkbox" id="savepwhoppie" >
|
|
||||||
<input type="password" id="input-last-name" class="form-control" placeholder="CPDLC Code" id="passwordhoppie">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<label class="form-control-label text-white" for="input-last-name">Select Your Rating</label>
|
|
||||||
<select id="rating">
|
|
||||||
<option id="0">obs</option>
|
|
||||||
<option id="1">s1</option>
|
|
||||||
<option id="2">s2</option>
|
|
||||||
<option id="3">s3</option>
|
|
||||||
<option id="4">c1</option>
|
|
||||||
<option id="6">c3</option>
|
|
||||||
<option id="7">i1</option>
|
|
||||||
<option id="9">i3</option>
|
|
||||||
<option id="10">sup</option>
|
|
||||||
<option id="11">adm</option>
|
|
||||||
</select>
|
|
||||||
<div class="form-group form-switch ps-0">
|
|
||||||
<label class="form-control-label text-white" for="input-last-name">If you want Eurosounds, please check the box below and click the download button. </label>
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="download-checkbox" onclick="toggleDownloadButton()">
|
|
||||||
<br>
|
|
||||||
<a href="https://cdn.ganderoceanic.ca/resources/files/eurosounds/eurosounds-8apr20.zip" id="download-link" style="display:none">Download Sounds</a>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
function toggleDownloadButton() {
|
|
||||||
const downloadLink = document.getElementById("download-link");
|
|
||||||
if (document.getElementById("download-checkbox").checked) {
|
|
||||||
downloadLink.style.display = "block";
|
|
||||||
} else {
|
|
||||||
downloadLink.style.display = "none";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!--Footer-->
|
|
||||||
<div id="footer"></div>
|
|
||||||
</div>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
|
|
||||||
<script src="components/js/html_elements.js"></script>
|
|
||||||
<script src="components/js/renderer.js"></script>
|
|
||||||
<script src="components/js/startup.js"></script>
|
|
||||||
<script src="components/js/save.js"></script>
|
|
||||||
<script src="components/js/getFiles.js"></script>
|
|
||||||
<script src="components/js/data_structure.js"></script>
|
|
||||||
<script src="components/js/download.js"></script>
|
|
||||||
<script src="components/js/git_ops.js"></script>
|
|
||||||
<script src="components/js/append_to_file.js"></script>
|
|
||||||
<script>
|
|
||||||
if (document.querySelector("#chart-bars")) {
|
|
||||||
var ctx = document.getElementById("chart-bars").getContext("2d");
|
|
||||||
new Chart(ctx, {
|
|
||||||
type: "bar",
|
|
||||||
data: {
|
|
||||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
||||||
datasets: [{
|
|
||||||
label: "Sales",
|
|
||||||
tension: 0.4,
|
|
||||||
borderWidth: 0,
|
|
||||||
borderRadius: 4,
|
|
||||||
borderSkipped: false,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
|
|
||||||
maxBarThickness: 6
|
|
||||||
},],
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
interaction: {
|
|
||||||
intersect: false,
|
|
||||||
mode: 'index',
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: false,
|
|
||||||
drawOnChartArea: false,
|
|
||||||
drawTicks: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
suggestedMin: 0,
|
|
||||||
suggestedMax: 500,
|
|
||||||
beginAtZero: true,
|
|
||||||
padding: 15,
|
|
||||||
font: {
|
|
||||||
size: 14,
|
|
||||||
family: "Open Sans",
|
|
||||||
style: 'normal',
|
|
||||||
lineHeight: 2
|
|
||||||
},
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: false,
|
|
||||||
drawOnChartArea: false,
|
|
||||||
drawTicks: false
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
if (document.querySelector("#chart-line")) {
|
|
||||||
var ctx2 = document.getElementById("chart-line").getContext("2d");
|
|
||||||
var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
|
|
||||||
gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
|
|
||||||
gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
|
|
||||||
gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
|
|
||||||
var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
|
|
||||||
gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
|
|
||||||
gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
|
|
||||||
gradientStroke2.addColorStop(0, "rgba(20,23,39,0)");
|
|
||||||
new Chart(ctx2, {
|
|
||||||
type: "line",
|
|
||||||
data: {
|
|
||||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
||||||
datasets: [{
|
|
||||||
label: "Mobile apps",
|
|
||||||
tension: 0.4,
|
|
||||||
borderWidth: 0,
|
|
||||||
pointRadius: 0,
|
|
||||||
borderColor: "#cb0c9f",
|
|
||||||
borderWidth: 3,
|
|
||||||
backgroundColor: gradientStroke1,
|
|
||||||
fill: true,
|
|
||||||
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
|
||||||
maxBarThickness: 6
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Websites",
|
|
||||||
tension: 0.4,
|
|
||||||
borderWidth: 0,
|
|
||||||
pointRadius: 0,
|
|
||||||
borderColor: "#3A416F",
|
|
||||||
borderWidth: 3,
|
|
||||||
backgroundColor: gradientStroke2,
|
|
||||||
fill: true,
|
|
||||||
data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
|
|
||||||
maxBarThickness: 6
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
interaction: {
|
|
||||||
intersect: false,
|
|
||||||
mode: 'index',
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: true,
|
|
||||||
drawOnChartArea: true,
|
|
||||||
drawTicks: false,
|
|
||||||
borderDash: [5, 5]
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: true,
|
|
||||||
padding: 10,
|
|
||||||
color: '#b2b9bf',
|
|
||||||
font: {
|
|
||||||
size: 11,
|
|
||||||
family: "Open Sans",
|
|
||||||
style: 'normal',
|
|
||||||
lineHeight: 2
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: false,
|
|
||||||
drawOnChartArea: false,
|
|
||||||
drawTicks: false,
|
|
||||||
borderDash: [5, 5]
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: true,
|
|
||||||
color: '#b2b9bf',
|
|
||||||
padding: 20,
|
|
||||||
font: {
|
|
||||||
size: 11,
|
|
||||||
family: "Open Sans",
|
|
||||||
style: 'normal',
|
|
||||||
lineHeight: 2
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script src="components/js/loopple.js"></script>
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
265
src/syncing.html
265
src/syncing.html
@ -1,265 +0,0 @@
|
|||||||
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
|
|
||||||
crossorigin="anonymous">
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
$("#header").load("header.html");
|
|
||||||
$("#footer").load("footer.html");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<body class="g-sidenav-show bg-dark">
|
|
||||||
<div class="main-content" id="panel">
|
|
||||||
|
|
||||||
<!--Header-->
|
|
||||||
<div id="header"></div>
|
|
||||||
|
|
||||||
<!--CONTENT-->
|
|
||||||
<div class="card mb-4 ecsu-bg-dark-light-out">
|
|
||||||
<div class="card-body">
|
|
||||||
<form>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-8 ">
|
|
||||||
<h6 class="mb-0 text-white">Syncing</h6>
|
|
||||||
</div>
|
|
||||||
<div class="col-4"><button class="btn btn-sm ecsu-btn-dark ">Save (WIP)</button></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 class="text-uppercase text-xs font-weight-bolder text-white">Apply to Update</h6>
|
|
||||||
<ul class="list-group ">
|
|
||||||
<li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
|
|
||||||
<div class="form-check form-switch ps-0">
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="applyToPrf" checked="">
|
|
||||||
<label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
|
|
||||||
for="flexSwitchCheckDefault">Credentials into Profiles</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
|
|
||||||
<div class="form-check form-switch ps-0">
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="applyHoppie">
|
|
||||||
<label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
|
|
||||||
for="flexSwitchCheckDefault1">Hoppie Code into Txt File</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<!-- <li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
|
|
||||||
<div class="form-check form-switch ps-0">
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked="">
|
|
||||||
<label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
|
|
||||||
for="flexSwitchCheckDefault2">OBS</label>
|
|
||||||
</div>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
<!-- <h6 class="text-uppercase text-white text-xs font-weight-bolder mt-4">Application</h6>
|
|
||||||
<ul class="list-group">
|
|
||||||
<li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
|
|
||||||
<div class="form-check form-switch ps-0">
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
|
|
||||||
<label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
|
|
||||||
for="flexSwitchCheckDefault3">New launches and projects</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item border-0 px-0 ecsu-bg-dark-light-out">
|
|
||||||
<div class="form-check form-switch ps-0">
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked="">
|
|
||||||
<label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
|
|
||||||
for="flexSwitchCheckDefault4">Monthly product updates</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item border-0 px-0 pb-0 ecsu-bg-dark-light-out">
|
|
||||||
<div class="form-check form-switch ps-0">
|
|
||||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
|
|
||||||
<label class="form-check-label text-white ms-3 text-truncate w-80 mb-0"
|
|
||||||
for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!--Footer-->
|
|
||||||
<div id="footer"></div>
|
|
||||||
</div>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/popper.min.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/core/bootstrap.min.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/chartjs.min.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/plugins/Chart.extension.js"></script>
|
|
||||||
<script src="https://demos.creative-tim.com/soft-ui-dashboard/assets/js/soft-ui-dashboard.min.js?v=1.0.2"></script>
|
|
||||||
<script>
|
|
||||||
if (document.querySelector("#chart-bars")) {
|
|
||||||
var ctx = document.getElementById("chart-bars").getContext("2d");
|
|
||||||
new Chart(ctx, {
|
|
||||||
type: "bar",
|
|
||||||
data: {
|
|
||||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
||||||
datasets: [{
|
|
||||||
label: "Sales",
|
|
||||||
tension: 0.4,
|
|
||||||
borderWidth: 0,
|
|
||||||
borderRadius: 4,
|
|
||||||
borderSkipped: false,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
|
|
||||||
maxBarThickness: 6
|
|
||||||
},],
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
interaction: {
|
|
||||||
intersect: false,
|
|
||||||
mode: 'index',
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: false,
|
|
||||||
drawOnChartArea: false,
|
|
||||||
drawTicks: false,
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
suggestedMin: 0,
|
|
||||||
suggestedMax: 500,
|
|
||||||
beginAtZero: true,
|
|
||||||
padding: 15,
|
|
||||||
font: {
|
|
||||||
size: 14,
|
|
||||||
family: "Open Sans",
|
|
||||||
style: 'normal',
|
|
||||||
lineHeight: 2
|
|
||||||
},
|
|
||||||
color: "#fff"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: false,
|
|
||||||
drawOnChartArea: false,
|
|
||||||
drawTicks: false
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
if (document.querySelector("#chart-line")) {
|
|
||||||
var ctx2 = document.getElementById("chart-line").getContext("2d");
|
|
||||||
var gradientStroke1 = ctx2.createLinearGradient(0, 230, 0, 50);
|
|
||||||
gradientStroke1.addColorStop(1, "rgba(203,12,159,0.2)");
|
|
||||||
gradientStroke1.addColorStop(0.2, "rgba(72,72,176,0.0)");
|
|
||||||
gradientStroke1.addColorStop(0, "rgba(203,12,159,0)");
|
|
||||||
var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
|
|
||||||
gradientStroke2.addColorStop(1, "rgba(20,23,39,0.2)");
|
|
||||||
gradientStroke2.addColorStop(0.2, "rgba(72,72,176,0.0)");
|
|
||||||
gradientStroke2.addColorStop(0, "rgba(20,23,39,0)");
|
|
||||||
new Chart(ctx2, {
|
|
||||||
type: "line",
|
|
||||||
data: {
|
|
||||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
||||||
datasets: [{
|
|
||||||
label: "Mobile apps",
|
|
||||||
tension: 0.4,
|
|
||||||
borderWidth: 0,
|
|
||||||
pointRadius: 0,
|
|
||||||
borderColor: "#cb0c9f",
|
|
||||||
borderWidth: 3,
|
|
||||||
backgroundColor: gradientStroke1,
|
|
||||||
fill: true,
|
|
||||||
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
|
||||||
maxBarThickness: 6
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Websites",
|
|
||||||
tension: 0.4,
|
|
||||||
borderWidth: 0,
|
|
||||||
pointRadius: 0,
|
|
||||||
borderColor: "#3A416F",
|
|
||||||
borderWidth: 3,
|
|
||||||
backgroundColor: gradientStroke2,
|
|
||||||
fill: true,
|
|
||||||
data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
|
|
||||||
maxBarThickness: 6
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
interaction: {
|
|
||||||
intersect: false,
|
|
||||||
mode: 'index',
|
|
||||||
},
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: true,
|
|
||||||
drawOnChartArea: true,
|
|
||||||
drawTicks: false,
|
|
||||||
borderDash: [5, 5]
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: true,
|
|
||||||
padding: 10,
|
|
||||||
color: '#b2b9bf',
|
|
||||||
font: {
|
|
||||||
size: 11,
|
|
||||||
family: "Open Sans",
|
|
||||||
style: 'normal',
|
|
||||||
lineHeight: 2
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
grid: {
|
|
||||||
drawBorder: false,
|
|
||||||
display: false,
|
|
||||||
drawOnChartArea: false,
|
|
||||||
drawTicks: false,
|
|
||||||
borderDash: [5, 5]
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
display: true,
|
|
||||||
color: '#b2b9bf',
|
|
||||||
padding: 20,
|
|
||||||
font: {
|
|
||||||
size: 11,
|
|
||||||
family: "Open Sans",
|
|
||||||
style: 'normal',
|
|
||||||
lineHeight: 2
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script src="components/js/loopple.js"></script>
|
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
$("#header").load(".\html\header.html");
|
|
||||||
$("#footer").load(".\html\footer.html");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user