Rayhan/UAS_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement responsive UI layouts and collapsible control panels across application pages

Browse Source
This commit is contained in:
z0rayy
2026-06-11 05:28:31 +07:00
parent b027f02cf0
commit 4e73e17656
7 changed files with 435 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+14 -6
View File
@@ -14,9 +14,9 @@
.bg-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(#334155 1px, transparent 1px); background-size: 40px 40px; opacity: 0.3; z-index: -1; }
.glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(15,23,42,0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
header { text-align: center; margin-bottom: 60px; z-index: 10; }
header h1 { font-size: 42px; font-weight: 800; background: linear-gradient(135deg, #60a5fa, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; }
header p { font-size: 18px; color: #cbd5e1; max-width: 600px; margin: 0 auto; line-height: 1.6; }
header { text-align: center; margin-bottom: 48px; z-index: 10; padding: 0 20px; }
header h1 { font-size: clamp(32px, 5vw, 42px); font-weight: 800; background: linear-gradient(135deg, #60a5fa, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; }
header p { font-size: clamp(15px, 2.4vw, 18px); color: #cbd5e1; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.cards-container { display: flex; gap: 28px; max-width: 1160px; width: 100%; padding: 0 20px; z-index: 10; flex-wrap: wrap; justify-content: center; }
@@ -48,9 +48,17 @@
.admin-link:hover { color: #f8fafc; }
@media (max-width: 768px) {
body { justify-content: flex-start; padding-top: 32px; }
.choice-card { width: 100%; }
header h1 { font-size: 32px; }
body { justify-content: flex-start; padding: 32px 0 86px; }
header { margin-bottom: 28px; }
.cards-container { gap: 18px; padding: 0 14px; }
.choice-card { width: 100%; min-width: 0; max-width: 430px; padding: 28px 22px; }
.choice-card .icon-box { width: 68px; height: 68px; font-size: 30px; margin-bottom: 18px; }
.choice-card h2 { font-size: 21px; }
.admin-link { bottom: 18px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
.choice-card { width: calc(50% - 18px); }
}
</style>
</head>