120 lines
4.9 KiB
HTML
120 lines
4.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<title>Invite User To Become BD</title>
|
||
<link rel="stylesheet" href="./yumi-invite-bd.css" />
|
||
</head>
|
||
<body>
|
||
<div class="fullPage" id="pageRoot">
|
||
<div class="status-bar-placeholder" id="statusBarPlaceholder"></div>
|
||
<div class="header-container">
|
||
<div class="side-area">
|
||
<button class="back-btn" id="backButton" type="button">
|
||
<img class="flip-img" id="backButtonIcon" src="" alt="" style="width: 100%; aspect-ratio: 1 / 1; display: block" />
|
||
</button>
|
||
</div>
|
||
<h1 class="header-title" id="pageTitle" style="color: black">Invite User To Become BD</h1>
|
||
<div class="actions-area">
|
||
<div class="language-entry" id="languageEntry">
|
||
<div class="language-name" id="languageName">English</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding: 16px; position: relative">
|
||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
|
||
<div
|
||
class="gradient-border-wrapper"
|
||
style="
|
||
flex: 1;
|
||
min-width: 0;
|
||
border-radius: 4px;
|
||
--gradient-border-width: 1.5px;
|
||
--gradient-direction: to bottom;
|
||
--gradient-start-color: #ffc4c4;
|
||
--gradient-end-color: #fff6a6;
|
||
--gradient-background: linear-gradient(120deg, rgba(255, 216, 0, 0.1) 39.13%, rgba(255, 149, 0, 0.1) 119.28%);
|
||
"
|
||
>
|
||
<div class="gradient-border-content">
|
||
<div style="padding: 0 8px; display: flex; align-items: center; height: max-content">
|
||
<input
|
||
id="searchInput"
|
||
type="text"
|
||
placeholder="Enter User ID"
|
||
autocomplete="off"
|
||
style="
|
||
width: 100%;
|
||
color: rgba(0, 0, 0, 0.4);
|
||
font-weight: 600;
|
||
outline: none;
|
||
border: none;
|
||
background-color: transparent;
|
||
padding: 8px;
|
||
"
|
||
/>
|
||
<button
|
||
id="clearButton"
|
||
type="button"
|
||
hidden
|
||
style="background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0 4px"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button style="font-weight: 600" class="invite-btn" id="searchButton" type="button" disabled>Search</button>
|
||
</div>
|
||
|
||
<div id="resultList" style="margin: 16px 0; display: flex; flex-direction: column; gap: 12px"></div>
|
||
<div id="noData" class="no-data">please input user id</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template id="userCardTemplate">
|
||
<div
|
||
class="gradient-border-wrapper user-card"
|
||
style="
|
||
position: relative;
|
||
z-index: 0;
|
||
border-radius: 20px;
|
||
--gradient-border-width: 1.5px;
|
||
--gradient-direction: to bottom;
|
||
--gradient-start-color: #ffc4c4;
|
||
--gradient-end-color: #fff6a6;
|
||
--gradient-background: linear-gradient(120deg, rgba(255, 216, 0, 0.1) 39.13%, rgba(255, 149, 0, 0.1) 119.28%);
|
||
"
|
||
>
|
||
<div class="gradient-border-content">
|
||
<div style="padding: 10px; transition: all 0.2s">
|
||
<div class="status-badge" style="position: absolute; z-index: 3; top: -2px; right: -2px"></div>
|
||
<div style="font-weight: 600">Information:</div>
|
||
<div style="display: flex; align-items: center; justify-content: space-between; gap: 4px">
|
||
<div style="flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 4px">
|
||
<div style="width: 3em; display: flex; align-items: center; justify-content: center">
|
||
<img class="avatar-image" src="" alt="" style="width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%" />
|
||
</div>
|
||
<div style="flex: 1; min-width: 0; align-self: stretch">
|
||
<div class="nickname" style="margin-bottom: 4px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"></div>
|
||
<div class="account" style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4); font-weight: 500"></div>
|
||
</div>
|
||
</div>
|
||
<div style="width: auto; min-width: 0; align-self: stretch; display: flex; justify-content: center; align-items: center">
|
||
<div class="pending-actions"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="./yumi-invite-bd.js"></script>
|
||
</body>
|
||
</html>
|