58 lines
2.0 KiB
HTML
58 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fiddle - Browse</title>
|
|
<link rel="stylesheet" href="/css/browse.css">
|
|
</head>
|
|
<body>
|
|
<header class="browse-header">
|
|
<a href="/" class="logo">Fiddle</a>
|
|
<a href="/new" class="btn-new">+ New Fiddle</a>
|
|
</header>
|
|
|
|
<div class="browse-toolbar">
|
|
<input type="text" id="search-input" placeholder="Search fiddles..." spellcheck="false">
|
|
<select id="filter-framework">
|
|
<option value="">All Frameworks</option>
|
|
<option value="javascript">HTML/CSS/JS</option>
|
|
<option value="typescript">TypeScript</option>
|
|
<option value="react">React (JSX)</option>
|
|
<option value="react-ts">React + TS</option>
|
|
<option value="vue">Vue</option>
|
|
<option value="svelte">Svelte</option>
|
|
<option value="markdown">Markdown</option>
|
|
<option value="wasm">WASM</option>
|
|
</select>
|
|
<select id="filter-sort">
|
|
<option value="updated">Recently Updated</option>
|
|
<option value="created">Recently Created</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="browse-tabs">
|
|
<button class="browse-tab active" data-view="fiddles">Fiddles</button>
|
|
<button class="browse-tab" data-view="collections">Collections</button>
|
|
</div>
|
|
|
|
<div id="fiddles-view">
|
|
<div id="tags-bar" class="tags-bar"></div>
|
|
<main id="fiddle-grid" class="fiddle-grid"></main>
|
|
<div id="pagination" class="pagination"></div>
|
|
</div>
|
|
|
|
<div id="collections-view" style="display:none">
|
|
<div id="collections-grid" class="collections-grid"></div>
|
|
<div id="collection-detail" style="display:none">
|
|
<button id="collection-back" class="collection-back-btn">← Back to collections</button>
|
|
<div id="collection-header" class="collection-header"></div>
|
|
<div id="collection-desc" class="collection-desc"></div>
|
|
<div id="collection-fiddles" class="fiddle-grid" style="padding:0 24px 24px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/js/browse.js"></script>
|
|
</body>
|
|
</html>
|