2 files changed, 162 insertions, 2 deletions
diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css
index a88c229..f482c1b 100644
--- a/uploader/static/css/styles.css
+++ b/uploader/static/css/styles.css
@@ -1,7 +1,161 @@
-.heading {
+body {
+    margin: 0.7em;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 1fr 6fr;
+    grid-template-rows: 5em 100%;
+    grid-gap: 20px;
+
+    font-family: Georgia, Garamond, serif;
+    font-style: normal;
+}
+
+#header {
+    grid-column: 1/3;
+    width: 100%;
+    /* background: cyan; */
+    padding-top: 0.5em;
+    border-radius: 0.5em;
+
+    background-color: #336699;
+    border-color: #080808;
+    color: #FFFFFF;
+    background-image: none;
+}
+
+#header .header {
+    font-size: 2em;
+    display: inline-block;
+    text-align: start;
+}
+
+#header .header-nav {
+    display: inline-block;
+    color: #FFFFFF;
+}
+
+#header .header-nav li {
+    border-width: 1px;
+    border-color: #FFFFFF;
+    vertical-align: middle;
+    margin: 0.2em;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 0.5em;
+    text-align: center;
+}
+
+#header .header-nav a {
+    color: #FFFFFF;
+    text-decoration: none;
+}
+
+#nav-sidebar {
+    grid-column: 1/2;
+    /* background: #e5e5ff; */
+    padding-top: 0.5em;
+    border-radius: 0.5em;
+    font-size: 1.2em;
+}
+
+#main {
+    grid-column: 2/3;
+    width: 100%;
+    /* background: gray; */
+    border-radius: 0.5em;
+}
+
+.pagetitle {
+    padding-top: 0.5em;
+    /* background: pink; */
+    border-radius: 0.5em;
+    /* background-color: #6699CC; */
+    /* background-color: #77AADD; */
+    background-color: #88BBEE;
+}
+
+.pagetitle h1 {
+    text-align: start;
     text-transform: capitalize;
+    padding-left: 0.25em;
+}
+
+.pagetitle .breadcrumb {
+    background: none;
+}
+
+.pagetitle .breadcrumb .active a {
+    color: #333333;
+}
+
+.pagetitle .breadcrumb a {
+    color: #666666;
 }
 
-label {
+.main-content {
+    font-size: 1.275em;
+}
+
+.breadcrumb {
+    text-transform: capitalize;
+}
+
+dd {
+    margin-left: 3em;
+    font-size: 0.88em;
+    padding-bottom: 1em;
+}
+
+input[type="submit"], .btn {
     text-transform: capitalize;
 }
+
+.card {
+    margin-top: 0.3em;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0.3em;
+    border-color: #AAAAAA;
+    padding: 0.5em;
+}
+
+.activemenu {
+    border-style: solid;
+    border-radius: 0.5em;
+    border-color: #AAAAAA;
+    background-color: #EFEFEF;
+}
+
+.danger {
+    color: #A94442;
+    border-color: #DCA7A7;
+    background-color: #F2DEDE;
+}
+
+.heading {
+    border-bottom: solid #EEBB88;
+}
+
+.subheading {
+    padding: 1em 0 0.1em 0.5em;
+    border-bottom: solid #88BBEE;
+}
+
+form {
+    margin-top: 0.3em;
+    background: #E5E5FF;
+    padding: 0.5em;
+    border-radius:0.5em;
+}
+
+form .form-control {
+    background-color: #EAEAFF;
+}
+
+.sidebar-content .card .card-title {
+    font-size: 1.5em;
+}
+
+.sidebar-content .card-text table tbody td:nth-child(1) {
+    font-weight: bolder;
+}
diff --git a/uploader/static/js/misc.js b/uploader/static/js/misc.js
new file mode 100644
index 0000000..cf7b39e
--- /dev/null
+++ b/uploader/static/js/misc.js
@@ -0,0 +1,6 @@
+"Miscellaneous functions and event-handlers"
+
+$(".not-implemented").click((event) => {
+    event.preventDefault();
+    alert("This feature is not implemented yet. Please bear with us.");
+});