Skip to content

Commit 6f9983e

Browse files
brown9804brown9804
authored
matching UI
1 parent 5c3866e commit 6f9983e

1 file changed

Lines changed: 41 additions & 30 deletions

File tree

‎tool/web-app/index.html‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,6 @@ <h2 id="form-title">Select Your Database Preferences</h2>
103103
<option value="AI/ML">AI/ML Workloads</option>
104104
</select>
105105

106-
<label for="backup-recovery">Backup and Disaster Recovery:
107-
<span class="info-icon" tabindex="0" data-tooltip="Indicate if you need automated backup and recovery options. For example, disaster recovery is essential for mission-critical systems.">ℹ️</span>
108-
</label>
109-
<select id="backup-recovery" name="backup-recovery">
110-
<option value="yes">Yes</option>
111-
<option value="no">No</option>
112-
</select>
113-
114106
<button type="submit">Get Recommendation</button>
115107
<button type="reset" id="reset-form">Reset Form</button>
116108
</form>
@@ -120,9 +112,47 @@ <h2 id="form-title">Select Your Database Preferences</h2>
120112
<h3>Live Summary</h3>
121113
<ul id="summary-list"></ul>
122114
</div>
123-
<!-- Advanced Settings Note -->
124-
<div id="advanced-settings-note" style="color:#c62828; margin-bottom:1em; display:none;">
125-
<strong>Note:</strong> If the Advanced Settings button is not working, see <a href="https://learn.microsoft.com/en-us/azure/azure-sql/database/advanced-configuration" target="_blank" rel="noopener">Advanced Configuration for Azure Databases</a>.
115+
<div id="advanced-settings" class="summary-card" style="margin-bottom:1em;">
116+
<h4>Advanced Settings</h4>
117+
<div class="advanced-setting">
118+
<label for="query-complexity">Query Complexity
119+
<span class="info-icon" tabindex="0" data-tooltip="Select the complexity level of the queries you will perform. For example, simple queries are used for CRUD operations, while complex queries are needed for AI/ML workloads.">ℹ️</span>
120+
</label>
121+
<select id="query-complexity" name="query-complexity">
122+
<option value="simple">Simple (CRUD, Key-Value)</option>
123+
<option value="moderate">Moderate (Joins, Aggregations)</option>
124+
<option value="complex">Complex (AI/ML, Graph, Analytics)</option>
125+
</select>
126+
</div>
127+
<div class="advanced-setting">
128+
<label for="data-retention">Data Retention Policy
129+
<span class="info-icon" tabindex="0" data-tooltip="Specify how long you need to retain your data. For example, short-term retention is suitable for temporary logs, while long-term retention is needed for compliance data.">ℹ️</span>
130+
</label>
131+
<select id="data-retention" name="data-retention">
132+
<option value="short-term">Short-term (logs, cache)</option>
133+
<option value="medium-term">Medium-term (months, analytics)</option>
134+
<option value="long-term">Long-term (compliance, archive)</option>
135+
</select>
136+
</div>
137+
<div class="advanced-setting">
138+
<label for="backup-recovery">Backup and Disaster Recovery
139+
<span class="info-icon" tabindex="0" data-tooltip="Enable automated backups and geo-redundant disaster recovery for mission-critical workloads.">ℹ️</span>
140+
</label>
141+
<select id="backup-recovery" name="backup-recovery">
142+
<option value="yes">Yes</option>
143+
<option value="no">No</option>
144+
</select>
145+
</div>
146+
<div class="advanced-setting">
147+
<label for="security">Security
148+
<span class="info-icon" tabindex="0" data-tooltip="Configure encryption, role-based access control, and compliance settings.">ℹ️</span>
149+
</label>
150+
<select id="security" name="security">
151+
<option value="encryption">Encryption</option>
152+
<option value="rbac">Role-based Access Control</option>
153+
<option value="compliance">Compliance</option>
154+
</select>
155+
</div>
126156
</div>
127157
<div id="recommendation-panel">
128158
<div id="loading-spinner" style="display:none;">Loading...</div>
@@ -139,25 +169,6 @@ <h4>Compare Options</h4>
139169
<!-- Table will be generated dynamically -->
140170
</div>
141171
<button id="export-btn" style="display:none;">Export/Share</button>
142-
<div id="feedback-section">
143-
<label for="feedback">Was this recommendation helpful?</label>
144-
<select id="feedback" name="feedback">
145-
<option value="">-- Select --</option>
146-
<option value="yes">Yes</option>
147-
<option value="no">No</option>
148-
</select>
149-
</div>
150-
</div>
151-
<div id="advanced-settings" class="summary-card" style="margin-bottom:1em;">
152-
<h4>Advanced Settings</h4>
153-
<p>Advanced settings allow you to further customize your database solution for specific workloads or compliance requirements. Examples include:</p>
154-
<ul>
155-
<li><strong>Query Complexity:</strong> Choose between simple (CRUD), moderate (joins, aggregations), or complex (AI/ML, graph, analytics) queries.</li>
156-
<li><strong>Data Retention Policy:</strong> Specify how long your data should be retained (short-term, medium-term, long-term) for compliance or cost optimization.</li>
157-
<li><strong>Backup and Disaster Recovery:</strong> Enable automated backups and geo-redundant disaster recovery for mission-critical workloads.</li>
158-
<li><strong>Security:</strong> Configure encryption, role-based access control, and compliance settings.</li>
159-
</ul>
160-
<p>Use these options to fine-tune your recommendation for your business or technical scenario.</p>
161172
</div>
162173
</section>
163174
</main>

0 commit comments

Comments
 (0)