Обновлённый виджет рефералов (версия от 22 марта) Реализовано на PuzzleBot 💙
«Простой код — лучший союзник хорошего дизайна.»
🆕 Что нового в этой версии
Это обновлённая версия кода от 22 марта. Я улучшил интерфейс и добавили полезный функционал: • Отображение аватарки • Вывод username (с @) • Каждая карточка стала кликабельной — ведёт на профиль пользователя • Минималистичный, но приятный дизайн • Поддержка фильтрации по status (поиск по {{USERNAME_TEXT}})
🔧 Что делает этот код
1. Получает данные из таблицы NocoDB через API. 2. Отбирает только нужные записи (где поле status содержит {{USERNAME_TEXT}}). 3. Показывает список рефералов: аватар, имя, username, ссылка на профиль. 4. Если записей нет — пишет: «Нет приглашённых рефералов».
🗂 Таблица в NocoDB — нужные поля
Создайте таблицу с такими полями:
⚠ Обязательно вписывайте в status нужный маркер (например: {{USERNAME_TEXT}}), чтобы фильтрация работала.
🧩 Обновлённый код (HTML + JS)
<div class="views-list" id="viewsList"></div>
<script>
const api = 'https://nocodb.puzzlebot.top/api/v2/tables/mowc********5sx60/records';
const token = 'L5cLH1****************UTiweBbe-COJXh';
fetch(api, {
headers: {
'accept': 'application/json',
'xc-token': token
}
})
.then(res => res.json())
.then(data => {
const list = (data.list []).filter(r => (r.status '').includes('{{USERNAME_TEXT}}'));
const container = document.getElementById('viewsList');
if (!list.length) {
container.innerHTML = '<p>Нет приглашённых рефералов</p>';
return;
}
container.innerHTML = list.map(r => `
<a href="${r.linkprofil || '#'}" target="_blank" class="view-row">
<img src="${r.avatar || 'https://via.placeholder.com/50'}" class="avatar">
<div class="text-block">
<div class="name">${r.name || 'Без имени'}</div>
<div class="username">@${r.username || ''}</div>
</div>
</a>
`).join('');
});
</script>
Немного стилей (CSS)
.view-row {
display: flex;
gap: 12px;
background: #f9f9f9;
border-radius: 16px;
padding: 10px 14px;
text-decoration: none;
color: #000;
align-items: center;
transition: background 0.2s;
}
.view-row:hover {
background: #eef3ff;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.text-block .name {
font-weight: bold;
font-size: 16px;
}
.text-block .username {
font-size: 14px;
color: #59baf1;
}
Результат • Список рефералов в красивом формате • С аватарками • С юзернеймами • С кликабельными ссылками на профиль «Такой код легко вставить в любой сайт или лендинг. Всё работает сразу и не требует фреймворков.»
Замените на свои токены и все заработает!
Если возникнут вопросы пишите в предложку канала.
Готовый код!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Список Рефералов </title>
<style>
body {
font-family: sans-serif;
background: #f2f2f2;
margin: 0;
padding: 0px 0;
display: flex;
justify-content: center;
}
h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
text-align: center;
color: #333;
}
.views-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.view-row {
display: flex;
align-items: center;
gap: 12px;
background: #f9f9f9;
border-radius: 16px;
padding: 10px 14px;
text-decoration: none;
color: inherit;
transition: background 0.2s;
}
.view-row:hover {
background: #eef3ff;
}
.view-row .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
background: #ddd;
flex-shrink: 0;
}
.view-row .text-block {
display: flex;
flex-direction: column;
width: 100%;
}
.view-row .name-line {
display: flex;
justify-content: space-between;
align-items: center;
}
.view-row .name {
font-size: 16px;
font-weight: 500;
color: #333;
}
.view-row .extra {
font-size: 14px;
color: #999;
white-space: nowrap;
margin-left: 10px;
}
.view-row .username {
font-size: 14px;
color: #59baf1;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="views-list" id="viewsList"></div>
</div>
<script>
const token = 'ВАШ ТОКЕН NOCODB;
const tableUrl = 'https://nocodb.puzzlebot.top/api/v2/tables/ВАШ ТОКЕН ID ТАБЛИЦЫ /records';
async function fetchData() {
try {
const res = await fetch(tableUrl, {
headers: {
'accept': 'application/json',
'xc-token': token
}
});
const data = await res.json();
const records = data.list || [];
renderViews(records);
} catch (error) {
console.error('Ошибка при получении данных:', error);
}
}
function renderViews(items) {
const container = document.getElementById('viewsList');
container.innerHTML = '';
// ФИЛЬТРУЕМ: оставляем только записи, где поле 'status' содержит '{{USERNAME_TEXT}}'
const filteredItems = items.filter(item => {
const status = item.status || ''; // замени 'status' на своё поле
return status.includes('{{USERNAME_TEXT}}');
});
filteredItems.forEach(item => {
const avatar = item.avatar || 'https://via.placeholder.com/60';
const name = item.name || 'Без имени';
const username = item.username || '';
const link = item.linkprofil || '#';
const extra = item.null|| ''; // замени 'null' если нужно
const row = document.createElement('a');
row.className = 'view-row';
row.href = link;
row.target = '_blank';
row.innerHTML = `
<img src="${avatar}" alt="${name}" class="avatar">
<div class="text-block">
<div class="name-line">
<div class="name">${name}</div>
<br>
</div>
<div class="username">${username}</div>
</div>
`;
container.appendChild(row);
});
// Если нет подходящих - сообщение:
if (filteredItems.length === 0) {
container.innerHTML = '<p>Нет приглашенных рефералов</p>';
}
}
fetchData();
</script>
</body>
</html>
ПОДПИШИСЬ!
Начать дискуссию