Skip to content

Commit 99ff95f

Browse files
pepc84pepc84
committed
Add search bar
1 parent f2b7cb9 commit 99ff95f

1 file changed

Lines changed: 86 additions & 2 deletions

File tree

‎index.html‎

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>C++ Mode for Processing 4</title>
6+
<title>C++ Mode for Processing</title>
77
<style>
88
* { margin: 0; padding: 0; box-sizing: border-box; }
99
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #111; background: #fff; height: 100vh; overflow: hidden; }
@@ -18,9 +18,33 @@
1818
.nav-logo { display: flex; align-items: center; gap: 10px; }
1919
.nav-logo img { width: 28px; height: 28px; }
2020
.nav-logo span { font-size: 15px; font-weight: 500; }
21-
.nav-links { display: flex; gap: 2.5rem; }
21+
.nav-links { display: flex; align-items: center; gap: 2.5rem; }
2222
.nav-links a { font-size: 14px; color: #555; }
2323
.nav-links a:hover { color: #111; }
24+
.search-wrap { position: relative; }
25+
.search-wrap input {
26+
border: 1px solid #ddd; border-radius: 6px;
27+
padding: 6px 12px 6px 32px;
28+
font-size: 13px; outline: none; width: 180px;
29+
background: #f8f8f8; color: #111;
30+
transition: border-color 0.2s, width 0.2s;
31+
}
32+
.search-wrap input:focus { border-color: #aaa; width: 220px; background: #fff; }
33+
.search-wrap svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: #aaa; fill: none; pointer-events: none; }
34+
.search-results {
35+
position: absolute; top: calc(100% + 8px); right: 0;
36+
background: #fff; border: 1px solid #e0e0e0;
37+
border-radius: 8px; width: 280px;
38+
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
39+
display: none; z-index: 200;
40+
overflow: hidden;
41+
}
42+
.search-results.show { display: block; }
43+
.search-result-item { padding: 10px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
44+
.search-result-item:last-child { border-bottom: none; }
45+
.search-result-item:hover { background: #f8f8f8; }
46+
.search-result-item .tag { font-size: 11px; color: #aaa; margin-left: 6px; }
47+
.search-empty { padding: 12px 14px; font-size: 13px; color: #aaa; }
2448

2549
.main {
2650
height: calc(100vh - 60px);
@@ -56,6 +80,13 @@
5680
</div>
5781
<div class="nav-links">
5882
<a href="reference.html">Reference</a>
83+
<div class="search-wrap">
84+
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
85+
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
86+
</svg>
87+
<input type="text" id="search-input" placeholder="Search..." autocomplete="off">
88+
<div class="search-results" id="search-results"></div>
89+
</div>
5990
</div>
6091
</nav>
6192

@@ -73,5 +104,58 @@ <h1>C++ Mode for<br>Processing 4</h1>
73104
</div>
74105
</div>
75106

107+
<script>
108+
const data = [
109+
{ title: "Reference", desc: "API documentation", url: "reference.html", tag: "page" },
110+
{ title: "Examples", desc: "Sketch examples", url: "examples.html", tag: "page" },
111+
{ title: "About", desc: "About C++ Mode", url: "about.html", tag: "page" },
112+
{ title: "setup()", desc: "Called once at the start", url: "reference.html#setup", tag: "reference" },
113+
{ title: "draw()", desc: "Called every frame", url: "reference.html#draw", tag: "reference" },
114+
{ title: "size()", desc: "Set the canvas size", url: "reference.html#size", tag: "reference" },
115+
{ title: "background()", desc: "Clear the canvas with a color", url: "reference.html#background", tag: "reference" },
116+
{ title: "ellipse()", desc: "Draw an ellipse", url: "reference.html#ellipse", tag: "reference" },
117+
{ title: "rect()", desc: "Draw a rectangle", url: "reference.html#rect", tag: "reference" },
118+
{ title: "fill()", desc: "Set fill color", url: "reference.html#fill", tag: "reference" },
119+
{ title: "stroke()", desc: "Set stroke color", url: "reference.html#stroke", tag: "reference" },
120+
{ title: "noFill()", desc: "Disable fill", url: "reference.html#nofill", tag: "reference" },
121+
{ title: "noStroke()", desc: "Disable stroke", url: "reference.html#nostroke", tag: "reference" },
122+
{ title: "line()", desc: "Draw a line", url: "reference.html#line", tag: "reference" },
123+
{ title: "mouseX", desc: "Current mouse X position", url: "reference.html#mousex", tag: "reference" },
124+
{ title: "mouseY", desc: "Current mouse Y position", url: "reference.html#mousey", tag: "reference" },
125+
{ title: "mousePressed()", desc: "Called on mouse press", url: "reference.html#mousepressed", tag: "reference" },
126+
{ title: "keyPressed()", desc: "Called on key press", url: "reference.html#keypressed", tag: "reference" },
127+
{ title: "Bouncing ball", desc: "Basic animation with collision", url: "examples.html#bounce", tag: "example" },
128+
{ title: "Particle system", desc: "STL vectors with physics", url: "examples.html#particles", tag: "example" },
129+
{ title: "Perlin noise", desc: "Flow field using noise()", url: "examples.html#noise", tag: "example" },
130+
];
131+
132+
const input = document.getElementById("search-input");
133+
const results = document.getElementById("search-results");
134+
135+
input.addEventListener("input", function() {
136+
const q = this.value.trim().toLowerCase();
137+
results.innerHTML = "";
138+
if (!q) { results.classList.remove("show"); return; }
139+
const matches = data.filter(d =>
140+
d.title.toLowerCase().includes(q) || d.desc.toLowerCase().includes(q)
141+
).slice(0, 8);
142+
if (matches.length === 0) {
143+
results.innerHTML = '<div class="search-empty">No results</div>';
144+
} else {
145+
matches.forEach(m => {
146+
const div = document.createElement("div");
147+
div.className = "search-result-item";
148+
div.innerHTML = m.title + '<span class="tag">' + m.tag + '</span>';
149+
div.onclick = () => { window.location = m.url; };
150+
results.appendChild(div);
151+
});
152+
}
153+
results.classList.add("show");
154+
});
155+
156+
document.addEventListener("click", function(e) {
157+
if (!e.target.closest(".search-wrap")) results.classList.remove("show");
158+
});
159+
</script>
76160
</body>
77161
</html>

0 commit comments

Comments
 (0)