147 lines
6.4 KiB
HTML
147 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Organic Search Hub - Nature-Inspired Discovery</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="search-hub" role="main">
|
|
<header class="search-hub__header">
|
|
<h1 class="search-hub__title">
|
|
<span class="title-prefix">Discover</span>
|
|
<span class="title-main">Nature's Answers</span>
|
|
</h1>
|
|
<p class="search-hub__subtitle">Let your search grow organically</p>
|
|
</header>
|
|
|
|
<section class="search-container" role="search">
|
|
<div class="search-input-wrapper">
|
|
<div class="search-input-group">
|
|
<input
|
|
type="search"
|
|
id="main-search"
|
|
class="search-input"
|
|
placeholder="Plant your search seed..."
|
|
aria-label="Search"
|
|
autocomplete="off"
|
|
>
|
|
<button class="search-button" aria-label="Search">
|
|
<svg class="search-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="filter-controls">
|
|
<button class="filter-toggle" aria-expanded="false" aria-controls="advanced-filters">
|
|
<span class="filter-icon"></span>
|
|
<span class="filter-text">Cultivate filters</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="advanced-filters" class="advanced-filters" aria-hidden="true">
|
|
<fieldset class="filter-group">
|
|
<legend>Growth Season</legend>
|
|
<label class="filter-option">
|
|
<input type="radio" name="timeframe" value="today">
|
|
<span class="filter-label">Today's Sprouts</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="radio" name="timeframe" value="week">
|
|
<span class="filter-label">This Week's Bloom</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="radio" name="timeframe" value="month">
|
|
<span class="filter-label">Monthly Harvest</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="radio" name="timeframe" value="all" checked>
|
|
<span class="filter-label">Perennial Collection</span>
|
|
</label>
|
|
</fieldset>
|
|
|
|
<fieldset class="filter-group">
|
|
<legend>Garden Types</legend>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="type" value="articles">
|
|
<span class="filter-label">Knowledge Seeds</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="type" value="images">
|
|
<span class="filter-label">Visual Blooms</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="type" value="videos">
|
|
<span class="filter-label">Motion Vines</span>
|
|
</label>
|
|
<label class="filter-option">
|
|
<input type="checkbox" name="type" value="audio">
|
|
<span class="filter-label">Sound Leaves</span>
|
|
</label>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="search-suggestions" role="listbox" aria-label="Search suggestions">
|
|
<!-- Dynamically populated suggestions -->
|
|
</div>
|
|
</section>
|
|
|
|
<section class="quick-actions" aria-label="Quick actions">
|
|
<h2 class="section-title">Quick Roots</h2>
|
|
<div class="action-grid">
|
|
<button class="action-button" data-action="trending">
|
|
<span class="action-icon action-icon--trending"></span>
|
|
<span class="action-label">Trending Growth</span>
|
|
</button>
|
|
<button class="action-button" data-action="seasonal">
|
|
<span class="action-icon action-icon--seasonal"></span>
|
|
<span class="action-label">Seasonal Picks</span>
|
|
</button>
|
|
<button class="action-button" data-action="evergreen">
|
|
<span class="action-icon action-icon--evergreen"></span>
|
|
<span class="action-label">Evergreen Wisdom</span>
|
|
</button>
|
|
<button class="action-button" data-action="wild">
|
|
<span class="action-icon action-icon--wild"></span>
|
|
<span class="action-label">Wild Discovery</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="search-ecosystem">
|
|
<div class="recent-searches">
|
|
<h3 class="ecosystem-title">
|
|
<span class="ecosystem-icon ecosystem-icon--recent"></span>
|
|
Recent Plantings
|
|
</h3>
|
|
<ul class="search-list" role="list">
|
|
<!-- Dynamically populated recent searches -->
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="popular-searches">
|
|
<h3 class="ecosystem-title">
|
|
<span class="ecosystem-icon ecosystem-icon--popular"></span>
|
|
Community Garden
|
|
</h3>
|
|
<ul class="search-list" role="list">
|
|
<!-- Dynamically populated popular searches -->
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="search-hub__footer">
|
|
<p class="growth-status">
|
|
<span class="status-indicator"></span>
|
|
<span class="status-text">Your search garden is thriving</span>
|
|
</p>
|
|
</footer>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |