From 92ac3bfd8bd09be84044db2ce32f3064b5612816 Mon Sep 17 00:00:00 2001 From: Kilokem Date: Thu, 19 Sep 2024 09:03:39 +0200 Subject: [PATCH] Upload --- css/feedback.css | 172 ++++++++++++++++++++++++++ css/friends.css | 185 ++++++++++++++++++++++++++++ css/navbar.css | 293 ++++++++++++++++++++++++++++++++++++++++++++ css/settings.css | 153 +++++++++++++++++++++++ js/bgmusic.js | 12 ++ js/feedback.js | 3 + js/navbar.js | 42 +++++++ js/settings.js | 54 ++++++++ login/login.html | 26 ++++ login/logo.png | Bin 0 -> 12931 bytes login/script.js | 13 ++ login/styles.css | 135 ++++++++++++++++++++ pages/feedback.html | 72 +++++++++++ pages/friends.html | 146 ++++++++++++++++++++++ pages/settings.html | 49 ++++++++ src/navbar.html | 62 ++++++++++ 16 files changed, 1417 insertions(+) create mode 100644 css/feedback.css create mode 100644 css/friends.css create mode 100644 css/navbar.css create mode 100644 css/settings.css create mode 100644 js/bgmusic.js create mode 100644 js/feedback.js create mode 100644 js/navbar.js create mode 100644 js/settings.js create mode 100644 login/login.html create mode 100644 login/logo.png create mode 100644 login/script.js create mode 100644 login/styles.css create mode 100644 pages/feedback.html create mode 100644 pages/friends.html create mode 100644 pages/settings.html create mode 100644 src/navbar.html diff --git a/css/feedback.css b/css/feedback.css new file mode 100644 index 0000000..e2f9d45 --- /dev/null +++ b/css/feedback.css @@ -0,0 +1,172 @@ +/* Kártyák reszponzív elrendezése */ +.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: 600px; + margin-bottom: 20px; +} + +.profile-section { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.profile-img { + border-radius: 50%; + width: 50px; + height: 50px; + margin-right: 10px; +} + +#postInput { + flex: 1; + border: none; + padding: 10px; + border-radius: 25px; + color: var(--color-black); + background-color: var(--color-bg); + font-size: 1em; + outline: none; + margin-right: 10px; /* Távolság az input mező és a gomb között */ +} + +.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 */ +} + +.input-buttons { + display: flex; + align-items: center; +} + +/* Új gomb stílus */ +button { + font-family: inherit; + font-size: 16px; /* Csökkentett betűméret */ + background: royalblue; + color: white; + padding: 0.5em 0.8em; /* Csökkentett padding */ + display: flex; + align-items: center; + border: none; + border-radius: 16px; + overflow: hidden; + transition: all 0.2s; + cursor: pointer; +} + +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; +} + +button:hover .svg-wrapper { + animation: fly-1 0.6s ease-in-out infinite alternate; +} + +button:hover svg { + transform: translateX(1.2em) rotate(45deg) scale(1.1); +} + +button:hover span { + transform: translateX(5em); +} + +button:active { + transform: scale(0.95); +} + +@keyframes fly-1 { + from { + transform: translateY(0.1em); + } + + to { + transform: translateY(-0.1em); + } +} + +/* Kártyák stílusai */ +.card-container { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + max-width: 600px; +} + +.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; + margin-bottom: 10px; +} + +.card-profile-img { + border-radius: 50%; + width: 40px; + height: 40px; + margin-right: 10px; +} + +.card-user-info h2 { + margin: 0; + font-size: 1.2em; +} + +.card-user-info p { + margin: 0; + color: #666; +} + +.post-actions { + display: flex; + justify-content: space-between; + padding-top: 10px; +} + +.like-btn, +.comment-btn { + background-color: transparent; + border: none; + font-size: 1.1em; + cursor: pointer; + display: flex; + align-items: center; + gap: 5px; + color: var(--color-black); +} + +.like-btn.active i { + color: #007BFF; +} +h2{ + color:var(--color-black); +} diff --git a/css/friends.css b/css/friends.css new file mode 100644 index 0000000..e980dd0 --- /dev/null +++ b/css/friends.css @@ -0,0 +1,185 @@ +/* Base styles */ +body { + font-family: Arial, sans-serif; + background-color: #121212; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + overflow: hidden; +} + +/* Usercontainer styling */ +.usercontainer { + width: 70%; + max-width: 1200px; + margin-top: 20px; /* Space from the top for the filter */ + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +} + +/* Filter container styles */ +.filter { + width: 100%; /* Full width of the usercontainer */ + background: #1e1e1e; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + padding: 10px; + position: sticky; /* Keeps it fixed at the top */ + top: 0; /* Stick to the top */ + margin-bottom: 20px; /* Space below the filter */ +} + +/* Tabs container styles */ +.tabs { + display: grid; + grid-auto-flow: column; + gap: 10px; /* Space between tabs */ + width: 100%; +} + +/* Radio button input styles */ +.input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: none; +} + +/* Radio button label styles */ +.label { + padding: 10px 20px; + cursor: pointer; + text-align: center; + background: #333; + border-radius: 8px; + color: #fff; + transition: background 0.3s, color 0.3s; +} + +.input:checked + .label { + background: #aa00ff; + color: #fff; +} + +.input:not(:checked) + .label:hover { + background: #444; +} + +/* Search input styles */ +.search-input { + width: 100%; /* Full width of the filter */ + background-color: #1a1a1a; + border: none; + padding: 10px; + border-radius: 10px; + outline: none; + color: white; + margin-top: 10px; /* Space between the tabs and search input */ + box-sizing: border-box; +} + +/* Usercards container */ +.usercards { + padding: 1rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: 10px; /* Spacing between items */ + width: 100%; /* Full width of the usercontainer */ +} + +/* Usercard styling */ +.usercard { + max-width: 360px; + border-radius: 1rem; + background-color: rgba(20, 20, 20, 1); + padding: 1rem; +} + +.biocard { + max-width: 460px; + border-radius: 1rem; + background-color: rgb(118, 36, 194); + padding: 4rem; + margin-top: 1rem; +} + +.infos { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1rem; +} + +.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)); +} + +.info { + height: 7rem; + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.name { + font-weight: 500; + color: rgba(255, 255, 255, 1); +} + +.userid { + font-size: 0.75rem; + color: rgba(156, 163, 175, 1); +} + +.stats { + width: 100%; + border-radius: 0.5rem; + background-color: rgba(255, 255, 255, 1); + display: flex; + align-items: center; + justify-content: space-around; + font-size: 0.75rem; + line-height: 1rem; + color: rgba(0, 0, 0, 1); +} + +.flex { + display: flex; + flex-direction: column; + align-items: center; + margin: 0 4px; +} + +.state-value { + font-weight: 700; + color: rgb(118, 36, 194); +} + +.request { + margin-top: 1rem; + width: 100%; + border: 1px solid transparent; + border-radius: 0.5rem; + padding: 0.5rem 1rem; + font-size: 1rem; + line-height: 1.5rem; + transition: all .3s ease; +} + +.request:hover { + background-color: rgb(118, 36, 194); + color: #fff; +} diff --git a/css/navbar.css b/css/navbar.css new file mode 100644 index 0000000..c65a036 --- /dev/null +++ b/css/navbar.css @@ -0,0 +1,293 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + --color-hover: rgba(32, 59, 232); + --transition: all 0.2s ease; +} + +:root { + --color-white: #fff; + --color-black: #000; + --color-bg: #e2e2e2; +} + +.dark-mode { + --color-white: #000; + --color-black: #fff; + --color-bg: #1d1b31; +} + +body { + background-color: var(--color-bg); +} + +.sidebar { + position: fixed; + top: 0; + left: 0; + z-index: 100; + width: 78px; + height: 100%; + background: var(--color-white); + padding: 8px 16px; + transition: var(--transition); +} + +.sidebar.expand { + width: 250px; +} + + +.sidebar.expand { + width: 250px; +} + + +.sidebar.expand { + width: 250px; +} + +.nav-header { + height: 60px; + display: flex; + align-items: center; + position: relative; +} + +.nav-header .logo { + color: var(--color-black); + font-size: 23px; + font-weight: 600; + opacity: 0; + transition: var(--transition); +} + +.sidebar.expand .nav-header .logo { + opacity: 1; +} + +.nav-header .btn-menu { + position: absolute; + color: var(--color-black); + top: 50%; + right: 0; + transform: translateY(-50%); + font-size: 23px; + cursor: pointer; + margin-right: 10px; +} + +.sidebar.expand .nav-header .btn-menu { + margin-right: 0; +} + +.nav-links { + margin-top: 20px; + height: 100%; +} + +.nav-links li { + position: relative; + margin: 8px 0; + list-style: none; +} + +.nav-links i { + color: var(--color-black); + height: 50px; + min-width: 50px; + font-size: 23px; + text-align: center; + line-height: 50px; +} + +.nav-links input { + font-size: 14px; + font-weight: 400; + color: var(--color-black); + outline: none; + height: 40px; + width: 50%; + border: none; + border-radius: 12px; + background: var(--color-bg); + padding: 0; +} + +.sidebar.expand .nav-links input { + width: 100%; + padding: 0 20px 0 40px; +} + +.nav-links li a { + display: flex; + height: 100%; + width: 100%; + border-radius: 12px; + align-items: center; + text-decoration: none; + background: var(--color-white); +} + +.nav-links li:hover a { + background: var(--color-hover); +} + +.nav-links li:hover i { + color: var(--color-white); +} + +.nav-links li a .title { + color: var(--color-black); + font-size: 15px; + font-weight: 400; + white-space: nowrap; + display: none; + transition: var(--transition); +} + +.sidebar.expand .nav-links li a .title { + display: block; +} + +.nav-links li:hover a .title { + color: var(--color-white); +} + +.nav-links li .tooltip { + position: absolute; + top: -20px; + left: calc(100% + 15px); + z-index: 3; + background: var(--color-white); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); + padding: 6px 14px; + color: var(--color-black); + font-size: 15px; + white-space: nowrap; + border-radius: 3px; + opacity: 0; + pointer-events: none; + transition: 0s; +} + +.sidebar li:hover .tooltip { + opacity: 1; + pointer-events: auto; + top: 50%; + transform: translateY(-50%); +} + +.sidebar.expand .tooltip { + display: none; +} + +.nav-links .search-btn { + position: absolute; + top: 50%; + left: 0; + transform: translateY(-25px); + font-size: 23px; + color: var(--color-black); + border-radius: 12px; + background: var(--color-white); + transition: var(--transition); +} + +.sidebar.expand .nav-links .search-btn { + background: transparent; +} + +.sidebar.expand .nav-links li:hover .search-btn { + color: var(--color-black); +} + +.nav-links .search-btn:hover { + background: var(--color-hover); +} + +.theme-wrapper { + position: fixed; + bottom: 0; + display: flex; + justify-content: space-between; + height: 60px; + width: 250px; + left: 0; + padding: 8px 16px; +} + +.theme-wrapper .theme-icon { + font-size: 20px; + color: var(--color-black); + display: none; +} + +.sidebar.expand .theme-wrapper .theme-icon { + display: block; +} + +.theme-wrapper p { + font-size: 16px; + color: var(--color-black); + font-weight: 400; + display: none; +} + +.sidebar.expand .theme-wrapper p { + display: block; +} + +.theme-wrapper .theme-btn { + width: 40px; + height: 20px; + background: var(--color-bg); + border-radius: 30px; + position: relative; + cursor: pointer; +} + +.theme-wrapper .theme-btn .theme-ball { + position: absolute; + width: 15px; + height: 15px; + background: var(--color-black); + border-radius: 50%; + top: 2px; + left: 3px; + transition: var(--transition); +} + +.theme-wrapper .theme-btn .theme-ball.dark { + left: 20px; +} + +.home { + position: relative; + top: 0; + left: 78px; + width: calc(100% - 78px); + min-height: 100vh; + background: var(--color-bg); + z-index: 6; + transition: var(--transition); +} + +.sidebar.expand ~ .home { + left: 250px; + width: calc(100% - 250px); +} + +.home p { + font-size: 20px; + font-weight: 500; + color: var(--color-black); + display: inline-block; + margin: 20px; + white-space: nowrap; +} + diff --git a/css/settings.css b/css/settings.css new file mode 100644 index 0000000..4b95d81 --- /dev/null +++ b/css/settings.css @@ -0,0 +1,153 @@ +/* Konténer, ami összefogja a beállításokat */ +.settings-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 10px; /* Belépő margó hozzáadása */ +} + + + /* Kártyák stílusa */ + .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); + } + + /* Telefonos nézet */ + @media (max-width: 768px) { + .settings-card { + max-width: 100%; + margin: 10px 0; + } + } + +.settings-card h2 { + margin-bottom: 20px; + color:var(--color-black); +} +#video-container { + display: flex; + justify-content: center; +} +.settings-card input[type="text"] { + width: 100%; + color:black; + margin-bottom: 15px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; +} + +#video-container { + 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); +} + +.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 */ +} + +#save-music, #reset-music { + 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 */ +} + +#save-music:hover, #reset-music: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 { + transform: translateY(0); /* Vissza az eredeti helyzetbe */ + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Alapállapot */ +} + +#save-music { + background-color: #007bff; +} + +#reset-music { + background-color: red; +} + +#save-music:hover { + background-color: #0056b3; +} + +#reset-music:hover { + background-color: rgb(171, 0, 0); +} + +/* Reszponzív beállítások kisebb képernyőkre */ +@media (max-width: 768px) { + #save-music, #reset-music { + max-width: 100%; /* Mobilnézetben a gombok teljes szélességet elfoglalnak */ + } +} + +.mini-label{ + color:var(--color-black); +} +.button-container { + display: flex; + justify-content: center; + gap: 10px; /* A gombok közötti távolság */ + margin-top: 15px; +} \ No newline at end of file diff --git a/js/bgmusic.js b/js/bgmusic.js new file mode 100644 index 0000000..14e7dcc --- /dev/null +++ b/js/bgmusic.js @@ -0,0 +1,12 @@ +document.addEventListener('DOMContentLoaded', () => { + const youtubePlayer = document.getElementById('youtubePlayer'); + + // Beállítjuk a mentett YouTube ID-t, ha létezik + const savedYoutubeId = localStorage.getItem('youtubeId'); + if (savedYoutubeId) { + // Beállítjuk az új YouTube ID-t + youtubePlayer.src = `https://www.youtube.com/embed/${savedYoutubeId}?autoplay=1`; + youtubePlayer.width = '560'; // Esetleg állítsd vissza a méretet + youtubePlayer.height = '315'; // Esetleg állítsd vissza a méretet + } +}); diff --git a/js/feedback.js b/js/feedback.js new file mode 100644 index 0000000..6d9cc44 --- /dev/null +++ b/js/feedback.js @@ -0,0 +1,3 @@ +function toggleLike(button) { + button.classList.toggle('active'); +} diff --git a/js/navbar.js b/js/navbar.js new file mode 100644 index 0000000..b64567d --- /dev/null +++ b/js/navbar.js @@ -0,0 +1,42 @@ +document.addEventListener('DOMContentLoaded', () => { + const navbarContainer = document.createElement('div'); + navbarContainer.id = 'navbar-container'; + document.body.insertBefore(navbarContainer, document.body.firstChild); + + fetch('../src/navbar.html') + .then(response => response.text()) + .then(data => { + navbarContainer.innerHTML = data; + + const themeBtn = document.querySelector('.theme-btn'); + const themeBall = document.querySelector('.theme-ball'); + const btnMenu = document.querySelector('.btn-menu'); + const sidebar = document.querySelector('.sidebar'); + + if (btnMenu && sidebar) { + btnMenu.addEventListener('click', () => { + sidebar.classList.toggle('expand'); + }); + } + + if (themeBtn && themeBall) { + const localData = localStorage.getItem('theme'); + if (localData === 'dark') { + document.body.classList.add('dark-mode'); + themeBall.classList.add('dark'); + } + + themeBtn.addEventListener('click', () => { + document.body.classList.toggle('dark-mode'); + themeBall.classList.toggle('dark'); + if (document.body.classList.contains('dark-mode')) { + localStorage.setItem('theme', 'dark'); + } else { + localStorage.setItem('theme', 'light'); + } + }); + } + }) + .catch(error => console.error('Error loading the navbar:', error)); + }); + \ No newline at end of file diff --git a/js/settings.js b/js/settings.js new file mode 100644 index 0000000..80b0410 --- /dev/null +++ b/js/settings.js @@ -0,0 +1,54 @@ +document.addEventListener('DOMContentLoaded', () => { + const youtubeIdInput = document.getElementById('youtube-id'); + const youtubePlayer = document.getElementById('youtubePlayer'); + const loopToggle = document.getElementById('loop-toggle'); + + // Betöltjük a mentett beállításokat + const savedYoutubeId = localStorage.getItem('youtubeId'); + const savedLoop = localStorage.getItem('loop'); + + if (savedYoutubeId) { + youtubeIdInput.value = savedYoutubeId; + let url = `https://www.youtube.com/embed/${savedYoutubeId}?autoplay=1`; + if (savedLoop === 'true') { + url += '&loop=1'; + loopToggle.checked = true; + } else { + loopToggle.checked = false; + } + youtubePlayer.src = url; + } + document.getElementById('reset-music').addEventListener('click', () => { + localStorage.setItem('youtubeId', ''); + youtubePlayer.src = ''; + youtubeIdInput.value = ''; + //alert('YouTube ID törölve!'); + }); + document.getElementById('save-music').addEventListener('click', () => { + const youtubeId = youtubeIdInput.value.trim(); + if (youtubeId) { + let url = `https://www.youtube.com/embed/${youtubeId}?autoplay=1`; + if (loopToggle.checked) { + url += '&loop=1'; + } + youtubePlayer.src = url; + localStorage.setItem('youtubeId', youtubeId); + localStorage.setItem('loop', loopToggle.checked); + //alert('YouTube ID elmentve!'); + } else { + //alert('Kérlek, add meg a YouTube ID-t!'); + } + }); + + loopToggle.addEventListener('change', () => { + const youtubeId = youtubeIdInput.value.trim(); + if (youtubeId) { + let url = `https://www.youtube.com/embed/${youtubeId}?autoplay=1`; + if (loopToggle.checked) { + url += '&loop=1'; + } + youtubePlayer.src = url; + localStorage.setItem('loop', loopToggle.checked); + } + }); +}); diff --git a/login/login.html b/login/login.html new file mode 100644 index 0000000..dd6c81c --- /dev/null +++ b/login/login.html @@ -0,0 +1,26 @@ + + + + + + ConnectHub - Bejelentkezés + + + + +
+ +
+ + + \ No newline at end of file diff --git a/login/logo.png b/login/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..7e7cc4fccaddf80df6fd7e37c4126a55fe76f7d7 GIT binary patch literal 12931 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 { + const discordLoginBtn = document.getElementById('discord-login-btn'); + + discordLoginBtn.addEventListener('click', () => { + // Discord OAuth2 konfiguráció + const CLIENT_ID = 'YOUR_DISCORD_CLIENT_ID'; + const REDIRECT_URI = encodeURIComponent('YOUR_REDIRECT_URI'); + const DISCORD_AUTH_URL = `https://discord.com/api/oauth2/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=identify%20email`; + + // Átirányítás a Discord engedélyezési oldalára + window.location.href = DISCORD_AUTH_URL; + }); +}); \ No newline at end of file diff --git a/login/styles.css b/login/styles.css new file mode 100644 index 0000000..374180b --- /dev/null +++ b/login/styles.css @@ -0,0 +1,135 @@ +body, html { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + height: 100%; + background-color: #111; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +.login-box { + background-color: #111; + border: 2px solid #5865F2; + border-radius: 8px; + padding: 40px; + box-shadow: 4px 4px #5865F2; + 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: #ffffff; + font-size: 24px; + font-weight: 900; + margin-bottom: 8px; +} + +.subtitle { + color: #b9bbbe; + 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; + } +} \ No newline at end of file diff --git a/pages/feedback.html b/pages/feedback.html new file mode 100644 index 0000000..0301607 --- /dev/null +++ b/pages/feedback.html @@ -0,0 +1,72 @@ + + + + + + + ConnectHub - Bejegyzés + + + + + + +
+ +
+
+ Profile + +
+
+ + +
+
+ + + +
+
+
+ Profile + +
+

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

+
+ + +
+
+
+
+ + + + + diff --git a/pages/friends.html b/pages/friends.html new file mode 100644 index 0000000..8b61a0a --- /dev/null +++ b/pages/friends.html @@ -0,0 +1,146 @@ + + + + + + + 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 +

+
+
+
+
+ +
+ +
+
+ + + + + + diff --git a/pages/settings.html b/pages/settings.html new file mode 100644 index 0000000..e9d117a --- /dev/null +++ b/pages/settings.html @@ -0,0 +1,49 @@ + + + + + + + Papp Áron + + + + + + + +
+ +
+ +
+

Zene Beállítások

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

Profil Beállítások

+
+
+

Beállítások

+
+
+
+ + + diff --git a/src/navbar.html b/src/navbar.html new file mode 100644 index 0000000..767f921 --- /dev/null +++ b/src/navbar.html @@ -0,0 +1,62 @@ +
+
+ + +
+ +
+ +

Sötét mód

+
+ +
+
+
\ No newline at end of file