This commit is contained in:
AliceDarkest
@@ -4,6 +4,8 @@ import com.example.mindflux.service.RegistrationResult;
|
||||
import com.example.mindflux.service.AccountMailService;
|
||||
import com.example.mindflux.service.UserService;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
@@ -11,6 +13,8 @@ import org.springframework.web.bind.annotation.RequestParam;
|
||||
@Controller
|
||||
public class RegisterController {
|
||||
|
||||
private static final Logger log = LoggerFactory.getLogger(RegisterController.class);
|
||||
|
||||
private final UserService userService;
|
||||
private final AccountMailService accountMailService;
|
||||
|
||||
@@ -34,9 +38,13 @@ public class RegisterController {
|
||||
return switch (result) {
|
||||
case SUCCESS -> {
|
||||
try {
|
||||
accountMailService.sendVerificationFor(userService.findByUsernameIgnoreCase(username.trim()));
|
||||
yield "redirect:/?registerSuccess";
|
||||
var user = userService.findByUsernameIgnoreCase(username.trim());
|
||||
yield accountMailService.sendVerificationFor(user)
|
||||
? "redirect:/?registerSuccess"
|
||||
: "redirect:/?registerMailError";
|
||||
} catch (RuntimeException e) {
|
||||
log.warn("mail_event=REGISTRATION_VERIFICATION_FAILED errorType={}",
|
||||
e.getClass().getSimpleName());
|
||||
yield "redirect:/?registerMailError";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@ import org.springframework.mail.SimpleMailMessage;
|
||||
import org.springframework.mail.javamail.JavaMailSender;
|
||||
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
|
||||
import java.nio.charset.StandardCharsets;
|
||||
import java.security.MessageDigest;
|
||||
@@ -25,6 +27,7 @@ import java.util.Optional;
|
||||
public class AccountMailService {
|
||||
|
||||
private static final Duration TOKEN_LIFETIME = Duration.ofHours(24);
|
||||
private static final Logger log = LoggerFactory.getLogger(AccountMailService.class);
|
||||
private final AccountEmailTokenRepository tokenRepository;
|
||||
private final UserRepository userRepository;
|
||||
private final JavaMailSender mailSender;
|
||||
@@ -48,32 +51,48 @@ public class AccountMailService {
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public void sendVerificationFor(User user) {
|
||||
if (user == null || user.isEmailVerified()) {
|
||||
return;
|
||||
public boolean sendVerificationFor(User user) {
|
||||
if (user == null) {
|
||||
log.error("mail_event=VERIFICATION_SKIPPED reason=USER_NOT_FOUND_AFTER_REGISTRATION");
|
||||
return false;
|
||||
}
|
||||
String token = issueToken(user, AccountEmailToken.Purpose.EMAIL_VERIFICATION);
|
||||
send(user.getEmail(), "Bestätige deinen Mindflux-Account",
|
||||
if (user.isEmailVerified()) {
|
||||
log.info("mail_event=VERIFICATION_SKIPPED reason=ALREADY_VERIFIED userId={}", user.getId());
|
||||
return false;
|
||||
}
|
||||
IssuedToken issued = issueToken(user, AccountEmailToken.Purpose.EMAIL_VERIFICATION);
|
||||
send(user, issued, "Bestätige deinen Mindflux-Account",
|
||||
"Hallo " + user.getUsername() + ",\n\n"
|
||||
+ "bitte bestätige deine E-Mail-Adresse, um deinen Account freizuschalten:\n"
|
||||
+ publicUrl + "/verify-email?token=" + token + "\n\n"
|
||||
+ publicUrl + "/verify-email?token=" + issued.rawToken() + "\n\n"
|
||||
+ "Der Link ist 24 Stunden gültig und kann nur einmal verwendet werden.\n\n"
|
||||
+ "Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.");
|
||||
return true;
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public void resendVerification(String email) {
|
||||
uniqueUserForEmail(email).filter(user -> !user.isEmailVerified()).ifPresent(this::sendVerificationFor);
|
||||
Optional<User> user = uniqueUserForEmail(email);
|
||||
if (user.isEmpty()) {
|
||||
log.info("mail_event=VERIFICATION_RESEND_IGNORED reason=NO_UNIQUE_USER recipientFingerprint={}", recipientFingerprint(email));
|
||||
return;
|
||||
}
|
||||
if (user.get().isEmailVerified()) {
|
||||
log.info("mail_event=VERIFICATION_RESEND_IGNORED reason=ALREADY_VERIFIED userId={}", user.get().getId());
|
||||
return;
|
||||
}
|
||||
log.info("mail_event=VERIFICATION_RESEND_REQUESTED userId={}", user.get().getId());
|
||||
sendVerificationFor(user.get());
|
||||
}
|
||||
|
||||
@Transactional
|
||||
public void requestPasswordReset(String email) {
|
||||
uniqueUserForEmail(email).filter(User::isEmailVerified).ifPresent(user -> {
|
||||
String token = issueToken(user, AccountEmailToken.Purpose.PASSWORD_RESET);
|
||||
send(user.getEmail(), "Passwort für deinen Mindflux-Account zurücksetzen",
|
||||
IssuedToken issued = issueToken(user, AccountEmailToken.Purpose.PASSWORD_RESET);
|
||||
send(user, issued, "Passwort für deinen Mindflux-Account zurücksetzen",
|
||||
"Hallo " + user.getUsername() + ",\n\n"
|
||||
+ "über diesen Link kannst du ein neues Passwort vergeben:\n"
|
||||
+ publicUrl + "/reset-password?token=" + token + "\n\n"
|
||||
+ publicUrl + "/reset-password?token=" + issued.rawToken() + "\n\n"
|
||||
+ "Der Link ist 24 Stunden gültig und kann nur einmal verwendet werden.\n\n"
|
||||
+ "Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.");
|
||||
});
|
||||
@@ -91,6 +110,7 @@ public class AccountMailService {
|
||||
value.setConsumedAt(Instant.now());
|
||||
userRepository.save(user);
|
||||
tokenRepository.save(value);
|
||||
log.info("mail_event=VERIFICATION_CONFIRMED userId={} tokenId={}", user.getId(), value.getId());
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -124,7 +144,7 @@ public class AccountMailService {
|
||||
return users.size() == 1 ? Optional.of(users.getFirst()) : Optional.empty();
|
||||
}
|
||||
|
||||
private String issueToken(User user, AccountEmailToken.Purpose purpose) {
|
||||
private IssuedToken issueToken(User user, AccountEmailToken.Purpose purpose) {
|
||||
tokenRepository.deleteByUserAndPurpose(user, purpose);
|
||||
byte[] bytes = new byte[32];
|
||||
secureRandom.nextBytes(bytes);
|
||||
@@ -135,7 +155,9 @@ public class AccountMailService {
|
||||
token.setTokenHash(hash(rawToken));
|
||||
token.setExpiresAt(Instant.now().plus(TOKEN_LIFETIME));
|
||||
tokenRepository.save(token);
|
||||
return rawToken;
|
||||
log.info("mail_event=TOKEN_ISSUED purpose={} userId={} tokenId={} expiresAt={}",
|
||||
purpose, user.getId(), token.getId(), token.getExpiresAt());
|
||||
return new IssuedToken(rawToken, token.getId(), purpose);
|
||||
}
|
||||
|
||||
private Optional<AccountEmailToken> validToken(String rawToken, AccountEmailToken.Purpose purpose) {
|
||||
@@ -146,15 +168,43 @@ public class AccountMailService {
|
||||
.filter(token -> token.getExpiresAt().isAfter(Instant.now()));
|
||||
}
|
||||
|
||||
private void send(String recipient, String subject, String body) {
|
||||
private void send(User user, IssuedToken issued, String subject, String body) {
|
||||
SimpleMailMessage message = new SimpleMailMessage();
|
||||
message.setFrom(fromAddress);
|
||||
message.setTo(recipient);
|
||||
message.setTo(user.getEmail());
|
||||
message.setSubject(subject);
|
||||
message.setText(body);
|
||||
mailSender.send(message);
|
||||
log.info("mail_event=SMTP_SUBMISSION_STARTED purpose={} userId={} tokenId={} recipientFingerprint={}",
|
||||
issued.purpose(), user.getId(), issued.tokenId(), recipientFingerprint(user.getEmail()));
|
||||
try {
|
||||
mailSender.send(message);
|
||||
// JavaMail bestätigt hier nur die Annahme durch den konfigurierten SMTP-Server,
|
||||
// nicht die spätere Zustellung im Postfach. Für Bounces sind dessen Logs/DSN nötig.
|
||||
log.info("mail_event=SMTP_SUBMISSION_ACCEPTED purpose={} userId={} tokenId={}",
|
||||
issued.purpose(), user.getId(), issued.tokenId());
|
||||
} catch (RuntimeException exception) {
|
||||
log.error("mail_event=SMTP_SUBMISSION_FAILED purpose={} userId={} tokenId={} errorType={} detail={}",
|
||||
issued.purpose(), user.getId(), issued.tokenId(), exception.getClass().getSimpleName(),
|
||||
safeFailureDetail(exception.getMessage()));
|
||||
throw exception;
|
||||
}
|
||||
}
|
||||
|
||||
private String recipientFingerprint(String email) {
|
||||
return hash(email == null ? "" : email.trim().toLowerCase()).substring(0, 12);
|
||||
}
|
||||
|
||||
private String safeFailureDetail(String detail) {
|
||||
if (detail == null || detail.isBlank()) {
|
||||
return "none";
|
||||
}
|
||||
String sanitized = detail.replaceAll("(?i)[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}", "[redacted-email]")
|
||||
.replaceAll("[\\r\\n]+", " ");
|
||||
return sanitized.substring(0, Math.min(sanitized.length(), 240));
|
||||
}
|
||||
|
||||
private record IssuedToken(String rawToken, Long tokenId, AccountEmailToken.Purpose purpose) { }
|
||||
|
||||
private String hash(String value) {
|
||||
try {
|
||||
byte[] digest = MessageDigest.getInstance("SHA-256")
|
||||
|
||||
@@ -19,3 +19,4 @@ body[class*="mf-a11y-skin-"] .mf-a11y-head{background:color-mix(in srgb,var(--mf
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-close{background:var(--mf-a11y-accent);color:var(--mf-a11y-ink)}
|
||||
body[class*="mf-a11y-skin-"] .mf-a11y-option[aria-pressed="true"],body[class*="mf-a11y-skin-"] .mf-a11y-option.is-active{border-color:var(--mf-a11y-accent);background:color-mix(in srgb,var(--mf-a11y-accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--mf-a11y-accent)}
|
||||
@media(max-width:700px){.mf-a11y-panel{inset:70px 6px auto 6px!important;width:auto;max-height:calc(100dvh - 82px)}}
|
||||
html[data-theme="light"] body{--mf-a11y-ink:#fff}html[data-theme="light"] .mf-a11y-head{background:var(--surface-2);color:var(--heading)}
|
||||
|
||||
@@ -28,3 +28,6 @@ html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image
|
||||
(Platzierung in accessibility-placement.css). Kein body-padding / Fixed-Dock mehr. */
|
||||
.mf-a11y-trigger{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s}.mf-a11y-trigger:hover{color:var(--accent);border-color:var(--border-accent);box-shadow:0 0 14px var(--glow-w)}.mf-a11y-trigger svg{width:20px;height:20px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
|
||||
.mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"],.mf-a11y-option.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}}
|
||||
/* Okabe-Ito accents need darker values against the light page surface. */
|
||||
html[data-theme="light"][data-mf-color="safe"] body,html[data-theme="light"][data-mf-color="safe"] body *{--success:#0072b2!important;--danger:#8a5f00!important;--secondary:#9c4f79!important;--secondary-2:#19607f!important;--esc-accent:#8a5f00!important;--bh-accent:#a94500!important;--sc-accent:#19607f!important;--nw-accent:#0072b2!important;--mm-accent:#9c4f79!important;--mm-secondary:#19607f!important;--tt-accent:#7a6a00!important;--tt-secondary:#0072b2!important;--dl-accent:#007054!important;--dl-secondary:#19607f!important;--ss-accent:#0072b2!important;--ss-secondary:#8a5f00!important;--ff-accent:#a94500!important;--ff-secondary:#9c4f79!important}
|
||||
.mf-a11y-trigger:hover{box-shadow:var(--g-amb)}
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.achievements-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #00e5ff;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
margin-bottom: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/* === Zurück-Button === */
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.achievements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.achievement-card {
|
||||
background-color: rgba(10, 15, 25, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.07),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.achievement-card:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
.trophy-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.achievement-card h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.achievement-card p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 1rem;
|
||||
font-weight: bold;
|
||||
color: #00e5ff;
|
||||
}
|
||||
|
||||
.locked {
|
||||
opacity: 0.6;
|
||||
filter: grayscale(70%);
|
||||
}
|
||||
|
||||
/* === Unlock-Effekt für freigeschaltete Achievements === */
|
||||
.achievement-card.unlocked {
|
||||
animation: unlock-glow 1s ease-out;
|
||||
}
|
||||
|
||||
/* Animation für Unlock-Glow */
|
||||
@keyframes unlock-glow {
|
||||
0% {
|
||||
box-shadow: 0 0 0 rgba(0, 229, 255, 0);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.7);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Sanftes Pulsieren beim Hover über freigeschaltete Achievements */
|
||||
.achievement-card.unlocked:hover {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
}
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
@@ -1 +1,2 @@
|
||||
.esc-how{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:0 0 1rem}.esc-how>div{display:flex;align-items:center;gap:.65rem;padding:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--muted)}.esc-how b{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;border:1px solid var(--border);border-radius:50%;color:var(--muted)}.esc-how strong,.esc-how small{display:block}.esc-how strong{color:var(--heading);font-size:.78rem}.esc-how small{margin-top:.15rem;font-size:.65rem}.esc-how .done,.esc-how .active{border-color:var(--esc-accent)}.esc-how .done b{background:var(--success);border-color:var(--success);color:#06120a}.esc-how .active{box-shadow:0 0 18px var(--esc-glow)}.esc-puzzle:not(.done) .status{color:var(--esc-accent)}.esc-puzzle:not(.done):hover{border-color:var(--esc-accent);transform:translateY(-2px)}.esc-fragment{display:flex;align-items:center;gap:.45rem}.esc-fragment small{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--esc-accent);color:#160d00;font-size:.6rem}.esc-inventory.complete{border-style:solid;border-color:var(--success)}.esc-ready{margin:.7rem 0 0;color:var(--success);font-size:.75rem}.esc-door{flex-wrap:wrap}.esc-door.ready{border-color:var(--esc-accent);box-shadow:0 0 22px color-mix(in srgb,var(--esc-accent) 14%,transparent)}.esc-door-title{flex-basis:100%;display:flex;justify-content:space-between;align-items:center}.esc-door-title strong{color:var(--heading);font-size:.8rem}.esc-door-feedback{flex-basis:100%;min-height:1.2rem;font-size:.75rem}.esc-door-feedback.ok{color:var(--success)}.esc-door-feedback.bad{color:var(--danger)}.esc-door-feedback.wait{color:var(--esc-accent)}.esc-input.bad{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 28%,transparent)}.esc-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:800px){.esc-how{grid-template-columns:1fr}.esc-door-title{align-items:flex-start}}
|
||||
.esc-how .done b,.esc-fragment small{color:var(--accent-ink)}.esc-how .active{box-shadow:var(--g-strong)}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -344,3 +344,4 @@ body.finalflux-page {
|
||||
/* Prüfungszentrale: ruhige Gold-/Indigo-Konstellation statt Spielhallen-Optik. */
|
||||
body.finalflux-shell,body.finalflux-page { --accent:var(--ff-accent); --accent-2:var(--ff-secondary); --glow-s:var(--ff-glow); --glow-w:color-mix(in srgb,var(--ff-accent) 14%,transparent); background:radial-gradient(circle at 17% 13%,color-mix(in srgb,var(--ff-secondary) 17%,transparent),transparent 30%),radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--ff-accent) 13%,transparent),transparent 28%),#0b0d1b; }
|
||||
body.finalflux-shell::before,body.finalflux-page::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(circle,var(--ff-accent) 0 1px,transparent 1.5px),radial-gradient(circle,var(--ff-secondary) 0 1px,transparent 1.5px); background-size:91px 91px,137px 137px; background-position:14px 22px,47px 65px; }.finalflux-sidebar,.finalflux-main,.finalflux-page { position:relative; z-index:1; }.finalflux-hero,.finalflux-panel,.finalflux-page section { border-left-color:var(--ff-secondary); box-shadow:0 10px 28px color-mix(in srgb,var(--ff-secondary) 9%,transparent); }
|
||||
body.finalflux-shell,body.finalflux-page{background:radial-gradient(circle at 17% 13%,color-mix(in srgb,var(--ff-secondary) 17%,transparent),transparent 30%),radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--ff-accent) 13%,transparent),transparent 28%),var(--bg)}
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
.nw-guide{margin:1rem 0;border:1px solid color-mix(in srgb,var(--nw-accent) 62%,var(--border));border-radius:10px;padding:1rem 1.1rem;background:color-mix(in srgb,#0b2540 74%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,var(--nw-accent) 12%,transparent)}.nw-guide h2{margin:.35rem 0 .5rem;color:var(--heading);font-size:1rem}.nw-guide p,.nw-guide li{color:var(--muted);font-size:.82rem;line-height:1.5}.nw-guide ol{margin:.45rem 0;padding-left:1.25rem}.nw-guide strong{color:var(--text)}.nw-guide code{color:var(--nw-accent);font:700 .78rem "Courier New",monospace}.nw-guide details{margin-top:.7rem;border-top:1px solid var(--border);padding-top:.6rem}.nw-guide summary{color:var(--nw-accent);cursor:pointer;font:700 .72rem "Courier New",monospace;letter-spacing:.05em}.nw-guide dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;margin:.65rem 0 0}.nw-guide dt{color:var(--nw-accent);font-weight:700}.nw-guide dd{margin:0;color:var(--muted);font-size:.8rem}
|
||||
[data-theme="light"] .nw-guide{background:var(--surface);border-color:#d3e2f0;box-shadow:var(--g-soft)}
|
||||
|
||||
@@ -112,3 +112,9 @@ html[data-theme="light"].sn-platform body.finalflux-shell, html[data-theme="ligh
|
||||
}
|
||||
@media (max-width:820px) { html.sn-platform body .mf-sidebar { background:#061114; } }
|
||||
@media (max-width:820px) { html[data-theme="light"].sn-platform body .mf-sidebar { background:#f5fbf7; } }
|
||||
/* Light-mode text must not inherit the white-on-color auth overlay treatment. */
|
||||
html[data-theme="light"].sn-platform body .mf-logo .mark,html[data-theme="light"].sn-platform body .auth-head .mark,html[data-theme="light"].sn-platform body .overlay-panel .o-emblem{filter:none}
|
||||
html[data-theme="light"].sn-platform body .overlay-panel h3{color:#10291f;text-shadow:none}
|
||||
html[data-theme="light"].sn-platform body .overlay-panel p{color:#3c554a}
|
||||
html[data-theme="light"].sn-platform body .ghost-btn{color:#167a52;border-color:rgba(22,122,82,.55)}
|
||||
html[data-theme="light"].sn-platform body .ghost-btn:hover{background:rgba(22,122,82,.10)}
|
||||
|
||||
@@ -1,184 +0,0 @@
|
||||
|
||||
/* === Zurück-Button === */
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #00e5ff;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
/* === Gesamtfortschritt === */
|
||||
.section-overall-progress {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.progress-summary {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 2rem;
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.05),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.circular-progress {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* XP-Leiste */
|
||||
.xp-bar {
|
||||
background-color: #1a1a2e;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.xp-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00e5ff, #4cc3dd);
|
||||
}
|
||||
|
||||
/* === Lernzeitbereich === */
|
||||
.section-learn-time {
|
||||
background: rgba(0, 9, 22, 0.9);
|
||||
padding: 1.5rem;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 229, 255, 0.05),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#learnTimeChart {
|
||||
max-width: 100%;
|
||||
height: 180px !important;
|
||||
}
|
||||
|
||||
/* === Spielkarten === */
|
||||
.section-game-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.game-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
background-color: rgba(10, 15, 25, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.07),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.game-progress-bar {
|
||||
background-color: #1a1a2e;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
height: 10px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.game-progress-bar .fill {
|
||||
height: 100%;
|
||||
background-color: #00e5ff;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
|
||||
@@ -1,207 +0,0 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative; /* wichtig für .back-button */
|
||||
text-align: center;
|
||||
padding: 2rem 1rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #00e5ff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
header .slogan {
|
||||
font-size: 1.2rem;
|
||||
color: #ccc;
|
||||
text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
/* === Zurück-Button === */
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-button {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
max-width: 1000px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 15px rgba(0, 229, 255, 0.05),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: rgba(10, 15, 25, 0.95);
|
||||
padding: 1.5rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 20px rgba(0, 229, 255, 0.2);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: #00e5ff;
|
||||
}
|
||||
|
||||
.switch-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: #888;
|
||||
transition: 0.4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #00e5ff;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.settings-form input {
|
||||
padding: 0.8rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #1a1a2e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.settings-form button {
|
||||
padding: 0.8rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background-color: #00e5ff;
|
||||
color: #00172e;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-form button:hover {
|
||||
background-color: #4cc3dd;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.danger-zone button {
|
||||
background-color: #ff4d4d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.danger-zone button:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: #111122;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #66d9ef;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
body {
|
||||
background-color: #0d1117;
|
||||
color: #00d9ff;
|
||||
font-family: 'Poppins', sans-serif; /* oder deine Mindflux-Schrift */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 40px;
|
||||
border: 1px solid #00d9ff; /* feiner als dashed */
|
||||
border-radius: 20px;
|
||||
background-color: #121826;
|
||||
box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.time-machine {
|
||||
font-size: 2.5rem;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.small-hint {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 20px;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: #00d9ff;
|
||||
color: #0d1117;
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #00aacc;
|
||||
transform: scale(1.05); /* leichter "Hover-Zoom" */
|
||||
}
|
||||
|
||||
/* Responsives Verhalten */
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-button {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@@ -1,551 +1,4 @@
|
||||
/* === Reset === */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* === Animationen === */
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
/* Glanz-Effekt für Hover */
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: -100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade-In für Container beim Laden */
|
||||
@keyframes fadeInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* === Body Hintergrund === */
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(145deg, var(--surface), var(--surface-2));
|
||||
color: var(--heading);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* === Header === */
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
margin: 2rem auto 1rem;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
background-color: var(--panel);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 8px 20px var(--glow-w),
|
||||
0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
transition: all 0.3s ease-in-out;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
header:hover {
|
||||
box-shadow:
|
||||
0 10px 30px var(--glow-s),
|
||||
0 6px 16px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-height: 350px;
|
||||
width: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
max-height: 80px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
header p.slogan {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 0 5px var(--glow-s);
|
||||
}
|
||||
|
||||
/* === Main Bereich === */
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
flex: 1;
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* === Info-Textfeld === */
|
||||
.info-box {
|
||||
flex: 1 1 400px;
|
||||
max-width: 600px;
|
||||
background: rgba(0, 9, 22, 0.9);
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px var(--glow-w),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeInUp 0.9s ease-out;
|
||||
}
|
||||
|
||||
/* === Login/Register Box === */
|
||||
.login-box {
|
||||
flex: 1 1 300px;
|
||||
max-width: 400px;
|
||||
background: rgba(10, 15, 25, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 0 15px var(--glow-w),
|
||||
0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeInUp 1s ease-out;
|
||||
}
|
||||
|
||||
.login-box h2 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.login-box form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-box input,
|
||||
.login-box button {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* === Input === */
|
||||
.login-box input {
|
||||
background-color: var(--heading);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* === Button mit Glanz- und Licht-Effekt === */
|
||||
.login-box button {
|
||||
background-color: var(--accent);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s ease-in-out, transform 0.2s ease;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.login-box button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -75%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
rgba(255, 255, 255, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.5) 50%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
transform: skewX(-20deg);
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
|
||||
.login-box button:hover {
|
||||
background-color: var(--accent-2);
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 15px var(--glow-s), 0 0 30px var(--glow-w) inset;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
footer {
|
||||
background-color: var(--panel);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--accent-2);
|
||||
text-decoration: none;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Kleinere Switch-Größe */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-color: var(--muted);
|
||||
transition: 0.4s;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 6px var(--glow-s);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 6px;
|
||||
font-size: 0.8rem;
|
||||
color: silver;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: var(--heading);
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Bei aktiviertem Switch */
|
||||
input:checked + .slider {
|
||||
background-color: var(--accent);
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.dashboard-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 9, 22, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
box-shadow:
|
||||
0 0 10px var(--glow-w),
|
||||
0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.dashboard-tile:hover {
|
||||
background-color: var(--glow-w);
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 6px 16px var(--glow-s),
|
||||
0 0 20px var(--glow-w) inset;
|
||||
}
|
||||
|
||||
.dashboard-tile span {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 5px var(--glow-s);
|
||||
}
|
||||
|
||||
/* === Profilbereich === */
|
||||
.profile-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
background: rgba(0, 9, 22, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 20px var(--glow-w);
|
||||
animation: fadeInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-form label {
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.profile-form input {
|
||||
padding: 0.75rem;
|
||||
background-color: var(--surface-2);
|
||||
color: var(--heading);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.btn.save {
|
||||
background-color: var(--accent);
|
||||
color: var(--surface-2);
|
||||
}
|
||||
|
||||
.btn.save:hover {
|
||||
background-color: var(--accent-2);
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.danger:hover {
|
||||
background-color: var(--danger);
|
||||
}
|
||||
|
||||
/* Profilbild */
|
||||
.profile-picture img {
|
||||
max-height: 150px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
/* === Tab-Navigation oben === */
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin: 1rem auto 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-nav .tab {
|
||||
padding: 0.6rem 1.2rem;
|
||||
background-color: var(--glow-w);
|
||||
color: var(--accent);
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 2px 6px var(--glow-w);
|
||||
}
|
||||
|
||||
.tab-nav .tab:hover {
|
||||
background-color: var(--glow-s);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.tab-nav .tab.active {
|
||||
background-color: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 600px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
opacity: 1;
|
||||
transition: opacity 1.5s ease-out;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 10px 18px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
transition: background-color 0.3s ease, transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: var(--accent-2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.back-button {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
/* Admin-Button Stil */
|
||||
.admin-btn {
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
|
||||
box-shadow: 0 0 10px var(--glow-s);
|
||||
}
|
||||
|
||||
.admin-btn:hover {
|
||||
background-color: var(--accent-2);
|
||||
box-shadow: 0 0 15px var(--glow-s), 0 0 25px var(--glow-s);
|
||||
transform: scale(1.05);
|
||||
color: var(--surface-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
display: block;
|
||||
background-color: var(--glow-w);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px var(--glow-w);
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
background-color: var(--glow-s);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px var(--glow-w);
|
||||
}
|
||||
|
||||
.admin-card.disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
.admin-actions {
|
||||
text-align: left;
|
||||
margin: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
background-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 10px var(--glow-s);
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
/* Legacy entry point retained for static FinalProtocol lessons.
|
||||
Layout and components live in theme.css and finalflux.css. */
|
||||
html,body{min-height:100%}
|
||||
body{margin:0}
|
||||
|
||||
@@ -249,3 +249,6 @@ body.ss-body {
|
||||
/* Textadventure-Terminal: phosphorige Log-Atmosphäre, Bewertung bleibt blau/rot. */
|
||||
body.ss-body { --accent:var(--ss-accent); --accent-2:var(--ss-secondary); --glow-s:var(--ss-glow); --glow-w:color-mix(in srgb,var(--ss-accent) 15%,transparent); background:radial-gradient(circle at 45% -8%,color-mix(in srgb,var(--ss-accent) 16%,transparent),transparent 42%),#07100b; }
|
||||
body.ss-body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(129,214,149,.18) 4px 5px); }.ss-shell { position:relative; z-index:1; }.ss-code { border-color:color-mix(in srgb,var(--ss-accent) 55%,var(--border)); box-shadow:inset 0 0 28px color-mix(in srgb,var(--ss-accent) 10%,transparent); }.ss-mission-no::before { content:"> "; color:var(--ss-secondary); }
|
||||
/* Daylight keeps the terminal texture without retaining a black stage. */
|
||||
[data-theme="light"] body.ss-body{background:radial-gradient(1100px 500px at 50% -10%,rgba(39,125,73,.08),transparent 60%),#eef6f0}
|
||||
[data-theme="light"] body.ss-body::before{background:repeating-linear-gradient(0deg,rgba(16,64,40,.05) 0 1px,transparent 1px 4px)}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
============================================================ */
|
||||
|
||||
:root, [data-theme="dark"] {
|
||||
color-scheme:dark;
|
||||
--bg:#0a0806; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(240,168,26,.10), transparent 60%);
|
||||
--panel:#13100b; --panel-2:#171209; --surface:#120f0a; --surface-2:#1b1610;
|
||||
--border:#2a2117; --line:#221b12;
|
||||
@@ -29,9 +30,20 @@
|
||||
--fluxtimer-display:#170704; --fluxtimer-segment:#ff765f;
|
||||
--glow-s:rgba(240,168,26,.55); --glow-w:rgba(240,168,26,.16);
|
||||
--g-soft:0 0 18px var(--glow-w);
|
||||
--g-text:0 0 12px var(--glow-s);
|
||||
--g-icon:drop-shadow(0 0 8px var(--glow-s));
|
||||
--g-strong:0 0 20px var(--glow-s);
|
||||
--g-amb:0 0 14px var(--glow-w);
|
||||
--g-card:drop-shadow(0 0 7px var(--glow-w));
|
||||
--g-card-hover:drop-shadow(0 0 16px var(--glow-s));
|
||||
--g-overlay:0 24px 60px rgba(0,0,0,.5);
|
||||
--g-focus:0 0 0 3px var(--glow-w);
|
||||
--g-bar:0 0 10px var(--glow-s);
|
||||
--scroll-thumb:var(--line);
|
||||
}
|
||||
[data-theme="light"] {
|
||||
--bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.10), transparent 60%);
|
||||
color-scheme:light;
|
||||
--bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.05), transparent 60%);
|
||||
--panel:#ffffff; --panel-2:#fdf7ea; --surface:#ffffff; --surface-2:#fbf4e6;
|
||||
--border:#ece1cf; --line:#f1e8d8;
|
||||
--border-accent:rgba(194,65,12,.40); --accent:#c2410c; --accent-2:#b45309; --accent-ink:#ffffff;
|
||||
@@ -51,6 +63,16 @@
|
||||
--fluxtimer-display:#fff5ec; --fluxtimer-segment:#a93131;
|
||||
--glow-s:rgba(214,81,22,.40); --glow-w:rgba(214,81,22,.12);
|
||||
--g-soft:0 6px 18px var(--glow-w);
|
||||
--g-text:none;
|
||||
--g-icon:none;
|
||||
--g-strong:0 2px 10px rgba(67,48,26,.18),0 1px 3px rgba(67,48,26,.10);
|
||||
--g-amb:0 1px 5px rgba(67,48,26,.10);
|
||||
--g-card:drop-shadow(0 2px 5px rgba(67,48,26,.10));
|
||||
--g-card-hover:drop-shadow(0 8px 18px rgba(67,48,26,.16));
|
||||
--g-overlay:0 18px 44px rgba(67,48,26,.20);
|
||||
--g-focus:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
|
||||
--g-bar:none;
|
||||
--scroll-thumb:#d9cbb2;
|
||||
}
|
||||
|
||||
* { box-sizing:border-box; margin:0; padding:0; }
|
||||
@@ -61,7 +83,7 @@ body {
|
||||
min-height:100vh; transition:background-color .35s ease,color .35s ease;
|
||||
}
|
||||
a { color:var(--secondary); }
|
||||
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
|
||||
::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:9px}
|
||||
|
||||
/* ===== App-Shell (Sidebar | Mitte | rechte Spalte) ===== */
|
||||
.mf-shell { display:grid; grid-template-columns:264px 1fr 332px; grid-template-rows:auto 1fr; min-height:100vh; }
|
||||
@@ -76,22 +98,22 @@ a { color:var(--secondary); }
|
||||
.mf-logo { display:flex; align-items:center; gap:.6rem; padding:.2rem .3rem .4rem; text-decoration:none; }
|
||||
.mf-logo .mark { width:38px; height:38px; flex:0 0 auto; background:var(--accent);
|
||||
-webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat; mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
|
||||
filter:drop-shadow(0 0 8px var(--glow-s)); }
|
||||
.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:0 0 12px var(--glow-s); }
|
||||
filter:var(--g-icon); }
|
||||
.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:var(--g-text); }
|
||||
.mf-logo .txt span { color:var(--muted); font-size:.56rem; letter-spacing:.22em; }
|
||||
|
||||
/* ===== Sidebar-Navigation ===== */
|
||||
.mf-nav { display:flex; flex-direction:column; gap:.25rem; }
|
||||
.mf-nav a { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:11px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; border:1px solid transparent; transition:all .18s ease; }
|
||||
.mf-nav a:hover { color:var(--text); background:var(--surface-2); }
|
||||
.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 20px var(--glow-s); }
|
||||
.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:var(--g-strong); }
|
||||
.mf-nav a.active svg { color:var(--accent-ink); }
|
||||
.mf-nav svg { width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
|
||||
|
||||
/* ===== Profil / Level / Streak ===== */
|
||||
.mf-profile { border:1px solid var(--border); border-radius:13px; padding:.7rem; background:var(--surface); }
|
||||
.mf-profile .row { display:flex; align-items:center; gap:.6rem; }
|
||||
.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:0 0 14px var(--glow-s); overflow:hidden; }
|
||||
.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:var(--g-strong); overflow:hidden; }
|
||||
.mf-avatar img { width:100%; height:100%; object-fit:cover; }
|
||||
.mf-profile b { color:var(--heading); font-size:.86rem; display:block; }
|
||||
.mf-profile .role { color:var(--accent); font-size:.72rem; }
|
||||
@@ -99,25 +121,25 @@ a { color:var(--secondary); }
|
||||
.mf-meta .lvl { color:var(--muted); letter-spacing:.04em; } .mf-meta .lvl b { color:var(--heading); }
|
||||
.mf-meta .xp { color:var(--muted); margin:.2rem 0 .35rem; }
|
||||
.mf-streak { display:flex; align-items:center; gap:.55rem; margin-top:.2rem; }
|
||||
.mf-streak .fire { font-size:1.1rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
|
||||
.mf-streak .fire { font-size:1.1rem; filter:var(--g-icon); }
|
||||
.mf-streak b { color:var(--heading); font-size:.82rem; display:block; } .mf-streak small { color:var(--muted); }
|
||||
.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:drop-shadow(0 0 10px var(--glow-s)); }
|
||||
.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:var(--g-icon); }
|
||||
.mf-brain svg { width:150px; height:auto; }
|
||||
|
||||
/* ===== Topbar ===== */
|
||||
.mf-hello h1 { color:var(--heading); font-size:1.85rem; font-weight:800; letter-spacing:-.01em; }
|
||||
.mf-hello h1 .nm { color:var(--accent); text-shadow:0 0 16px var(--glow-s); }
|
||||
.mf-hello h1 .nm { color:var(--accent); text-shadow:var(--g-text); }
|
||||
.mf-hello p { color:var(--muted); margin-top:.35rem; font-size:.95rem; }
|
||||
.mf-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
|
||||
.mf-iconbtn { width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; }
|
||||
.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:0 0 14px var(--glow-w); }
|
||||
.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:var(--g-amb); }
|
||||
.mf-iconbtn svg { width:20px; height:20px; }
|
||||
.mf-search { display:flex; align-items:center; gap:.5rem; min-height:42px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .8rem; color:var(--muted); }
|
||||
.mf-search input { background:none; border:0; outline:none; color:var(--text); font-size:.86rem; width:130px; }
|
||||
.mf-search svg { width:15px; height:15px; }
|
||||
|
||||
/* ===== Theme-Umschalter ===== */
|
||||
.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:0 0 14px var(--glow-w); }
|
||||
.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:var(--g-amb); }
|
||||
.mf-theme svg { width:20px; height:20px; }
|
||||
|
||||
/* ===== HUD-Spielkarten ===== */
|
||||
@@ -125,15 +147,15 @@ a { color:var(--secondary); }
|
||||
.mf-card { position:relative; display:flex; flex-direction:column; padding:1.15rem 1.2rem 1.1rem; background:var(--surface);
|
||||
border:1px solid var(--border-accent); --n:18px;
|
||||
clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
|
||||
text-decoration:none; color:inherit; filter:drop-shadow(0 0 7px var(--glow-w)); transition:transform .16s ease, filter .25s ease, background-color .2s; }
|
||||
text-decoration:none; color:inherit; filter:var(--g-card); transition:transform .16s ease, filter .25s ease, background-color .2s; }
|
||||
.mf-card::before { content:""; position:absolute; left:10px; top:10px; width:14px; height:14px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); opacity:.7; }
|
||||
.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:drop-shadow(0 0 16px var(--glow-s)); }
|
||||
.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
|
||||
.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:var(--g-card-hover); }
|
||||
.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:var(--g-icon); }
|
||||
.mf-card .ico svg { width:100%; height:100%; }
|
||||
.mf-card h3 { color:var(--heading); font-size:1.06rem; font-weight:700; margin-bottom:.4rem; }
|
||||
.mf-card p { color:var(--muted); font-size:.83rem; line-height:1.5; flex:1; }
|
||||
.mf-play { margin-top:.9rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.08em; color:var(--accent); border:1px solid var(--border-accent); border-radius:8px; padding:.5rem .85rem; text-decoration:none; transition:all .18s; }
|
||||
.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 16px var(--glow-s); }
|
||||
.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:var(--g-strong); }
|
||||
.mf-play svg { width:14px; height:14px; }
|
||||
.mf-card-codeescape { --accent:var(--esc-accent); --glow-s:var(--esc-glow); --glow-w:color-mix(in srgb,var(--esc-accent) 16%,transparent); background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),var(--surface); }
|
||||
.mf-card-codeescape::after { content:"ACCESS"; position:absolute; right:12px; top:9px; color:var(--esc-accent); font:700 .52rem/1 "Courier New",monospace; letter-spacing:.12em; opacity:.6; }
|
||||
@@ -143,15 +165,15 @@ a { color:var(--secondary); }
|
||||
|
||||
/* ===== Panels / Widgets ===== */
|
||||
.mf-panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem; box-shadow:var(--g-soft); }
|
||||
.mf-panel.accent { border-color:var(--border-accent); box-shadow:0 0 20px var(--glow-w); }
|
||||
.mf-panel.accent { border-color:var(--border-accent); box-shadow:var(--g-amb); }
|
||||
.mf-panel h4 { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem; }
|
||||
.mf-panel h4 svg { width:15px; height:15px; }
|
||||
.mf-eyebrow { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
|
||||
.mf-bar { height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
|
||||
.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--glow-s); }
|
||||
.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--g-bar); }
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:0 0 18px var(--glow-s); transition:all .18s; }
|
||||
.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:var(--g-strong); transition:all .18s; }
|
||||
.mf-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
|
||||
.mf-btn svg { width:15px; height:15px; }
|
||||
.mf-btn.outline { background:transparent; color:var(--accent); border:1px solid var(--border-accent); box-shadow:none; }
|
||||
@@ -165,7 +187,7 @@ a { color:var(--secondary); }
|
||||
.mf-input, .mf-select, input.mf-input, select.mf-select, textarea.mf-input {
|
||||
width:100%; padding:.65rem .8rem; border-radius:10px; border:1px solid var(--border);
|
||||
background:var(--surface-2); color:var(--text); font-size:.95rem; font-family:inherit; }
|
||||
.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow-w); }
|
||||
.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:var(--g-focus); }
|
||||
.mf-input::placeholder { color:var(--muted); }
|
||||
|
||||
/* ===== Tabellen ===== */
|
||||
@@ -179,7 +201,8 @@ a { color:var(--secondary); }
|
||||
|
||||
/* ===== Standalone-Karte (Login/Auth, einzelne Inhaltsseiten) ===== */
|
||||
.mf-center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem; }
|
||||
.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:0 0 30px var(--glow-w); }
|
||||
.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:var(--g-strong); }
|
||||
[data-theme="dark"] .mf-cardbox { box-shadow:0 0 30px var(--glow-w); }
|
||||
.mf-container { max-width:1000px; margin:0 auto; padding:1.5rem; }
|
||||
.mf-page-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
|
||||
.mf-back { color:var(--accent); text-decoration:none; font-weight:700; font-size:.88rem; }
|
||||
@@ -199,7 +222,7 @@ a { color:var(--secondary); }
|
||||
.mf-footer a + a::before { content:"·"; position:absolute; left:-.6rem; color:var(--border); }
|
||||
|
||||
/* ===== Mobile-Nav (Off-Canvas-Drawer; Button/Backdrop per theme.js injiziert) ===== */
|
||||
.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 14px var(--glow-w); }
|
||||
.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--g-amb); }
|
||||
.mf-burger svg { width:20px; height:20px; }
|
||||
.mf-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1100; }
|
||||
body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||||
@@ -220,7 +243,7 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||||
.mf-sidebar {
|
||||
position:fixed; top:0; left:0; height:100dvh; width:min(284px,82vw); z-index:1200;
|
||||
transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
|
||||
box-shadow:0 18px 50px rgba(0,0,0,.55);
|
||||
box-shadow:var(--g-overlay);
|
||||
}
|
||||
body.mf-nav-open .mf-sidebar { transform:translateX(0); }
|
||||
.mf-burger { display:inline-flex; }
|
||||
@@ -235,4 +258,4 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
|
||||
.mf-tab-nav { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem; }
|
||||
.mf-tab { padding:.55rem .95rem; border-radius:10px; border:1px solid var(--border); color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:700; transition:all .18s ease; }
|
||||
.mf-tab:hover { color:var(--text); background:var(--surface-2); }
|
||||
.mf-tab.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 18px var(--glow-s); border-color:transparent; }
|
||||
.mf-tab.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:var(--g-strong); border-color:transparent; }
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
if (last < tpl.length) code.appendChild(document.createTextNode(tpl.slice(last)));
|
||||
pre.appendChild(code);
|
||||
r.playfield.appendChild(pre);
|
||||
const first = Object.values(inputs)[0]; if (first) first.focus();
|
||||
const first = Object.values(inputs)[0]; if (first) first.focus({ preventScroll: true });
|
||||
return {
|
||||
collect: () => ({ gaps: Object.entries(inputs).map(([pos, i]) => ({ position: Number(pos), text: i.value })) }),
|
||||
lock: () => Object.values(inputs).forEach((i) => { i.disabled = true; }),
|
||||
@@ -230,7 +230,7 @@
|
||||
input.addEventListener('input', preview);
|
||||
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); doCheck(false); } });
|
||||
const wrap = document.createElement('div'); wrap.className = 'dlg-regex';
|
||||
wrap.append(input, list); r.playfield.appendChild(wrap); preview(); input.focus();
|
||||
wrap.append(input, list); r.playfield.appendChild(wrap); preview(); input.focus({ preventScroll: true });
|
||||
return {
|
||||
collect: () => ({ pattern: input.value }),
|
||||
lock: () => { input.disabled = true; },
|
||||
@@ -241,6 +241,7 @@
|
||||
|
||||
// ---------- Ablauf ----------
|
||||
function renderTask() {
|
||||
window.scrollTo(0, 0);
|
||||
const task = session.tasks[index];
|
||||
cur = { task, attempts: 0, solved: false, revealed: false };
|
||||
r.kind.textContent = `Aufgabe ${index + 1}`;
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('[data-fluxcheck]').forEach((check) => {
|
||||
const button = check.querySelector('button');
|
||||
const result = check.querySelector('.fluxcheck-result');
|
||||
|
||||
if (!button || !result) {
|
||||
return;
|
||||
}
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
const selected = check.querySelector('input[type="radio"]:checked');
|
||||
if (!selected) {
|
||||
result.textContent = 'Wähle zuerst eine Antwort aus.';
|
||||
result.className = 'fluxcheck-result wrong';
|
||||
return;
|
||||
}
|
||||
|
||||
const expected = check.dataset.answer;
|
||||
const explanation = check.dataset.explanation || '';
|
||||
const isCorrect = selected.value === expected;
|
||||
|
||||
result.textContent = isCorrect
|
||||
? 'Richtig. ' + explanation
|
||||
: 'Noch nicht. ' + explanation;
|
||||
result.className = 'fluxcheck-result ' + (isCorrect ? 'correct' : 'wrong');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -100,6 +100,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
|
||||
testRoot.hidden = true;
|
||||
elements.testResult.hidden = false;
|
||||
elements.testResult.scrollIntoView({ block: 'start' });
|
||||
elements.resultSummary.textContent = `Du hast ${score} von ${questions.length} Fragen richtig beantwortet.`;
|
||||
elements.categorySummary.innerHTML = '';
|
||||
Array.from(categoryStats.entries()).forEach(([category, stats]) => {
|
||||
@@ -154,6 +155,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
categoryStats.clear();
|
||||
testRoot.hidden = false;
|
||||
elements.testResult.hidden = true;
|
||||
testRoot.scrollIntoView({ block: 'start' });
|
||||
renderQuestion();
|
||||
});
|
||||
|
||||
|
||||
@@ -330,6 +330,7 @@
|
||||
}
|
||||
|
||||
function newGame() {
|
||||
window.scrollTo(0, 0);
|
||||
const slug = deckSelect.value;
|
||||
const deckPairs = decksBySlug.get(slug);
|
||||
|
||||
|
||||
@@ -111,6 +111,7 @@
|
||||
// ---------- Mission rendern ----------
|
||||
|
||||
function renderMission() {
|
||||
window.scrollTo(0, 0);
|
||||
const mission = story.missions[missionIndex];
|
||||
cur = { mission, attempts: {}, revealed: {}, solved: {}, scored: {} };
|
||||
curGaps = {};
|
||||
@@ -207,7 +208,7 @@
|
||||
storyEl.appendChild(scene);
|
||||
updateHud();
|
||||
const first = Object.values(curInputs)[0];
|
||||
if (first) first.focus();
|
||||
if (first) first.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
// ---------- Prüfen / Auflösen ----------
|
||||
|
||||
@@ -263,6 +263,7 @@
|
||||
}
|
||||
|
||||
async function newGame() {
|
||||
window.scrollTo(0, 0);
|
||||
stopTimer();
|
||||
seconds = 0; score = 0; answeredCount = 0; current = null; jokerUsed = false;
|
||||
submitted.length = 0;
|
||||
|
||||
@@ -3,8 +3,20 @@
|
||||
Jeder Button mit Klasse .mf-theme wird automatisch zum Umschalter. */
|
||||
(function () {
|
||||
var KEY = 'mf-theme';
|
||||
function read() { try { return localStorage.getItem(KEY) || 'dark'; } catch (e) { return 'dark'; } }
|
||||
function apply(mode) { document.documentElement.setAttribute('data-theme', mode); }
|
||||
function preferredTheme() {
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
||||
}
|
||||
function read() { try { return localStorage.getItem(KEY) || preferredTheme(); } catch (e) { return preferredTheme(); } }
|
||||
function apply(mode) {
|
||||
document.documentElement.setAttribute('data-theme', mode);
|
||||
var meta = document.querySelector('meta[name="theme-color"]');
|
||||
if (!meta) {
|
||||
meta = document.createElement('meta');
|
||||
meta.name = 'theme-color';
|
||||
document.head.appendChild(meta);
|
||||
}
|
||||
meta.content = mode === 'light' ? '#fbf6ec' : '#0a0806';
|
||||
}
|
||||
|
||||
apply(read()); // früh -> kein Aufblitzen
|
||||
|
||||
@@ -15,6 +27,10 @@
|
||||
var isGameRoute = ['/mindmatch', '/techtacular', '/devlab', '/syntaxsaga', '/codeescape', '/bughunter', '/serviceclash', '/networker']
|
||||
.some(function (route) { return path === route || path.indexOf(route + '/') === 0; });
|
||||
if (!isGameRoute) document.documentElement.classList.add('sn-platform');
|
||||
if (isGameRoute && 'scrollRestoration' in history) {
|
||||
history.scrollRestoration = 'manual';
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
// Globale, rein clientseitige Komfortfunktionen. FluxTimer bleibt auf öffentlichen
|
||||
// Seiten inaktiv, läuft bei aktivierter Einstellung aber über Seitennavigationen weiter.
|
||||
@@ -96,6 +112,10 @@
|
||||
set: set,
|
||||
current: function () { return document.documentElement.getAttribute('data-theme'); }
|
||||
};
|
||||
window.MindfluxUX = {
|
||||
toTop: function () { window.scrollTo(0, 0); },
|
||||
focusQuiet: function (el) { if (el) el.focus({ preventScroll: true }); }
|
||||
};
|
||||
|
||||
// Mobile-Nav: Off-Canvas-Drawer für Seiten mit App-Sidebar (.mf-shell)
|
||||
function initMobileNav() {
|
||||
@@ -130,5 +150,12 @@
|
||||
});
|
||||
paint();
|
||||
initMobileNav();
|
||||
// SPA-Spiele ersetzen ihre Ansicht per innerHTML. Nur echte Übergänge werden
|
||||
// zurück an den Seitenanfang gesetzt; Antwort-/Zeilenfeedback bleibt stabil.
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!isGameRoute) return;
|
||||
var transition = event.target.closest('[data-start], #bhStart, #bhNext, #bhAgain, #again, #nwStart, #nwAgain, #scStart, #scNext, #scAgain');
|
||||
if (transition) window.setTimeout(function () { window.scrollTo(0, 0); }, 0);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -4,10 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>FinalProtocol - SysnaptiK Neural</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/theme.css?v=4">
|
||||
<link rel="stylesheet" href="/css/theme.css?v=5">
|
||||
<link rel="stylesheet" href="/css/finalflux.css?v=2">
|
||||
<script src="/js/theme.js?v=5"></script>
|
||||
<script src="/js/theme.js?v=6"></script>
|
||||
</head>
|
||||
<body class="finalflux-shell">
|
||||
<aside class="finalflux-sidebar">
|
||||
|
||||
Reference in New Issue
Block a user