commit 92ac3bfd8bd09be84044db2ce32f3064b5612816 Author: Kilokem Date: Thu Sep 19 09:03:39 2024 +0200 Upload 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 0000000..7e7cc4f Binary files /dev/null and b/login/logo.png differ diff --git a/login/script.js b/login/script.js new file mode 100644 index 0000000..030a609 --- /dev/null +++ b/login/script.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', () => { + 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