GitHub user bengbengbalabalabeng added a comment to the discussion: [DESIGN]
Hero UI playground
👍
I created a responsive, interactive playground demo with AI (based on the idea
above).
- code highlighting
- mobile-friendly layout
- updated slogan wording
<table>
<tr>
<td><img width="797" height="410" alt="image"
src="https://github.com/user-attachments/assets/95762361-aa92-4b6e-99b6-ae08d7dc3912";
/></td>
<td><img width="486" height="676" alt="image"
src="https://github.com/user-attachments/assets/cca1acbe-2e70-4853-bd3d-680705d6f68d";
/></td>
</tr>
</table>
---
<details>
<summary>Click to view HTML</summary>
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fesod Playground UI</title>
<style>
:root {
--bg-green: #083b23;
--card-bg: #030d08;
--border-dark: #12281c;
--highlight-code: rgba(46, 160, 67, 0.22);
--highlight-col: #d3ebd6;
--highlight-header: #0f6937;
--excel-border: #e1e4e8;
--excel-header-bg: #f6f8fa;
--excel-text: #24292f;
--code-comment: #7d8590;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-green);
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 48px 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.playground-wrapper {
background-color: var(--card-bg);
width: 100%;
max-width: 860px;
border-radius: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
overflow: hidden;
min-height: 310px;
}
.code-container {
width: 100%;
min-width: 0;
color: #fff;
display: flex;
flex-direction: column;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
}
.code-content {
padding: 14px 0;
font-size: 11.8px;
line-height: 1.48;
color: #e6edf3;
white-space: pre;
flex: 1;
overflow-x: auto;
}
.code-line {
padding: 0 16px;
}
.field-group {
padding: 1px 16px 1px 13px;
margin: 1px 0;
cursor: pointer;
border-left: 3px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease;
}
.field-group:hover {
background: rgba(255, 255, 255, 0.04);
}
.field-group.active {
background: var(--highlight-code);
border-left-color: #2ea043;
}
.kwd { color: #ff7b72; }
.cls { color: #ffa657; }
.ann { color: #7ee787; }
.str { color: #a5d6ff; }
.typ { color: #79c0ff; }
.cmm { color: var(--code-comment); }
.mtd { color: #d2a8ff; }
.code-action-block {
margin-top: 6px;
padding-top: 6px;
border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.sheet-preview-card {
background-color: #ffffff;
margin: 10px;
border-radius: 9px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
min-width: 0;
}
.sheet-tab-header {
font-size: 11px;
padding: 7px 12px;
color: #57606a;
background: #ffffff;
border-bottom: 1px solid var(--excel-border);
user-select: none;
flex-shrink: 0;
}
.excel-table-wrapper {
flex: 1;
display: flex;
background: #ffffff;
overflow-x: auto;
}
.excel-table {
width: 100%;
height: 100%;
border-collapse: collapse;
font-size: 11.5px;
color: var(--excel-text);
table-layout: fixed;
}
.excel-table th, .excel-table td {
border: 1px solid var(--excel-border);
padding: 4px 8px;
text-align: left;
}
.excel-table .idx-col {
width: 28px;
text-align: center;
background-color: var(--excel-header-bg);
color: #656d76;
font-size: 10.5px;
}
.excel-table thead th {
background-color: var(--excel-header-bg);
text-align: center;
font-weight: 500;
color: #57606a;
height: 24px;
}
.excel-table .header-cell {
background-color: #B8B8B8;
font-weight: 700;
color: #24292f;
text-align: center;
}
.excel-table td.num {
text-align: right;
}
.excel-table th.col-active {
background-color: var(--highlight-header) !important;
color: #ffffff !important;
}
.excel-table td.col-active {
background-color: var(--highlight-col) !important;
border-bottom-color: #fff;
}
.excel-footer {
display: flex;
align-items: center;
padding: 6px 12px;
background: #f6f8fa;
border-top: 1px solid var(--excel-border);
font-size: 11px;
color: #1a7f37;
font-weight: 600;
gap: 5px;
flex-shrink: 0;
}
.sheet-marker {
width: 7px;
height: 7px;
background: #1a7f37;
border-radius: 1px;
}
.brand-slogan {
margin-top: 22px;
color: #e6edf3;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.6px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
text-transform: capitalize;
gap: 8px;
}
.brand-slogan .slogan-word {
color: #ffffff;
}
.brand-slogan .slogan-dot {
color: #3fb950;
font-weight: 700;
}
@media (max-width: 768px) {
body {
padding: 14px;
}
.playground-wrapper {
grid-template-columns: 1fr;
min-height: auto;
}
.code-container {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sheet-preview-card {
margin: 12px;
min-height: 250px;
}
}
</style>
</head>
<body>
<div class="playground-wrapper">
<div class="code-container">
<div class="code-content"><div class="code-line"><span class="cmm">/**
Define a Java model for spreadsheet. */</span></div><div
class="code-line"><span class="kwd">class</span> <span
class="cls">DemoData</span> {</div><div class="field-group"
data-target-col="0"> <span class="ann">@ExcelProperty</span>(<span
class="str">"Name"</span>)
<span class="kwd">private</span> <span class="typ">String</span>
name;</div><div class="field-group active" data-target-col="1"> <span
class="ann">@ExcelProperty</span>(<span class="str">"Date"</span>)
<span class="kwd">private</span> <span class="typ">Date</span>
date;</div><div class="field-group" data-target-col="2"> <span
class="ann">@ExcelProperty</span>(<span class="str">"Amount"</span>)
<span class="kwd">private</span> <span class="typ">Double</span>
amount;</div><div class="field-group" data-target-col="ignore"> <span
class="ann">@ExcelIgnore</span>
<span class="kwd">private</span> <span class="typ">String</span>
note;</div><div class="code-line">}</div><div class="code-action-block"><div
class="code-line"><span class="cmm">// Writing</span></div><div
class="code-line"><span class="cls">FesodSheet</span>.<span
class="mtd">write</span>(<span class="str">"demo.xlsx"</span>, <span
class="cls">DemoData</span>.<span class="kwd">class</span>)</div><div
class="code-line"> .<span class="mtd">sheet</span>(<span
class="str">"Template"</span>)</div><div class="code-line"> .<span
class="mtd">doWrite</span>(data);</div></div></div>
</div>
<div class="sheet-preview-card">
<div class="sheet-tab-header">demo.xlsx</div>
<div class="excel-table-wrapper">
<table class="excel-table" id="excelTable">
<thead>
<tr>
<th class="idx-col"></th>
<th data-col="0">A</th>
<th data-col="1" class="col-active">B</th>
<th data-col="2">C</th>
</tr>
</thead>
<tbody>
<tr>
<td class="idx-col">1</td>
<td class="header-cell" data-col="0">Name</td>
<td class="header-cell col-active" data-col="1">Date</td>
<td class="header-cell" data-col="2">Amount</td>
</tr>
<tr>
<td class="idx-col">2</td>
<td data-col="0">Ada</td>
<td class="col-active" data-col="1">2026-07-28</td>
<td class="num" data-col="2">0.56</td>
</tr>
<tr>
<td class="idx-col">3</td>
<td data-col="0">Lin</td>
<td class="col-active" data-col="1">2026-07-28</td>
<td class="num" data-col="2">1.20</td>
</tr>
<tr>
<td class="idx-col">4</td>
<td data-col="0">Sun</td>
<td class="col-active" data-col="1">2026-07-29</td>
<td class="num" data-col="2">4.80</td>
</tr>
<tr>
<td class="idx-col">5</td>
<td data-col="0">Rui</td>
<td class="col-active" data-col="1">2026-07-30</td>
<td class="num" data-col="2">2.35</td>
</tr>
<tr>
<td class="idx-col">6</td>
<td data-col="0"></td>
<td class="col-active" data-col="1"></td>
<td data-col="2"></td>
</tr>
<tr>
<td class="idx-col">7</td>
<td data-col="0"></td>
<td class="col-active" data-col="1"></td>
<td data-col="2"></td>
</tr>
<tr>
<td class="idx-col">8</td>
<td data-col="0"></td>
<td class="col-active" data-col="1"></td>
<td data-col="2"></td>
</tr>
</tbody>
</table>
</div>
<div class="excel-footer">
<span class="sheet-marker"></span>
<span>Template</span>
</div>
</div>
</div>
<p class="brand-slogan">
<span class="slogan-word">structured</span><span class="slogan-dot">.</span>
<span class="slogan-word">swift</span><span class="slogan-dot">.</span>
<span class="slogan-word">simple</span><span class="slogan-dot">.</span>
</p>
<script>
const fieldGroups = document.querySelectorAll('.field-group');
const tableCells = document.querySelectorAll('#excelTable [data-col]');
fieldGroups.forEach(group => {
group.addEventListener('click', () => {
const targetCol = group.getAttribute('data-target-col');
fieldGroups.forEach(f => f.classList.remove('active'));
group.classList.add('active');
if (targetCol === 'ignore') {
tableCells.forEach(cell => cell.classList.remove('col-active'));
} else {
tableCells.forEach(cell => {
if (cell.getAttribute('data-col') === targetCol) {
cell.classList.add('col-active');
} else {
cell.classList.remove('col-active');
}
});
}
});
});
</script>
</body>
</html>
```
</details>
GitHub link:
https://github.com/apache/fesod/discussions/1058#discussioncomment-18368879
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: [email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
