feat: initial commit
This commit is contained in:
@@ -0,0 +1,284 @@
|
||||
<!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 TYPE: SUBTITLE ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: VIDEO ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: TEXT ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: FOLDER ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: URL ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_SHEET ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: IMAGE ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: XLSX ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_DOC ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: ARCHIVE ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_SHEET ACCESS: PUBLIC OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: AUDIO ACCESS: PUBLIC OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: FOLDER ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_APP ACCESS: PRIVATE OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_DOC ACCESS: DOMAIN OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_SHEET ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: IMAGE ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: IMAGE ACCESS: PUBLIC OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: VIDEO ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: ARCHIVE ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: YAML ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: FOLDER ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: FOLDER ACCESS: PUBLIC OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: G_SHEET ACCESS: PUBLIC OWNER: nikola.jovanovic@wolkabout.com 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 TYPE: OTHER ACCESS: SHARED_USERS OWNER: nikola.jovanovic@wolkabout.com 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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
root_path,file_category,access_scope,owner_email,item_count
|
||||
SharedWithMe,IMAGE,SHARED_USERS,nikola.jovanovic@wolkabout.com,460
|
||||
My Drive,SUBTITLE,PRIVATE,nikola.jovanovic@wolkabout.com,300
|
||||
My Drive,VIDEO,PRIVATE,nikola.jovanovic@wolkabout.com,300
|
||||
SharedWithMe,IMAGE,PUBLIC,nikola.jovanovic@wolkabout.com,276
|
||||
My Drive,TEXT,PRIVATE,nikola.jovanovic@wolkabout.com,37
|
||||
SharedWithMe,VIDEO,SHARED_USERS,nikola.jovanovic@wolkabout.com,30
|
||||
My Drive,FOLDER,PRIVATE,nikola.jovanovic@wolkabout.com,24
|
||||
My Drive,URL,PRIVATE,nikola.jovanovic@wolkabout.com,18
|
||||
SharedWithMe,ARCHIVE,SHARED_USERS,nikola.jovanovic@wolkabout.com,13
|
||||
SharedWithMe,YAML,SHARED_USERS,nikola.jovanovic@wolkabout.com,9
|
||||
My Drive,G_SHEET,PRIVATE,nikola.jovanovic@wolkabout.com,8
|
||||
My Drive,IMAGE,PRIVATE,nikola.jovanovic@wolkabout.com,5
|
||||
My Drive,XLSX,PRIVATE,nikola.jovanovic@wolkabout.com,5
|
||||
SharedWithMe,FOLDER,SHARED_USERS,nikola.jovanovic@wolkabout.com,5
|
||||
My Drive,G_DOC,PRIVATE,nikola.jovanovic@wolkabout.com,3
|
||||
My Drive,ARCHIVE,PRIVATE,nikola.jovanovic@wolkabout.com,2
|
||||
My Drive,G_SHEET,PUBLIC,nikola.jovanovic@wolkabout.com,2
|
||||
My Drive,AUDIO,PUBLIC,nikola.jovanovic@wolkabout.com,1
|
||||
My Drive,FOLDER,SHARED_USERS,nikola.jovanovic@wolkabout.com,1
|
||||
My Drive,G_APP,PRIVATE,nikola.jovanovic@wolkabout.com,1
|
||||
My Drive,G_DOC,DOMAIN,nikola.jovanovic@wolkabout.com,1
|
||||
My Drive,G_SHEET,SHARED_USERS,nikola.jovanovic@wolkabout.com,1
|
||||
My Drive,PDF,SHARED_USERS,nikola.jovanovic@wolkabout.com,1
|
||||
SharedWithMe,FOLDER,PUBLIC,nikola.jovanovic@wolkabout.com,1
|
||||
SharedWithMe,G_SHEET,PUBLIC,nikola.jovanovic@wolkabout.com,1
|
||||
SharedWithMe,OTHER,SHARED_USERS,nikola.jovanovic@wolkabout.com,1
|
||||
|
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user