From d53db46cf984f429bd2647de331f1230eb177d68 Mon Sep 17 00:00:00 2001 From: Kilokem Date: Thu, 19 Sep 2024 10:49:36 +0200 Subject: [PATCH] SettingsDoneForNow --- css/settings.css | 196 ++++++++++++++++++++++++++++++++++++++------ pages/feedback.html | 4 +- pages/profile.html | 124 ++++++++++++++-------------- pages/settings.html | 78 ++++++++++-------- 4 files changed, 278 insertions(+), 124 deletions(-) diff --git a/css/settings.css b/css/settings.css index 4b95d81..87d6793 100644 --- a/css/settings.css +++ b/css/settings.css @@ -6,9 +6,8 @@ padding: 10px; /* Belépő margó hozzáadása */ } - - /* Kártyák stílusa */ - .settings-card { +/* Kártyák stílusa */ +.settings-card { flex: 1; min-width: 300px; max-width: 48%; @@ -18,34 +17,52 @@ border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); - } - - /* Telefonos nézet */ - @media (max-width: 768px) { + display: flex; + flex-direction: column; + align-items: center; /* Kártyán belül középre igazítás */ + text-align: center; /* Szövegek középre igazítása */ +} + +/* Telefonos nézet */ +@media (max-width: 768px) { .settings-card { - max-width: 100%; - margin: 10px 0; + max-width: 100%; + margin: 10px 0; } - } +} .settings-card h2 { margin-bottom: 20px; - color:var(--color-black); + color: var(--color-black); + font-size: 1.5em; /* Nagyobb betűméret a címekhez */ } -#video-container { - display: flex; - justify-content: center; + +.mini-label { + color: var(--color-black); + display: block; + margin-bottom: 5px; + text-align: left; /* Balra igazítás a címkékhez */ } -.settings-card input[type="text"] { + +.settings-card input[type="text"], +.settings-card textarea { width: 100%; - color:black; + color: black; margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; + box-sizing: border-box; /* Box-sizing hozzáadása, hogy a padding ne befolyásolja a méretet */ +} + +.settings-card textarea { + height: 150px; /* Fix magasság a szöveges beviteli mezőhöz */ + resize: vertical; /* Csak függőlegesen méretezhető */ } #video-container { + display: flex; + justify-content: center; margin-bottom: 15px; } @@ -96,7 +113,7 @@ flex-wrap: wrap; /* Törés kisebb képernyőn */ } -#save-music, #reset-music { +.settings-button { padding: 10px 20px; border: none; border-radius: 10px; @@ -109,12 +126,12 @@ flex: 1; /* Fele-fele arányban oszlik meg a gomb szélessége */ } -#save-music:hover, #reset-music:hover { +.settings-button:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Hover esetén erősebb árnyék */ transform: translateY(-4px); /* Enyhe felemelkedés */ } -#save-music:active, #reset-music:active { +.settings-button:active { transform: translateY(0); /* Vissza az eredeti helyzetbe */ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Alapállapot */ } @@ -137,17 +154,142 @@ /* Reszponzív beállítások kisebb képernyőkre */ @media (max-width: 768px) { - #save-music, #reset-music { + .settings-button { max-width: 100%; /* Mobilnézetben a gombok teljes szélességet elfoglalnak */ } } -.mini-label{ - color:var(--color-black); -} -.button-container { +/* Felnőtt tartalmak szűrése kapcsoló stílusai */ +.rocker { + display: inline-block; + position: relative; + font-size: 2em; + font-weight: bold; + text-align: center; + text-transform: uppercase; + color: #888; + width: 7em; + height: 4em; + overflow: hidden; + border-bottom: 0.5em solid #eee; + } + + .rocker-small { + font-size: 0.75em; + /* Sizes the switch */ + margin: 1em; + } + + .rocker::before { + content: ""; + position: absolute; + top: 0.5em; + left: 0; + right: 0; + bottom: 0; + background-color: #999; + border: 0.5em solid #eee; + border-bottom: 0; + } + + .rocker input { + opacity: 0; + width: 0; + height: 0; + } + + .switch-left, + .switch-right { + cursor: pointer; + position: absolute; display: flex; + align-items: center; justify-content: center; - gap: 10px; /* A gombok közötti távolság */ - margin-top: 15px; -} \ No newline at end of file + height: 2.5em; + width: 3em; + transition: 0.2s; + user-select: none; + } + + .switch-left { + height: 2.4em; + width: 2.75em; + left: 0.85em; + bottom: 0.4em; + background-color: #ddd; + transform: rotate(15deg) skewX(15deg); + } + + .switch-right { + right: 0.5em; + bottom: 0; + background-color: #bd5757; + color: #fff; + } + + .switch-left::before, + .switch-right::before { + content: ""; + position: absolute; + width: 0.4em; + height: 2.45em; + bottom: -0.45em; + background-color: #ccc; + transform: skewY(-65deg); + } + + .switch-left::before { + left: -0.4em; + } + + .switch-right::before { + right: -0.375em; + background-color: transparent; + transform: skewY(65deg); + } + + input:checked + .switch-left { + background-color: #0084d0; + color: #fff; + bottom: 0px; + left: 0.5em; + height: 2.5em; + width: 3em; + transform: rotate(0deg) skewX(0deg); + } + + input:checked + .switch-left::before { + background-color: transparent; + width: 3.0833em; + } + + input:checked + .switch-left + .switch-right { + background-color: #ddd; + color: #888; + bottom: 0.4em; + right: 0.8em; + height: 2.4em; + width: 2.75em; + transform: rotate(-15deg) skewX(-15deg); + } + + input:checked + .switch-left + .switch-right::before { + background-color: #ccc; + } + + /* Keyboard Users */ + input:focus + .switch-left { + color: #333; + } + + input:checked:focus + .switch-left { + color: #fff; + } + + input:focus + .switch-left + .switch-right { + color: #fff; + } + + input:checked:focus + .switch-left + .switch-right { + color: #333; + } \ No newline at end of file diff --git a/pages/feedback.html b/pages/feedback.html index 0301607..58d7f26 100644 --- a/pages/feedback.html +++ b/pages/feedback.html @@ -15,7 +15,7 @@
- Profile + Profile
@@ -47,7 +47,7 @@
- Profile + Profile
- -
-
-
- Profile - -
-

Ez egy példa szöveg a kártyán belül.

-
- - -
-
-
-
-
-
- Profile - -
-

Ez egy példa szöveg a kártyán belül.

-
- - -
-
-
-
-
-
- Profile - -
-

Ez egy példa szöveg a kártyán belül.

-
- - -
-
-
- + +
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+
+
+
+ Profile + +
+

Ez egy példa szöveg a kártyán belül.

+
+ + +
+
+
+ diff --git a/pages/settings.html b/pages/settings.html index e9d117a..67209ac 100644 --- a/pages/settings.html +++ b/pages/settings.html @@ -5,45 +5,57 @@ Papp Áron - + -
+
+
-
- -
-

Zene Beállítások

- - -
- -
- -
- - -
-
- - -
-
- -
-

Profil Beállítások

-
-
-

Beállítások

-
-
-
- +
+

Zene Beállítások

+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+

Profil Beállítások

+ + +
+ +
+
+ + +
+

Beállítások

+ + +
+
+ +