147 lines
4.4 KiB
HTML
147 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="hu">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Styled Radio Buttons and Search Input</title>
|
|
<link rel="stylesheet" href="../css/friends.css">
|
|
<link rel="stylesheet" href="../css/navbar.css">
|
|
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="styles.css"> <!-- Link to the new styles -->
|
|
</head>
|
|
|
|
<body>
|
|
<div id="navbar-container"></div>
|
|
|
|
<!-- Usercontainer wrapping both filter and usercards -->
|
|
<div class="usercontainer">
|
|
<!-- Filter container with radio buttons and search input -->
|
|
<div class="filter">
|
|
<div class="tabs">
|
|
<input
|
|
checked=""
|
|
value="HTML"
|
|
name="fav_language"
|
|
id="html"
|
|
type="radio"
|
|
class="input"
|
|
/>
|
|
<label for="html" class="label">Követő</label>
|
|
<input
|
|
value="CSS"
|
|
name="fav_language"
|
|
id="css"
|
|
type="radio"
|
|
class="input"
|
|
/>
|
|
<label for="css" class="label">Követés</label>
|
|
<input
|
|
value="JavaScript"
|
|
name="fav_language"
|
|
id="javascript"
|
|
type="radio"
|
|
class="input"
|
|
/>
|
|
<label for="javascript" class="label">Jelölés</label>
|
|
</div>
|
|
<input placeholder="type it" class="search-input" name="text" type="text" />
|
|
</div>
|
|
|
|
<!-- Usercards container -->
|
|
<div class="usercards">
|
|
<!-- Example usercard items, add more as needed -->
|
|
<div class="usercard">
|
|
<div class="infos">
|
|
<div class="image"></div>
|
|
<div class="info">
|
|
<div>
|
|
<p class="name">DisplayName</p>
|
|
<p class="userid">@userIDname</p>
|
|
</div>
|
|
<div class="stats">
|
|
<p class="flex flex-col">Posztok
|
|
<span class="state-value">69</span>
|
|
</p>
|
|
<p class="flex">Barátok
|
|
<span class="state-value">420</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="biocard"></div>
|
|
<button class="request" type="button">Barát bejelölése</button>
|
|
</div>
|
|
<div class="usercard">
|
|
<div class="infos">
|
|
<div class="image"></div>
|
|
<div class="info">
|
|
<div>
|
|
<p class="name">DisplayName</p>
|
|
<p class="userid">@userIDname</p>
|
|
</div>
|
|
<div class="stats">
|
|
<p class="flex flex-col">Posztok
|
|
<span class="state-value">69</span>
|
|
</p>
|
|
<p class="flex">Barátok
|
|
<span class="state-value">420</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="biocard"></div>
|
|
<button class="request" type="button">Barát bejelölése</button>
|
|
</div>
|
|
<div class="usercard">
|
|
<div class="infos">
|
|
<div class="image"></div>
|
|
<div class="info">
|
|
<div>
|
|
<p class="name">DisplayName</p>
|
|
<p class="userid">@userIDname</p>
|
|
</div>
|
|
<div class="stats">
|
|
<p class="flex flex-col">Posztok
|
|
<span class="state-value">69</span>
|
|
</p>
|
|
<p class="flex">Barátok
|
|
<span class="state-value">420</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="biocard"></div>
|
|
<button class="request" type="button">Barát bejelölése</button>
|
|
</div>
|
|
<div class="usercard">
|
|
<div class="infos">
|
|
<div class="image"></div>
|
|
<div class="info">
|
|
<div>
|
|
<p class="name">DisplayName</p>
|
|
<p class="userid">@userIDname</p>
|
|
</div>
|
|
<div class="stats">
|
|
<p class="flex flex-col">Posztok
|
|
<span class="state-value">69</span>
|
|
</p>
|
|
<p class="flex">Barátok
|
|
<span class="state-value">420</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="biocard"></div>
|
|
<button class="request" type="button">Barát bejelölése</button>
|
|
</div>
|
|
<!-- Repeat usercard divs here -->
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/navbar.js"></script>
|
|
<script src="../js/profil.js"></script>
|
|
</body>
|
|
|
|
</html>
|