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 io
|
||||
|
||||
from AppCode.Config import DBConfig
|
||||
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
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
from AppCode.Config import DBConfig
|
||||
import mysql.connector
|
||||
import pandas as pd
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
from AppCode.Config import DBConfig
|
||||
import mysql.connector
|
||||
from AppCode.YearGet import YearGet
|
||||
|
||||
import pandas as pd
|
||||
import pymysql
|
||||
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 AppCode.Config import DBConfig
|
||||
from AppCode.YearGet import YearGet
|
||||
|
||||
|
||||
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 current_app
|
||||
|
||||
from datetime import datetime
|
||||
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
|
||||
|
||||
import os
|
||||
|
||||
class LogHelper:
|
||||
@staticmethod
|
||||
@@ -14,9 +13,7 @@ class LogHelper:
|
||||
logData.WriteLog(action, details="")
|
||||
|
||||
|
||||
|
||||
class LogData:
|
||||
|
||||
filepath = ""
|
||||
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 AppCode.Config import DBConfig
|
||||
from AppCode.LoginAuth import LoginAuth
|
||||
from AppCode.FileHandler import FileHandler
|
||||
from AppCode.YearGet import YearGet
|
||||
from AppCode.DocumentHandler import DocumentHandler
|
||||
from AppCode.ITRHandler import ITRHandler
|
||||
from AppCode.AOHandler import AOHandler
|
||||
from AppCode.CITHandler import CITHandler
|
||||
from AppCode.ITATHandler import ITATHandler
|
||||
from AppCode.YearGet import YearGet
|
||||
from AppCode.LoginAuth import LoginAuth
|
||||
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 {
|
||||
background-color: #f4f6f9;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
/* prevent horizontal scroll for page */
|
||||
}
|
||||
|
||||
/* ================= MAIN CONTENT FIX ================= */
|
||||
/* base.html usually gives sidebar width ~250px */
|
||||
/* ================= MAIN CONTENT ================= */
|
||||
.main {
|
||||
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 {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
@@ -19,6 +27,8 @@ body {
|
||||
padding: 35px 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
|
||||
overflow-x: hidden;
|
||||
/* prevent horizontal scroll */
|
||||
}
|
||||
|
||||
/* ================= HEADING ================= */
|
||||
@@ -52,7 +62,6 @@ form select {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* APPLY BUTTON (GREEN) */
|
||||
form button {
|
||||
background-color: #28a745;
|
||||
color: #ffffff;
|
||||
@@ -62,19 +71,32 @@ form button {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
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 {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
min-width: 700px;
|
||||
/* ensures horizontal scroll on small screens */
|
||||
}
|
||||
|
||||
/* Table Head */
|
||||
thead {
|
||||
background-color: #0d6efd;
|
||||
color: #ffffff;
|
||||
@@ -86,6 +108,7 @@ thead th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Table Body */
|
||||
tbody td {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
@@ -100,7 +123,7 @@ tbody tr:hover {
|
||||
background-color: #eef4ff;
|
||||
}
|
||||
|
||||
/* ================= ACTION LINKS ================= */
|
||||
/* Table action buttons */
|
||||
table a {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
@@ -108,9 +131,9 @@ table a {
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* Download button */
|
||||
table a[href*="download"] {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
@@ -119,7 +142,6 @@ table a[href*="download"]:hover {
|
||||
background-color: #138496;
|
||||
}
|
||||
|
||||
/* View button */
|
||||
table a[href*="view"] {
|
||||
background-color: #20c997;
|
||||
}
|
||||
@@ -129,10 +151,12 @@ table a[href*="view"]:hover {
|
||||
}
|
||||
|
||||
/* ================= RESPONSIVE ================= */
|
||||
|
||||
/* Medium screens: tablets */
|
||||
@media (max-width: 992px) {
|
||||
.main {
|
||||
margin-left: 0;
|
||||
padding: 20px;
|
||||
padding: 50px 20px 20px 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
@@ -144,4 +168,40 @@ table a[href*="view"]:hover {
|
||||
form button {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
/* ===== TABLE WRAPPER (FOR SCROLL) ===== */
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* ===== TABLE ===== */
|
||||
#matTable {
|
||||
width: 100%;
|
||||
min-width: 900px;
|
||||
/* IMPORTANT for horizontal scroll */
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
@@ -42,7 +51,7 @@
|
||||
/* ===== INPUT FIELDS ===== */
|
||||
#matTable input {
|
||||
width: 100%;
|
||||
padding: 6px 6px;
|
||||
padding: 6px;
|
||||
border: 1px solid #cfd8dc;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
@@ -50,12 +59,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* TEXT INPUT (Unutilized) */
|
||||
#matTable input[type="text"] {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* INPUT FOCUS */
|
||||
#matTable input:focus {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
|
||||
@@ -71,76 +74,51 @@
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#matTable button:hover {
|
||||
background-color: #157347;
|
||||
}
|
||||
|
||||
/* ===== SAVE ALL BUTTON ===== */
|
||||
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 ===== */
|
||||
/* ===== ROW STATES ===== */
|
||||
#matTable tbody tr:hover {
|
||||
background-color: #f1f6ff;
|
||||
}
|
||||
|
||||
/* ===== ERROR HIGHLIGHT ===== */
|
||||
.input-error {
|
||||
border-color: #dc3545 !important;
|
||||
background-color: #fff5f5;
|
||||
}
|
||||
|
||||
/* ===== SUCCESS HIGHLIGHT ===== */
|
||||
.row-saved {
|
||||
background-color: #e9f7ef !important;
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
/* ===== MOBILE RESPONSIVE (TABLE FORMAT + INTERNAL SCROLL) ===== */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.container {
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#matTable {
|
||||
font-size: 12px;
|
||||
min-width: 800px;
|
||||
/* keeps table structure */
|
||||
}
|
||||
|
||||
#matTable input {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#matTable thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#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;
|
||||
#matTable button {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,76 +1,162 @@
|
||||
/* ================= GLOBAL ================= */
|
||||
/* ================= RESET ================= */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
/* ================= BODY ================= */
|
||||
body {
|
||||
background: #f4f7f6;
|
||||
display: flex;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background-color: #f4f7f9;
|
||||
overflow: hidden;
|
||||
/* ❌ no scroll desktop/laptop */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* ================= MAIN CONTENT ================= */
|
||||
/* ================= MAIN WRAPPER ================= */
|
||||
.main {
|
||||
margin-left: 20px;
|
||||
padding: 8px;
|
||||
width: calc(100% - 50px);
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transition: 0.3s;
|
||||
margin-left: 260px;
|
||||
margin-top: 80px;
|
||||
width: calc(100% - 260px);
|
||||
height: calc(100vh - 80px);
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ================= CONTAINER ================= */
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
padding: 45px 55px;
|
||||
border-radius: 16px;
|
||||
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;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* ================= REPORT LIST ================= */
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin: 14px 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
/* ================= REPORT BUTTONS ================= */
|
||||
ul li a {
|
||||
color: #007bff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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 {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
background: linear-gradient(135deg, #e3efff, #dbe9ff);
|
||||
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 {
|
||||
margin-left: 0;
|
||||
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 {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background-color: #f4f7f9;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
/* no scroll desktop */
|
||||
}
|
||||
|
||||
/* ================= LINKS ================= */
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: #007bff;
|
||||
@@ -36,7 +44,7 @@ a {
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 80px;
|
||||
height: 70px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
@@ -54,7 +62,6 @@ a {
|
||||
top: 60px;
|
||||
left: 0;
|
||||
padding-top: 20px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #d6d6d6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -68,17 +75,15 @@ a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
padding: 14px 20px;
|
||||
font-size: 17px;
|
||||
font-size: 16px;
|
||||
color: #007bff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
transition: 0.2s;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu-btn:hover {
|
||||
@@ -91,117 +96,142 @@ a {
|
||||
}
|
||||
|
||||
.submenu a {
|
||||
display: block;
|
||||
padding: 12px 35px;
|
||||
display: block;
|
||||
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;
|
||||
margin-left: 250px;
|
||||
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;
|
||||
width: calc(100% - 260px);
|
||||
}
|
||||
|
||||
/* ================= CONTAINER ================= */
|
||||
.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);
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
/* 🔥 laptop & desktop size */
|
||||
background: #ffffff;
|
||||
padding: 45px 55px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #2c3e50;
|
||||
/* ================= HEADING ================= */
|
||||
.container h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1f2d3d;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ================= FORM ================= */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ================= FORM ELEMENTS ================= */
|
||||
label {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
margin-top: 8px;
|
||||
max-width: 320px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
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;
|
||||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
|
||||
}
|
||||
|
||||
/* ================= BUTTONS ================= */
|
||||
/* ================= BUTTON ================= */
|
||||
button {
|
||||
margin-top: 25px;
|
||||
padding: 12px 25px;
|
||||
margin-top: 22px;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
padding: 13px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0069d9;
|
||||
}
|
||||
|
||||
/* Optional: responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
/* ================= LAPTOP ================= */
|
||||
@media (max-width: 1400px) {
|
||||
.container {
|
||||
max-width: 620px;
|
||||
padding: 40px 48px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ================= TABLET ================= */
|
||||
@media (max-width: 992px) {
|
||||
body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
height: auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 100%;
|
||||
.container {
|
||||
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 {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
@@ -8,6 +8,8 @@ form label {
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
/* restrict width on desktop/laptop */
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
@@ -42,21 +44,31 @@ button:hover {
|
||||
background-color: #0069d9;
|
||||
}
|
||||
|
||||
|
||||
/* ================= MAIN CONTAINER ================= */
|
||||
.main {
|
||||
margin-left: 20px;
|
||||
padding: 8px;
|
||||
width: calc(100% - 50px);
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transition: 0.3s;
|
||||
margin-left: 260px;
|
||||
/* sidebar width if exists */
|
||||
padding: 70px 30px 40px 30px;
|
||||
/* top padding for navbar */
|
||||
margin-top: 50px;
|
||||
/* extra top spacing */
|
||||
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-btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 10px 18px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
@@ -70,3 +82,72 @@ button:hover {
|
||||
.back-btn:hover {
|
||||
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;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
font-family: "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ===== BODY ===== */
|
||||
body {
|
||||
background: #f4f7f6;
|
||||
display: flex;
|
||||
background-color: #f4f7f6;
|
||||
overflow: hidden;
|
||||
/* NO SCROLL */
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.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 AREA (NAVBAR ALREADY EXISTS) ===== */
|
||||
.main {
|
||||
margin-left: 20px;
|
||||
padding: 8px;
|
||||
width: calc(100% - 50px);
|
||||
margin-top: 50px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
transition: 0.3s;
|
||||
margin-top: 70px;
|
||||
/* height of navbar */
|
||||
height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
/* LEFT */
|
||||
align-items: flex-start;
|
||||
/* TOP */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ================= FORM CONTAINER ================= */
|
||||
/* ===== FORM CONTAINER ===== */
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
background: #ffffff;
|
||||
padding: 28px 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* ===== HEADING ===== */
|
||||
.container h2 {
|
||||
text-align: center;
|
||||
color: #0d6efd;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff; /* blue heading */
|
||||
}
|
||||
|
||||
/* ===== FORM ELEMENTS ===== */
|
||||
form label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-weight: bold;
|
||||
margin-top: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form input,
|
||||
select {
|
||||
form select,
|
||||
form input[type="file"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ================= BUTTONS ================= */
|
||||
/* ===== BUTTON ===== */
|
||||
button {
|
||||
margin-top: 20px;
|
||||
padding: 10px 18px;
|
||||
background-color: #007bff;
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
padding: 12px;
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0069d9;
|
||||
background-color: #0b5ed7;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 18px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
/* ===== MOBILE VIEW ===== */
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
margin-top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background: #006ae6;
|
||||
}
|
||||
.container {
|
||||
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() {
|
||||
isSidebarOpen = !isSidebarOpen;
|
||||
|
||||
sidebar.classList.toggle("hide", !isSidebarOpen);
|
||||
|
||||
// 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);
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
sidebar.classList.toggle("show");
|
||||
sidebar.classList.toggle("hide");
|
||||
}
|
||||
|
||||
// Toggle submenu — also force sidebar to open if it is hidden
|
||||
function toggleMenu(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";
|
||||
}
|
||||
|
||||
// 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 extra_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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
{% block extra_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 %}
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
{% block extra_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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
{% block extra_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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Download AO Report{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{% block title %}Income Tax Utilities{% endblock %}</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Shared CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Download CIT Report{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{% block content %}
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<h2 style="text-align: center;">Assessing Officer Records 👨💼</h2>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
{% block content %}
|
||||
<!-- 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="container">
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<!-- Load page-specific 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 %}
|
||||
|
||||
{% block content %}
|
||||
@@ -16,15 +16,6 @@
|
||||
|
||||
<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 -->
|
||||
{% if records %}
|
||||
<div class="table-wrapper">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
{% block content %}
|
||||
<!-- 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">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Download ITAT Report{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Download ITR Report{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -4,68 +4,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>LCEPL Income Tax</title>
|
||||
<style>
|
||||
body {
|
||||
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>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<h1 class="title">Laxmi Civil Engineering Services</h1>
|
||||
<h2 class="sub-title">Income Tax Software</h2>
|
||||
<h4 class="subtitle">LOGIN</h4>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %} {% if
|
||||
|
||||
@@ -16,4 +16,4 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Update AO Record{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Update CIT Record{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% block title %}Update ITAT Record{% endblock %}
|
||||
{% block extra_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 %}
|
||||
{% block content %}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% block title %}Update ITR Record{% endblock %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
<div class="container">
|
||||
|
||||
<h2>Document Records</h2>
|
||||
|
||||
<!-- FILTER FORM -->
|
||||
<form method="GET">
|
||||
<label for="year">Filter by Year:</label>
|
||||
@@ -24,55 +23,59 @@
|
||||
</select>
|
||||
|
||||
<label for="stage">Filter by Stage:</label>
|
||||
<select name="stage">
|
||||
<!-- <select name="stage">
|
||||
<option value="">All</option>
|
||||
<option value="ITR">ITR</option>
|
||||
<option value="AO">AO</option>
|
||||
<option value="CIT">CIT</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>
|
||||
|
||||
<button type="submit">Apply</button>
|
||||
</form>
|
||||
|
||||
<!-- DOCUMENT TABLE -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Type</th>
|
||||
<th>Stage</th>
|
||||
<th>Year</th>
|
||||
<th>Uploaded At</th>
|
||||
<th>Download</th>
|
||||
<th>View</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="table-responsive">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File</th>
|
||||
<th>Type</th>
|
||||
<th>Stage</th>
|
||||
<th>Year</th>
|
||||
<th>Uploaded At</th>
|
||||
<th>Download</th>
|
||||
<th>View</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for doc in documents %}
|
||||
<tr>
|
||||
<td>{{ doc.filename }}</td>
|
||||
<td>{{ doc.filetype }}</td>
|
||||
<td>{{ doc.stage }}</td>
|
||||
<td>AY {{ doc.year }}-{{ doc.year +1 }}</td>
|
||||
<td>{{ doc.uploaded_at }}</td>
|
||||
<tbody>
|
||||
{% for doc in documents %}
|
||||
<tr>
|
||||
<td>{{ doc.filename }}</td>
|
||||
<td>{{ doc.filetype }}</td>
|
||||
<td>{{ doc.stage }}</td>
|
||||
<td>AY {{ doc.year }}-{{ doc.year +1 }}</td>
|
||||
<td>{{ doc.uploaded_at }}</td>
|
||||
|
||||
<td>
|
||||
<a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">
|
||||
Download
|
||||
</a>
|
||||
</td>
|
||||
<td> <a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">Download/a>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view" target="_blank">
|
||||
View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<td><a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view"
|
||||
target="_blank">View</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user