Skip to content

Commit fb513fa

Browse files
rmkr-devrmkr-dev
authored
Establish HTML layout for Architect Draw application
This file sets up the foundational HTML structure for the Architect Draw application, including necessary scripts, styles, and layout for diagram rendering.
1 parent aa511f6 commit fb513fa

1 file changed

Lines changed: 149 additions & 0 deletions

File tree

‎draw/index.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<script>fetch('https://api.countapi.xyz/hit/rmkr-dev.github.io/draw');</script>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Architect Draw | RMKR Dev</title>
9+
10+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFC300' d='M448 96c0-35.3-28.7-64-64-64H128C92.7 32 64 60.7 64 96v320c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V96zM128 80h256c8.8 0 16 7.2 16 16v24H112V96c0-8.8 7.2-16 16-16zm256 352H128c-8.8 0-16-7.2-16-16v-24h288v24c0 8.8-7.2 16-16 16z'/%3E%3C/svg%3E">
11+
<script src="https://cdn.tailwindcss.com"></script>
12+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
14+
15+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
16+
17+
<style>
18+
:root {
19+
--color-bg: #0C1524; --color-card: #18233C;
20+
--color-accent: #FFC300; --color-text: #F0F4F8;
21+
--color-muted: #A0AEC0; --color-line: #2D3748;
22+
}
23+
body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text); }
24+
.wrap { max-width: 1200px; margin: 0 auto; padding: 2rem; }
25+
26+
textarea {
27+
font-family: 'Fira Code', monospace;
28+
background: #080E1A !important;
29+
color: #4ade80 !important; /* Code Green */
30+
resize: none;
31+
outline: none;
32+
border: 1px solid var(--color-line);
33+
}
34+
35+
#diagram-output {
36+
background: rgba(255,255,255,0.02);
37+
border: 1px dashed var(--color-line);
38+
border-radius: 12px;
39+
min-height: 500px;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
overflow: auto;
44+
}
45+
46+
/* Customizing Mermaid SVG Colors */
47+
.mermaid svg { max-width: 100% !important; height: auto !important; }
48+
</style>
49+
</head>
50+
<body>
51+
52+
<div class="wrap">
53+
<header class="flex justify-between items-center mb-8 border-b border-[--color-line] pb-4">
54+
<div>
55+
<h1 class="text-2xl font-bold italic tracking-tighter">ARCHITECT<span class="text-[--color-accent] not-italic">DRAW</span></h1>
56+
<p class="text-xs text-[--color-muted] font-bold uppercase tracking-widest mt-1">Diagrams as Code</p>
57+
</div>
58+
<div class="flex gap-4">
59+
<button onclick="downloadSVG()" class="text-xs font-bold text-[--color-accent] hover:underline uppercase">Export SVG</button>
60+
<a href="../" class="text-sm font-bold text-[--color-accent] hover:underline"><i class="fa-solid fa-house mr-1"></i> HUB</a>
61+
</div>
62+
</header>
63+
64+
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 h-[75vh]">
65+
<div class="lg:col-span-4 flex flex-col gap-4">
66+
<div class="bg-[--color-card] p-4 rounded-xl border border-[--color-line] flex-grow flex flex-col">
67+
<label class="text-[10px] font-black text-[--color-muted] uppercase mb-2">Mermaid Script</label>
68+
<textarea id="editor" class="w-full flex-grow p-4 rounded-lg text-xs leading-relaxed" spellcheck="false">graph TD
69+
A[Client] -->|Request| B(API Gateway)
70+
B --> C{Authorizer}
71+
C -->|Allow| D[Service A]
72+
C -->|Deny| E[403 Forbidden]
73+
D --> F[(Database)]</textarea>
74+
<p class="text-[9px] text-gray-500 mt-3 uppercase font-mono italic">Live rendering enabled</p>
75+
</div>
76+
</div>
77+
78+
<div class="lg:col-span-8 bg-[--color-card] rounded-xl border border-[--color-line] p-6 flex flex-col overflow-hidden">
79+
<div class="flex justify-between items-center mb-4">
80+
<span class="text-[10px] font-black text-[--color-muted] uppercase">Live Preview</span>
81+
<div class="flex gap-2">
82+
<button onclick="updateDiagram('graph TD\n A-->B')" class="text-[9px] bg-[--color-line] px-2 py-1 rounded text-white">Flow</button>
83+
<button onclick="updateDiagram('sequenceDiagram\n Alice->>Bob: Hello')" class="text-[9px] bg-[--color-line] px-2 py-1 rounded text-white">Sequence</button>
84+
</div>
85+
</div>
86+
<div id="diagram-output" class="mermaid">
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<script>
93+
// Initialize Mermaid with Dark Theme
94+
mermaid.initialize({
95+
startOnLoad: false,
96+
theme: 'dark',
97+
themeVariables: {
98+
primaryColor: '#FFC300',
99+
primaryTextColor: '#0C1524',
100+
primaryBorderColor: '#FFC300',
101+
lineColor: '#A0AEC0',
102+
secondaryColor: '#18233C',
103+
tertiaryColor: '#0C1524'
104+
}
105+
});
106+
107+
const editor = document.getElementById('editor');
108+
const output = document.getElementById('diagram-output');
109+
110+
async function render() {
111+
const code = editor.value;
112+
try {
113+
output.innerHTML = ''; // Clear old
114+
const { svg } = await mermaid.render('mermaid-svg', code);
115+
output.innerHTML = svg;
116+
} catch (err) {
117+
// Silently wait for user to finish typing valid Mermaid syntax
118+
}
119+
}
120+
121+
function updateDiagram(template) {
122+
editor.value = template;
123+
render();
124+
}
125+
126+
function downloadSVG() {
127+
const svgData = document.getElementById('mermaid-svg').outerHTML;
128+
const svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
129+
const svgUrl = URL.createObjectURL(svgBlob);
130+
const downloadLink = document.createElement("a");
131+
downloadLink.href = svgUrl;
132+
downloadLink.download = "architecture-diagram.svg";
133+
document.body.appendChild(downloadLink);
134+
downloadLink.click();
135+
document.body.removeChild(downloadLink);
136+
}
137+
138+
// Debounced listener
139+
let timeout = null;
140+
editor.addEventListener('input', () => {
141+
clearTimeout(timeout);
142+
timeout = setTimeout(render, 500);
143+
});
144+
145+
// Initial load
146+
window.onload = render;
147+
</script>
148+
</body>
149+
</html>

0 commit comments

Comments
 (0)