SettingsDoneForNow
This commit is contained in:
196
css/settings.css
196
css/settings.css
@ -6,9 +6,8 @@
|
||||
padding: 10px; /* Belépő margó hozzáadása */
|
||||
}
|
||||
|
||||
|
||||
/* Kártyák stílusa */
|
||||
.settings-card {
|
||||
/* Kártyák stílusa */
|
||||
.settings-card {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
max-width: 48%;
|
||||
@ -18,34 +17,52 @@
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* Telefonos nézet */
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Kártyán belül középre igazítás */
|
||||
text-align: center; /* Szövegek középre igazítása */
|
||||
}
|
||||
|
||||
/* Telefonos nézet */
|
||||
@media (max-width: 768px) {
|
||||
.settings-card {
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-card h2 {
|
||||
margin-bottom: 20px;
|
||||
color:var(--color-black);
|
||||
color: var(--color-black);
|
||||
font-size: 1.5em; /* Nagyobb betűméret a címekhez */
|
||||
}
|
||||
#video-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.mini-label {
|
||||
color: var(--color-black);
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
text-align: left; /* Balra igazítás a címkékhez */
|
||||
}
|
||||
.settings-card input[type="text"] {
|
||||
|
||||
.settings-card input[type="text"],
|
||||
.settings-card textarea {
|
||||
width: 100%;
|
||||
color:black;
|
||||
color: black;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box; /* Box-sizing hozzáadása, hogy a padding ne befolyásolja a méretet */
|
||||
}
|
||||
|
||||
.settings-card textarea {
|
||||
height: 150px; /* Fix magasság a szöveges beviteli mezőhöz */
|
||||
resize: vertical; /* Csak függőlegesen méretezhető */
|
||||
}
|
||||
|
||||
#video-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -96,7 +113,7 @@
|
||||
flex-wrap: wrap; /* Törés kisebb képernyőn */
|
||||
}
|
||||
|
||||
#save-music, #reset-music {
|
||||
.settings-button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
@ -109,12 +126,12 @@
|
||||
flex: 1; /* Fele-fele arányban oszlik meg a gomb szélessége */
|
||||
}
|
||||
|
||||
#save-music:hover, #reset-music:hover {
|
||||
.settings-button:hover {
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Hover esetén erősebb árnyék */
|
||||
transform: translateY(-4px); /* Enyhe felemelkedés */
|
||||
}
|
||||
|
||||
#save-music:active, #reset-music:active {
|
||||
.settings-button:active {
|
||||
transform: translateY(0); /* Vissza az eredeti helyzetbe */
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Alapállapot */
|
||||
}
|
||||
@ -137,17 +154,142 @@
|
||||
|
||||
/* Reszponzív beállítások kisebb képernyőkre */
|
||||
@media (max-width: 768px) {
|
||||
#save-music, #reset-music {
|
||||
.settings-button {
|
||||
max-width: 100%; /* Mobilnézetben a gombok teljes szélességet elfoglalnak */
|
||||
}
|
||||
}
|
||||
|
||||
.mini-label{
|
||||
color:var(--color-black);
|
||||
}
|
||||
.button-container {
|
||||
/* Felnőtt tartalmak szűrése kapcsoló stílusai */
|
||||
.rocker {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #888;
|
||||
width: 7em;
|
||||
height: 4em;
|
||||
overflow: hidden;
|
||||
border-bottom: 0.5em solid #eee;
|
||||
}
|
||||
|
||||
.rocker-small {
|
||||
font-size: 0.75em;
|
||||
/* Sizes the switch */
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.rocker::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #999;
|
||||
border: 0.5em solid #eee;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.rocker input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.switch-left,
|
||||
.switch-right {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* A gombok közötti távolság */
|
||||
margin-top: 15px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
<!-- Bejegyzés létrehozás kártya -->
|
||||
<div class="create-post-card">
|
||||
<div class="profile-section">
|
||||
<img src="../images/profile.jpg" alt="Profile" class="profile-img" />
|
||||
<img src="../profile_example.png" alt="Profile" class="profile-img" />
|
||||
<input type="text" placeholder="Mit szeretnél megosztani?" id="postInput" />
|
||||
</div>
|
||||
<div class="input-container">
|
||||
@ -47,7 +47,7 @@
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../images/profile.jpg" alt="Profile" class="card-profile-img" />
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
|
||||
@ -80,68 +80,68 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MÉGTÖBB Példa bejegyzés kártya -->
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MORE ELEMENTS FOR TEST -->
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<img src="../profile_example.png" alt="Profile" class="card-profile-img" />
|
||||
<div class="card-user-info">
|
||||
<h2>Áron</h2>
|
||||
<p>2 órája</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Ez egy példa szöveg a kártyán belül.</p>
|
||||
<div class="post-actions">
|
||||
<button class="like-btn" onclick="toggleLike(this)">
|
||||
<i class="bx bx-like"></i> Like
|
||||
</button>
|
||||
<button class="comment-btn">
|
||||
<i class="bx bx-comment"></i> Komment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END OF MORE ELEMENTS FOR TEST -->
|
||||
<script src="../js/navbar.js"></script> <!-- Oldalsáv JS -->
|
||||
<script src="../js/profile.js"></script> <!-- Profil oldal JS -->
|
||||
</body>
|
||||
|
||||
@ -5,45 +5,57 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Papp Áron</title>
|
||||
<link rel="stylesheet" href="../css/navbar.css" />
|
||||
<link rel="stylesheet" href="../css/navbar.css" />
|
||||
<link rel="stylesheet" href="../css/settings.css" />
|
||||
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
|
||||
<script src="../js/navbar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar-container"></div>
|
||||
<section class="home">
|
||||
<section class="home">
|
||||
<div class="settings-container">
|
||||
<!-- Zene beállítások kártya -->
|
||||
<div class="settings-container">
|
||||
<!-- Zene beállítások kártya -->
|
||||
<section class="settings-card">
|
||||
<h2>Zene Beállítások</h2>
|
||||
<label class="mini-label" for="youtube-id">YouTube Videó ID:</label>
|
||||
<input type="text" id="youtube-id" placeholder="Illessz be egy YouTube Videó ID-t..." />
|
||||
<div id="video-container">
|
||||
<iframe id="youtubePlayer" width="280" height="157" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="loop-switch">
|
||||
<input type="checkbox" id="loop-toggle" />
|
||||
<label class="mini-label" for="loop-toggle">Ismétlés </label>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button class="settings-button" id="reset-music">Törlés</button>
|
||||
<button class="settings-button" id="save-music">Mentés</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Profil beállítások kártya -->
|
||||
<section class="settings-card">
|
||||
<h2>Profil Beállítások</h2>
|
||||
</section>
|
||||
<section class="settings-card">
|
||||
<h2>Beállítások</h2>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<script src="../js/settings.js"></script>
|
||||
<section class="settings-card">
|
||||
<h2>Zene Beállítások</h2>
|
||||
<label class="mini-label" for="youtube-id">YouTube Videó ID:</label>
|
||||
<input type="text" id="youtube-id" placeholder="Illessz be egy YouTube Videó ID-t..." />
|
||||
<div id="video-container">
|
||||
<iframe id="youtubePlayer" width="280" height="157" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="loop-switch">
|
||||
<input type="checkbox" id="loop-toggle" />
|
||||
<label class="mini-label" for="loop-toggle">Ismétlés </label>
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<button class="settings-button" id="reset-music">Törlés</button>
|
||||
<button class="settings-button" id="save-music">Mentés</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profil beállítások kártya -->
|
||||
<section class="settings-card">
|
||||
<h2>Profil Beállítások</h2>
|
||||
<label class="mini-label" for="profile-description">Profil Leírás:</label>
|
||||
<textarea id="profile-description" placeholder="Add meg a profil leírását..."></textarea>
|
||||
<div class="button-container">
|
||||
<button class="settings-button" id="save-profile">Mentés</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Beállítások kártya -->
|
||||
<section class="settings-card">
|
||||
<h2>Beállítások</h2>
|
||||
<label class="mini-label" for="content-filter">Felnőtt tartalmak szűrése:</label>
|
||||
<label class="rocker rocker-small">
|
||||
<input type="checkbox" id="content-filter">
|
||||
<span class="switch-left">SFW</span>
|
||||
<span class="switch-right">NSFW</span>
|
||||
</label>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<script src="../js/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user