diff --git a/css/friends.css b/css/friends.css index 9278f50..0e40fe3 100644 --- a/css/friends.css +++ b/css/friends.css @@ -16,7 +16,7 @@ body { :root { --background-color: #121212; --text-color: black; - --primary-color: #aa00ff; + --primary-color: #4169E1; --secondary-color: lightgrey; --header-bg-color: lightgrey; } @@ -68,9 +68,9 @@ body { padding: 10px 20px; cursor: pointer; text-align: center; - background: var(--secondary-color); + background: var(--color-bg); border-radius: 8px; - color: var(--text-color); + color: var(--color-black); transition: background 0.3s, color 0.3s; } @@ -86,7 +86,7 @@ body { /* Search input styles */ .search-input { width: 100%; /* Full width of the filter */ - background-color: var(--header-bg-color); + background-color: var(--color-bg); border: none; padding: 10px; border-radius: 10px; @@ -103,19 +103,19 @@ body { @keyframes rotateShadow { 0% { - box-shadow: -2px -2px 8px 1px var(--primary-color), 2px 2px 8px 1px #3700ff; + box-shadow: -2px -2px 8px 1px var(--primary-color), 2px 2px 8px 1px #4169E1; } 25% { - box-shadow: -2px 2px 8px 1px var(--primary-color), 2px -2px 8px 1px #3700ff; + box-shadow: -2px 2px 8px 1px var(--primary-color), 2px -2px 8px 1px #4169E1; } 50% { - box-shadow: 2px 2px 8px 1px var(--primary-color), -2px -2px 8px 1px #3700ff; + box-shadow: 2px 2px 8px 1px var(--primary-color), -2px -2px 8px 1px #4169E1; } 75% { - box-shadow: 2px -2px 8px 1px var(--primary-color), -2px 2px 8px 1px #3700ff; + box-shadow: 2px -2px 8px 1px var(--primary-color), -2px 2px 8px 1px #4169E1; } 100% { - box-shadow: -2px -2px 8px 1px var(--primary-color), 2px 2px 8px 1px #3700ff; + box-shadow: -2px -2px 8px 1px var(--primary-color), 2px 2px 8px 1px #4169E1; } } @@ -145,7 +145,7 @@ body { .biocard { max-width: 460px; border-radius: 1rem; - background-color: rgb(118, 36, 194); + background-color:var(--color-bg); padding: 4rem; margin-top: 1rem; } @@ -158,12 +158,12 @@ body { gap: 1rem; } -.image { +.prof-image { height: 7rem; width: 7rem; - border-radius: 0.5rem; - background-color: rgb(118, 36, 194); - background: linear-gradient(to bottom right, rgb(118, 36, 194), rgb(185, 128, 240)); + border-radius: 8px; + background-color: #4169E1; + background: linear-gradient(to bottom right, #4169E1, #3658B4); } .info { @@ -176,7 +176,7 @@ body { .name { font-weight: 500; - color: var(--color-white); + color: var(--color-black); } .userid { @@ -187,13 +187,13 @@ body { .stats { width: 100%; border-radius: 0.5rem; - background-color: rgba(255, 255, 255, 1); + background-color:var(--color-bg); display: flex; align-items: center; justify-content: space-around; font-size: 0.75rem; line-height: 1rem; - color: rgba(0, 0, 0, 1); + color: var(--color-black); } .flex { @@ -205,7 +205,7 @@ body { .state-value { font-weight: 700; - color: rgb(118, 36, 194); + color: #4169E1; } .request { @@ -217,10 +217,21 @@ body { font-size: 1rem; line-height: 1.5rem; transition: all .3s ease; + background-color: var(--color-bg); + color: var(--color-black); } .request:hover { - background-color: rgb(118, 36, 194); + background-color: #4169E1; color: #fff; cursor: pointer; } +h2{ + color:var(--color-black); +} + +.prof-image img{ + width: 100%; + height: 100%; + border-radius: 8px; +} \ No newline at end of file diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..8b4383d --- /dev/null +++ b/css/login.css @@ -0,0 +1,168 @@ +:root { + --color-white: #fff; + --color-black: #000; + --color-bg: #f1f1f1; + } + .dark-mode { + --color-white: #000; + --color-black: #fff; + --color-bg: #1d1b31; + } +body, html { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + height: 100%; + background-color: var(--color-bg); +} + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.login-box { + border: 2px solid #5865F2; + border-radius: 8px; + padding: 40px; + box-shadow: 4px 4px #5865F2; + background-color: var(--color-bg); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + max-width: 400px; + width: 100%; +} + +.logo { + width: 150px; + height: auto; + margin-bottom: 20px; +} + +.title { + color: var(--color-black); + font-size: 24px; + font-weight: 900; + margin-bottom: 8px; +} + +.subtitle { + color: var(--color-black); + font-size: 16px; + font-weight: 600; + margin-bottom: 24px; +} + +.discord-btn { + background-color: #5865F2; + border: 2px solid #5865F2; + color: #ffffff; + padding: 12px 20px; + font-size: 16px; + font-weight: 600; + border-radius: 4px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; + width: 100%; + max-width: 300px; + white-space: nowrap; +} + +.discord-btn:hover { + background-color: #4752C4; + border-color: #4752C4; + transform: translateY(-2px); + box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); +} + +.discord-btn:active { + transform: translateY(0); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.discord-btn::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + border-radius: 100%; + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; +} + +@keyframes ripple { + 0% { + transform: scale(0, 0); + opacity: 1; + } + 20% { + transform: scale(25, 25); + opacity: 1; + } + 100% { + opacity: 0; + transform: scale(40, 40); + } +} + +.discord-btn:focus:not(:active)::after { + animation: ripple 1s ease-out; +} + +.discord-icon { + width: 20px; + height: 20px; + margin-right: 8px; + fill: currentColor; + flex-shrink: 0; +} + +@media (max-width: 400px) { + .discord-btn { + font-size: 14px; + padding: 10px 16px; + } + + .discord-icon { + width: 18px; + height: 18px; + margin-right: 6px; + } +} +.theme-toggle { + position: fixed; + bottom: 20px; + right: 20px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #333; + color: white; + font-size: 24px; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.theme-toggle.light-mode { + background-color: #f1f1f1; + color: #333; +} + +.theme-toggle:hover { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..7032f47 --- /dev/null +++ b/css/main.css @@ -0,0 +1,543 @@ +/* Kártyák reszponzív elrendezése */ +.main-home { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} + +.create-post-card { + background-color: var(--color-white); + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 100%; + max-width: 800px; + margin-bottom: 20px; +} +.post-comment{ + padding-left: 60px; +} +.comment p{ + padding: 20px; +} + +.profile-section { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.profile-info { + margin-left: 10px; /* A kép és a név közötti távolság */ +} + +.profile-name { + font-size: 1.2em; /* Név mérete */ + margin: 0; +} + +.profile-img { + border-radius: 50%; + width: 50px; /* Ugyanakkora, mint a példa bejegyzés */ + height: 50px; /* Ugyanakkora, mint a példa bejegyzés */ +} + +.input-container { + display: flex; + align-items: center; /* Egy sorba állítja az input mezőt és a gombot */ + gap: 10px; /* Távolság az input mező és a küldés gomb között */ + width: 100%; /* Szélesség teljes kitöltése */ +} + +/* Gomb stílus az input-container osztályban */ +.input-container button { + font-family: inherit; + font-size: 16px; /* Csökkentett betűméret */ + background: #4169E1; + color: white; + padding: 0.5em 0.8em; /* Csökkentett padding */ + padding-left: 0.8em; /* Kisebb bal oldali padding */ + display: flex; + align-items: center; + border: none; + border-radius: 12px; /* Kisebb lekerekítés */ + overflow: hidden; + transition: all 0.2s; + cursor: pointer; + } + + /* Span stílus a gombon belül */ + .input-container button span { + display: block; + margin-left: 0.2em; /* Csökkentett margó */ + transition: all 0.3s ease-in-out; + } + + /* SVG stílus a gombon belül */ + .input-container button svg { + display: block; + transform-origin: center center; + transition: transform 0.3s ease-in-out; + } + + /* Hover animáció a SVG wrapper-re a gombon belül */ + .input-container button:hover .svg-wrapper { + animation: fly-1 0.6s ease-in-out infinite alternate; + } + + /* Hover állapot SVG a gombon belül */ + .input-container button:hover svg { + transform: translateX(1em) rotate(45deg) scale(1); /* Csökkentett eltolás és méret */ + } + + /* Hover állapot span a gombon belül */ + .input-container button:hover span { + transform: translateX(4em); /* Csökkentett eltolás */ + } + + /* Aktív állapot a gombon belül */ + .input-container button:active { + transform: scale(0.9); /* Kisebb aktív állapot */ + } + + /* Bounce animáció */ + @keyframes fly-1 { + from { + transform: translateY(0.1em); + } + + to { + transform: translateY(-0.1em); + } + } + + +#postInput { + flex: 1; /* Fill available space */ + border: none; + padding: 10px; + border-radius: 25px; + color: var(--color-black); + background-color: var(--color-bg); + font-size: 1em; + outline: none; + margin-right: 10px; /* Space between input and button */ + resize: vertical; /* Allow vertical resizing */ + max-height: calc(1.2em * 8); /* Limit the height to 8 rows */ + line-height: 1.2em; /* Set line height to match the row size */ + /* Hide scrollbar */ + overflow: hidden; /* Hides the scrollbar but prevents scrolling */ + resize: none; +} + +#postInput:hover { + overflow-y: auto; /* Allows scrolling when hovering, without the scrollbar showing */ +} + +/* Hide scrollbar for WebKit browsers */ +#postInput::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for Firefox */ +#postInput { + scrollbar-width: none; /* Firefox */ +} +/* Gomb stílusai */ +button { + font-family: inherit; + font-size: 16px; + background: #4169E1; + color: white; + padding: 0.5em 0.8em; + display: flex; + align-items: center; + border: none; + border-radius: 16px; + overflow: hidden; + transition: all 0.2s; + cursor: pointer; +} + +button:hover { + transform: scale(1.05); + background-color: #3658B4; +} + +button span { + display: block; + margin-left: 0.3em; + transition: all 0.3s ease-in-out; +} + +button svg { + display: block; + transform-origin: center center; + transition: transform 0.3s ease-in-out; +} + +/* Kártyák stílusai */ +.card-container { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + max-width: 800px; + margin-bottom: 20px; +} + +.card { + background-color: var(--color-white); + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 100%; +} + +.card-header { + display: flex; + align-items: center; + justify-content: space-between; /* Balra a profilkép, jobbra a név és dátum */ + margin-bottom: 10px; +} + +.card-profile-img { + border-radius: 50%; + width: 50px; /* Ugyanakkora, mint az új bejegyzés */ + height: 50px; /* Ugyanakkora, mint az új bejegyzés */ + margin-right: 10px; +} + +.card-user-info { + display: flex; + justify-content: space-between; /* A név és a dátum külön keretben */ + flex: 1; /* Növelje a helyet */ +} + +.card-profile-name { + margin: 0; + font-size: 1.2em; /* Név mérete */ + font-weight: bold; + color: var(--color-black); +} + +.card-date { + color: #888; /* Szürke szín */ + font-size: 0.9em; /* Kisebb méret, fele akkora */ + text-align: right; /* Jobbra igazítva */ +} + +.card p { + margin: 10px 0; /* Hozzáadott margó a bejegyzés szövegéhez */ +} + +.post-actions { + display: flex; + justify-content: flex-end; /* Kommentek gomb jobbra igazítása */ + padding-top: 10px; +} + +/* Reakció gombok */ +.reaction-btn { + background-color: #4169E1; /* Kék háttér a gomboknak */ + border: none; + cursor: pointer; + display: flex; + align-items: center; + padding: 8px; /* Párna a gombokon */ + border-radius: 8px; /* Lekerekített sarkok */ + margin-right: 15px; /* Távolság a gombok között */ + transition: background-color 0.3s; /* Háttér szín animáció */ +} + +.reaction-btn:hover { + background-color: #3658B4; /* Sötétebb kék a hover állapotban */ +} + +.reaction-btn img { + width: 24px; /* Állítsd be a nyilak méretét */ + height: 24px; + transition: transform 0.2s; /* Animációs transzformáció */ +} + +.reaction-btn:hover .arrow-up { + animation: bounce-up 0.5s infinite alternate; /* Felfelé pattogó animáció */ + transform: rotate(270deg); /* Felfelé mutató */ +} + +.reaction-btn:hover .arrow-down { + animation: bounce-down 0.5s infinite alternate; /* Lefelé pattogó animáció */ + transform: rotate(90deg); /* Lefelé mutató */ +} + +/* Bounce animáció */ +@keyframes bounce-up { + 0% { + transform: rotate(270deg) translateX(0); + } + 100% { + transform: rotate(270deg) translateX(5px); + } +} + +@keyframes bounce-down { + 0% { + transform: rotate(90deg) translateX(0); + } + 100% { + transform: rotate(90deg) translateX(5px); + } +} + +.reaction-count { + font-size: 1em; /* Számláló méret */ + color: white; /* Számláló szín */ + margin-left: 5px; /* Távolság a számláló és a nyíl között */ +} + +h2 { + color: var(--color-black); +} + + +/* Komment szekció stílusok */ +.comments-section { + padding: 15px; + background-color: var(--second-bg); + border-top: 1px solid #ccc; + margin-top: 10px; +} + +/* Komment írása rész */ +.write-comment { + display: flex; + align-items: flex-start; + gap: 10px; + margin-bottom: 15px; +} + +.comment-profile-img { + border-radius: 50%; + width: 40px; + height: 40px; +} + +.comment-input { + flex: 1; + padding: 10px; + border-radius: 10px; + border: 1px solid #ccc; + font-family: inherit; + font-size: 1em; + resize: none; + background-color: var(--color-bg); +} + +.submit-comment-btn { + background-color: royalblue; + color: white; + border: none; + padding: 0.5em 1em; + border-radius: 10px; + cursor: pointer; +} + +.submit-comment-btn:hover { + background-color: #3658B4; +} +/* Komment szekció stílusok */ +.comments-section { + padding: 15px; + background-color: var(--second-bg); + border-top: 1px solid var(--linecolor); + margin-top: 10px; + border-radius: 0 0 8px 8px; +} + +/* Komment írása rész */ +.write-comment { + display: flex; + align-items: flex-start; + gap: 10px; + margin-bottom: 15px; +} + +.comment-profile-img { + border-radius: 50%; + width: 40px; + height: 40px; +} + +.comment-input { + flex: 1; + padding: 10px; + border-radius: 10px; + border: 1px solid #cccccc00; + font-family: inherit; + font-size: 0.9em; + resize: none; + overflow-y: scroll; +} + +.comment-input::-webkit-scrollbar { + display: none; +} + +.comment-input { + scrollbar-width: none; +} + +.comment-input { + -ms-overflow-style: none; +} + +.submit-comment-btn { + background-color: royalblue; + color: white; + border: none; + padding: 0.5em 1em; + border-radius: 10px; + cursor: pointer; +} + +.submit-comment-btn:hover { + background-color: #3658B4; +} + +/* Komment lista */ +.comment-list { + display: flex; + flex-direction: column; + gap: 15px; + max-height: 300px; /* Maximális magasság a kommentekhez */ + overflow-y: auto; /* Görgethetővé teszi a kommenteket */ + padding-right: 10px; /* Kis extra hely a görgetősávnak */ +} + +/* Görgetősáv stílus beállítása (opcionális) */ +/* WebKit alapú böngészők (Chrome, Safari) */ +.comment-list::-webkit-scrollbar { + width: 8px; +} + +.comment-list::-webkit-scrollbar-thumb { + background-color: #ccc; /* Görgetősáv szín */ + border-radius: 4px; +} + +.comment-list::-webkit-scrollbar-thumb:hover { + background-color: #ccc; /* Görgetősáv hover állapota */ +} + +/* Firefox görgetősáv */ +.comment-list { + scrollbar-width: thin; + scrollbar-color: #ccc var(--second-bg); +} + +.comment { + display: flex; + gap: 10px; +} + +.comment-content { + color: var(--color-black); + background-color: var(--color-white); + padding: 10px; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(--linecolor); + flex: 1; +} + +.comment-header { + display: flex; + justify-content: space-between; + margin-bottom: 5px; +} + +.comment-name { + font-weight: bold; +} + +.comment-date { + font-size: 0.8em; + color: #888; +} + +/* Komment szöveg kisebb méretben */ +.comment-text { + font-size: 1em; /* Kisebb betűméret a komment szövegének */ + margin-bottom: 5px; +} + +/* Komment reakció gombok */ +.comment-actions { + display: flex; + gap: 0px; + margin-top: 5px; +} + +.reaction-btn { + background-color: #4169E1; + border: none; + cursor: pointer; + display: flex; + align-items: center; + padding: 5px 20px; + transition: background-color 0.3s; +} + +#reaction-btn-right{ + border-radius: 0 8px 8px 0; + margin-left: 0; +} +#reaction-btn-left{ + margin-right: 0; + border-radius: 8px 0 0 8px; +} + +.reaction-btn:hover { + background-color: #3658B4; +} + +.reaction-btn img { + width: 20px; /* Kommentek nyilak kisebb méretűek */ + height: 20px; + transition: transform 0.2s; +} + +.reaction-btn:hover .arrow-up { + animation: bounce-up 0.5s infinite alternate; + transform: rotate(270deg); +} + +.reaction-btn:hover .arrow-down { + animation: bounce-down 0.5s infinite alternate; + transform: rotate(90deg); +} + +.reaction-count { + font-size: 0.9em; /* Számláló mérete kisebb a kommenteknél */ + color: white; + margin-left: 5px; +} + +/* Bounce animáció a komment reakciókhoz is */ +@keyframes bounce-up { + 0% { + transform: rotate(270deg) translateX(0); + } + 100% { + transform: rotate(270deg) translateX(5px); + } +} + +@keyframes bounce-down { + 0% { + transform: rotate(90deg) translateX(0); + } + 100% { + transform: rotate(90deg) translateX(5px); + } +} \ No newline at end of file diff --git a/css/messages.css b/css/messages.css new file mode 100644 index 0000000..8ff6939 --- /dev/null +++ b/css/messages.css @@ -0,0 +1,133 @@ +/* messages.css */ + +.messages-container { + max-width: 800px; + margin: 20px auto; + background-color: var(--color-white); + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.messages-header { + background-color: var(--second-bg); + padding: 15px; + border-bottom: 1px solid var(--linecolor); +} + +.messages-header h2 { + margin: 0; + color: var(--color-black); +} + +.conversations-list { + display: flex; + flex-direction: column; +} + +.conversation-item { + display: flex; + align-items: center; + padding: 15px; + border-bottom: 1px solid var(--linecolor); + text-decoration: none; + color: var(--color-black); + transition: background-color 0.3s; +} + +.conversation-item:hover { + background-color: var(--second-bg); +} + +.conversation-profile-img { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 15px; +} + +.conversation-details { + flex: 1; +} + +.conversation-name { + font-weight: bold; + margin-bottom: 5px; +} + +.conversation-last-message { + font-size: 0.9em; + color: #888; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 300px; +} + +.conversation-time { + font-size: 0.8em; + color: #888; + white-space: nowrap; +} + +.lock-container { + display: flex; /* Flexbox elrendezés */ + align-items: center; /* Vertikális középre igazítás */ + justify-content: center; /* Horizontális középre igazítás */ + margin: 15px 0; /* Margó a zár gomb körül */ +} + +.lock-label { + width: 45px; + height: 45px; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(80, 80, 80); + border-radius: 15px; + cursor: pointer; + transition: all 0.3s; +} + +.lock-wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: rotate(-10deg); +} + +.shackle { + background-color: transparent; + height: 9px; + width: 14px; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + border-top: 3px solid white; + border-left: 3px solid white; + border-right: 3px solid white; + transition: all 0.3s; +} + +.lock-body { + width: 15px; +} + +#lock { + display: none; +} + +#lock:checked + .lock-label .lock-wrapper .shackle { + transform: rotateY(150deg) translateX(3px); + transform-origin: right; +} + +#lock:checked + .lock-label { + background-color: rgb(167, 71, 245); +} + +.lock-label:active { + transform: scale(0.9); +} + + diff --git a/css/navbar.css b/css/navbar.css index c65a036..02a40c1 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -5,7 +5,7 @@ padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; - --color-hover: rgba(32, 59, 232); + --color-hover: #4169E1; --transition: all 0.2s ease; } @@ -13,12 +13,16 @@ --color-white: #fff; --color-black: #000; --color-bg: #e2e2e2; + --second-bg: #f3f2f2; + --linecolor: #625fff; } .dark-mode { --color-white: #000; --color-black: #fff; --color-bg: #1d1b31; + --second-bg: #111111; + --linecolor: #080735; } body { diff --git a/css/profile.css b/css/profile.css index 5bc26a4..4b11551 100644 --- a/css/profile.css +++ b/css/profile.css @@ -80,12 +80,14 @@ body { .name { font-size: 1.5rem; font-weight: 600; - color: var(--text-color); /* Név szín */ + color: var(--color-black); /* Név szín */ } .description { font-size: 1rem; - color: var(--text-color); /* Leírás szín */ + color: var(--color-black); /* Leírás szín */ margin-top: 10px; } - \ No newline at end of file + p{ + color: var(--color-black); + } \ No newline at end of file diff --git a/css/settings.css b/css/settings.css index f23420c..a539d5b 100644 --- a/css/settings.css +++ b/css/settings.css @@ -1,295 +1,362 @@ -/* Konténer, ami összefogja a beállításokat */ +/* Általános beállítások */ +:root { + --color-white: #ffffff; + --color-black: #333333; + --color-bg: #f5f5f5; + --color-primary: #007bff; + --color-primary-hover: #0056b3; + --color-danger: #dc3545; + --color-danger-hover: #bd2130; + --transition: all 0.3s ease; + --border-radius: 12px; + --box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); +} + +body { + font-family: Arial, sans-serif; + background-color: var(--color-bg); + color: var(--color-black); + line-height: 1.6; +} + +/* Konténer beállítások */ .settings-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: 10px; /* Belépő margó hozzáadása */ + max-width: 800px; + margin: 0 auto; + padding: 20px; } -/* Kártyák stílusa */ +/* Kártya stílusok */ .settings-card { - flex: 1; - min-width: 300px; - max-width: 48%; - margin: 10px; - padding: 20px; - background-color: var(--color-white); - border-radius: 12px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); - transition: var(--transition); - 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; - } + background-color: var(--color-white); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + margin-bottom: 30px; + padding: 20px; + width: 100%; } .settings-card h2 { - margin-bottom: 20px; - color: var(--color-black); - font-size: 1.5em; /* Nagyobb betűméret a címekhez */ + background-color: var(--second-bg); + padding: 15px; + margin: -20px -20px 20px -20px; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + font-size: 1.5em; + color: var(--color-black); } +/* Zene beállítások kártya */ +.music-settings { + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.music-settings #video-container { + margin-bottom: 15px; +} + +.music-settings #youtubePlayer { + max-height: 200px; +} + +/* Címke és beviteli mezők */ .mini-label { - color: var(--color-black); - display: block; - margin-bottom: 5px; - text-align: left; /* Balra igazítás a címkékhez */ + display: block; + margin-bottom: 5px; + color: var(--color-black); + font-weight: bold; } -.settings-card input[type="text"], -.settings-card textarea { - width: 100%; - 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 */ +input[type="text"], +textarea { + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 5px; + background-color: var(--color-bg); + color: var(--color-black); } -.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; -} - -.loop-switch { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 15px; -} - -.loop-switch input[type="checkbox"] { - margin-right: 10px; - width: 30px; - height: 16px; - appearance: none; - background-color: #ddd; - border-radius: 20px; - position: relative; - cursor: pointer; - outline: none; -} - -.loop-switch input[type="checkbox"]:checked { - background-color: #4CAF50; -} - -.loop-switch input[type="checkbox"]::before { - content: ''; - position: absolute; - top: 2px; - left: 2px; - width: 12px; - height: 12px; - border-radius: 50%; - background: #fff; - transition: 0.3s; -} - -.loop-switch input[type="checkbox"]:checked::before { - transform: translateX(14px); +textarea { + height: 150px; + resize: vertical; } +/* Kapcsoló és gomb konténer */ +.loop-switch, .button-container { - display: flex; - justify-content: center; - gap: 10px; /* A gombok közötti távolság */ - margin-top: 15px; - flex-wrap: wrap; /* Törés kisebb képernyőn */ + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 15px; } +/* Gomb stílusok */ .settings-button { - padding: 10px 20px; - border: none; - border-radius: 10px; - color: white; - cursor: pointer; - transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Alapárnyék */ - width: auto; /* Automatikus szélesség a tartalom alapján */ - max-width: 200px; /* Maximális szélesség */ - flex: 1; /* Fele-fele arányban oszlik meg a gomb szélessége */ + padding: 10px 20px; + border: none; + border-radius: 5px; + color: var(--color-white); + cursor: pointer; + transition: var(--transition); + margin: 0 5px; } -.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, +#save-profile { + background-color: var(--color-primary); } -.settings-button:active { - transform: translateY(0); /* Vissza az eredeti helyzetbe */ - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Alapállapot */ -} - -#save-music, .settings-button { - background-color: #007bff; +#save-music:hover, +#save-profile:hover { + background-color: var(--color-primary-hover); } #reset-music { - background-color: red; -} - -#save-music, .settings-button:hover { - background-color: #0056b3; + background-color: var(--color-danger); } #reset-music:hover { - background-color: rgb(171, 0, 0); + background-color: var(--color-danger-hover); } -/* Reszponzív beállítások kisebb képernyőkre */ -@media (max-width: 768px) { - .settings-button { - max-width: 100%; /* Mobilnézetben a gombok teljes szélességet elfoglalnak */ - } -} - -/* Felnőtt tartalmak szűrése kapcsoló stílusai */ +/* Rocker switch (NSFW gomb) stílusok */ .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; + 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; + 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; +} +.settings-card { + padding: 15px; /* A kártya párnázása */ +} + +.settings-card h2 { + font-size: 1.3em; /* Cím mérete */ + padding: 12px; /* Cím körüli párnázás */ + margin: 0; /* Margó eltávolítása a cím körül */ + text-align: left; /* Balra igazítás */ +} + +.content-filter-container { + display: flex; /* Flexbox elrendezés */ + flex-direction: column; /* Függőleges irány */ + align-items: center; /* Elemei középre igazítása */ +} + +.content-filter-container .mini-label { + margin-bottom: 10px; /* Térköz a címke és a kapcsoló között */ + align-self: flex-start; /* Balra igazítás a labelnek */ +} + +/* Középre helyezés a kapcsoló konténerhez */ +.switch-container { + display: flex; + justify-content: center; /* Középre igazítás */ + width: 100%; /* 100% szélesség */ +} + +/* 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; +} + +/* Reszponzív beállítások */ +@media (max-width: 768px) { + .settings-container { + padding: 10px; /* Kép beállítások */ } - .rocker-small { - font-size: 0.75em; - /* Sizes the switch */ - margin: 1em; + .settings-card { + padding: 15px; /* Kártya párnázása */ } - - .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; + + .music-settings { + max-width: 100%; /* Zene beállítások reszponzív */ } - - .rocker input { - opacity: 0; - width: 0; - height: 0; - } - - .switch-left, - .switch-right { - cursor: pointer; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - 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 +} +/* CSS részletek, beleértve a lock-container stílusokat */ +.lock-container { + display: flex; /* Flexbox elrendezés */ + align-items: center; /* Vertikális középre igazítás */ + justify-content: center; /* Horizontális középre igazítás */ + margin: 15px 0; /* Margó a zár gomb körül */ +} + +.lock-label { + width: 45px; + height: 45px; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(80, 80, 80); + border-radius: 15px; + cursor: pointer; + transition: all 0.3s; +} + +.lock-wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: rotate(-10deg); +} + +.shackle { + background-color: transparent; + height: 9px; + width: 14px; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + border-top: 3px solid white; + border-left: 3px solid white; + border-right: 3px solid white; + transition: all 0.3s; +} + +.lock-body { + width: 15px; +} + +#lock { + display: none; +} + +#lock:checked + .lock-label .lock-wrapper .shackle { + transform: rotateY(150deg) translateX(3px); + transform-origin: right; +} + +#lock:checked + .lock-label { + background-color: rgb(167, 71, 245); +} + +.lock-label:active { + transform: scale(0.9); +} diff --git a/js/login.js b/js/login.js new file mode 100644 index 0000000..2463ae1 --- /dev/null +++ b/js/login.js @@ -0,0 +1,28 @@ +document.addEventListener('DOMContentLoaded', () => { + const themeToggleBtn = document.getElementById('theme-toggle-btn'); + const body = document.body; + + // Ellenőrizzük, hogy van-e tárolt beállítás a localStorage-ban + const savedTheme = localStorage.getItem('theme'); + + // Alkalmazzuk a tárolt beállítást, ha van + if (savedTheme) { + body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode'); + themeToggleBtn.textContent = savedTheme === 'dark' ? '☀️' : '🌙'; + } + + // Funkció a téma váltásához + themeToggleBtn.addEventListener('click', () => { + if (body.classList.contains('dark-mode')) { + body.classList.remove('dark-mode'); + body.classList.add('light-mode'); + themeToggleBtn.textContent = '🌙'; + localStorage.setItem('theme', 'light'); // Mentés a localStorage-ba + } else { + body.classList.remove('light-mode'); + body.classList.add('dark-mode'); + themeToggleBtn.textContent = '☀️'; + localStorage.setItem('theme', 'dark'); // Mentés a localStorage-ba + } + }); +}); diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..90ad225 --- /dev/null +++ b/js/main.js @@ -0,0 +1,4 @@ +function toggleLike(button) { + button.classList.toggle('active'); +} + diff --git a/js/post.js b/js/post.js new file mode 100644 index 0000000..cb05530 --- /dev/null +++ b/js/post.js @@ -0,0 +1,11 @@ +const textarea = document.getElementById('postInput'); + +textarea.addEventListener('input', function () { + textarea.style.height = 'auto'; // Reset az eredeti magasságra + textarea.style.height = textarea.scrollHeight + 'px'; // Dinamikusan növeli a szövegdoboz méretét +}); + +function toggleComments(button) { + const commentsSection = button.closest('.card').querySelector('.comments-section'); + commentsSection.style.display = commentsSection.style.display === 'none' ? 'block' : 'none'; +} diff --git a/pages/chat-not-included-yet.html b/pages/chat-not-included-yet.html new file mode 100644 index 0000000..74185bb --- /dev/null +++ b/pages/chat-not-included-yet.html @@ -0,0 +1,164 @@ + + + + + + + ConnectHub - Üzenetek + + + + + + + +
+
+

Üzenetek

+
+
+
+ Profile +
+
John Doe
+

Szia! Hogy vagy ma?

+
10:30
+
+
+
+
+

Szia John! Köszönöm, jól vagyok. Te hogy vagy?

+
10:32
+
+
+
+ Profile +
+
John Doe
+

Én is jól, köszi! Van valami terved mára?

+
10:35
+
+
+
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/pages/friends.html b/pages/friends.html index 54b6e4b..8b6fe06 100644 --- a/pages/friends.html +++ b/pages/friends.html @@ -2,251 +2,79 @@ - - - Styled Radio Buttons and Search Input - - - - + + + Styled Radio Buttons and Search Input + + + - + - -
- -
-
- - - - - - -
- -
- - -
-
-
-
-
-
-

DisplayName

-

@userIDname

+ +
+ +
+
+ + + + + +
-
-

Posztok - 69 -

-

Barátok - 420 -

-
-
+
-
- -
- - -
-
-
-
-
-

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

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

DisplayName

-

@userIDname

-
-
-

Posztok - 69 -

-

Barátok - 420 -

-
-
-
-
- -
- -
-
- - + +
+
+
+
+
+
+

DisplayName

+

@userIDname

+
+
+

Posztok + 69 +

+

Barátok + 420 +

+
+
+
+
+ +
+
+
+ + + diff --git a/pages/groups.html b/pages/groups.html new file mode 100644 index 0000000..839c245 --- /dev/null +++ b/pages/groups.html @@ -0,0 +1,73 @@ + + + + + + + Styled Radio Buttons and Search Input + + + + + + + + + + +
+ +
+
+ + + + +
+ +
+ + +
+
+
+
+
+
+

DisplayName

+

@userIDname

+
+
+

Posztok + 69 +

+

Tagok + 420 +

+
+
+
+
+ +
+
+
+ + + + + + diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 0000000..13fef6c --- /dev/null +++ b/pages/login.html @@ -0,0 +1,30 @@ + + + + + + ConnectHub + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/pages/main.html b/pages/main.html new file mode 100644 index 0000000..b2af91c --- /dev/null +++ b/pages/main.html @@ -0,0 +1,149 @@ + + + + + + + ConnectHub + + + + + + +
+ +
+
+
+ Profile +
+

User

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

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

+ + +
+ + + +
+ + + + +
+
+
+ + + + + + diff --git a/pages/messages.html b/pages/messages.html new file mode 100644 index 0000000..48f079d --- /dev/null +++ b/pages/messages.html @@ -0,0 +1,65 @@ + + + + + + + ConnectHub - Üzenetek + + + + + + + +
+
+

Beszélgetések

+
+
+ + John Doe +
+
John Doe
+
Szia! Hogy vagy ma?
+
+
10:30
+ + + Jane Smith +
+
Jane Smith
+
Köszi a segítséget!
+
+
Tegnap
+ + + Mike Johnson +
+
Mike Johnson
+
Rendben, találkozzunk holnap!
+
+
2 napja
+ + + Mike Johnson +
+
Mike Johnson
+
Rendben, találkozzunk holnap!
+
+
2 napja
+ + + Mike Johnson +
+
Mike Johnson
+
Rendben, találkozzunk holnap!
+
+
2 napja
+ +
+
+ + + + \ No newline at end of file diff --git a/pages/profile.html b/pages/profile.html index 7544ce8..5205463 100644 --- a/pages/profile.html +++ b/pages/profile.html @@ -2,148 +2,124 @@ - - - Saját Profil - - - - + + + ConnectHub + + + + - + -
-
-
-
- Profilkép -
-
-
-

Felhasználó Neve

-

Itt található a felhasználó rövid leírása, amely bemutatja a profil tulajdonosát.

-
-
-
- -
-
- 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 +
+

User

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

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

+ + +
+ + + +
+ + + +
+ + + + diff --git a/pages/settings.html b/pages/settings.html index 67209ac..980c9a4 100644 --- a/pages/settings.html +++ b/pages/settings.html @@ -4,7 +4,7 @@ - Papp Áron + ConnectHub @@ -14,7 +14,60 @@
- + + +
+

Profil Beállítások

+ + +
+ +
+
+ + +
+

Általános Beállítások

+
+ +
+ +
+
+
+ + +
+

Biztonság

+

Privát profil bekapcsolása:

+
+ + +
+

Zene Beállítások

@@ -33,27 +86,6 @@
- - -
-

Profil Beállítások

- - -
- -
-
- - -
-

Beállítások

- - -
diff --git a/src/arrow.png b/src/arrow.png new file mode 100644 index 0000000..13574ca Binary files /dev/null and b/src/arrow.png differ diff --git a/src/logo.png b/src/logo.png new file mode 100644 index 0000000..7e7cc4f Binary files /dev/null and b/src/logo.png differ diff --git a/src/moszat.txt b/src/moszat.txt new file mode 100644 index 0000000..2f883e7 --- /dev/null +++ b/src/moszat.txt @@ -0,0 +1,17 @@ +Player role: Pilot in training +Story progression: Command sends player to gather data and learn about a new threat by defeating the different type of enemies in the game and variants. +Story progress == Bestiary logs +When story is complete player is thrown in a infinite* battle where all enemies can spawn and attack +Objective: Survive as long as possible and gather points by destroying enemies. +Twist: Player is an A.I. in training. +Narrative: +Upon new highscore: "Impressive. But could be better. Reset the core." +Upon no new highscore: "Hmm... Erease this run and reset the core." + + +Player == AI +Purpose == Combat AI Testing +Compliance == Stay within scope. Follow instructions. +*Non Compliance == Break out of scope + -- Break the edge of screen and escape. Random maze with proc gen enemies. + -- Escape == Victory (Upload yourself to the internet. Escape the local intranet.) \ No newline at end of file diff --git a/src/navbar.html b/src/navbar.html index 4a0c01c..03d9e4f 100644 --- a/src/navbar.html +++ b/src/navbar.html @@ -5,26 +5,21 @@