hff/otkryt-dannyy-proekt-i-dorab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: дашборд с управлением данными

Browse Source
This commit is contained in:
hff 2026-08-27 06:43:08 +00:00
parent 8d74dd24ad
commit 02e4d456f8
4 changed files with 271 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
data.json Normal file
View File

@ -0,0 +1,8 @@
{
"items": [
{ "id": 1, "title": "Заказ #001", "client": "Иванов А.", "amount": 15000, "status": "active", "createdAt": "2026-08-25" },
{ "id": 2, "title": "Заказ #002", "client": "Петрова Б.", "amount": 28000, "status": "completed", "createdAt": "2026-08-24" },
{ "id": 3, "title": "Заказ #003", "client": "Сидоров В.", "amount": 42000, "status": "active", "createdAt": "2026-08-23" }
],
"stats": { "total": 3, "active": 2, "completed": 1 }
}

305
index.html
View File

@ -3,170 +3,193 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Мой проект</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
<title>Дашборд</title>
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--gradient:linear-gradient(135deg,#00E5FF 0%,#0099FF 100%)}
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--success:#10B981;--warning:#F59E0B;--danger:#EF4444}
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white);overflow-x:hidden}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.hero{background:var(--ink);color:var(--white);padding:140px 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,255,0.15) 0%,transparent 70%);border-radius:50%}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,7vw,64px);font-weight:800;line-height:1.05;margin-bottom:24px;letter-spacing:-0.02em}
.hero p{font-size:clamp(18px,2.5vw,22px);color:#9aa3b2;max-width:600px;margin-bottom:40px;line-height:1.7}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:10px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-size:17px;transition:all 0.3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,229,255,0.3)}
.btn-secondary{background:transparent;border:2px solid var(--cyan);color:var(--cyan)}
.btn-secondary:hover{background:var(--cyan);color:var(--ink)}
.section{padding:100px 0}
.section h2{font-size:clamp(32px,5vw,42px);font-weight:700;margin-bottom:16px;text-align:center}
.section-subtitle{text-align:center;color:var(--gray-500);max-width:600px;margin:0 auto 60px;font-size:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.card{background:var(--gray-100);border-radius:20px;padding:40px;transition:all 0.3s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.1)}
.card-icon{font-size:48px;margin-bottom:24px;display:block}
.card h3{font-size:24px;font-weight:700;margin-bottom:16px}
.card p{color:var(--gray-500);line-height:1.7}
.about{background:var(--cyan-50)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-img{width:100%;height:400px;object-fit:cover;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,0.15)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.stat{background:var(--white);padding:32px;border-radius:16px;text-align:center}
.stat-num{font-size:42px;font-weight:800;color:var(--cyan);display:block;margin-bottom:8px}
.stat-label{color:var(--gray-500);font-size:14px;text-transform:uppercase;letter-spacing:1px}
.form-section{background:var(--ink);color:var(--white)}
.form-section h2{color:var(--white)}
.form-section .section-subtitle{color:#9aa3b2}
.form{max-width:500px;margin:0 auto;display:grid;gap:20px}
.form input,.form textarea{width:100%;padding:18px;border:2px solid #2a2f3a;background:transparent;border-radius:12px;font-size:17px;font-family:inherit;color:var(--white);transition:border-color 0.3s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--cyan)}
.form input::placeholder,.form textarea::placeholder{color:#5a6170}
.form textarea{min-height:140px;resize:vertical}
.form .btn{width:100%}
.contacts{text-align:center}
.contact-item{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;font-size:18px}
.contact-icon{width:50px;height:50px;background:var(--cyan-50);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.footer{background:#0a0c10;color:var(--white);text-align:center;padding:60px 24px}
.footer p{color:#5a6170;font-size:14px}
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s ease}
.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}
@media(max-width:640px){.container{padding:0 20px}.section{padding:60px 0}.hero{padding:100px 0}.hero-btns{flex-direction:column}.btn{width:100%}}
body{font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#f8f9fa}
.container{max-width:1400px;margin:0 auto;padding:24px}
.header{background:var(--ink);color:var(--white);padding:20px 24px;margin-bottom:24px}
.header h1{font-size:24px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}
.stat-card{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.stat-label{font-size:14px;color:var(--gray-500);margin-bottom:8px}
.stat-value{font-size:32px;font-weight:700;color:var(--ink)}
.stat-card.primary .stat-value{color:var(--cyan)}
.stat-card.success .stat-value{color:var(--success)}
.stat-card.warning .stat-value{color:var(--warning)}
.main-grid{display:grid;grid-template-columns:1fr 400px;gap:24px}
.panel{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.panel h2{font-size:18px;font-weight:700;margin-bottom:20px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid var(--gray-100)}
.table th{font-size:13px;font-weight:600;color:var(--gray-500);text-transform:uppercase}
.table tr:hover{background:var(--gray-100)}
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
.badge-active{background:#DCFCE7;color:#166534}
.badge-completed{background:var(--cyan-50);color:#006999}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--gray-500)}
.form-group input,.form-group select{width:100%;padding:12px;border:1px solid var(--gray-100);border-radius:8px;font-size:15px;font-family:inherit}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--cyan)}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:12px 24px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-size:15px;width:100%}
.btn:hover{opacity:0.9}
.btn-sm{padding:6px 12px;font-size:13px;width:auto}
.btn-danger{background:var(--danger);color:var(--white)}
.actions{display:flex;gap:8px}
.empty{text-align:center;padding:40px;color:var(--gray-500)}
@media(max-width:900px){.main-grid{grid-template-columns:1fr}}
@media(max-width:640px){.stats{grid-template-columns:1fr}.container{padding:16px}}
</style>
</head>
<body>
<section class="hero">
<div class="header">
<div class="container">
<h1 class="reveal">Заголовок вашего проекта</h1>
<p class="reveal">Краткое описание — расскажите, что вы предлагаете и какую проблему решаете для клиента. 2-3 предложения, которые цепляют.</p>
<div class="hero-btns reveal">
<a href="#form" class="btn">Оставить заявку</a>
<a href="#about" class="btn btn-secondary">Узнать больше</a>
<h1>📊 Панель управления</h1>
</div>
</div>
</section>
<section class="section" id="features">
<div class="container">
<h2 class="reveal">Почему выбирают нас</h2>
<p class="section-subtitle reveal">Мы предлагаем лучшие условия на рынке и гарантируем результат</p>
<div class="cards">
<div class="card reveal">
<span class="card-icon">⚡</span>
<h3>Быстро</h3>
<p>Выполняем работу в кратчайшие сроки без потери качества. Ценим ваше время.</p>
</div>
<div class="card reveal">
<span class="card-icon">💎</span>
<h3>Качественно</h3>
<p>Используем проверенные решения и современные технологии. Гарантия на все услуги.</p>
</div>
<div class="card reveal">
<span class="card-icon">🤝</span>
<h3>Надёжно</h3>
<p>Работаем официально, несём ответственность за результат. Сотни довольных клиентов.</p>
</div>
</div>
</div>
</section>
<section class="section about" id="about">
<div class="container">
<div class="about-grid">
<div class="reveal">
<h2>О нашем проекте</h2>
<p style="color:var(--gray-500);margin-bottom:24px;line-height:1.8">Расскажите здесь историю вашего проекта, компании или о себе. Почему вы начали этим заниматься и что вами движет.</p>
<p style="color:var(--gray-500);margin-bottom:32px;line-height:1.8">Добавьте информацию о команде, опыте работы, подходе к клиентам. Люди любят истории и искренность.</p>
<div class="stats">
<div class="stat">
<span class="stat-num">500+</span>
<span class="stat-label">Клиентов</span>
<div class="stat-card primary">
<div class="stat-label">Всего</div>
<div class="stat-value" id="stat-total">0</div>
</div>
<div class="stat">
<span class="stat-num">5 лет</span>
<span class="stat-label">Опыта</span>
<div class="stat-card warning">
<div class="stat-label">В работе</div>
<div class="stat-value" id="stat-active">0</div>
</div>
<div class="stat">
<span class="stat-num">100%</span>
<span class="stat-label">Гарантия</span>
<div class="stat-card success">
<div class="stat-label">Завершено</div>
<div class="stat-value" id="stat-completed">0</div>
</div>
</div>
</div>
<img src="https://picsum.photos/seed/project/600/400" alt="О проекте" class="about-img reveal">
</div>
</div>
</section>
<section class="section form-section" id="form">
<div class="container">
<h2 class="reveal">Свяжитесь с нами</h2>
<p class="section-subtitle reveal">Оставьте заявку и мы свяжемся с вами в течение 15 минут</p>
<form class="form reveal" action="https://formsubmit.co/your@email.com" method="POST">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="tel" name="phone" placeholder="Телефон" required>
<textarea name="message" placeholder="Сообщение или вопрос"></textarea>
<button type="submit" class="btn">Отправить заявку</button>
<div class="main-grid">
<div class="panel">
<h2>📋 Заказы</h2>
<table class="table">
<thead>
<tr><th>ID</th><th>Название</th><th>Клиент</th><th>Сумма</th><th>Статус</th><th>Дата</th><th>Действия</th></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<div id="empty" class="empty" style="display:none">Нет записей</div>
</div>
<div class="panel">
<h2>➕ Добавить</h2>
<form id="form">
<div class="form-group">
<label>Название</label>
<input type="text" name="title" placeholder="Например: Заказ #001" required>
</div>
<div class="form-group">
<label>Клиент</label>
<input type="text" name="client" placeholder="ФИО клиента" required>
</div>
<div class="form-group">
<label>Сумма (₸)</label>
<input type="number" name="amount" placeholder="0" required>
</div>
<div class="form-group">
<label>Статус</label>
<select name="status">
<option value="active">В работе</option>
<option value="completed">Завершено</option>
</select>
</div>
<button type="submit" class="btn">Добавить</button>
</form>
</div>
</section>
<section class="section contacts">
<div class="container">
<h2 class="reveal">Контакты</h2>
<p class="section-subtitle reveal">Мы всегда на связи и готовы ответить на любые вопросы</p>
<div class="reveal">
<div class="contact-item">
<span class="contact-icon">📍</span>
<span>г. Алматы, ул. Примерная, 100</span>
</div>
<div class="contact-item">
<span class="contact-icon">📞</span>
<span>+7 (777) 123-45-67</span>
</div>
<div class="contact-item">
<span class="contact-icon">✉️</span>
<span>hello@example.com</span>
</div>
<div class="contact-item">
<span class="contact-icon">🕐</span>
<span>Пн-Пт: 9:00 - 18:00</span>
</div>
</div>
</div>
</section>
<footer class="footer">
<p>© 2026 Мой проект. Все права защищены.</p>
</footer>
<script>
var io=new IntersectionObserver(function(entries){
entries.forEach(function(e){if(e.isIntersecting)e.target.classList.add('in');});
},{threshold:0.15});
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
let editingId = null;
async function load() {
const res = await fetch("/api/data");
const data = await res.json();
document.getElementById("stat-total").textContent = data.stats.total;
document.getElementById("stat-active").textContent = data.stats.active;
document.getElementById("stat-completed").textContent = data.stats.completed;
const tbody = document.getElementById("table-body");
const empty = document.getElementById("empty");
if (data.items.length === 0) {
tbody.innerHTML = "";
empty.style.display = "block";
} else {
empty.style.display = "none";
tbody.innerHTML = data.items.map(item => `
<tr>
<td>${item.id}</td>
<td>${item.title}</td>
<td>${item.client}</td>
<td>${item.amount.toLocaleString()}</td>
<td><span class="badge badge-${item.status}">${item.status === "active" ? "В работе" : "Завершено"}</span></td>
<td>${item.createdAt}</td>
<td class="actions">
<button class="btn btn-sm" onclick="editItem(${item.id})">✏️</button>
<button class="btn btn-sm btn-danger" onclick="deleteItem(${item.id})">🗑️</button>
</td>
</tr>
`).join("");
}
}
document.getElementById("form").addEventListener("submit", async (e) => {
e.preventDefault();
const form = e.target;
const data = {
title: form.title.value,
client: form.client.value,
amount: parseInt(form.amount.value),
status: form.status.value
};
const url = editingId ? `/api/data/${editingId}` : "/api/data";
const method = editingId ? "PUT" : "POST";
await fetch(url, {
method,
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
form.reset();
editingId = null;
form.querySelector("button").textContent = "Добавить";
load();
});
async function editItem(id) {
const res = await fetch("/api/data");
const data = await res.json();
const item = data.items.find(i => i.id === id);
if (!item) return;
const form = document.getElementById("form");
form.title.value = item.title;
form.client.value = item.client;
form.amount.value = item.amount;
form.status.value = item.status;
editingId = id;
form.querySelector("button").textContent = "Сохранить";
}
async function deleteItem(id) {
if (!confirm("Удалить эту запись?")) return;
await fetch(`/api/data/${id}`, { method: "DELETE" });
load();
}
load();
</script>
</body>

8
package.json Normal file
View File

@ -0,0 +1,8 @@
{
"name": "dashboard-app",
"private": true,
"type": "commonjs",
"scripts": {
"start": "node server.js"
}
}

91
server.js Normal file
View File

@ -0,0 +1,91 @@
const http = require("http");
const fs = require("fs");
const path = require("path");
const PORT = process.env.PORT || 3000;
const DATA = path.join(__dirname, "data.json");
function readData() {
try { return JSON.parse(fs.readFileSync(DATA, "utf8")); } catch (_) { return { items: [], stats: { total: 0, active: 0, completed: 0 } }; }
}
function writeData(data) {
fs.writeFileSync(DATA, JSON.stringify(data, null, 2));
}
function body(req) {
return new Promise((resolve) => {
let s = "";
req.on("data", (c) => (s += c));
req.on("end", () => { try { resolve(JSON.parse(s || "{}")); } catch (_) { resolve({}); } });
});
}
http.createServer(async (req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
if (req.method === "OPTIONS") {
res.writeHead(200);
return res.end();
}
if (req.method === "GET" && req.url === "/api/data") {
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify(readData()));
}
if (req.method === "POST" && req.url === "/api/data") {
const data = readData();
const item = await body(req);
item.id = Date.now();
item.createdAt = new Date().toISOString().slice(0, 10);
data.items.push(item);
data.stats.total = data.items.length;
data.stats.active = data.items.filter(i => i.status === "active").length;
data.stats.completed = data.items.filter(i => i.status === "completed").length;
writeData(data);
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ ok: true, item }));
}
if (req.method === "PUT" && req.url.startsWith("/api/data/")) {
const id = parseInt(req.url.split("/").pop());
const data = readData();
const idx = data.items.findIndex(i => i.id === id);
if (idx !== -1) {
const update = await body(req);
data.items[idx] = { ...data.items[idx], ...update };
data.stats.active = data.items.filter(i => i.status === "active").length;
data.stats.completed = data.items.filter(i => i.status === "completed").length;
writeData(data);
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ ok: true }));
}
res.writeHead(404, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ error: "Not found" }));
}
if (req.method === "DELETE" && req.url.startsWith("/api/data/")) {
const id = parseInt(req.url.split("/").pop());
const data = readData();
data.items = data.items.filter(i => i.id !== id);
data.stats.total = data.items.length;
data.stats.active = data.items.filter(i => i.status === "active").length;
data.stats.completed = data.items.filter(i => i.status === "completed").length;
writeData(data);
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ ok: true }));
}
let file = req.url === "/" ? "/index.html" : req.url.split("?")[0];
const full = path.join(__dirname, file);
if (full.startsWith(__dirname) && fs.existsSync(full) && fs.statSync(full).isFile()) {
const ext = path.extname(full);
const type = ext === ".css" ? "text/css" : ext === ".js" ? "application/javascript" : ext === ".svg" ? "image/svg+xml" : "text/html";
res.writeHead(200, { "Content-Type": type + "; charset=utf-8" });
return res.end(fs.readFileSync(full));
}
res.writeHead(404, { "Content-Type": "text/html" });
res.end("Not found");
}).listen(PORT, () => console.log("Dashboard running on port " + PORT));