index.html (90 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ALZ Architecture Definition Editor</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>ALZ Architecture Definition Editor</h1>
<a href="https://github.com/Azure/alzarchitectureeditor" class="github-link" title="View on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
<p class="header-description">
We do not record any data. All data handling, validation and debugging is done on the client side.
You can download this page and run it locally. See the GitHub repository for more information.
</p>
<div class="file-controls">
<button id="new-architecture">New</button>
<button id="load-alz">Load ALZ</button>
<button id="upload-file">Upload JSON</button>
<input type="file" id="file-input" accept=".json" style="display: none;">
<button id="download-file" disabled>Download JSON</button>
</div>
</header>
<main>
<div class="architecture-name-container">
<div class="form-group">
<label for="architecture-name">Architecture Name:</label>
<input type="text" id="architecture-name" placeholder="Enter architecture name">
</div>
</div>
<div class="container">
<div class="panel" id="tree-view">
<h2>Management Groups</h2>
<div id="management-groups-tree"></div>
<button id="add-mg-btn">Add Management Group</button>
</div>
<div class="panel" id="edit-panel">
<h2>Edit Management Group</h2>
<div id="no-selection">Select a management group to edit</div>
<div id="edit-form" style="display: none;">
<div class="form-group">
<label for="mg-id">ID:</label>
<input type="text" id="mg-id">
</div>
<div class="form-group">
<label for="mg-display-name">Display Name:</label>
<input type="text" id="mg-display-name">
</div>
<div class="form-group">
<label for="mg-parent-id">Parent ID:</label>
<select id="mg-parent-id">
<option value="null">None (Root)</option>
</select>
</div>
<div class="form-group">
<label for="mg-archetypes">Archetypes:</label>
<div class="archetypes-container">
<div id="archetypes-tags" class="archetypes-tags"></div>
<div class="archetype-input-wrapper">
<input type="text" id="mg-archetypes-input" placeholder="Type and press Enter to add">
<button type="button" id="add-archetype-btn" class="small-btn">Add</button>
</div>
</div>
</div>
<div class="form-group">
<label for="mg-exists">Exists:</label>
<input type="checkbox" id="mg-exists">
</div>
<div class="form-actions">
<!-- Save button removed - changes apply automatically -->
<button id="delete-mg-btn" class="danger">Delete Group</button>
</div>
</div>
</div>
</div>
<!-- New JSON Preview Section -->
<div class="json-preview-container">
<h2>JSON Preview</h2>
<div class="json-preview">
<pre id="json-content"><code>No data loaded yet.</code></pre>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>