[DESIGN] Hero UI playground

[nkuprins]

This discussion is a follow-up to #975 and focuses specifically on the suggested idea of adding a playground-like interactive code example in the hero UI.

The image below is an example of the current idea of this:

How to reply to this discussion?

1. If you agree AND have no suggestions, just put 👍🏻
2. If you agree AND have a suggestion, please put 👍🏻 and reply with your suggestion(attaching example image/video is encouraged).
   2.1 We also welcome the use of AI to assist in design.
   2.2 Make sure to use the brand colours of Apache Fesod(Incubating).
3. If you disagree with adding a playground, please say so and explain why.

[bengbengbalabalabeng]

👍

I created a responsive, interactive playground demo with AI (based on the idea above).

• code highlighting
• mobile-friendly layout
• updated slogan wording

---

Click to view 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>