Show sourcecode
The following files exists in this folder. Click to view.
webbserverprogrammering/submissions/projekt-quiz/css/
style.css
950 lines ASCII Unix (LF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950
/* Dark Purple Theme for Quiz System */
:root {
--bg-dark: #0d0d0d;
--bg-card: #1a1a2e;
--bg-card-hover: #232342;
--bg-input: #16162a;
--purple-primary: #9b59b6;
--purple-light: #b87fcf;
--purple-dark: #7b3fa0;
--purple-glow: rgba(155, 89, 182, 0.3);
--accent-pink: #e056fd;
--text-primary: #f5f5f5;
--text-secondary: #a0a0a0;
--text-muted: #6c6c6c;
--border-color: #2d2d4a;
--success: #2ecc71;
--success-dark: #27ae60;
--danger: #e74c3c;
--danger-dark: #c0392b;
--warning: #f39c12;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Site Header */
.site-header {
background: var(--bg-card);
border-bottom: 1px solid var(--border-color);
padding: 0 20px;
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
.header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
gap: 20px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text-primary);
}
.logo-icon {
font-size: 1.8em;
}
.logo-text {
font-size: 1.4em;
font-weight: 700;
background: linear-gradient(135deg, var(--purple-light), var(--accent-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.main-nav {
display: flex;
align-items: center;
gap: 5px;
}
.main-nav a {
padding: 10px 16px;
color: var(--text-secondary);
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
font-weight: 500;
}
.main-nav a:hover {
color: var(--text-primary);
background: var(--bg-card-hover);
}
.main-nav a.nav-admin {
color: var(--accent-pink);
}
.main-nav a.nav-admin:hover {
background: rgba(224, 86, 253, 0.15);
}
.header-user {
display: flex;
align-items: center;
gap: 15px;
}
.user-name {
color: var(--text-secondary);
font-size: 0.95em;
}
.main-content {
padding: 20px 0;
}
/* Mobile nav */
@media (max-width: 900px) {
.header-container {
flex-wrap: wrap;
}
.main-nav {
order: 3;
width: 100%;
justify-content: center;
padding-top: 10px;
border-top: 1px solid var(--border-color);
margin-top: 10px;
flex-wrap: wrap;
}
.main-nav a {
padding: 8px 12px;
font-size: 0.9em;
}
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-primary);
margin-bottom: 15px;
}
h1 {
font-size: 2.5em;
background: linear-gradient(135deg, var(--purple-light), var(--accent-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
a {
color: var(--purple-light);
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: var(--accent-pink);
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 24px;
margin: 5px;
border: none;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
text-align: center;
}
.btn-primary {
background: linear-gradient(
135deg,
var(--purple-primary),
var(--purple-dark)
);
color: white;
box-shadow: 0 4px 15px var(--purple-glow);
}
.btn-primary:hover {
background: linear-gradient(
135deg,
var(--purple-light),
var(--purple-primary)
);
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--purple-glow);
}
.btn-secondary {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: var(--bg-card-hover);
border-color: var(--purple-primary);
}
.btn-danger {
background: linear-gradient(135deg, var(--danger), var(--danger-dark));
color: white;
}
.btn-danger:hover {
background: linear-gradient(135deg, #ff6b5b, var(--danger));
transform: translateY(-2px);
}
.btn-success {
background: linear-gradient(135deg, var(--success), var(--success-dark));
color: white;
}
.btn-success:hover {
background: linear-gradient(135deg, #4cd787, var(--success));
transform: translateY(-2px);
}
.btn-admin {
background: linear-gradient(
135deg,
var(--accent-pink),
var(--purple-primary)
);
color: white;
box-shadow: 0 4px 15px rgba(224, 86, 253, 0.3);
}
.btn-admin:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(224, 86, 253, 0.4);
}
.btn-small {
padding: 6px 12px;
font-size: 14px;
}
/* Forms */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--text-secondary);
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 15px;
background: var(--bg-input);
color: var(--text-primary);
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--purple-primary);
box-shadow: 0 0 0 3px var(--purple-glow);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
/* Auth boxes (login, register) */
.login-box,
.register-box,
.admin-login-box {
max-width: 450px;
margin: 60px auto;
padding: 40px;
background: var(--bg-card);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
border: 1px solid var(--border-color);
}
.login-box h1,
.register-box h1,
.admin-login-box h1 {
text-align: center;
margin-bottom: 30px;
}
.login-link,
.register-link,
.back-link {
text-align: center;
margin-top: 20px;
color: var(--text-secondary);
}
/* Messages */
.error-message {
background: rgba(231, 76, 60, 0.15);
color: #ff6b5b;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid rgba(231, 76, 60, 0.3);
}
.success-message {
background: rgba(46, 204, 113, 0.15);
color: #4cd787;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
border: 1px solid rgba(46, 204, 113, 0.3);
}
/* Hero section */
.hero-section {
text-align: center;
padding: 100px 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16162a 50%, #0d0d0d 100%);
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, var(--purple-glow) 0%, transparent 40%),
radial-gradient(
circle at 70% 80%,
rgba(224, 86, 253, 0.2) 0%,
transparent 40%
);
pointer-events: none;
}
.hero-section > * {
position: relative;
z-index: 1;
}
.hero-section h1 {
font-size: 3.5em;
margin-bottom: 20px;
-webkit-text-fill-color: unset;
background: none;
color: white;
text-shadow: 0 0 30px var(--purple-glow);
}
.hero-section p {
font-size: 1.3em;
color: var(--text-secondary);
margin-bottom: 10px;
}
.button-group {
margin: 40px 0;
}
.admin-link-section {
margin-top: 30px;
}
.admin-link-small {
color: var(--text-muted);
font-size: 0.9em;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.3s;
}
.admin-link-small:hover {
opacity: 1;
color: var(--text-secondary);
}
/* Dashboard */
.dashboard {
padding: 20px 0;
}
.dashboard h1 {
margin-bottom: 30px;
}
.action-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
margin: 20px 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
table th,
table td {
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
table th {
background: var(--bg-card-hover);
font-weight: 600;
color: var(--purple-light);
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.5px;
}
table tr:last-child td {
border-bottom: none;
}
table tr:hover td {
background: var(--bg-card-hover);
}
/* Quiz cards */
.quiz-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 25px;
margin: 30px 0;
}
.quiz-card {
background: var(--bg-card);
padding: 25px;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.quiz-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--purple-primary), var(--accent-pink));
}
.quiz-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
border-color: var(--purple-primary);
}
.quiz-card h3 {
margin-bottom: 12px;
color: var(--purple-light);
font-size: 1.3em;
}
.quiz-card p {
color: var(--text-secondary);
margin-bottom: 10px;
}
.quiz-info {
color: var(--text-muted);
font-size: 0.9em;
}
.last-result {
background: var(--bg-input);
padding: 10px 15px;
border-radius: 8px;
margin: 15px 0;
font-size: 0.9em;
color: var(--success);
}
/* Question blocks */
.question-block {
background: var(--bg-card);
padding: 25px;
margin: 25px 0;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
}
.question-block h3,
.question-title {
color: var(--purple-light);
margin-bottom: 15px;
}
.question-text {
font-size: 1.25em;
font-weight: 600;
margin: 20px 0;
color: var(--text-primary);
}
.answers {
margin: 20px 0;
}
.answer-option {
display: flex;
align-items: center;
padding: 15px 20px;
margin: 10px 0;
background: var(--bg-input);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.answer-option:hover {
background: var(--bg-card-hover);
border-color: var(--purple-primary);
}
.answer-option input[type="radio"] {
width: 20px;
height: 20px;
margin-right: 15px;
accent-color: var(--purple-primary);
}
.answer-option.correct {
background: rgba(46, 204, 113, 0.15);
border-color: var(--success);
}
.answer-option.incorrect {
background: rgba(231, 76, 60, 0.15);
border-color: var(--danger);
}
/* Quiz container */
.quiz-container {
max-width: 800px;
margin: 0 auto;
}
.quiz-container > h1 {
text-align: center;
margin-bottom: 10px;
}
.quiz-container > p {
text-align: center;
color: var(--text-secondary);
margin-bottom: 30px;
}
/* Form actions */
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
/* Result page */
.result-container {
max-width: 700px;
margin: 40px auto;
text-align: center;
}
.result-score {
font-size: 4em;
font-weight: 700;
background: linear-gradient(135deg, var(--purple-light), var(--accent-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 30px 0;
}
.result-message {
font-size: 1.5em;
color: var(--text-secondary);
margin-bottom: 30px;
}
/* Leaderboard */
.leaderboard-container {
max-width: 900px;
margin: 0 auto;
}
.filter-form {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
}
.filter-form select {
padding: 10px 15px;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 15px;
}
.filter-form select:focus {
outline: none;
border-color: var(--purple-primary);
}
.rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-weight: 700;
font-size: 0.9em;
}
.rank-1 {
background: linear-gradient(135deg, #ffd700, #ffb700);
color: #000;
}
.rank-2 {
background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
color: #000;
}
.rank-3 {
background: linear-gradient(135deg, #cd7f32, #b06c2a);
color: #fff;
}
/* Footer */
.site-footer {
margin-top: 50px;
padding: 30px 20px;
text-align: center;
color: var(--text-muted);
}
.admin-link-small {
color: var(--text-muted);
text-decoration: none;
font-size: 0.9em;
transition: color 0.3s;
}
.admin-link-small:hover {
color: var(--purple-light);
}
/* Stats cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.stat-card {
background: var(--bg-card);
padding: 25px;
border-radius: 12px;
text-align: center;
border: 1px solid var(--border-color);
}
.stat-value {
font-size: 2.5em;
font-weight: 700;
color: var(--purple-light);
margin-bottom: 5px;
}
.stat-label {
color: var(--text-secondary);
font-size: 0.95em;
}
/* Admin panel */
.admin-panel,
.admin-section {
background: var(--bg-card);
padding: 30px;
border-radius: 16px;
border: 1px solid var(--border-color);
margin-top: 20px;
}
.admin-nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 25px 0;
}
.stat-card {
background: var(--bg-input);
padding: 25px;
border-radius: 12px;
text-align: center;
border: 1px solid var(--border-color);
}
.stat-value {
font-size: 2.5em;
font-weight: 700;
background: linear-gradient(135deg, var(--purple-light), var(--accent-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
color: var(--text-secondary);
margin-top: 10px;
font-size: 0.95em;
}
.action-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.btn-admin {
background: linear-gradient(
135deg,
var(--accent-pink),
var(--purple-primary)
);
color: white;
}
.btn-admin:hover {
background: linear-gradient(
135deg,
var(--purple-primary),
var(--accent-pink)
);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(224, 86, 253, 0.4);
}
/* Badges */
.badge-admin,
.badge-user {
display: inline-block;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
}
.badge-admin {
background: linear-gradient(
135deg,
var(--accent-pink),
var(--purple-primary)
);
color: white;
}
.badge-user {
background: var(--bg-input);
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--purple-primary);
}
/* Responsive */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2.2em;
}
.quiz-list {
grid-template-columns: 1fr;
}
table {
font-size: 14px;
}
table th,
table td {
padding: 10px 12px;
}
.login-box,
.register-box,
.admin-login-box {
margin: 30px 15px;
padding: 25px;
}
.action-buttons {
flex-direction: column;
}
.action-buttons .btn {
width: 100%;
}
.form-actions {
flex-direction: column;
gap: 15px;
}
.form-actions .btn {
width: 100%;
}
h1 {
font-size: 1.8em;
}
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quiz-card,
.question-block,
.stat-card {
animation: fadeIn 0.5s ease forwards;
}
.quiz-card:nth-child(1) {
animation-delay: 0.1s;
}
.quiz-card:nth-child(2) {
animation-delay: 0.2s;
}
.quiz-card:nth-child(3) {
animation-delay: 0.3s;
}
.quiz-card:nth-child(4) {
animation-delay: 0.4s;
}