team-0-hackathon / ui /static /index.html
Jikkii's picture
UI + backend
86e603b
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ragstudio</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
<div class="app">
<aside class="sidebar">
<div class="brand">
<span class="brand-mark"></span>
<span class="brand-name">ragstudio</span>
</div>
<nav class="nav">
<div class="nav-section">Workspace</div>
<a class="nav-item active" href="#"><span class="dot"></span>Search</a>
<a class="nav-item" href="#"><span class="dot"></span>Library</a>
<a class="nav-item" href="#"><span class="dot"></span>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="me">
<div class="me-avatar">L</div>
<div class="me-meta">
<div class="me-name">Lysandre</div>
<div class="me-role">local index</div>
</div>
</div>
</div>
</aside>
<main class="main">
<header class="top">
<form id="search-form" class="search">
<span class="search-icon"></span>
<input
id="q"
name="q"
type="text"
placeholder="Search across your files…"
autocomplete="off"
spellcheck="false"
/>
<button type="submit" class="btn-primary">Search</button>
</form>
<div class="filters">
<span class="filters-label">Modalities</span>
<div id="modalities" class="pills"></div>
</div>
</header>
<section class="status" id="status">
<div class="status-card">
<div class="status-num" id="status-total"></div>
<div class="status-label">Total results</div>
</div>
<div class="status-card">
<div class="status-num" id="status-mods"></div>
<div class="status-label">Modalities queried</div>
</div>
<div class="status-card">
<div class="status-num" id="status-time"></div>
<div class="status-label">Latency</div>
</div>
<div class="status-card status-card-hint">
<div class="status-hint">
Type a query and pick which modalities to search.
</div>
</div>
</section>
<section id="board" class="board"></section>
</main>
</div>
<script src="/static/app.js"></script>
</body>
</html>