Добавил поиск

html/css/style.css

@@ -136,6 +136,49 @@ p {
     box-shadow: 0 0 15px var(--accent-glow);
 }
 
+.search-form {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    max-width: 720px;
+    width: 100%;
+    margin-top: 30px;
+    justify-content: center;
+}
+
+.search-engine {
+    min-width: 140px;
+    padding: 12px 14px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--text-main);
+    font-size: 16px;
+}
+
+.search-engine:focus,
+.search-form input:focus,
+.search-btn:focus {
+    outline: 2px solid rgba(34, 197, 94, 0.6);
+    outline-offset: 2px;
+}
+
+.search-form input {
+    flex: 1;
+    min-width: 200px;
+    padding: 12px 16px;
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--text-main);
+    font-size: 16px;
+}
+
+.search-btn {
+    margin-top: 0;
+    padding: 12px 24px;
+}
+
 .btn:hover {
     transform: scale(1.05);
     box-shadow: 0 0 25px var(--accent-glow);

html/index.html

@@ -32,6 +32,16 @@
         <h1 id="title">We Build Worlds</h1>
         <p id="desc">AloeGames is a modern game development studio focused on creating immersive, next-generation
             experiences.</p>
+
+        <form class="search-form" onsubmit="searchQuery(event)">
+            <select id="searchEngine" class="search-engine" aria-label="Select search engine">
+                <option value="google">Google</option>
+                <option value="duckduckgo">DuckDuckGo</option>
+            </select>
+            <input id="searchInput" type="search" placeholder="Search the web..." aria-label="Search query">
+            <button class="btn search-btn" type="submit">Search</button>
+        </form>
+
         <!-- <button class="btn" id="button">Explore</button> -->
     </section>
 

html/js/app.js

@@ -43,6 +43,27 @@ function tryToggleTextContent(elementId, textContent) {
         el.textContent = textContent;
 }
 
+function searchQuery(event) {
+    event.preventDefault();
+
+    const engine = document.getElementById('searchEngine').value;
+    const query = document.getElementById('searchInput').value.trim();
+
+    if (!query) {
+        document.getElementById('searchInput').focus();
+        return;
+    }
+
+    const encodedQuery = encodeURIComponent(query);
+    let url = 'https://www.google.com/search?q=' + encodedQuery;
+
+    if (engine === 'duckduckgo') {
+        url = 'https://duckduckgo.com/?q=' + encodedQuery;
+    }
+
+    window.open(url, '_blank', 'noopener');
+}
+
 // Background animation
 const canvas = document.getElementById('bgCanvas');
 const ctx = canvas.getContext('2d');