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