UI chnage mobile view and desktop view apllyign css
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
|
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, abort, flash,send_file
|
||||||
|
from werkzeug.utils import secure_filename
|
||||||
|
import pandas as pd
|
||||||
import os
|
import os
|
||||||
|
import io
|
||||||
|
|
||||||
from AppCode.Config import DBConfig
|
from AppCode.Config import DBConfig
|
||||||
from AppCode.FileHandler import FileHandler
|
from AppCode.FileHandler import FileHandler
|
||||||
from werkzeug.utils import secure_filename
|
|
||||||
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, abort, flash,send_file
|
|
||||||
import mysql.connector
|
|
||||||
import pandas as pd
|
|
||||||
import io
|
|
||||||
from AppCode.YearGet import YearGet
|
from AppCode.YearGet import YearGet
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
from AppCode.Config import DBConfig
|
from AppCode.Config import DBConfig
|
||||||
import mysql.connector
|
import mysql.connector
|
||||||
import pandas as pd
|
import pandas as pd
|
||||||
|
|||||||
@@ -1,18 +1,11 @@
|
|||||||
from AppCode.Config import DBConfig
|
|
||||||
import mysql.connector
|
import mysql.connector
|
||||||
from AppCode.YearGet import YearGet
|
|
||||||
|
|
||||||
import pandas as pd
|
import pandas as pd
|
||||||
import pymysql
|
import pymysql
|
||||||
import io
|
import io
|
||||||
|
|
||||||
# new
|
|
||||||
from AppCode.Config import DBConfig
|
|
||||||
import mysql.connector
|
|
||||||
import pandas as pd
|
|
||||||
import io
|
|
||||||
from flask import send_file, render_template, request
|
from flask import send_file, render_template, request
|
||||||
|
|
||||||
|
from AppCode.Config import DBConfig
|
||||||
|
from AppCode.YearGet import YearGet
|
||||||
|
|
||||||
|
|
||||||
class ITRHandler:
|
class ITRHandler:
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
|
import os
|
||||||
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, flash, jsonify, json
|
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, flash, jsonify, json
|
||||||
from flask import current_app
|
from flask import current_app
|
||||||
|
|
||||||
from datetime import datetime
|
from datetime import datetime
|
||||||
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
|
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
|
||||||
|
|
||||||
import os
|
|
||||||
|
|
||||||
class LogHelper:
|
class LogHelper:
|
||||||
@staticmethod
|
@staticmethod
|
||||||
@@ -14,9 +13,7 @@ class LogHelper:
|
|||||||
logData.WriteLog(action, details="")
|
logData.WriteLog(action, details="")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class LogData:
|
class LogData:
|
||||||
|
|
||||||
filepath = ""
|
filepath = ""
|
||||||
timestamp = None
|
timestamp = None
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
4
main.py
4
main.py
@@ -6,14 +6,14 @@ import pandas as pd
|
|||||||
from werkzeug.utils import secure_filename
|
from werkzeug.utils import secure_filename
|
||||||
|
|
||||||
from AppCode.Config import DBConfig
|
from AppCode.Config import DBConfig
|
||||||
|
from AppCode.LoginAuth import LoginAuth
|
||||||
from AppCode.FileHandler import FileHandler
|
from AppCode.FileHandler import FileHandler
|
||||||
|
from AppCode.YearGet import YearGet
|
||||||
from AppCode.DocumentHandler import DocumentHandler
|
from AppCode.DocumentHandler import DocumentHandler
|
||||||
from AppCode.ITRHandler import ITRHandler
|
from AppCode.ITRHandler import ITRHandler
|
||||||
from AppCode.AOHandler import AOHandler
|
from AppCode.AOHandler import AOHandler
|
||||||
from AppCode.CITHandler import CITHandler
|
from AppCode.CITHandler import CITHandler
|
||||||
from AppCode.ITATHandler import ITATHandler
|
from AppCode.ITATHandler import ITATHandler
|
||||||
from AppCode.YearGet import YearGet
|
|
||||||
from AppCode.LoginAuth import LoginAuth
|
|
||||||
from AppCode.MatCreditHandler import MatCreditHandler
|
from AppCode.MatCreditHandler import MatCreditHandler
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,297 +0,0 @@
|
|||||||
/* ================= GLOBAL ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f0f4ff;
|
|
||||||
/* very light blue background */
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff;
|
|
||||||
/* primary blue */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
color: #007bff;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #007bff;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #004085;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #a2cdfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
padding: 30px;
|
|
||||||
margin-top: 80px;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
background: white;
|
|
||||||
padding: 30px;
|
|
||||||
width: 95%;
|
|
||||||
margin: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BACK BUTTON ================= */
|
|
||||||
.back-btn {
|
|
||||||
background: #007bff;
|
|
||||||
padding: 10px 16px;
|
|
||||||
color: white;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= FORM ================= */
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input,
|
|
||||||
form select {
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 5px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #f8f9ff;
|
|
||||||
/* subtle input background */
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
select:focus {
|
|
||||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
|
||||||
/* blue glow on focus */
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid #ccd1d9;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 15px;
|
|
||||||
background-color: #d5edd7;
|
|
||||||
transition: all 0.25s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= SUBMIT BUTTON (GREEN) ================= */
|
|
||||||
button {
|
|
||||||
width: 60%;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-left: 20%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
background-color: #28a745;
|
|
||||||
/* Bootstrap green */
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #218838;
|
|
||||||
/* Darker green on hover */
|
|
||||||
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: #1e7e34;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= TABLE ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-cell form {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Full width rows (span 2 columns) */
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Special case: two inputs inside one form-group */
|
|
||||||
.form-group.inline-2 {
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.inline-2>div {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
/* ================= RESET ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f0f4ff;
|
|
||||||
/* very light blue background */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
max-width: 90%;
|
|
||||||
margin: 20px 20px 20px 20px;
|
|
||||||
/* top margin to clear navbar */
|
|
||||||
background: white;
|
|
||||||
padding: 10%;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-record {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #555;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= FORM ================= */
|
|
||||||
form label {
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000000;
|
|
||||||
/* dark blue text */
|
|
||||||
}
|
|
||||||
|
|
||||||
form input,
|
|
||||||
form select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 6px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input:focus,
|
|
||||||
form select:focus {
|
|
||||||
border-color: #0056b3;
|
|
||||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid #ccd1d9;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 15px;
|
|
||||||
background-color: #d5edd7;
|
|
||||||
transition: all 0.25s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SUBMIT BUTTON (GREEN) ================= */
|
|
||||||
button {
|
|
||||||
width: 60%;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-left: 20%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
background-color: #28a745;
|
|
||||||
/* Bootstrap green */
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #218838;
|
|
||||||
/* Darker green on hover */
|
|
||||||
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: #1e7e34;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= TABLE (if used in this page) ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Full width rows (span 2 columns) */
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Special case: two inputs inside one form-group */
|
|
||||||
.form-group.inline-2 {
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.inline-2>div {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
@@ -1,214 +0,0 @@
|
|||||||
/* ================= GLOBAL ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f0f4ff;
|
|
||||||
/* very light blue background */
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
color: #007bff;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #007bff;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #004085;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= LOGOUT ================= */
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #a2cdfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
padding: 30px;
|
|
||||||
margin-top: 80px;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
background: white;
|
|
||||||
padding: 30px;
|
|
||||||
width: 95%;
|
|
||||||
max-width: 700px;
|
|
||||||
margin: auto;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= FORM ================= */
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
form label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input,
|
|
||||||
form select {
|
|
||||||
padding: 10px;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #f8f9ff;
|
|
||||||
outline: none;
|
|
||||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
select:focus {
|
|
||||||
border-color: #007bff;
|
|
||||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SUBMIT BUTTON (GREEN) ================= */
|
|
||||||
button {
|
|
||||||
width: 60%;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-left: 20%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
background-color: #28a745;
|
|
||||||
/* Bootstrap green */
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #218838;
|
|
||||||
/* Darker green on hover */
|
|
||||||
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: #1e7e34;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
@@ -1,155 +0,0 @@
|
|||||||
/* ================= RESET ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f0f4ff;
|
|
||||||
/* very light blue background */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
max-width: 90%;
|
|
||||||
margin: 20px 20px 20px 20px;
|
|
||||||
/* top margin to clear navbar */
|
|
||||||
background: white;
|
|
||||||
padding: 10%;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-record {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #555;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= FORM ================= */
|
|
||||||
form label {
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000000;
|
|
||||||
/* dark blue text */
|
|
||||||
}
|
|
||||||
|
|
||||||
form input,
|
|
||||||
form select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: 6px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input:focus,
|
|
||||||
form select:focus {
|
|
||||||
border-color: #0056b3;
|
|
||||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auto {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid #ccd1d9;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 15px;
|
|
||||||
background-color: #d5edd7;
|
|
||||||
transition: all 0.25s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SUBMIT BUTTON (GREEN) ================= */
|
|
||||||
button {
|
|
||||||
width: 60%;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-left: 20%;
|
|
||||||
padding: 12px 20px;
|
|
||||||
background-color: #28a745;
|
|
||||||
/* Bootstrap green */
|
|
||||||
color: #ffffff;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #218838;
|
|
||||||
/* Darker green on hover */
|
|
||||||
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: #1e7e34;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= TABLE (if used in this page) ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Full width rows (span 2 columns) */
|
|
||||||
.form-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.full-width {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Special case: two inputs inside one form-group */
|
|
||||||
.form-group.inline-2 {
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group.inline-2>div {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
151
static/css/add_model.css
Normal file
151
static/css/add_model.css
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
/* ================= PAGE WRAPPER ================= */
|
||||||
|
.main {
|
||||||
|
margin-left: 260px;
|
||||||
|
width: calc(100% - 260px);
|
||||||
|
margin-top: 80px;
|
||||||
|
padding: 20px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= CONTAINER ================= */
|
||||||
|
.container {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 25px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= PAGE TITLE ================= */
|
||||||
|
.container h2 {
|
||||||
|
color: #007bff;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= FORM ================= */
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= FORM GROUP ================= */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= INPUTS ================= */
|
||||||
|
form input,
|
||||||
|
form select {
|
||||||
|
padding: 10px 12px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 6px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #f8f9ff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form input:focus,
|
||||||
|
form select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #007bff;
|
||||||
|
box-shadow: 0 0 6px rgba(0, 123, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= AUTO FIELDS ================= */
|
||||||
|
.auto {
|
||||||
|
background-color: #d5edd7;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= INLINE 2 COLUMNS ================= */
|
||||||
|
.form-group.inline-2 {
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.inline-2>div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= SUBMIT BUTTON ================= */
|
||||||
|
button {
|
||||||
|
width: 60%;
|
||||||
|
margin: 25px auto 0;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #28a745;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #218838;
|
||||||
|
box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= MOBILE ================= */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* STACK INPUTS */
|
||||||
|
.form-group.inline-2 {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= SMALL MOBILE ================= */
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
|
||||||
|
form input,
|
||||||
|
form select {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= LARGE SCREEN ================= */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
/* ================= GLOBAL ================= */
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
background-color: #f4f7f9;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: white;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #d6d6d6;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-items {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f4faff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #0056b3;
|
|
||||||
border-bottom: 1px solid #e2eaff;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #006ae6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
margin-top: 80px;
|
|
||||||
padding: 30px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 35px 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= FORM ELEMENTS ================= */
|
|
||||||
label {
|
|
||||||
font-weight: 600;
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
padding: 10px 14px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 250px;
|
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus {
|
|
||||||
border-color: #007bff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
button {
|
|
||||||
margin-top: 25px;
|
|
||||||
padding: 12px 25px;
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #0069d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Optional: responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.main {
|
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
/* ================= GLOBAL ================= */
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
background-color: #f4f7f9;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: white;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #d6d6d6;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-items {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f4faff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #0056b3;
|
|
||||||
border-bottom: 1px solid #e2eaff;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #006ae6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
margin-top: 80px;
|
|
||||||
padding: 30px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 35px 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= FORM ELEMENTS ================= */
|
|
||||||
label {
|
|
||||||
font-weight: 600;
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
padding: 10px 14px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 250px;
|
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus {
|
|
||||||
border-color: #007bff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
button {
|
|
||||||
margin-top: 25px;
|
|
||||||
padding: 12px 25px;
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #0069d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Optional: responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.main {
|
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,255 +0,0 @@
|
|||||||
/* ================= RESET ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f4f7f6;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff; /* primary blue */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
width: auto;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
color: #007bff;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MENU BUTTONS ================= */
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #007bff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #004085;
|
|
||||||
}
|
|
||||||
.no-record {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #555;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= LOGOUT ================= */
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #a2cdfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
padding: 30px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
margin-top: 80px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
max-width: 95%;
|
|
||||||
margin: auto;
|
|
||||||
background: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
.btn {
|
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add {
|
|
||||||
background-color: #28a745;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
position: absolute; /* Pins button to the right side */
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-update {
|
|
||||||
background-color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-delete {
|
|
||||||
background-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= TABLE ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-cell form {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BACK BUTTON ================= */
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 10px 18px;
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
/* ================= RESET ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f4f7f6;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff; /* primary blue */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
width: auto;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
color: #007bff;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MENU BUTTONS ================= */
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #007bff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #004085;
|
|
||||||
}
|
|
||||||
.no-record {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #555;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= LOGOUT ================= */
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #a2cdfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding: 8px;
|
|
||||||
width: calc(100% - 50px);
|
|
||||||
margin-top: 50px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 5;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
max-width: 95%;
|
|
||||||
margin: auto;
|
|
||||||
background: white;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
.btn {
|
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add {
|
|
||||||
background-color: #28a745;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-update {
|
|
||||||
background-color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-delete {
|
|
||||||
background-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= TABLE ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-cell form {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BACK BUTTON ================= */
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 10px 18px;
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
@@ -1,254 +0,0 @@
|
|||||||
/* ================= RESET ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f4f7f6;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff; /* primary blue */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
width: auto;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
color: #007bff;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MENU BUTTONS ================= */
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #007bff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #004085;
|
|
||||||
}
|
|
||||||
.no-record {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #555;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= LOGOUT ================= */
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #a2cdfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding: 8px;
|
|
||||||
width: calc(100% - 50px);
|
|
||||||
margin-top: 50px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 5;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
max-width: 95%;
|
|
||||||
margin: auto;
|
|
||||||
background: white ;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
.btn {
|
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add {
|
|
||||||
background-color: #28a745;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-update {
|
|
||||||
background-color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-delete {
|
|
||||||
background-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= TABLE ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-cell form {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BACK BUTTON ================= */
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 10px 18px;
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
@@ -1,251 +0,0 @@
|
|||||||
/* ================= RESET ================= */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #f4f7f6;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff; /* primary blue */
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
width: auto;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
color: #007bff;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MENU BUTTONS ================= */
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #007bff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-bottom: 1px solid #e0e0e0;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #cce5ff;
|
|
||||||
color: #004085;
|
|
||||||
}
|
|
||||||
.no-record {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #555;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f9f9f9;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ================= LOGOUT ================= */
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #a2cdfa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
padding: 30px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
margin-top: 80px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= CONTAINER ================= */
|
|
||||||
.container {
|
|
||||||
max-width: 95%;
|
|
||||||
margin: auto;
|
|
||||||
background: white;
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
.btn {
|
|
||||||
padding: 8px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-add {
|
|
||||||
background-color: #28a745;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-update {
|
|
||||||
background-color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-delete {
|
|
||||||
background-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= TABLE ================= */
|
|
||||||
.table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
text-align: right;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
td:first-child,
|
|
||||||
th:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-cell form {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BACK BUTTON ================= */
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 10px 18px;
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: #0056b3;
|
|
||||||
}
|
|
||||||
189
static/css/display_model.css
Normal file
189
static/css/display_model.css
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
/* ================= RESET ================= */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Segoe UI", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= BODY ================= */
|
||||||
|
body {
|
||||||
|
background-color: #f4f7f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= MAIN CONTENT ================= */
|
||||||
|
.main {
|
||||||
|
margin-left: 260px;
|
||||||
|
padding: 30px;
|
||||||
|
width: calc(100% - 260px);
|
||||||
|
margin-top: 80px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= CONTAINER ================= */
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= HEADING ================= */
|
||||||
|
.container h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #003366;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= BUTTONS ================= */
|
||||||
|
.btn {
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add {
|
||||||
|
background-color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-update {
|
||||||
|
background-color: #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete {
|
||||||
|
background-color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= NO RECORD ================= */
|
||||||
|
.no-record {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #555;
|
||||||
|
padding: 15px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= TABLE ================= */
|
||||||
|
.table-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
min-width: 900px;
|
||||||
|
/* allows horizontal scroll on mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child,
|
||||||
|
th:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #f0f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= ACTION COLUMN ================= */
|
||||||
|
.action-cell {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-cell form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= TABLET ================= */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
min-width: 800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= MOBILE ================= */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 7px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
min-width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= SMALL MOBILE ================= */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
min-width: 650px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,16 +2,24 @@
|
|||||||
body {
|
body {
|
||||||
background-color: #f4f6f9;
|
background-color: #f4f6f9;
|
||||||
font-family: "Segoe UI", Arial, sans-serif;
|
font-family: "Segoe UI", Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* prevent horizontal scroll for page */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= MAIN CONTENT FIX ================= */
|
/* ================= MAIN CONTENT ================= */
|
||||||
/* base.html usually gives sidebar width ~250px */
|
|
||||||
.main {
|
.main {
|
||||||
margin-left: 260px;
|
margin-left: 260px;
|
||||||
padding: 40px 30px;
|
/* sidebar width */
|
||||||
|
padding: 70px 30px 40px 30px;
|
||||||
|
/* top padding for navbar */
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* prevent horizontal scroll */
|
||||||
|
transition: margin-left 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= CARD / CONTAINER ================= */
|
/* ================= CONTAINER ================= */
|
||||||
.container {
|
.container {
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -19,6 +27,8 @@ body {
|
|||||||
padding: 35px 40px;
|
padding: 35px 40px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* prevent horizontal scroll */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= HEADING ================= */
|
/* ================= HEADING ================= */
|
||||||
@@ -52,7 +62,6 @@ form select {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* APPLY BUTTON (GREEN) */
|
|
||||||
form button {
|
form button {
|
||||||
background-color: #28a745;
|
background-color: #28a745;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@@ -62,19 +71,32 @@ form button {
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: background 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
form button:hover {
|
form button:hover {
|
||||||
background-color: #218838;
|
background-color: #218838;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= TABLE RESPONSIVE ================= */
|
||||||
|
.table-responsive {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
/* only table scrolls */
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
/* smooth scroll on mobile */
|
||||||
|
}
|
||||||
|
|
||||||
/* ================= TABLE ================= */
|
/* ================= TABLE ================= */
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
min-width: 700px;
|
||||||
|
/* ensures horizontal scroll on small screens */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Table Head */
|
||||||
thead {
|
thead {
|
||||||
background-color: #0d6efd;
|
background-color: #0d6efd;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@@ -86,6 +108,7 @@ thead th {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Table Body */
|
||||||
tbody td {
|
tbody td {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -100,7 +123,7 @@ tbody tr:hover {
|
|||||||
background-color: #eef4ff;
|
background-color: #eef4ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= ACTION LINKS ================= */
|
/* Table action buttons */
|
||||||
table a {
|
table a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@@ -108,9 +131,9 @@ table a {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
transition: background 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Download button */
|
|
||||||
table a[href*="download"] {
|
table a[href*="download"] {
|
||||||
background-color: #17a2b8;
|
background-color: #17a2b8;
|
||||||
}
|
}
|
||||||
@@ -119,7 +142,6 @@ table a[href*="download"]:hover {
|
|||||||
background-color: #138496;
|
background-color: #138496;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* View button */
|
|
||||||
table a[href*="view"] {
|
table a[href*="view"] {
|
||||||
background-color: #20c997;
|
background-color: #20c997;
|
||||||
}
|
}
|
||||||
@@ -129,10 +151,12 @@ table a[href*="view"]:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ================= RESPONSIVE ================= */
|
/* ================= RESPONSIVE ================= */
|
||||||
|
|
||||||
|
/* Medium screens: tablets */
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
.main {
|
.main {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding: 20px;
|
padding: 50px 20px 20px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
@@ -144,4 +168,40 @@ table a[href*="view"]:hover {
|
|||||||
form button {
|
form button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small screens: mobile */
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.main {
|
||||||
|
padding: 40px 15px 15px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
font-size: 12px;
|
||||||
|
min-width: 100%;
|
||||||
|
/* table scrolls only */
|
||||||
|
}
|
||||||
|
|
||||||
|
table a {
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form label {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form select,
|
||||||
|
form button {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -163,3 +163,107 @@ body {
|
|||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------- RESPONSIVE ---------------- */
|
||||||
|
|
||||||
|
/* Tablets */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.nav-left h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
height: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbar */
|
||||||
|
.navbar {
|
||||||
|
height: 56px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-left h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
max-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-btn {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar as drawer */
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 56px;
|
||||||
|
left: -100%;
|
||||||
|
width: 85%;
|
||||||
|
max-width: 280px;
|
||||||
|
height: calc(100vh - 56px);
|
||||||
|
z-index: 2000;
|
||||||
|
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.show {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.hide {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content full width */
|
||||||
|
.main {
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 70px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Very small phones */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.nav-left h3 {
|
||||||
|
display: none;
|
||||||
|
/* hide long company name */
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,207 +0,0 @@
|
|||||||
/* ================= GLOBAL ================= */
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
||||||
background-color: #f4f7f9;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none !important;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: white;
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #d6d6d6;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-items {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff;
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f4faff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #0056b3;
|
|
||||||
border-bottom: 1px solid #e2eaff;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #006ae6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN ================= */
|
|
||||||
.main {
|
|
||||||
margin-left: 260px;
|
|
||||||
margin-top: 80px;
|
|
||||||
padding: 30px;
|
|
||||||
width: calc(100% - 260px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: auto;
|
|
||||||
background: #fff;
|
|
||||||
padding: 35px 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= FORM ELEMENTS ================= */
|
|
||||||
label {
|
|
||||||
font-weight: 600;
|
|
||||||
display: block;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
padding: 10px 14px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 250px;
|
|
||||||
margin-top: 8px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus {
|
|
||||||
border-color: #007bff;
|
|
||||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
|
||||||
button {
|
|
||||||
margin-top: 25px;
|
|
||||||
padding: 12px 25px;
|
|
||||||
background-color: #007bff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: #0069d9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Optional: responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.main {
|
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
169
static/css/login.css
Normal file
169
static/css/login.css
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
/* ================= RESET ================= */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= BODY ================= */
|
||||||
|
body {
|
||||||
|
font-family: "Segoe UI", Arial, sans-serif;
|
||||||
|
background: #eef2f6;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= LOGIN CARD ================= */
|
||||||
|
.login-container {
|
||||||
|
background: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
padding: 28px;
|
||||||
|
|
||||||
|
border-radius: 14px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= MAIN HEADING ================= */
|
||||||
|
.title {
|
||||||
|
color: #007bff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
/* keep single line */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= SUB HEADING ================= */
|
||||||
|
.sub-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #444;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
/* keep single line */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= LOGIN TEXT ================= */
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= FLASH MESSAGE ================= */
|
||||||
|
.flash {
|
||||||
|
color: #d9534f;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= INPUTS ================= */
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 14px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: #007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= BUTTON ================= */
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
|
||||||
|
background: #007bff;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= MOBILE DEVICES ================= */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= TABLETS ================= */
|
||||||
|
@media (min-width: 481px) and (max-width: 768px) {
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= LARGE SCREENS ================= */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
max-width: 460px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,9 +8,18 @@
|
|||||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== TABLE WRAPPER (FOR SCROLL) ===== */
|
||||||
|
.table-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== TABLE ===== */
|
/* ===== TABLE ===== */
|
||||||
#matTable {
|
#matTable {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 900px;
|
||||||
|
/* IMPORTANT for horizontal scroll */
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -42,7 +51,7 @@
|
|||||||
/* ===== INPUT FIELDS ===== */
|
/* ===== INPUT FIELDS ===== */
|
||||||
#matTable input {
|
#matTable input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 6px 6px;
|
padding: 6px;
|
||||||
border: 1px solid #cfd8dc;
|
border: 1px solid #cfd8dc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@@ -50,12 +59,6 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* TEXT INPUT (Unutilized) */
|
|
||||||
#matTable input[type="text"] {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* INPUT FOCUS */
|
|
||||||
#matTable input:focus {
|
#matTable input:focus {
|
||||||
border-color: #0d6efd;
|
border-color: #0d6efd;
|
||||||
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
|
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
|
||||||
@@ -71,76 +74,51 @@
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
transition: 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#matTable button:hover {
|
#matTable button:hover {
|
||||||
background-color: #157347;
|
background-color: #157347;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== SAVE ALL BUTTON ===== */
|
/* ===== ROW STATES ===== */
|
||||||
button[onclick="saveAll()"] {
|
|
||||||
display: block;
|
|
||||||
width: 300px;
|
|
||||||
margin: 25px auto 0;
|
|
||||||
background-color: #28a745;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[onclick="saveAll()"]:hover {
|
|
||||||
background-color: #218838;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== ROW HOVER ===== */
|
|
||||||
#matTable tbody tr:hover {
|
#matTable tbody tr:hover {
|
||||||
background-color: #f1f6ff;
|
background-color: #f1f6ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== ERROR HIGHLIGHT ===== */
|
|
||||||
.input-error {
|
.input-error {
|
||||||
border-color: #dc3545 !important;
|
border-color: #dc3545 !important;
|
||||||
background-color: #fff5f5;
|
background-color: #fff5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== SUCCESS HIGHLIGHT ===== */
|
|
||||||
.row-saved {
|
.row-saved {
|
||||||
background-color: #e9f7ef !important;
|
background-color: #e9f7ef !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== RESPONSIVE ===== */
|
/* ===== MOBILE RESPONSIVE (TABLE FORMAT + INTERNAL SCROLL) ===== */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
#matTable {
|
#matTable {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
min-width: 800px;
|
||||||
|
/* keeps table structure */
|
||||||
|
}
|
||||||
|
|
||||||
|
#matTable input {
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#matTable thead {
|
#matTable button {
|
||||||
display: none;
|
font-size: 12px;
|
||||||
}
|
padding: 5px 10px;
|
||||||
|
|
||||||
#matTable tbody tr {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#matTable tbody td {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#matTable tbody td::before {
|
|
||||||
content: attr(data-label);
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0d6efd;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,76 +1,162 @@
|
|||||||
/* ================= GLOBAL ================= */
|
/* ================= RESET ================= */
|
||||||
* {
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: "Segoe UI", sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= BODY ================= */
|
||||||
body {
|
body {
|
||||||
background: #f4f7f6;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
display: flex;
|
background-color: #f4f7f9;
|
||||||
|
overflow: hidden;
|
||||||
|
/* ❌ no scroll desktop/laptop */
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
/* ================= MAIN WRAPPER ================= */
|
||||||
text-decoration: none !important;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
.main {
|
||||||
margin-left: 20px;
|
margin-left: 260px;
|
||||||
padding: 8px;
|
margin-top: 80px;
|
||||||
width: calc(100% - 50px);
|
width: calc(100% - 260px);
|
||||||
margin-top: 50px;
|
height: calc(100vh - 80px);
|
||||||
position: relative;
|
padding: 0 30px;
|
||||||
z-index: 5;
|
display: flex;
|
||||||
transition: 0.3s;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= CONTAINER ================= */
|
||||||
.container {
|
.container {
|
||||||
background: white;
|
max-width: 900px;
|
||||||
padding: 30px;
|
width: 100%;
|
||||||
width: 95%;
|
background: #ffffff;
|
||||||
margin: auto;
|
padding: 45px 55px;
|
||||||
border-radius: 8px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
/* ⬇️ MOVE UP & LEFT */
|
||||||
|
transform: translate(-40px, -30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
/* ================= HEADING ================= */
|
||||||
|
.container h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2d3d;
|
||||||
|
margin-bottom: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= REPORT LIST ================= */
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
display: grid;
|
||||||
margin-top: 20px;
|
grid-template-columns: 1fr;
|
||||||
text-align: center;
|
gap: 18px;
|
||||||
}
|
|
||||||
|
|
||||||
ul li {
|
|
||||||
margin: 14px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= REPORT BUTTONS ================= */
|
||||||
ul li a {
|
ul li a {
|
||||||
color: #007bff;
|
display: flex;
|
||||||
font-size: 18px;
|
align-items: center;
|
||||||
font-weight: 600;
|
justify-content: center;
|
||||||
transition: 0.2s;
|
padding: 20px;
|
||||||
|
background: linear-gradient(135deg, #f1f7ff, #e9f2ff);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: #0056ff;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #e1ecff;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li a:hover {
|
ul li a:hover {
|
||||||
color: #0056b3;
|
background: linear-gradient(135deg, #e3efff, #dbe9ff);
|
||||||
text-decoration: underline;
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 8px 18px rgba(0, 86, 255, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= LAPTOP VIEW ================= */
|
||||||
|
@media (max-width: 1400px) and (min-width: 992px) {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 820px;
|
||||||
|
padding: 40px 45px;
|
||||||
|
transform: translate(-30px, -20px);
|
||||||
|
/* ⬅️ softer move */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li a {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= TABLET ================= */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* ================= RESPONSIVE ================= */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.main {
|
.main {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px;
|
height: auto;
|
||||||
|
padding: 40px 25px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
transform: none;
|
||||||
|
/* ❌ reset move */
|
||||||
|
padding: 40px 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= MOBILE ================= */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-top: 70px;
|
||||||
|
height: auto;
|
||||||
|
padding: 25px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
transform: none;
|
||||||
|
/* ❌ reset move */
|
||||||
|
padding: 28px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li a {
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= SMALL MOBILE ================= */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 22px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li a {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,12 +1,20 @@
|
|||||||
/* ================= GLOBAL ================= */
|
/* ================= RESET ================= */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= BODY ================= */
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
background-color: #f4f7f9;
|
background-color: #f4f7f9;
|
||||||
margin: 0;
|
height: 100vh;
|
||||||
padding: 0;
|
overflow: hidden;
|
||||||
display: flex;
|
/* no scroll desktop */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= LINKS ================= */
|
||||||
a {
|
a {
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
color: #007bff;
|
color: #007bff;
|
||||||
@@ -36,7 +44,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo {
|
.nav-logo {
|
||||||
height: 80px;
|
height: 70px;
|
||||||
filter: brightness(0) invert(1);
|
filter: brightness(0) invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -54,7 +62,6 @@ a {
|
|||||||
top: 60px;
|
top: 60px;
|
||||||
left: 0;
|
left: 0;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #d6d6d6;
|
border-right: 1px solid #d6d6d6;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -68,17 +75,15 @@ a {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-btn {
|
.menu-btn {
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
font-size: 17px;
|
font-size: 16px;
|
||||||
color: #007bff;
|
color: #007bff;
|
||||||
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 1px solid #e5e5e5;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-btn:hover {
|
.menu-btn:hover {
|
||||||
@@ -91,117 +96,142 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.submenu a {
|
.submenu a {
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
padding: 12px 35px;
|
||||||
|
display: block;
|
||||||
color: #0056b3;
|
color: #0056b3;
|
||||||
border-bottom: 1px solid #e2eaff;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #006ae6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= MAIN ================= */
|
/* ================= MAIN ================= */
|
||||||
.main {
|
.main {
|
||||||
margin-left: 260px;
|
margin-left: 250px;
|
||||||
margin-top: 80px;
|
margin-top: 60px;
|
||||||
|
width: calc(100% - 250px);
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/* ✅ vertical center */
|
||||||
|
justify-content: center;
|
||||||
|
/* ✅ horizontal center */
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
width: calc(100% - 260px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= CONTAINER ================= */
|
||||||
.container {
|
.container {
|
||||||
max-width: 600px;
|
width: 100%;
|
||||||
margin: auto;
|
max-width: 680px;
|
||||||
background: #fff;
|
/* 🔥 laptop & desktop size */
|
||||||
padding: 35px 40px;
|
background: #ffffff;
|
||||||
border-radius: 10px;
|
padding: 45px 55px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
/* ================= HEADING ================= */
|
||||||
color: #2c3e50;
|
.container h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1f2d3d;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
font-weight: 600;
|
}
|
||||||
|
|
||||||
|
/* ================= FORM ================= */
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= FORM ELEMENTS ================= */
|
/* ================= FORM ELEMENTS ================= */
|
||||||
label {
|
label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
display: block;
|
margin-bottom: 6px;
|
||||||
margin-top: 10px;
|
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
padding: 10px 14px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 250px;
|
max-width: 320px;
|
||||||
margin-top: 8px;
|
padding: 12px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
select:focus {
|
select:focus {
|
||||||
border-color: #007bff;
|
border-color: #007bff;
|
||||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
|
|
||||||
outline: none;
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
/* ================= BUTTON ================= */
|
||||||
button {
|
button {
|
||||||
margin-top: 25px;
|
margin-top: 22px;
|
||||||
padding: 12px 25px;
|
width: 100%;
|
||||||
|
max-width: 320px;
|
||||||
|
padding: 13px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #0069d9;
|
background-color: #0069d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Optional: responsive adjustments */
|
/* ================= LAPTOP ================= */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
max-width: 620px;
|
||||||
|
padding: 40px 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= TABLET ================= */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px;
|
height: auto;
|
||||||
|
padding: 40px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
.container {
|
||||||
max-width: 100%;
|
max-width: 560px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= MOBILE ================= */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-top: 70px;
|
||||||
|
height: auto;
|
||||||
|
padding: 20px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 28px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
button {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
/* ================= FORM ELEMENTS ================= */
|
/* ================= GLOBAL FORM ELEMENTS ================= */
|
||||||
form label {
|
form label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
@@ -8,6 +8,8 @@ form label {
|
|||||||
|
|
||||||
select {
|
select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
/* restrict width on desktop/laptop */
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -42,21 +44,31 @@ button:hover {
|
|||||||
background-color: #0069d9;
|
background-color: #0069d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= MAIN CONTAINER ================= */
|
||||||
.main {
|
.main {
|
||||||
margin-left: 20px;
|
margin-left: 260px;
|
||||||
padding: 8px;
|
/* sidebar width if exists */
|
||||||
width: calc(100% - 50px);
|
padding: 70px 30px 40px 30px;
|
||||||
margin-top: 50px;
|
/* top padding for navbar */
|
||||||
position: relative;
|
margin-top: 50px;
|
||||||
z-index: 5;
|
/* extra top spacing */
|
||||||
transition: 0.3s;
|
width: auto;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 35px 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= BACK BUTTON ================= */
|
/* ================= BACK BUTTON ================= */
|
||||||
.back-btn {
|
.back-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 20px;
|
margin-top: 20px;
|
||||||
padding: 10px 18px;
|
padding: 10px 18px;
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -70,3 +82,72 @@ button:hover {
|
|||||||
.back-btn:hover {
|
.back-btn:hover {
|
||||||
background-color: #006ae6;
|
background-color: #006ae6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ================= MESSAGES ================= */
|
||||||
|
.message {
|
||||||
|
margin-top: 15px;
|
||||||
|
color: #555;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ================= RESPONSIVE ================= */
|
||||||
|
|
||||||
|
/* Tablets (<= 992px) */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.main {
|
||||||
|
margin-left: 0;
|
||||||
|
/* remove sidebar spacing */
|
||||||
|
padding: 50px 20px 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 25px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
max-width: 100%;
|
||||||
|
/* full width */
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
/* full width */
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile (<= 576px) */
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.main {
|
||||||
|
padding: 40px 15px 15px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,202 +1,101 @@
|
|||||||
/* ================= GLOBAL ================= */
|
/* ===== RESET ===== */
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: "Segoe UI", sans-serif;
|
font-family: "Segoe UI", Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== BODY ===== */
|
||||||
body {
|
body {
|
||||||
background: #f4f7f6;
|
background-color: #f4f7f6;
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
|
/* NO SCROLL */
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
/* ===== MAIN AREA (NAVBAR ALREADY EXISTS) ===== */
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= NAVBAR ================= */
|
|
||||||
.navbar {
|
|
||||||
width: 100%;
|
|
||||||
height: 60px;
|
|
||||||
background-color: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: white;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-logo {
|
|
||||||
height: 80px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-btn {
|
|
||||||
font-size: 26px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= SIDEBAR ================= */
|
|
||||||
.sidebar {
|
|
||||||
width: 250px;
|
|
||||||
background: white; /* ← clean white sidebar */
|
|
||||||
height: calc(100vh - 60px);
|
|
||||||
position: fixed;
|
|
||||||
top: 60px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-right: 1px solid #d6d6d6;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.hide {
|
|
||||||
left: -250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-items {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn {
|
|
||||||
padding: 14px 20px;
|
|
||||||
font-size: 17px;
|
|
||||||
color: #007bff; /* blue text */
|
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
transition: 0.2s;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-btn:hover {
|
|
||||||
background: #e9f3ff; /* light blue hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu {
|
|
||||||
display: none;
|
|
||||||
background: #f4faff; /* very light blue */
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a {
|
|
||||||
display: block;
|
|
||||||
padding: 12px 35px;
|
|
||||||
color: #0056b3;
|
|
||||||
border-bottom: 1px solid #e2eaff;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submenu a:hover {
|
|
||||||
background: #e9f3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #007bff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-logout:hover {
|
|
||||||
background: #006ae6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================= MAIN CONTENT ================= */
|
|
||||||
.main {
|
.main {
|
||||||
margin-left: 20px;
|
margin-top: 70px;
|
||||||
padding: 8px;
|
/* height of navbar */
|
||||||
width: calc(100% - 50px);
|
height: calc(100vh - 70px);
|
||||||
margin-top: 50px;
|
display: flex;
|
||||||
position: relative;
|
justify-content: flex-start;
|
||||||
z-index: 5;
|
/* LEFT */
|
||||||
transition: 0.3s;
|
align-items: flex-start;
|
||||||
|
/* TOP */
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= FORM CONTAINER ================= */
|
/* ===== FORM CONTAINER ===== */
|
||||||
.container {
|
.container {
|
||||||
background: white;
|
width: 100%;
|
||||||
padding: 30px;
|
max-width: 520px;
|
||||||
width: 95%;
|
background: #ffffff;
|
||||||
margin: auto;
|
padding: 28px 30px;
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
/* ===== HEADING ===== */
|
||||||
|
.container h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
color: #0d6efd;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
color: #007bff; /* blue heading */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== FORM ELEMENTS ===== */
|
||||||
form label {
|
form label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 10px;
|
margin-top: 14px;
|
||||||
font-weight: bold;
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
form input,
|
form select,
|
||||||
select {
|
form input[type="file"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================= BUTTONS ================= */
|
/* ===== BUTTON ===== */
|
||||||
button {
|
button {
|
||||||
margin-top: 20px;
|
width: 100%;
|
||||||
padding: 10px 18px;
|
margin-top: 22px;
|
||||||
background-color: #007bff;
|
padding: 12px;
|
||||||
|
background-color: #0d6efd;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background-color: #0069d9;
|
background-color: #0b5ed7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-btn {
|
/* ===== MOBILE VIEW ===== */
|
||||||
display: inline-block;
|
@media (max-width: 768px) {
|
||||||
margin-bottom: 20px;
|
.main {
|
||||||
padding: 10px 18px;
|
margin-top: 60px;
|
||||||
background: #007bff;
|
height: calc(100vh - 60px);
|
||||||
color: white;
|
padding: 12px;
|
||||||
font-size: 15px;
|
}
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 6px;
|
|
||||||
transition: 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
.container {
|
||||||
background: #006ae6;
|
max-width: 100%;
|
||||||
}
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,61 +1,10 @@
|
|||||||
const sidebar = document.getElementById("sidebar");
|
|
||||||
const main = document.getElementById("main");
|
|
||||||
|
|
||||||
// Track toggle manually
|
|
||||||
let isSidebarOpen = true;
|
|
||||||
|
|
||||||
// Toggle sidebar normally
|
|
||||||
function toggleSidebar() {
|
function toggleSidebar() {
|
||||||
isSidebarOpen = !isSidebarOpen;
|
const sidebar = document.getElementById("sidebar");
|
||||||
|
sidebar.classList.toggle("show");
|
||||||
sidebar.classList.toggle("hide", !isSidebarOpen);
|
sidebar.classList.toggle("hide");
|
||||||
|
|
||||||
// Add temporary transition only during toggle
|
|
||||||
main.style.transition = "margin-left 0.3s ease";
|
|
||||||
sidebar.style.transition = "left 0.3s ease";
|
|
||||||
|
|
||||||
// Adjust main margin
|
|
||||||
main.style.marginLeft = isSidebarOpen ? "260px" : "20px";
|
|
||||||
|
|
||||||
// Remove transitions after animation to avoid disturbance
|
|
||||||
setTimeout(() => {
|
|
||||||
main.style.transition = "none";
|
|
||||||
sidebar.style.transition = "none";
|
|
||||||
}, 300);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle submenu — also force sidebar to open if it is hidden
|
|
||||||
function toggleMenu(id) {
|
function toggleMenu(id) {
|
||||||
const menu = document.getElementById(id);
|
const menu = document.getElementById(id);
|
||||||
if (!menu) return;
|
|
||||||
|
|
||||||
// 👉 If sidebar is collapsed, open it automatically
|
|
||||||
if (!isSidebarOpen) {
|
|
||||||
isSidebarOpen = true;
|
|
||||||
sidebar.classList.remove("hide");
|
|
||||||
main.style.marginLeft = "260px";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Close all other submenus
|
|
||||||
document.querySelectorAll(".submenu").forEach(sm => {
|
|
||||||
if (sm !== menu) sm.style.display = "none";
|
|
||||||
});
|
|
||||||
|
|
||||||
// Toggle the clicked submenu instantly
|
|
||||||
menu.style.display = menu.style.display === "block" ? "none" : "block";
|
menu.style.display = menu.style.display === "block" ? "none" : "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove transition when clicking submenu links
|
|
||||||
document.querySelectorAll(".submenu a").forEach(link => {
|
|
||||||
link.addEventListener("click", () => {
|
|
||||||
main.style.transition = "none";
|
|
||||||
sidebar.style.transition = "none";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize sidebar as open when page loads
|
|
||||||
window.addEventListener("DOMContentLoaded", () => {
|
|
||||||
sidebar.classList.remove("hide");
|
|
||||||
main.style.marginLeft = "260px";
|
|
||||||
isSidebarOpen = true;
|
|
||||||
});
|
|
||||||
|
|||||||
Binary file not shown.
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Add New AO Record{% endblock %}
|
{% block title %}Add New AO Record{% endblock %}
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<!-- Child page CSS -->
|
<!-- Child page CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_ao.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<!-- Child page CSS -->
|
<!-- Child page CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_cit.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<!-- Child page CSS -->
|
<!-- Child page CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itr.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<!-- Child page CSS -->
|
<!-- Child page CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itr.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Download AO Report{% endblock %}
|
{% block title %}Download AO Report{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/ao_report.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/report_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>{% block title %}Income Tax Utilities{% endblock %}</title>
|
<title>{% block title %}Income Tax Utilities{% endblock %}</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<!-- Shared CSS -->
|
<!-- Shared CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Download CIT Report{% endblock %}
|
{% block title %}Download CIT Report{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/cit_report.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/report_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<!-- Load only display_itr CSS -->
|
<!-- Load only display_itr CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_itr.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_model.css') }}">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<h2 style="text-align: center;">Assessing Officer Records 👨💼</h2>
|
<h2 style="text-align: center;">Assessing Officer Records 👨💼</h2>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<!-- Load only display_itr CSS -->
|
<!-- Load only display_itr CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_cit.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_model.css') }}">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<!-- Load page-specific CSS -->
|
<!-- Load page-specific CSS -->
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_itat.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
@@ -16,15 +16,6 @@
|
|||||||
|
|
||||||
<a href="{{ url_for('add_itat') }}" class="btn btn-add">➕ Add New Record</a>
|
<a href="{{ url_for('add_itat') }}" class="btn btn-add">➕ Add New Record</a>
|
||||||
|
|
||||||
<!-- FLASH MESSAGES -->
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
||||||
{% if messages %}
|
|
||||||
{% for category, message in messages %}
|
|
||||||
<div class="alert alert-{{ category }}">{{ message }}</div>
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% endwith %}
|
|
||||||
|
|
||||||
<!-- TABLE -->
|
<!-- TABLE -->
|
||||||
{% if records %}
|
{% if records %}
|
||||||
<div class="table-wrapper">
|
<div class="table-wrapper">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<!-- Load only display_itr CSS -->
|
<!-- Load only display_itr CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_itr.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/display_model.css') }}">
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Download ITAT Report{% endblock %}
|
{% block title %}Download ITAT Report{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/itat_report.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/report_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Download ITR Report{% endblock %}
|
{% block title %}Download ITR Report{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/itr_report.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/report_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -4,68 +4,14 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>LCEPL Income Tax</title>
|
<title>LCEPL Income Tax</title>
|
||||||
<style>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
body {
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background: #f3f3f3;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-container {
|
|
||||||
background: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"] {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.5rem;
|
|
||||||
background: #007bff;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
color: red;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<h1 class="title">Laxmi Civil Engineering Services</h1>
|
<h1 class="title">Laxmi Civil Engineering Services</h1>
|
||||||
|
<h2 class="sub-title">Income Tax Software</h2>
|
||||||
<h4 class="subtitle">LOGIN</h4>
|
<h4 class="subtitle">LOGIN</h4>
|
||||||
|
|
||||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||||
|
|||||||
@@ -16,4 +16,4 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Update AO Record{% endblock %}
|
{% block title %}Update AO Record{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_ao.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Update CIT Record{% endblock %}
|
{% block title %}Update CIT Record{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_cit.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
{% block title %}Update ITAT Record{% endblock %}
|
{% block title %}Update ITAT Record{% endblock %}
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<!-- Child page CSS -->
|
<!-- Child page CSS -->
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itat.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
{% block title %}Update ITR Record{% endblock %}
|
{% block title %}Update ITR Record{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itr.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_model.css') }}">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|||||||
@@ -12,7 +12,6 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<h2>Document Records</h2>
|
<h2>Document Records</h2>
|
||||||
|
|
||||||
<!-- FILTER FORM -->
|
<!-- FILTER FORM -->
|
||||||
<form method="GET">
|
<form method="GET">
|
||||||
<label for="year">Filter by Year:</label>
|
<label for="year">Filter by Year:</label>
|
||||||
@@ -24,55 +23,59 @@
|
|||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="stage">Filter by Stage:</label>
|
<label for="stage">Filter by Stage:</label>
|
||||||
<select name="stage">
|
<!-- <select name="stage">
|
||||||
<option value="">All</option>
|
<option value="">All</option>
|
||||||
<option value="ITR">ITR</option>
|
<option value="ITR">ITR</option>
|
||||||
<option value="AO">AO</option>
|
<option value="AO">AO</option>
|
||||||
<option value="CIT">CIT</option>
|
<option value="CIT">CIT</option>
|
||||||
<option value="ITAT">ITAT</option>
|
<option value="ITAT">ITAT</option>
|
||||||
|
</select> -->
|
||||||
|
|
||||||
|
<select name="stage">
|
||||||
|
<option value="">All</option>
|
||||||
|
{% set stages = ['ITR','AO','CIT','ITAT'] %}
|
||||||
|
{% for stage in stages %}
|
||||||
|
<option value="{{stage}}">{{stage}}</option>
|
||||||
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button type="submit">Apply</button>
|
<button type="submit">Apply</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- DOCUMENT TABLE -->
|
<!-- DOCUMENT TABLE -->
|
||||||
<table>
|
<div class="table-responsive">
|
||||||
<thead>
|
<table>
|
||||||
<tr>
|
<thead>
|
||||||
<th>File</th>
|
<tr>
|
||||||
<th>Type</th>
|
<th>File</th>
|
||||||
<th>Stage</th>
|
<th>Type</th>
|
||||||
<th>Year</th>
|
<th>Stage</th>
|
||||||
<th>Uploaded At</th>
|
<th>Year</th>
|
||||||
<th>Download</th>
|
<th>Uploaded At</th>
|
||||||
<th>View</th>
|
<th>Download</th>
|
||||||
</tr>
|
<th>View</th>
|
||||||
</thead>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for doc in documents %}
|
{% for doc in documents %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ doc.filename }}</td>
|
<td>{{ doc.filename }}</td>
|
||||||
<td>{{ doc.filetype }}</td>
|
<td>{{ doc.filetype }}</td>
|
||||||
<td>{{ doc.stage }}</td>
|
<td>{{ doc.stage }}</td>
|
||||||
<td>AY {{ doc.year }}-{{ doc.year +1 }}</td>
|
<td>AY {{ doc.year }}-{{ doc.year +1 }}</td>
|
||||||
<td>{{ doc.uploaded_at }}</td>
|
<td>{{ doc.uploaded_at }}</td>
|
||||||
|
|
||||||
<td>
|
<td> <a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">Download/a>
|
||||||
<a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">
|
</td>
|
||||||
Download
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
<td><a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view"
|
||||||
<a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view" target="_blank">
|
target="_blank">View</a></td>
|
||||||
View
|
</tr>
|
||||||
</a>
|
{% endfor %}
|
||||||
</td>
|
</tbody>
|
||||||
</tr>
|
</table>
|
||||||
{% endfor %}
|
</div>
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user