chuan
70d6712d00
- Introduced a new CSS file for styling the theme preview. - Updated build script to copy template files to the output directory. - Created a new script for serving the preview of the theme. - Enhanced theme verification to check for required template overrides. - Added README documentation for template overrides. - Implemented footer and navbar template overrides to customize Gitea's UI.
345 lines
13 KiB
HTML
345 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Banana Modern Theme Preview</title>
|
||
<link id="theme-css" rel="stylesheet" href="/assets/css/theme-banana-modern-light.css">
|
||
<link rel="stylesheet" href="/preview/styles.css">
|
||
</head>
|
||
<body>
|
||
<nav id="navbar" aria-label="Navigation">
|
||
<div class="navbar-left">
|
||
<a class="item brand" href="#">
|
||
<span class="logo-mark">B</span>
|
||
<span>Banana Modern</span>
|
||
</a>
|
||
<a class="item active" href="#">Explore</a>
|
||
<a class="item" href="#">Issues</a>
|
||
<a class="item" href="#">Pull Requests</a>
|
||
</div>
|
||
<div class="navbar-right">
|
||
<button class="ui button small">Sign in</button>
|
||
<button class="ui primary button small">Register</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="page">
|
||
<section class="hero">
|
||
<div>
|
||
<p class="eyebrow">Theme Control Room</p>
|
||
<h1>Gitea UI preview without opening Gitea pages.</h1>
|
||
<p class="muted">Use this page to judge color tokens, controls, borders, lists, forms, repo surfaces, and code blocks quickly.</p>
|
||
</div>
|
||
<div class="theme-switcher">
|
||
<label for="theme-select">Theme</label>
|
||
<select id="theme-select" class="ui dropdown">
|
||
<option value="theme-banana-modern-light.css">banana Modern Light</option>
|
||
<option value="theme-banana-modern-dark.css">banana Modern Dark</option>
|
||
<option value="theme-banana-modern-auto.css">banana Modern Auto</option>
|
||
</select>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="ui segment panel">
|
||
<h2>Buttons</h2>
|
||
<div class="button-row">
|
||
<button class="ui button">Default</button>
|
||
<button class="ui primary button">Primary</button>
|
||
<button class="ui green button">Success</button>
|
||
<button class="ui red button">Danger</button>
|
||
<button class="ui basic button">Basic</button>
|
||
<button class="ui disabled button">Disabled</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Labels</h2>
|
||
<div class="button-row">
|
||
<span class="ui label">default</span>
|
||
<span class="ui primary label">primary</span>
|
||
<span class="ui green label">open</span>
|
||
<span class="ui red label">closed</span>
|
||
<span class="ui yellow label">warning</span>
|
||
<span class="ui basic label">basic</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Button Groups</h2>
|
||
<div class="button-row">
|
||
<div class="ui buttons">
|
||
<button class="ui button">Preview</button>
|
||
<button class="ui button active">Write</button>
|
||
<button class="ui button">History</button>
|
||
</div>
|
||
<button class="ui icon button" aria-label="Settings">⚙</button>
|
||
<button class="ui icon button" aria-label="More">⋯</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Dropdown Menus</h2>
|
||
<div class="menu-card">
|
||
<button class="ui button">Branch: main ▾</button>
|
||
<div class="menu-list">
|
||
<a class="item active">main <span class="muted">default</span></a>
|
||
<a class="item">develop</a>
|
||
<a class="item">release/1.26</a>
|
||
<div class="divider"></div>
|
||
<a class="item">Create branch</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Form</h2>
|
||
<form class="ui form">
|
||
<label>Repository name</label>
|
||
<input type="text" value="banana-modern">
|
||
<label>Description</label>
|
||
<textarea rows="4">A GitHub-inspired Gitea theme with warmer banana accents.</textarea>
|
||
<div class="checkbox-row">
|
||
<input id="private" type="checkbox" checked>
|
||
<label for="private">Private repository</label>
|
||
</div>
|
||
<button class="ui primary button" type="button">Create repository</button>
|
||
</form>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Inputs</h2>
|
||
<form class="ui form">
|
||
<label>Search</label>
|
||
<div class="input-with-action">
|
||
<input type="search" value="is:open label:theme">
|
||
<button class="ui button" type="button">Search</button>
|
||
</div>
|
||
<label>Token</label>
|
||
<input type="password" value="banana-modern-secret">
|
||
<label>Range</label>
|
||
<input type="range" min="0" max="100" value="62">
|
||
</form>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Messages</h2>
|
||
<div class="ui message info">Information message with neutral context.</div>
|
||
<div class="ui message positive">Success message for completed actions.</div>
|
||
<div class="ui message warning">Warning message for risky changes.</div>
|
||
<div class="ui message negative">Error message for failed operations.</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Avatars</h2>
|
||
<div class="avatar-row">
|
||
<span class="avatar avatar-a">C</span>
|
||
<span class="avatar avatar-b">GH</span>
|
||
<span class="avatar avatar-c">UI</span>
|
||
<div>
|
||
<strong>chuan</strong>
|
||
<p class="muted">Maintainer · last active now</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="repo-card">
|
||
<div class="repo-header">
|
||
<div>
|
||
<div class="repo-title"><span class="repo-icon">◇</span> octo / banana-modern</div>
|
||
<p class="muted">A compact repository page surface for judging navigation, cards, and file rows.</p>
|
||
</div>
|
||
<div class="button-row">
|
||
<button class="ui basic button">Watch</button>
|
||
<button class="ui basic button">Star</button>
|
||
<button class="ui primary button">Fork</button>
|
||
</div>
|
||
</div>
|
||
<div class="repo-tabs">
|
||
<a class="active">Code</a>
|
||
<a>Issues <span class="ui small label">12</span></a>
|
||
<a>Pull Requests <span class="ui small label">3</span></a>
|
||
<a>Actions</a>
|
||
<a>Settings</a>
|
||
</div>
|
||
<div class="file-list">
|
||
<div class="file-row"><span>📁</span><strong>src</strong><span class="muted">theme token generation</span></div>
|
||
<div class="file-row"><span>📁</span><strong>styles</strong><span class="muted">component overrides</span></div>
|
||
<div class="file-row"><span>📄</span><strong>README.md</strong><span class="muted">preview and usage docs</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="ui segment panel">
|
||
<h2>Issue List</h2>
|
||
<div class="issue-row">
|
||
<span class="state open">●</span>
|
||
<div><strong>Navbar help link should be hidden before login</strong><p class="muted">#42 opened 2 hours ago by chuan</p></div>
|
||
</div>
|
||
<div class="issue-row">
|
||
<span class="state closed">●</span>
|
||
<div><strong>Footer should not render on public pages</strong><p class="muted">#37 merged yesterday</p></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Code</h2>
|
||
<pre class="code"><code>gitea-theme-meta-info {
|
||
--theme-display-name: "banana Modern Light";
|
||
}
|
||
|
||
:root {
|
||
--color-primary: #f3cb00;
|
||
}</code></pre>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="grid three">
|
||
<article class="ui segment panel">
|
||
<h2>Stats</h2>
|
||
<div class="stats-grid">
|
||
<div><strong>128</strong><span class="muted">Commits</span></div>
|
||
<div><strong>14</strong><span class="muted">Branches</span></div>
|
||
<div><strong>9</strong><span class="muted">Tags</span></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Progress</h2>
|
||
<div class="progress"><span style="width: 72%"></span></div>
|
||
<p class="muted">72% migration coverage</p>
|
||
<div class="skeleton"></div>
|
||
<div class="skeleton short"></div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Pagination</h2>
|
||
<div class="pagination">
|
||
<a>‹</a>
|
||
<a class="active">1</a>
|
||
<a>2</a>
|
||
<a>3</a>
|
||
<a>…</a>
|
||
<a>9</a>
|
||
<a>›</a>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="ui segment panel">
|
||
<h2>Table</h2>
|
||
<table class="preview-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Status</th>
|
||
<th>Updated</th>
|
||
<th>Size</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>theme-banana-modern-light.css</strong></td>
|
||
<td><span class="ui green label">ready</span></td>
|
||
<td>2 minutes ago</td>
|
||
<td>88 KB</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>theme-banana-modern-dark.css</strong></td>
|
||
<td><span class="ui yellow label">review</span></td>
|
||
<td>9 minutes ago</td>
|
||
<td>91 KB</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>templates/base/head_navbar.tmpl</strong></td>
|
||
<td><span class="ui primary label">override</span></td>
|
||
<td>now</td>
|
||
<td>7 KB</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Timeline</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item"><span class="dot open"></span><div><strong>Opened issue</strong><p class="muted">Asked to hide public help link.</p></div></div>
|
||
<div class="timeline-item"><span class="dot"></span><div><strong>Pushed commit</strong><p class="muted">Added template override.</p></div></div>
|
||
<div class="timeline-item"><span class="dot closed"></span><div><strong>Verified preview</strong><p class="muted">Rendered without footer.</p></div></div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="ui segment panel">
|
||
<h2>Diff</h2>
|
||
<div class="diff-box">
|
||
<div class="diff-line context"><span>12</span><code>{{template "custom/extra_links" .}}</code></div>
|
||
<div class="diff-line remove"><span>13</span><code>- {{if not .IsSigned}} help link {{end}}</code></div>
|
||
<div class="diff-line add"><span>13</span><code>+ {{/* public help link removed by theme override */}}</code></div>
|
||
<div class="diff-line context"><span>14</span><code></div></code></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Markdown</h2>
|
||
<div class="markdown-body">
|
||
<h3>Theme notes</h3>
|
||
<p>This preview should catch contrast and spacing problems before opening Gitea.</p>
|
||
<blockquote>Template overrides are copied by <code>bun run build</code>.</blockquote>
|
||
<ul>
|
||
<li>Buttons and labels</li>
|
||
<li>Repo pages and lists</li>
|
||
<li>Diffs and markdown</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
<section class="grid">
|
||
<article class="ui segment panel">
|
||
<h2>Modal</h2>
|
||
<div class="modal-preview">
|
||
<div class="modal-box">
|
||
<div class="modal-header">Delete branch?</div>
|
||
<p class="muted">This action cannot be undone. The branch will be removed from the repository.</p>
|
||
<div class="button-row">
|
||
<button class="ui red button">Delete</button>
|
||
<button class="ui button">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="ui segment panel">
|
||
<h2>Toast / Tooltip</h2>
|
||
<div class="toast-stack">
|
||
<div class="toast positive">Theme build completed.</div>
|
||
<div class="toast warning">Template changes require restart.</div>
|
||
<div class="tooltip-demo">Hover target <span class="tooltip">Tooltip text</span></div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
const themeSelect = document.querySelector("#theme-select");
|
||
const themeCss = document.querySelector("#theme-css");
|
||
const savedTheme = localStorage.getItem("banana-preview-theme");
|
||
|
||
if (savedTheme) {
|
||
themeSelect.value = savedTheme;
|
||
themeCss.href = `/assets/css/${savedTheme}`;
|
||
}
|
||
|
||
themeSelect.addEventListener("change", () => {
|
||
localStorage.setItem("banana-preview-theme", themeSelect.value);
|
||
themeCss.href = `/assets/css/${themeSelect.value}`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|