:root { --color-fiolet: #5B2C91; --color-pomarancz: #F59C00; --color-zielony: #6FB524; --color-niebieski: #2196F3; --color-czerwony: #D84315; --color-jasny: #f4f4f4; --color-ciemny: #212121; --color-disabled-bg: #dddddd; --color-disabled-text: #666666; } /* 🔐 Modal logowania */ .login-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(5px); transition: opacity 0.3s ease; } .login-box { background: #1e1e1e; color: #ffffff; padding: 32px; border-radius: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 20px; border: 2px solid var(--color-zielony); } .login-box h2 { margin: 0; font-size: 2rem; font-weight: 600; } body.dark .login-box { background: #1e1e1e; color: #f4f4f4; border-color: var(--color-zielony); } .login-box input { padding: 12px 16px; font-size: 1rem; border-radius: 10px; border: 1px solid #666; background-color: #f9f9f9; color: #000; width: 91%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .login-box input:focus { border-color: var(--color-niebieski); box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } .login-box form { display: flex; flex-direction: column; align-items: center; } .login-box button { background-color: var(--color-niebieski); color: white; border: none; padding: 10px 20px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: background 0.3s; width: 80%; } .login-box button:hover { background-color: var(--color-zielony); } .error-msg { color: var(--color-czerwony); font-size: 0.9em; text-align: center; } .hidden { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Domyślnie: Dark Mode (klasa 'dark' na ) */ body.dark { background-color: #121212; color: #f4f4f4; } body.dark .navbar { background-color: #1e1e1e; } body.dark .navbar a:hover { background-color: var(--color-zielony); color: black; } body.dark .dropdown-content { background: var(--color-fiolet); border-color: #fff; } body.dark .app-tile[data-status="active"] { background-color: var(--color-czerwony); color: #fff; border: 4px solid var(--color-niebieski); } body.dark .app-tile[data-status="active"]:hover { box-shadow: 0 0 20px var(--color-zielony); } body.dark .app-tile[data-status="disabled"] { background-color: #2e2e2e; color: #888; border-color: #444; } body.dark .bomba-img img { border-color: var(--color-pomarancz); box-shadow: 0 0 15px var(--color-zielony); } /* Jasny motyw */ body.light { background-color: var(--color-jasny); color: var(--color-ciemny); } body.light .navbar { background-color: var(--color-fiolet); } body.light .app-tile[data-status="active"] { background-color: var(--color-niebieski); color: #fff; border: 4px solid var(--color-czerwony); } body.light .app-tile[data-status="disabled"] { background-color: var(--color-disabled-bg); color: var(--color-disabled-text); } /* Przycisk zmiany motywu */ .theme-btn { margin-left: auto; padding: 8px 12px; background-color: transparent; color: white; border: 2px solid white; border-radius: 8px; font-weight: bold; cursor: pointer; transition: background 0.3s; } .theme-btn:hover { background-color: rgba(255, 255, 255, 0.1); } /* Ogólne */ body { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; margin: 0; background-color: var(--color-jasny); color: var(--color-ciemny); } .navbar { position: relative; z-index: 1000; background-color: var(--color-fiolet); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); height: 60px; display: flex; align-items: center; padding: 0 16px; } .navbar a, .dropbtn { font-size: 22px; color: #ffffff; text-align: center; padding: 14px 20px; text-decoration: none; background: none; border: none; cursor: pointer; transition: all 0.3s ease; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: var(--color-niebieski); color: #ffffff; transform: scale(1.1) rotate(-1deg); } /* Dropdown */ .dropdown { float: left; overflow: visible; position: relative; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: var(--color-pomarancz); border: 2px solid #ffffff; min-width: 160px; box-shadow: 0px 8px 16px rgba(255, 0, 0, 0.5); z-index: 2000; } .dropdown-content a { float: none; color: var(--color-ciemny); padding: 12px 16px; text-decoration: none; display: block; text-align: left; font-weight: bold; } .dropdown-content a:hover { background-color: #ffabab; } .dropdown:hover .dropdown-content { display: block; } /* Content */ .content { padding: 15px; text-align: center; } h1 { font-size: 60px; font-weight: 900; color: var(--color-fiolet); text-shadow: 2px 2px var(--color-niebieski), 4px 4px #000; } /* Kafelki */ .app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1000px; margin: 30px auto; justify-items: center; } .app-tile { width: 60%; max-width: 220px; aspect-ratio: 4 / 3; /* Stała proporcja np. 4:3 */ background-color: #e74c3c; color: white; font-weight: bold; font-size: 1.2rem; padding: 30px; border-radius: 15px; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; border: 3px solid #3498db; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .app-tile:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } .app-tile[data-status="disabled"] { background-color: #333; color: #aaa; border: 2px dashed #555; cursor: not-allowed; } /* Nieaktywny kafelek */ .app-tile.locked { pointer-events: none; opacity: 0.4; filter: grayscale(100%); position: relative; } .app-tile.locked::before { content: "🔒"; position: absolute; top: 10px; right: 10px; font-size: 1.2em; } } /* Obrazek - Kapitan Bomba */ .jp2-wrapper { position: relative; display: inline-block; } .bomba-img { position: absolute; top: 80px; /* odstęp pod navbar */ left: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 999; } .bomba-img.visible { opacity: 1; pointer-events: auto; } .bomba-img img { width: 200px; border: 4px double var(--color-fiolet); border-radius: 50%; box-shadow: 0 0 15px var(--color-czerwony); animation: obracajSie 6s linear infinite; } /* Animacje */ @keyframes obracajSie { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }