dzoni/gdrive-visual-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6d1b20c4b003f980a1f24fdfc35091cd5b1a4ea0
gdrive-visual-app/data/ca4822e938/diagram.html
T
nikola 6d1b20c4b0 feat: initial commit
2026-05-19 14:53:39 +02:00

285 lines
17 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>GDrive Diagram</title>
<style>
:root {
--bg: #eef2f6;
--ink: #0f172a;
--card-text: #ffffff;
--top: #111827;
--path: #facc15;
--path-text: #1f2937;
--line: #e11d48;
--soft-line: #cbd5e1;
--card-w: 270px;
--card-h: 116px;
--radius: 10px;
--font: "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
.toolbar { position: sticky; top: 0; z-index: 5; background: #ffffffeb; backdrop-filter: blur(6px); border-bottom: 1px solid #dbe2ea; padding: 10px 12px; display: flex; gap: 8px; align-items: center; }
.btn { border: 1px solid #cdd7e2; background: #fff; color: #111827; border-radius: 8px; height: 34px; min-width: 34px; font-weight: 700; cursor: pointer; }
.hint { color: #475569; font-size: 12px; margin-left: 8px; }
#viewport { width: 100%; height: 810px; overflow: auto; background: linear-gradient(145deg,#edf2f7,#f8fafc); }
#canvas { min-width: 1400px; min-height: 1000px; transform-origin: top left; padding: 36px 24px 40px; }
.top-wrap { display: flex; justify-content: center; margin-bottom: 36px; position: relative; }
.top-card { width: var(--card-w); height: var(--card-h); border-radius: var(--radius); background: var(--top); color: var(--card-text); border: 1px solid #0b1220; padding: 10px 12px; font-size: 13px; box-shadow: 0 5px 18px rgba(17,24,39,.18); }
.line { line-height: 1.22; margin: 2px 0; font-size: 13px; }
.roots-row {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
gap: 32px;
align-items: start;
position: relative;
}
.roots-row::before {
content: "";
position: absolute;
top: -20px;
left: 5%;
right: 5%;
border-top: 3px solid var(--line);
}
.root-col { position: relative; padding-top: 18px; }
.root-connector {
position: absolute;
top: -20px;
left: 50%;
height: 18px;
border-left: 3px solid var(--line);
transform: translateX(-1px);
}
.root-card { width: var(--card-w); height: var(--card-h); margin: 0 auto 14px; border-radius: var(--radius); background: var(--path); color: var(--path-text); border: 1px solid #eab308; padding: 10px 12px; font-size: 13px; box-shadow: 0 4px 14px rgba(234,179,8,.24); }
.root-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards-stack { width: var(--card-w); margin: 0 auto; position: relative; padding-left: 14px; }
.cards-stack::before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
border-left: 2px solid var(--soft-line);
}
.detail-card { width: var(--card-w); height: var(--card-h); border-radius: var(--radius); margin: 10px 0; background: var(--card-color); color: var(--card-text); border: 1px solid rgba(15,23,42,.32); padding: 10px 12px; box-shadow: 0 4px 14px rgba(2,6,23,.14); position: relative; font-size: 13px; }
.detail-card::before {
content: "";
position: absolute;
left: -14px;
top: calc(50% - 1px);
width: 14px;
border-top: 2px solid var(--soft-line);
}
@media (max-width: 900px) {
#viewport { height: 70vh; }
#canvas { min-width: 980px; }
}
</style>
</head>
<body>
<div class="toolbar">
<button class="btn" onclick="zoomIn()">+</button>
<button class="btn" onclick="zoomOut()">-</button>
<button class="btn" onclick="resetZoom()">Reset</button>
<span class="hint">Zoom/pan: scroll to move, Ctrl+scroll to zoom</span>
</div>
<div id="viewport">
<div id="canvas">
<div class="top-wrap">
<div class="top-card">
<div class="line"><b>GOOGLE DRIVE INVENTORY</b></div>
<div class="line"><b>TOTAL ITEMS</b> 1506</div>
<div class="line"><b>GROUPS</b> 2</div>
<div class="line"><b>VIEW MODE</b> Org-chart cards</div>
</div>
</div>
<div class="roots-row"><section class="root-col">
<div class="root-connector"></div>
<div class="root-card">
<div class="line"><b>PATH GROUP</b></div>
<div class="line root-name">My Drive</div>
<div class="line"><b>ITEMS</b> 709</div>
</div>
<div class="cards-stack"><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: SUBTITLE&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 300">
<div class="line"><b>TYPE</b> SUBTITLE</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 300</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: VIDEO&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 300">
<div class="line"><b>TYPE</b> VIDEO</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 300</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: TEXT&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 37">
<div class="line"><b>TYPE</b> TEXT</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 37</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: FOLDER&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 24">
<div class="line"><b>TYPE</b> FOLDER</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 24</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: URL&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 18">
<div class="line"><b>TYPE</b> URL</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 18</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: G_SHEET&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 8">
<div class="line"><b>TYPE</b> G_SHEET</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 8</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: IMAGE&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 5">
<div class="line"><b>TYPE</b> IMAGE</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 5</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: XLSX&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 5">
<div class="line"><b>TYPE</b> XLSX</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 5</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: G_DOC&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 3">
<div class="line"><b>TYPE</b> G_DOC</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 3</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: ARCHIVE&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 2">
<div class="line"><b>TYPE</b> ARCHIVE</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 2</div>
</div><div class="detail-card" style="--card-color:#dc2626" title="PATH: My Drive&#10;TYPE: G_SHEET&#10;ACCESS: PUBLIC&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 2">
<div class="line"><b>TYPE</b> G_SHEET</div>
<div class="line"><b>ACCESS</b> PUBLIC</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 2</div>
</div><div class="detail-card" style="--card-color:#dc2626" title="PATH: My Drive&#10;TYPE: AUDIO&#10;ACCESS: PUBLIC&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> AUDIO</div>
<div class="line"><b>ACCESS</b> PUBLIC</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: My Drive&#10;TYPE: FOLDER&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> FOLDER</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div><div class="detail-card" style="--card-color:#6b7280" title="PATH: My Drive&#10;TYPE: G_APP&#10;ACCESS: PRIVATE&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> G_APP</div>
<div class="line"><b>ACCESS</b> PRIVATE</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div><div class="detail-card" style="--card-color:#ea580c" title="PATH: My Drive&#10;TYPE: G_DOC&#10;ACCESS: DOMAIN&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> G_DOC</div>
<div class="line"><b>ACCESS</b> DOMAIN</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: My Drive&#10;TYPE: G_SHEET&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> G_SHEET</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div></div>
</section><section class="root-col">
<div class="root-connector"></div>
<div class="root-card">
<div class="line"><b>PATH GROUP</b></div>
<div class="line root-name">SharedWithMe</div>
<div class="line"><b>ITEMS</b> 796</div>
</div>
<div class="cards-stack"><div class="detail-card" style="--card-color:#d97706" title="PATH: SharedWithMe&#10;TYPE: IMAGE&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 460">
<div class="line"><b>TYPE</b> IMAGE</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 460</div>
</div><div class="detail-card" style="--card-color:#dc2626" title="PATH: SharedWithMe&#10;TYPE: IMAGE&#10;ACCESS: PUBLIC&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 276">
<div class="line"><b>TYPE</b> IMAGE</div>
<div class="line"><b>ACCESS</b> PUBLIC</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 276</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: SharedWithMe&#10;TYPE: VIDEO&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 30">
<div class="line"><b>TYPE</b> VIDEO</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 30</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: SharedWithMe&#10;TYPE: ARCHIVE&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 13">
<div class="line"><b>TYPE</b> ARCHIVE</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 13</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: SharedWithMe&#10;TYPE: YAML&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 9">
<div class="line"><b>TYPE</b> YAML</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 9</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: SharedWithMe&#10;TYPE: FOLDER&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 5">
<div class="line"><b>TYPE</b> FOLDER</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 5</div>
</div><div class="detail-card" style="--card-color:#dc2626" title="PATH: SharedWithMe&#10;TYPE: FOLDER&#10;ACCESS: PUBLIC&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> FOLDER</div>
<div class="line"><b>ACCESS</b> PUBLIC</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div><div class="detail-card" style="--card-color:#dc2626" title="PATH: SharedWithMe&#10;TYPE: G_SHEET&#10;ACCESS: PUBLIC&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> G_SHEET</div>
<div class="line"><b>ACCESS</b> PUBLIC</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div><div class="detail-card" style="--card-color:#d97706" title="PATH: SharedWithMe&#10;TYPE: OTHER&#10;ACCESS: SHARED_USERS&#10;OWNER: nikola.jovanovic@wolkabout.com&#10;COUNT: 1">
<div class="line"><b>TYPE</b> OTHER</div>
<div class="line"><b>ACCESS</b> SHARED_USERS</div>
<div class="line"><b>OWNER</b> nikola.jovanovic@wolkabout.com</div>
<div class="line"><b>COUNT</b> 1</div>
</div></div>
</section></div>
</div>
</div>
<script>
let scale = 1;
const canvas = document.getElementById('canvas');
const viewport = document.getElementById('viewport');
function applyScale() {
canvas.style.transform = `scale(${scale})`;
}
function zoomIn() {
scale = Math.min(2.4, +(scale + 0.1).toFixed(2));
applyScale();
}
function zoomOut() {
scale = Math.max(0.45, +(scale - 0.1).toFixed(2));
applyScale();
}
function resetZoom() {
scale = 1;
applyScale();
viewport.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}
viewport.addEventListener('wheel', (e) => {
if (!e.ctrlKey) return;
e.preventDefault();
if (e.deltaY < 0) zoomIn(); else zoomOut();
}, { passive: false });
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink