<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIGHTING</title>
</head>
<body>
<canvas id="space"></canvas>
<!-- NORMAL NEON ARROW CURSOR -->
<div id="neonCursor">
<svg width="18" height="18" viewBox="0 0 18 18">
<path
d="M2 1 L2 14 L5.5 10.5 L8.5 16 L11 14.5 L8 9 L14 9 Z"
fill="#21002d"
stroke="#a000ff"
stroke-width="1.2"
stroke-linejoin="round"
/>
</svg>
</div>
<!-- HOME PAGE -->
<main id="homePage">
<div class="logo">LIGHTING</div>
<div class="search-box">
<input
id="searchInput"
type="text"
placeholder="Search the web..."
autocomplete="off"
>
<button id="searchButton">🔍</button>
</div>
</main>
<!-- RESULTS PAGE -->
<main id="resultsPage">
<div class="results-top">
<button id="homeButton">
⌂ Home
</button>
<div class="small-search">
<input
id="resultsSearchInput"
type="text"
placeholder="Search..."
autocomplete="off"
>
<button id="resultsSearchButton">
🔍
</button>
</div>
</div>
<!-- SEARCH TABS -->
<div class="tabs">
<button class="tab active" data-type="all">
All
</button>
<button class="tab" data-type="websites">
Websites
</button>
<button class="tab" data-type="images">
Images
</button>
<button class="tab" data-type="videos">
Videos
</button>
</div>
<!-- SEARCH RESULTS -->
<div id="results"></div>
</main>
<!-- WEBSITE VIEWER -->
<main id="viewerPage">
<div class="viewer-top">
<button id="viewerBack">
← Back
</button>
<div id="viewerTitle">
LIGHTING
</div>
<button id="openExternal">
Open Website
</button>
</div>
<iframe
id="websiteFrame"
title="Website Viewer"
sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
</main>
</body>
</html>