SectorFileUpdater/updater/src/settings.html

278 lines
10 KiB
HTML
Raw Normal View History

2023-02-13 17:42:41 +01:00
<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="./js/html_elements.js"></script>
<script src="./js/renderer.js"></script>
<script src="./js/startup.js"></script>
<script src="./js/save.js"></script>
<script src="./js/getFiles.js"></script>
<script src="./js/data_structure.js"></script>
<script src="./js/download.js"></script>
<script src="./js/git_ops.js"></script>
<script src="./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="./js/loopple.js"></script>
</script>
</body>