feat: command center dashboard v1
This commit is contained in:
Maksim Grachev
+898
@@ -0,0 +1,898 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>24mycloud</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f5f7;
|
||||
--nav: #ffffff;
|
||||
--card: #ffffff;
|
||||
--card-hover: #fafafa;
|
||||
--border: #e5e5ea;
|
||||
--border-hover: #d1d1d6;
|
||||
--text: #1d1d1f;
|
||||
--text-2: #48484a;
|
||||
--text-3: #8e8e93;
|
||||
--accent: #5856d6;
|
||||
--accent-light: #ededfc;
|
||||
--green: #30b455;
|
||||
--green-bg: #e8f8ee;
|
||||
--orange: #e68a1a;
|
||||
--orange-bg: #fef3e2;
|
||||
--red: #e5383b;
|
||||
--red-bg: #fde8e8;
|
||||
--blue: #3a7bd5;
|
||||
--blue-bg: #e8f0fb;
|
||||
--purple: #8b5cf6;
|
||||
--purple-bg: #f0ebfe;
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
|
||||
--shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
|
||||
--r: 8px;
|
||||
--r-lg: 12px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--bg: #0f0f13;
|
||||
--nav: #18181e;
|
||||
--card: #1e1e26;
|
||||
--card-hover: #26262f;
|
||||
--border: #2c2c36;
|
||||
--border-hover: #3c3c48;
|
||||
--text: #ececf0;
|
||||
--text-2: #a0a0ac;
|
||||
--text-3: #5c5c6a;
|
||||
--accent: #7c7af7;
|
||||
--accent-light: #252540;
|
||||
--green: #3dd68c;
|
||||
--green-bg: #152e20;
|
||||
--orange: #f5a623;
|
||||
--orange-bg: #2e2210;
|
||||
--red: #f06c6e;
|
||||
--red-bg: #2e1414;
|
||||
--blue: #5a9cf5;
|
||||
--blue-bg: #14233a;
|
||||
--purple: #9d7ffa;
|
||||
--purple-bg: #221a38;
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
|
||||
--shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* ===== AUTH ===== */
|
||||
#authScreen {
|
||||
position: fixed; inset: 0; z-index: 9999;
|
||||
background: #0c0c14;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
#authScreen.hidden { opacity: 0; pointer-events: none; transform: scale(1.05); }
|
||||
|
||||
.auth-bg {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 600px 400px at 30% 20%, rgba(88,86,214,0.12) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 500px 350px at 70% 80%, rgba(59,130,246,0.08) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.auth-grid {
|
||||
position: absolute; inset: 0;
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gridMove {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(60px, 60px); }
|
||||
}
|
||||
|
||||
.auth-particles {
|
||||
position: absolute; inset: 0; overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-particle {
|
||||
position: absolute;
|
||||
width: 2px; height: 2px;
|
||||
background: rgba(99,102,241,0.4);
|
||||
border-radius: 50%;
|
||||
animation: float linear infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(100vh) scale(0); opacity: 0; }
|
||||
10% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
.auth-box {
|
||||
position: relative;
|
||||
background: rgba(24,24,30,0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 16px;
|
||||
padding: 48px 40px;
|
||||
width: 380px;
|
||||
text-align: center;
|
||||
animation: authIn 0.6s ease-out;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(99,102,241,0.05);
|
||||
}
|
||||
|
||||
@keyframes authIn {
|
||||
0% { opacity: 0; transform: translateY(20px) scale(0.96); }
|
||||
100% { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
.auth-logo {
|
||||
width: 56px; height: 56px;
|
||||
background: linear-gradient(135deg, #5856d6, #818cf8);
|
||||
border-radius: 14px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
color: #fff;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 20px rgba(88,86,214,0.3);
|
||||
animation: logoPulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes logoPulse {
|
||||
0%, 100% { box-shadow: 0 4px 20px rgba(88,86,214,0.3); }
|
||||
50% { box-shadow: 0 4px 30px rgba(88,86,214,0.5); }
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 22px; font-weight: 700; color: #ececf0;
|
||||
margin-bottom: 4px; letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.auth-sub {
|
||||
font-size: 13px; color: #5c5c6a;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.auth-field {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
width: 100%; padding: 12px 16px 12px 42px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 10px; color: #ececf0;
|
||||
font-size: 14px; font-family: inherit;
|
||||
outline: none; transition: all 0.2s;
|
||||
}
|
||||
|
||||
.auth-input::placeholder { color: #4a4a5a; }
|
||||
.auth-input:focus { border-color: var(--accent); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(88,86,214,0.15); }
|
||||
|
||||
.auth-input-icon {
|
||||
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
|
||||
color: #5c5c6a;
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
width: 100%; padding: 12px;
|
||||
background: linear-gradient(135deg, #5856d6, #6e6ce8);
|
||||
border: none;
|
||||
border-radius: 10px; color: #fff;
|
||||
font-size: 14px; font-weight: 600; font-family: inherit;
|
||||
cursor: pointer; margin-top: 14px;
|
||||
transition: all 0.2s;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
|
||||
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(88,86,214,0.4); }
|
||||
.auth-btn:active { transform: translateY(0); }
|
||||
|
||||
.auth-btn-shine {
|
||||
position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
animation: shine 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { left: -100%; }
|
||||
50%,100% { left: 100%; }
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
color: #f06c6e; font-size: 12px;
|
||||
margin-top: 12px; min-height: 18px;
|
||||
}
|
||||
|
||||
.auth-error.shake { animation: shake 0.4s ease; }
|
||||
|
||||
@keyframes shake {
|
||||
0%,100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-8px); }
|
||||
75% { transform: translateX(8px); }
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
margin-top: 28px; font-size: 11px; color: #3a3a48;
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
}
|
||||
|
||||
/* ===== NAV ===== */
|
||||
.nav {
|
||||
width: 220px; min-height: 100vh;
|
||||
background: var(--nav);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column;
|
||||
position: fixed; left: 0; top: 0; bottom: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-head {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
width: 32px; height: 32px;
|
||||
background: linear-gradient(135deg, var(--accent), #818cf8);
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-name { font-size: 14px; font-weight: 700; }
|
||||
.nav-sub { font-size: 11px; color: var(--text-3); }
|
||||
|
||||
.nav-group { padding: 14px 10px 6px; }
|
||||
.nav-group-label {
|
||||
font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 1.2px;
|
||||
color: var(--text-3); padding: 0 6px; margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-links { display: flex; flex-direction: column; gap: 1px; }
|
||||
|
||||
.nav-link {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 10px; border-radius: var(--r);
|
||||
font-size: 13px; font-weight: 500;
|
||||
color: var(--text-2); cursor: pointer;
|
||||
transition: all 0.12s; border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.nav-link:hover { background: var(--bg); color: var(--text); }
|
||||
.nav-link.on { background: var(--accent-light); color: var(--accent); }
|
||||
|
||||
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
|
||||
.nav-link .cnt {
|
||||
margin-left: auto; font-size: 10px; font-weight: 600;
|
||||
padding: 0 6px; border-radius: 8px;
|
||||
background: var(--bg); color: var(--text-3);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.nav-link.on .cnt { background: var(--accent); color: #fff; }
|
||||
|
||||
.nav-foot {
|
||||
margin-top: auto; padding: 14px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-live {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-size: 11px; color: var(--text-3);
|
||||
}
|
||||
|
||||
.live-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 6px var(--green);
|
||||
animation: blink 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
|
||||
|
||||
.theme-btn {
|
||||
width: 28px; height: 28px; border-radius: 6px;
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; transition: all 0.15s;
|
||||
}
|
||||
|
||||
.theme-btn:hover { border-color: var(--border-hover); }
|
||||
|
||||
/* ===== MAIN ===== */
|
||||
.main { margin-left: 220px; flex: 1; min-height: 100vh; }
|
||||
|
||||
.top {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 28px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--nav);
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
}
|
||||
|
||||
.top h2 { font-size: 15px; font-weight: 700; }
|
||||
|
||||
.top-right { display: flex; align-items: center; gap: 10px; }
|
||||
|
||||
.top-btn {
|
||||
padding: 5px 10px; border-radius: var(--r);
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
color: var(--text-2); font-size: 12px; font-family: inherit;
|
||||
cursor: pointer; font-weight: 500; transition: all 0.12s;
|
||||
}
|
||||
|
||||
.top-btn:hover { border-color: var(--border-hover); color: var(--text); }
|
||||
|
||||
.top-clock {
|
||||
font-size: 12px; color: var(--text-3);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.pg { display: none; padding: 24px 28px; }
|
||||
.pg.on { display: block; }
|
||||
|
||||
/* ===== STATS ===== */
|
||||
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
|
||||
|
||||
.st {
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg); padding: 18px 20px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.st:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
|
||||
|
||||
.st-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
|
||||
.st-icon {
|
||||
width: 32px; height: 32px; border-radius: var(--r);
|
||||
display: flex; align-items: center; justify-content: center; font-size: 15px;
|
||||
}
|
||||
|
||||
.st-tag {
|
||||
font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
|
||||
}
|
||||
|
||||
.st-val { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
|
||||
.st-lbl { font-size: 12px; color: var(--text-3); margin-top: 3px; }
|
||||
|
||||
/* ===== TWO COL ===== */
|
||||
.cols { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
|
||||
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.sec-t { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); }
|
||||
.sec-a { font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 500; }
|
||||
.sec-a:hover { text-decoration: underline; }
|
||||
|
||||
/* ===== COMMITS ===== */
|
||||
.feed { display: flex; flex-direction: column; gap: 6px; }
|
||||
.feed-day { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .8px; padding: 10px 0 2px; }
|
||||
|
||||
.cm {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 10px 14px; background: var(--card);
|
||||
border: 1px solid var(--border); border-radius: var(--r);
|
||||
transition: all 0.12s; cursor: default;
|
||||
}
|
||||
|
||||
.cm:hover { border-color: var(--border-hover); background: var(--card-hover); }
|
||||
|
||||
.cm-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
margin-top: 5px; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cm-body { flex: 1; min-width: 0; }
|
||||
.cm-msg { font-size: 13px; font-weight: 500; line-height: 1.35; margin-bottom: 3px; word-break: break-word; }
|
||||
.cm-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-3); align-items: center; }
|
||||
.cm-repo { color: var(--accent); font-weight: 600; }
|
||||
.cm-sha { font-family: 'JetBrains Mono', monospace; }
|
||||
.cm-t { font-size: 12px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
|
||||
|
||||
/* ===== SIDE PANELS ===== */
|
||||
.side { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.box {
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg); padding: 16px 18px;
|
||||
}
|
||||
|
||||
.box-t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); margin-bottom: 12px; }
|
||||
|
||||
.sv { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
|
||||
.sv-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
|
||||
.sv-info { flex: 1; }
|
||||
.sv-name { font-size: 13px; font-weight: 500; }
|
||||
.sv-url { font-size: 10px; color: var(--text-3); }
|
||||
.sv-st { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px; }
|
||||
|
||||
.bar-wrap { margin-bottom: 8px; }
|
||||
.bar-head { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
|
||||
.bar-head span:first-child { font-weight: 500; color: var(--text-2); }
|
||||
.bar-head span:last-child { color: var(--text-3); }
|
||||
.bar-track { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
|
||||
.bar-fill { height: 100%; border-radius: 3px; }
|
||||
|
||||
.ct { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--border); }
|
||||
.ct:last-child { border-bottom: none; }
|
||||
.ct-n { font-weight: 500; }
|
||||
.ct-d { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 8px; }
|
||||
|
||||
/* ===== PROJECTS ===== */
|
||||
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
|
||||
|
||||
.pj {
|
||||
background: var(--card); border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg); padding: 22px;
|
||||
transition: all 0.15s; cursor: pointer;
|
||||
}
|
||||
|
||||
.pj:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
|
||||
|
||||
.pj-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.pj-name { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
|
||||
.pj-lang { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; }
|
||||
.pj-desc { font-size: 13px; color: var(--text-2); line-height: 1.45; margin-bottom: 14px; }
|
||||
|
||||
.pj-info { display: flex; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); }
|
||||
.pj-info b { color: var(--text-2); font-weight: 600; }
|
||||
|
||||
.pj-cms { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
|
||||
|
||||
.pj-cm {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 10px; background: var(--bg);
|
||||
border-radius: var(--r); font-size: 12px;
|
||||
}
|
||||
|
||||
.pj-cm-sha { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 11px; flex-shrink: 0; }
|
||||
.pj-cm-msg { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
|
||||
.pj-cm-t { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3); flex-shrink: 0; }
|
||||
|
||||
/* ===== ISSUES ===== */
|
||||
.iss-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
.iss {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 14px 18px; background: var(--card);
|
||||
border: 1px solid var(--border); border-radius: var(--r);
|
||||
transition: all 0.12s;
|
||||
}
|
||||
|
||||
.iss:hover { border-color: var(--border-hover); }
|
||||
|
||||
.iss-ico {
|
||||
width: 18px; height: 18px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; margin-top: 2px; font-size: 10px; font-weight: 700;
|
||||
}
|
||||
|
||||
.iss-body { flex: 1; }
|
||||
.iss-title { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
|
||||
.iss-meta { font-size: 11px; color: var(--text-3); display: flex; gap: 8px; }
|
||||
.iss-lbl { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px; flex-shrink: 0; }
|
||||
|
||||
.empty { text-align: center; padding: 36px; color: var(--text-3); font-size: 13px; }
|
||||
|
||||
@media (max-width: 1100px) { .cols { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2,1fr); } }
|
||||
@media (max-width: 700px) { .nav { display: none; } .main { margin-left: 0; } .pj-grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- AUTH -->
|
||||
<div id="authScreen">
|
||||
<div class="auth-bg"></div>
|
||||
<div class="auth-grid"></div>
|
||||
<div class="auth-particles" id="authParticles"></div>
|
||||
<div class="auth-box">
|
||||
<div class="auth-logo">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>
|
||||
</div>
|
||||
<div class="auth-title">24mycloud</div>
|
||||
<div class="auth-sub">Панель управления инфраструктурой</div>
|
||||
<div class="auth-field">
|
||||
<svg class="auth-input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||||
<input class="auth-input" id="authPass" type="password" placeholder="Введите пароль" autofocus
|
||||
onkeydown="if(event.key==='Enter')doAuth()">
|
||||
</div>
|
||||
<button class="auth-btn" onclick="doAuth()">
|
||||
<span class="auth-btn-shine"></span>
|
||||
Войти
|
||||
</button>
|
||||
<div class="auth-error" id="authErr"></div>
|
||||
<div class="auth-footer">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
||||
Защищённое соединение
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<div class="nav-head">
|
||||
<div class="nav-logo"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg></div>
|
||||
<div><div class="nav-name">mycloud</div><div class="nav-sub">панель управления</div></div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-label">Разделы</div>
|
||||
<div class="nav-links">
|
||||
<div class="nav-link on" data-p="overview">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||||
Обзор
|
||||
</div>
|
||||
<div class="nav-link" data-p="projects">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
||||
Проекты <span class="cnt" id="nRC">—</span>
|
||||
</div>
|
||||
<div class="nav-link" data-p="activity">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
Активность
|
||||
</div>
|
||||
<div class="nav-link" data-p="issues">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
Задачи <span class="cnt" id="nIC">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-label">Сервисы</div>
|
||||
<div class="nav-links" id="nSvc"></div>
|
||||
</div>
|
||||
<div class="nav-foot">
|
||||
<div class="nav-live"><div class="live-dot"></div> Все системы ОК</div>
|
||||
<button class="theme-btn" id="themeBtn" onclick="toggleTheme()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<div class="top">
|
||||
<h2 id="pgT">Обзор</h2>
|
||||
<div class="top-right">
|
||||
<button class="top-btn" onclick="loadData()">Обновить</button>
|
||||
<div class="top-clock" id="clk"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pg on" id="pg-overview">
|
||||
<div class="stats" id="stG"></div>
|
||||
<div class="cols">
|
||||
<div>
|
||||
<div class="sec-head">
|
||||
<div class="sec-t">Последние коммиты</div>
|
||||
<div class="sec-a" onclick="go('activity')">Все</div>
|
||||
</div>
|
||||
<div class="feed" id="oFeed"></div>
|
||||
</div>
|
||||
<div class="side">
|
||||
<div class="box"><div class="box-t">Сервисы</div><div id="sSvc"></div></div>
|
||||
<div class="box"><div class="box-t">Хранилище — RAID1</div><div id="sStor"></div></div>
|
||||
<div class="box"><div class="box-t">SSL сертификаты</div><div id="sCert"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pg" id="pg-projects"><div class="pj-grid" id="pjG"></div></div>
|
||||
<div class="pg" id="pg-activity"><div class="feed" id="aFeed"></div></div>
|
||||
<div class="pg" id="pg-issues"><div class="iss-list" id="iList"></div></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ===== CONFIG =====
|
||||
const C = {
|
||||
api: 'https://git.24mycloud.ru',
|
||||
token: '157fcfc85bba2e9f6ce01c0327ecf15d7d10ab56',
|
||||
pass: '5X4vTwEhhwUNT6ecmkgk9v2J',
|
||||
refresh: 30000,
|
||||
svcs: [
|
||||
{ n:'Gitea', u:'https://git.24mycloud.ru', c:'var(--green)' },
|
||||
{ n:'Immich', u:'https://photos.24mycloud.ru', c:'var(--blue)' },
|
||||
{ n:'NPM', u:'http://192.168.0.97:81', c:'var(--orange)', lan:1 },
|
||||
],
|
||||
certs: [
|
||||
{ d:'git.24mycloud.ru', e:'2026-07-19' },
|
||||
{ d:'photos.24mycloud.ru', e:'2026-07-19' },
|
||||
],
|
||||
stor: { used:280, total:7475 },
|
||||
};
|
||||
|
||||
// ===== MOCK =====
|
||||
const MOCK = [
|
||||
{ name:'CoffeeOs', full_name:'maksim/CoffeeOs', language:'TypeScript', private:true,
|
||||
description:'POS-система Coffee Like — точки, маржинальность, KPI, аналитика продаж',
|
||||
default_branch:'main',
|
||||
commits: [
|
||||
{sha:'5af055a92f',commit:{message:'chore: удалён устаревший GitHub Actions workflow',author:{name:'Maksim Grachev',date:ago(1)}}},
|
||||
{sha:'1d675f3864',commit:{message:'fix(ui): убрана рамка accent у карточки маржи KPI',author:{name:'Maksim Grachev',date:ago(1.5)}}},
|
||||
{sha:'be475a5acc',commit:{message:'feat(ui): улучшен дизайн KPI-карточек в блоке точной маржи',author:{name:'Maksim Grachev',date:ago(2)}}},
|
||||
{sha:'f52904f94a',commit:{message:'test: health endpoint — источник деплоя для webhook Gitea',author:{name:'Maksim Grachev',date:ago(2.5)}}},
|
||||
{sha:'da01c05214',commit:{message:'feat(ui): favicon заменён на лого Coffee Like',author:{name:'Maksim Grachev',date:ago(12)}}},
|
||||
{sha:'76851ab6ef',commit:{message:'docs: лог сессии + active-work + changelog оптимизации 20.04',author:{name:'Maksim Grachev',date:ago(13)}}},
|
||||
{sha:'3971d82df0',commit:{message:'feat(db): автообслуживание в ночной синхронизации + очистка индексов',author:{name:'Maksim Grachev',date:ago(14)}}},
|
||||
],
|
||||
issues: [
|
||||
{number:12,title:'KPI: фильтр по периоду (неделя/месяц/квартал)',state:'open',created_at:ago(24),user:{login:'maksim'},labels:[{name:'улучшение',color:'84b6eb'}]},
|
||||
{number:10,title:'Маржинальность неверно считается при скидке > 30%',state:'open',created_at:ago(48),user:{login:'maksim'},labels:[{name:'баг',color:'e11d48'}]},
|
||||
{number:8,title:'Интеграция с iiko: синхронизация меню и стоп-листа',state:'open',created_at:ago(72),user:{login:'maksim'},labels:[{name:'фича',color:'22c55e'}]},
|
||||
],
|
||||
},
|
||||
{ name:'Remington-CRM', full_name:'maksim/Remington-CRM', language:'Python', private:true,
|
||||
description:'CRM + модерация Ozon/WB — фильтры отзывов, стоп-слова, автоответы, кэш',
|
||||
default_branch:'main',
|
||||
commits: [
|
||||
{sha:'b0174270ab',commit:{message:'test: повторная проверка webhook автодеплоя',author:{name:'Vlad (Povelitel)',date:ago(0.5)}}},
|
||||
{sha:'732541cbfc',commit:{message:'test: webhook автодеплой через Gitea',author:{name:'Vlad (Povelitel)',date:ago(0.8)}}},
|
||||
{sha:'83c9a4a08f',commit:{message:'feat(ozon): стоп-слова + текстовый фильтр + exclude_words',author:{name:'Vlad (Povelitel)',date:ago(1.7)}}},
|
||||
{sha:'9f43d61599',commit:{message:'fix(ozon): date picker с пресетами, исправлен fmtDateShort',author:{name:'Vlad (Povelitel)',date:ago(10)}}},
|
||||
{sha:'33c763ed46',commit:{message:'fix(cache): сериализация Pydantic через model_dump перед кэшированием',author:{name:'Vlad (Povelitel)',date:ago(11)}}},
|
||||
{sha:'4887635dc4',commit:{message:'feat(ozon): рейтинг, диапазон дат, фильтр matched-only',author:{name:'Vlad (Povelitel)',date:ago(12)}}},
|
||||
],
|
||||
issues: [
|
||||
{number:5,title:'Ozon: экспорт отфильтрованных отзывов в Excel',state:'open',created_at:ago(12),user:{login:'maksim'},labels:[{name:'фича',color:'22c55e'}]},
|
||||
{number:3,title:'Инвалидация кэша при обновлении стоп-слов',state:'open',created_at:ago(48),user:{login:'maksim'},labels:[{name:'баг',color:'e11d48'}]},
|
||||
],
|
||||
},
|
||||
{ name:'BREVIO', full_name:'maksim/BREVIO', language:'TypeScript', private:true,
|
||||
description:'AI-платформа кратких резюме встреч — транскрипция, суммаризация, action items',
|
||||
default_branch:'main',
|
||||
commits: [
|
||||
{sha:'a1b2c3d4e5',commit:{message:'feat(ai): интеграция Whisper v3 для русской транскрипции',author:{name:'Maksim Grachev',date:ago(24)}}},
|
||||
{sha:'f6g7h8i9j0',commit:{message:'fix(auth): race condition при обновлении токена',author:{name:'Maksim Grachev',date:ago(36)}}},
|
||||
{sha:'k1l2m3n4o5',commit:{message:'refactor(api): генерация саммари вынесена в фоновую очередь',author:{name:'Maksim Grachev',date:ago(48)}}},
|
||||
],
|
||||
issues: [
|
||||
{number:22,title:'Качество саммари: контекст из предыдущих встреч',state:'open',created_at:ago(24),user:{login:'maksim'},labels:[{name:'улучшение',color:'84b6eb'}]},
|
||||
],
|
||||
},
|
||||
{ name:'NAS-Ugreen', full_name:'maksim/NAS-Ugreen', language:null, private:true,
|
||||
description:'Конфигурации NAS UGREEN — Docker, Gitea, Immich, NPM, rclone, домен',
|
||||
default_branch:'main',
|
||||
commits: [
|
||||
{sha:'p6q7r8s9t0',commit:{message:'docs: NPM + домен + обновлена сетевая схема',author:{name:'Maksim Grachev',date:ago(2)}}},
|
||||
{sha:'u1v2w3x4y5',commit:{message:'feat: docker-compose NPM + SSL конфиг',author:{name:'Maksim Grachev',date:ago(3)}}},
|
||||
],
|
||||
issues: [],
|
||||
},
|
||||
{ name:'Coffee-Like-Auto', full_name:'maksim/Coffee-Like-Auto', language:'Python', private:true,
|
||||
description:'Автоматизация Coffee Like — телеграм-боты, отчёты, интеграция 1С',
|
||||
default_branch:'main',
|
||||
commits: [
|
||||
{sha:'z1a2b3c4d5',commit:{message:'feat(bot): ежедневный отчёт продаж с разбивкой по точкам',author:{name:'Vlad (Povelitel)',date:ago(72)}}},
|
||||
{sha:'e6f7g8h9i0',commit:{message:'fix(1c): таймаут синхронизации большого каталога',author:{name:'Vlad (Povelitel)',date:ago(96)}}},
|
||||
],
|
||||
issues: [],
|
||||
},
|
||||
];
|
||||
|
||||
function ago(h) { return new Date(Date.now() - h*3600000).toISOString(); }
|
||||
|
||||
let D = { repos: [] };
|
||||
|
||||
// ===== PARTICLES =====
|
||||
(function(){
|
||||
const cont = document.getElementById('authParticles');
|
||||
for(let i=0;i<30;i++){
|
||||
const p = document.createElement('div');
|
||||
p.className = 'auth-particle';
|
||||
p.style.left = Math.random()*100+'%';
|
||||
p.style.animationDuration = (6+Math.random()*10)+'s';
|
||||
p.style.animationDelay = Math.random()*8+'s';
|
||||
p.style.width = p.style.height = (1+Math.random()*2)+'px';
|
||||
if(Math.random()>0.5) p.style.background = 'rgba(59,130,246,0.3)';
|
||||
cont.appendChild(p);
|
||||
}
|
||||
})();
|
||||
|
||||
// ===== AUTH =====
|
||||
function doAuth() {
|
||||
const v = document.getElementById('authPass').value;
|
||||
const err = document.getElementById('authErr');
|
||||
if (v === C.pass) {
|
||||
document.getElementById('authScreen').classList.add('hidden');
|
||||
sessionStorage.setItem('authed','1');
|
||||
loadData();
|
||||
} else {
|
||||
err.textContent = 'Неверный пароль';
|
||||
err.classList.remove('shake');
|
||||
void err.offsetWidth;
|
||||
err.classList.add('shake');
|
||||
document.getElementById('authPass').value = '';
|
||||
document.getElementById('authPass').focus();
|
||||
}
|
||||
}
|
||||
|
||||
if (sessionStorage.getItem('authed') === '1') {
|
||||
document.getElementById('authScreen').classList.add('hidden');
|
||||
loadData();
|
||||
}
|
||||
|
||||
// ===== THEME =====
|
||||
function toggleTheme() {
|
||||
const dark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
document.documentElement.setAttribute('data-theme', dark ? '' : 'dark');
|
||||
document.getElementById('themeBtn').innerHTML = dark ? '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>' : '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
|
||||
localStorage.setItem('theme', dark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
if (localStorage.getItem('theme') === 'dark') {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
document.getElementById('themeBtn').innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
|
||||
}
|
||||
|
||||
// ===== NAV =====
|
||||
document.querySelectorAll('.nav-link[data-p]').forEach(el => {
|
||||
el.addEventListener('click', () => go(el.dataset.p));
|
||||
});
|
||||
|
||||
function go(id) {
|
||||
document.querySelectorAll('.nav-link[data-p]').forEach(n => n.classList.remove('on'));
|
||||
document.querySelectorAll('.pg').forEach(p => p.classList.remove('on'));
|
||||
document.querySelector(`[data-p="${id}"]`)?.classList.add('on');
|
||||
document.getElementById(`pg-${id}`)?.classList.add('on');
|
||||
const t = {overview:'Обзор',projects:'Проекты',activity:'Активность',issues:'Задачи'};
|
||||
document.getElementById('pgT').textContent = t[id]||id;
|
||||
}
|
||||
|
||||
// ===== CLOCK =====
|
||||
setInterval(() => {
|
||||
document.getElementById('clk').textContent =
|
||||
new Date().toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
|
||||
}, 1000);
|
||||
|
||||
// ===== UTILS =====
|
||||
function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML;}
|
||||
function tAgo(d){const s=(Date.now()-new Date(d).getTime())/1000;if(s<60)return Math.floor(s)+'с';if(s<3600)return Math.floor(s/60)+'м';if(s<86400)return Math.floor(s/3600)+'ч';return Math.floor(s/86400)+'д';}
|
||||
function hm(d){return new Date(d).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'});}
|
||||
function isT(d){return new Date(d).toDateString()===new Date().toDateString();}
|
||||
function cType(m){const x=m.match(/^(\w+)[\(:]/);return x?x[1].toLowerCase():'other';}
|
||||
function dotC(t){return{feat:'var(--green)',fix:'var(--orange)',test:'var(--blue)',docs:'var(--purple)',chore:'var(--text-3)',refactor:'var(--accent)'}[t]||'var(--text-3)';}
|
||||
|
||||
// ===== API =====
|
||||
async function loadData() {
|
||||
try {
|
||||
const h = {Accept:'application/json'};
|
||||
if(C.token) h.Authorization = `token ${C.token}`;
|
||||
const r = await fetch(`${C.api}/api/v1/repos/search?limit=50`,{headers:h});
|
||||
if(!r.ok) throw new Error(r.status);
|
||||
const repos = (await r.json()).data || [];
|
||||
D.repos = await Promise.all(repos.map(async rp => {
|
||||
const [cm,is] = await Promise.all([
|
||||
fetch(`${C.api}/api/v1/repos/${rp.full_name}/commits?limit=15&sha=${rp.default_branch}`,{headers:h}).then(r=>r.json()).catch(()=>[]),
|
||||
fetch(`${C.api}/api/v1/repos/${rp.full_name}/issues?state=open&limit=50&type=issues`,{headers:h}).then(r=>r.json()).catch(()=>[]),
|
||||
]);
|
||||
return {...rp, commits:cm, issues:is};
|
||||
}));
|
||||
render();
|
||||
} catch(e) {
|
||||
D.repos = MOCK;
|
||||
render();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== RENDER =====
|
||||
function render() {
|
||||
rStats(); rFeed(); rProjects(); rActivity(); rIssues(); rSvcs(); rStor(); rCerts(); rNavSvc();
|
||||
document.getElementById('nRC').textContent = D.repos.length;
|
||||
const ti = D.repos.reduce((s,r)=>s+(r.issues?.length||0),0);
|
||||
document.getElementById('nIC').textContent = ti||'0';
|
||||
}
|
||||
|
||||
function rStats() {
|
||||
let tc=0,lp=null,lpN='',ar=0;
|
||||
D.repos.forEach(r=>{
|
||||
tc+=r.commits.filter(c=>isT(c.commit.author.date)).length;
|
||||
if(r.commits[0]){
|
||||
const t=new Date(r.commits[0].commit.author.date).getTime();
|
||||
if(!lp||t>lp){lp=t;lpN=r.name;}
|
||||
if(Date.now()-t<86400000)ar++;
|
||||
}
|
||||
});
|
||||
document.getElementById('stG').innerHTML = `
|
||||
<div class="st"><div class="st-top"><div class="st-icon" style="background:var(--accent-light);color:var(--accent)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></div></div><div class="st-val">${D.repos.length}</div><div class="st-lbl">Репозиториев</div></div>
|
||||
<div class="st"><div class="st-top"><div class="st-icon" style="background:var(--green-bg);color:var(--green)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>${tc?'<span class="st-tag" style="background:var(--green-bg);color:var(--green)">сегодня</span>':''}</div><div class="st-val">${tc}</div><div class="st-lbl">Коммитов сегодня</div></div>
|
||||
<div class="st"><div class="st-top"><div class="st-icon" style="background:var(--orange-bg);color:var(--orange)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div></div><div class="st-val">${lp?tAgo(new Date(lp).toISOString()):'—'}</div><div class="st-lbl">Последний push · ${lpN}</div></div>
|
||||
<div class="st"><div class="st-top"><div class="st-icon" style="background:var(--blue-bg);color:var(--blue)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg></div></div><div class="st-val">${ar}</div><div class="st-lbl">Активных (24ч)</div></div>`;
|
||||
}
|
||||
|
||||
function cmRow(c,rn,sr){
|
||||
const m=c.commit.message.split('\n')[0],t=cType(m);
|
||||
return `<div class="cm"><div class="cm-dot" style="background:${dotC(t)}"></div><div class="cm-body"><div class="cm-msg">${esc(m)}</div><div class="cm-meta">${sr?`<span class="cm-repo">${rn}</span>`:''} <span class="cm-sha">${c.sha.slice(0,7)}</span> <span>${c.commit.author.name}</span></div></div><div class="cm-t">${hm(c.commit.author.date)}</div></div>`;
|
||||
}
|
||||
|
||||
function rFeed(){
|
||||
const a=[];
|
||||
D.repos.forEach(r=>r.commits.slice(0,6).forEach(c=>a.push({rn:r.name,c})));
|
||||
a.sort((x,y)=>new Date(y.c.commit.author.date)-new Date(x.c.commit.author.date));
|
||||
document.getElementById('oFeed').innerHTML=a.slice(0,10).map(({rn,c})=>cmRow(c,rn,true)).join('');
|
||||
}
|
||||
|
||||
function rProjects(){
|
||||
const s=[...D.repos].sort((a,b)=>{
|
||||
const at=a.commits[0]?new Date(a.commits[0].commit.author.date):0;
|
||||
const bt=b.commits[0]?new Date(b.commits[0].commit.author.date):0;
|
||||
return bt-at;
|
||||
});
|
||||
const L={TypeScript:{bg:'var(--blue-bg)',c:'var(--blue)'},Python:{bg:'var(--green-bg)',c:'var(--green)'},JavaScript:{bg:'var(--orange-bg)',c:'var(--orange)'}};
|
||||
document.getElementById('pjG').innerHTML=s.map(r=>{
|
||||
const l=L[r.language]||{bg:'var(--bg)',c:'var(--text-3)'};
|
||||
const tc=r.commits.filter(c=>isT(c.commit.author.date)).length;
|
||||
const la=r.commits[0]?tAgo(r.commits[0].commit.author.date)+' назад':'нет активности';
|
||||
return `<div class="pj" onclick="window.open('${C.api}/${r.full_name}','_blank')">
|
||||
<div class="pj-top"><div class="pj-name">${esc(r.name)}</div><div class="pj-lang" style="background:${l.bg};color:${l.c}">${r.language||'docs'}</div></div>
|
||||
<div class="pj-desc">${esc(r.description||'Нет описания')}</div>
|
||||
<div class="pj-info"><span><b>${tc}</b> сегодня</span><span><b>${r.issues?.length||0}</b> задач</span><span style="margin-left:auto">${la}</span></div>
|
||||
<div class="pj-cms">${r.commits.slice(0,3).map(c=>`<div class="pj-cm"><span class="pj-cm-sha">${c.sha.slice(0,7)}</span><span class="pj-cm-msg">${esc(c.commit.message.split('\n')[0])}</span><span class="pj-cm-t">${hm(c.commit.author.date)}</span></div>`).join('')}</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function rActivity(){
|
||||
const a=[];
|
||||
D.repos.forEach(r=>r.commits.forEach(c=>a.push({rn:r.name,c})));
|
||||
a.sort((x,y)=>new Date(y.c.commit.author.date)-new Date(x.c.commit.author.date));
|
||||
let h='',ld='';
|
||||
a.slice(0,30).forEach(({rn,c})=>{
|
||||
const d=new Date(c.commit.author.date).toLocaleDateString('ru-RU',{weekday:'long',day:'numeric',month:'long'});
|
||||
if(d!==ld){h+=`<div class="feed-day">${d}</div>`;ld=d;}
|
||||
h+=cmRow(c,rn,true);
|
||||
});
|
||||
document.getElementById('aFeed').innerHTML=h||'<div class="empty">Нет активности</div>';
|
||||
}
|
||||
|
||||
function rIssues(){
|
||||
const a=[];
|
||||
D.repos.forEach(r=>(r.issues||[]).forEach(i=>a.push({rn:r.name,i})));
|
||||
a.sort((x,y)=>new Date(y.i.created_at)-new Date(x.i.created_at));
|
||||
if(!a.length){document.getElementById('iList').innerHTML='<div class="empty">Нет открытых задач</div>';return;}
|
||||
document.getElementById('iList').innerHTML=a.map(({rn,i})=>`
|
||||
<div class="iss">
|
||||
<div class="iss-ico" style="background:var(--green-bg);color:var(--green);border:1px solid color-mix(in srgb, var(--green) 20%, transparent)">!</div>
|
||||
<div class="iss-body"><div class="iss-title">${esc(i.title)}</div><div class="iss-meta"><span style="color:var(--accent);font-weight:600">${rn}</span><span>#${i.number}</span><span>${tAgo(i.created_at)} назад</span></div></div>
|
||||
${(i.labels||[]).map(l=>`<span class="iss-lbl" style="background:${l.color?'#'+l.color+'18':'var(--bg)'};color:${l.color?'#'+l.color:'var(--text-3)'}">${esc(l.name)}</span>`).join('')}
|
||||
</div>`).join('');
|
||||
}
|
||||
|
||||
function rSvcs(){
|
||||
document.getElementById('sSvc').innerHTML=C.svcs.map(s=>`<div class="sv"><div class="sv-dot" style="background:${s.c}"></div><div class="sv-info"><div class="sv-name">${s.n}</div><div class="sv-url">${s.u.replace(/https?:\/\//,'')}</div></div><span class="sv-st" style="background:var(--green-bg);color:var(--green)">${s.lan?'LAN':'онлайн'}</span></div>`).join('');
|
||||
}
|
||||
|
||||
function rNavSvc(){
|
||||
document.getElementById('nSvc').innerHTML=C.svcs.map(s=>`<div class="nav-link" onclick="window.open('${s.u}','_blank')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg>${s.n}</div>`).join('');
|
||||
}
|
||||
|
||||
function rStor(){
|
||||
const p=((C.stor.used/C.stor.total)*100).toFixed(1);
|
||||
document.getElementById('sStor').innerHTML=`<div class="bar-wrap"><div class="bar-head"><span>${C.stor.used} GiB занято</span><span>${(C.stor.total/1024).toFixed(1)} TiB · ${p}%</span></div><div class="bar-track"><div class="bar-fill" style="width:${p}%;background:linear-gradient(90deg,var(--accent),var(--blue))"></div></div></div>`;
|
||||
}
|
||||
|
||||
function rCerts(){
|
||||
const n=Date.now();
|
||||
document.getElementById('sCert').innerHTML=C.certs.map(c=>{
|
||||
const d=Math.floor((new Date(c.e)-n)/86400000);
|
||||
const s=d>30?'background:var(--green-bg);color:var(--green)':d>7?'background:var(--orange-bg);color:var(--orange)':'background:var(--red-bg);color:var(--red)';
|
||||
return `<div class="ct"><span class="ct-n">${c.d}</span><span class="ct-d" style="${s}">${d}д</span></div>`;
|
||||
}).join('');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user