From 828856d2d33f623fb879d46cb608ca310934eb72 Mon Sep 17 00:00:00 2001 From: BarokDG Date: Tue, 16 Feb 2021 17:34:52 +0300 Subject: [PATCH] Admin page draft design complete, restyled table, moved apexchart script to external js file --- admin.html | 103 ++++++++++++++++++++++---- assets/css/styles.css | 108 +++++++++++++++++++++++++--- assets/js/apexscript.js | 118 ++++++++++++++++++++++++++++++ dash.html | 58 +++++---------- loan.html | 155 +++++++++++++++++++++++----------------- 5 files changed, 413 insertions(+), 129 deletions(-) create mode 100644 assets/js/apexscript.js diff --git a/admin.html b/admin.html index 3a6fcdd..a2703e0 100644 --- a/admin.html +++ b/admin.html @@ -4,7 +4,7 @@ - Loan + Admin - + @@ -42,8 +42,8 @@

AAIT Clearance System

- - + + @@ -53,9 +53,9 @@

AAIT Clearance System

AAIT Clearance System

- - + @@ -77,14 +77,84 @@

AAIT Clearance System

- Loan + Dashboard -
+
+
+
+
+
+
+
+

Total number of Students

+

4000

+
+
+
+
+
+
+

Gender Ratio (Males/Females)

+

1.5

+ +
+
+
+
+
+
+

Number of students cleared

+

1200

+
+
+
+
+
+
+

Number of students uncleared

+

2800

+
+
+
+
+
+
+
+
+
+
+
+
Recent Messages
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum + repellat placeat quasi blanditiis. Aliquam placeat molestiae ipsum quisquam eius, + maiores eum repellendus minima unde doloribus eaque, voluptatum blanditiis adipisci + provident!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, + aspernatur!
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt mollitia + ut, sit totam quia quibusdam autem? Placeat excepturi quidem fuga.
+
Lorem ipsum, dolor sit amet consectetur adipisicing.
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo ex + similique illum sunt, necessitatibus assumenda temporibus tempore molestias atque + placeat quo nulla labore maxime laborum architecto soluta perspiciatis totam autem! + Dolor ipsam dignissimos hic laboriosam, minus distinctio in iste tempore similique non + magnam aliquam aperiam, ipsum necessitatibus? Ratione, ipsa blanditiis?
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sit delectus, + at vero dolore minima earum corporis aperiam. Ducimus eius culpa labore ex odit aperiam + ad doloremque modi?
+
+
+
+
+
+
+
+
-
+ - - + --> + +
-
@@ -139,6 +208,10 @@

AAIT Clearance System

+ + + + \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index f075046..d9f0110 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -35,7 +35,7 @@ } .sidebar button:hover { - box-shadow: inset 0 0 100px 100px rgba(0, 105, 107, 0.5); + box-shadow: inset 0 0 100px 100px #cdcdcd25; } .sidebar a { @@ -74,8 +74,7 @@ i { /* Main Container */ .main-container { - background-image: url("../images/free-vector-blue-texture-halftone-background.jpg"); - background-size: cover; + background-color: #F7F9FA; grid-column-start: 2; min-height: 100vh; width: 100%; @@ -106,6 +105,84 @@ i { max-width: 350px; } +.card { + border: 1px solid red; + height: 8rem; +} + +.card-title { + color: #757575; + font-size: 1rem; + width: 9rem; +} + +.stat-value { + font-size: 1.2rem; + font-weight: 400; + position: relative; +} + +p>i { + border-radius: 50%; + bottom: 80%; + color: white; + left: 80%; + padding: 10px; + position: absolute; +} + +.fa-venus-mars { + background-color: #F5365C; +} + +.fa-graduation-cap { + background-color: #FB6340; +} + +.fa-check { + background-color: #FFD600; +} + +.fa-user-clock { + background-color: #11CDEF; +} + +#radial_bar { + background-color: white; +} + + +/* Message box */ +#messages { + background-color: white; + border: none; + height: 20rem !important; + overflow-y: auto; +} + +#messages > .row > div { + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + + display: -webkit-box; + margin-top: .5rem; + overflow: hidden; + text-overflow: ellipsis; +} + +#messages > .row > div:hover { + position: relative; + bottom: 5px; +} + +#messages > .row > div:first-child { + font-size: 1.2rem; +} + +/* .statusbar { + +} */ + /* Loan Page */ /* Search bar inside the main container */ /* Search bar */ @@ -162,10 +239,29 @@ nav { } /* Table */ +thead { + background-color: white; + border-bottom: 2px solid red; +} + .table-responsive { display: table !important; } +th { + border: none !important; + color: #757575; + font-weight: lighter; +} + +tr { + background-color: white; +} + +.table-bordered td { + border: 1px solid white; +} + /* Responsiveness */ @media screen and (max-width: 1000px) { #grid-container { @@ -206,7 +302,7 @@ nav { } .side-button:hover { - box-shadow: inset 0 0 100px 100px rgba(150, 150, 150, 0.3); + box-shadow: inset 0 0 100px 100px rgba(150, 150, 150, 0.302); } .fa-2x { @@ -258,10 +354,6 @@ nav { display: block !important; } - table { - overflow-x: scroll; - } - .navbar-brand { display: block; } diff --git a/assets/js/apexscript.js b/assets/js/apexscript.js new file mode 100644 index 0000000..986fbb3 --- /dev/null +++ b/assets/js/apexscript.js @@ -0,0 +1,118 @@ +var options = { + chart: { + type: 'bar' + }, + series: [{ + name: 'sales', + data: [30, 40, 45, 50, 49, 60, 70, 91, 25] + }], + xaxis: { + categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] + } +} + +var optionsPie = { + chart: { + type: 'pie' + }, + series: [44, 55, 13, 33], + labels: ['Apple', 'Mango', 'Orange', 'Watermelon'] +} + +var optionsStatus = { + chart: { + height: 280, + type: "radialBar", + }, + + series: [67], + colors: ["#20E647"], + plotOptions: { + radialBar: { + hollow: { + margin: 0, + size: "70%", + background: "#293450" + }, + track: { + dropShadow: { + enabled: true, + top: 2, + left: 0, + blur: 4, + opacity: 0.15 + } + }, + dataLabels: { + name: { + offsetY: -10, + color: "#fff", + fontSize: "13px" + }, + value: { + color: "#fff", + fontSize: "30px", + show: true + } + } + } + }, + fill: { + type: "gradient", + gradient: { + shade: "dark", + type: "vertical", + gradientToColors: ["#87D4F9"], + stops: [0, 100] + } + }, + stroke: { + lineCap: "round" + }, + labels: ["Progress"] +}; + +var options1 = { + chart: { + height: 280, + type: "radialBar", + }, + series: [67, 84, 20, 61], + plotOptions: { + radialBar: { + dataLabels: { + total: { + show: true, + label: 'TOTAL' + } + } + } + }, + labels: ['Library', 'Dorm', 'Department', 'Sport Master'] +}; + + + +const chart = new ApexCharts(document.querySelector("#chart"), options); +const radialBar = new ApexCharts(document.querySelector("#radial_bar"), options1); + +const pieChart = new ApexCharts(document.querySelector("#pieChart"), optionsPie); +const pieChart2 = new ApexCharts(document.querySelector("#pieChart2"), optionsPie); +const pieChart3 = new ApexCharts(document.querySelector("#pieChart3"), optionsPie); + +const statusBar = new ApexCharts(document.querySelector('#statusbar'), optionsStatus); +// const statusBar2 = new ApexCharts(document.querySelector('#statusbar2'), optionsStatus); +// const statusBar3 = new ApexCharts(document.querySelector('#statusbar3'), optionsStatus); +// const statusBar4 = new ApexCharts(document.querySelector('#statusbar4'), optionsStatus); + +chart.render(); +radialBar.render(); + +pieChart.render(); +pieChart2.render(); +pieChart3.render(); + +statusBar.render(); +// statusBar2.render(); +// statusBar3.render(); +// statusBar4.render(); \ No newline at end of file diff --git a/dash.html b/dash.html index 0049943..998b217 100644 --- a/dash.html +++ b/dash.html @@ -80,11 +80,23 @@

AAIT Clearance System

-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -108,42 +120,10 @@

AAIT Clearance System

- + - + diff --git a/loan.html b/loan.html index bd33b3c..97530ba 100644 --- a/loan.html +++ b/loan.html @@ -81,19 +81,19 @@

AAIT Clearance System

-
+
- +
- - +
+ @@ -106,6 +106,30 @@

AAIT Clearance System

+ + + + + + + + + + + + + + + + + + + + + + + +
Student ID
holaholablabola412aola
qolaholajolahola123hola
aolaholaoolahola126hola
@@ -125,77 +149,74 @@
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - -
- - - -
-
-
- - + +
+
+ + +
- - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +