небольшое исправление

html/css/style.css

@@ -44,6 +44,12 @@ header {
     vertical-align: middle;
 }
 
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
 .lang-switch {
     cursor: pointer;
     padding: 8px 14px;
@@ -58,6 +64,27 @@ header {
     box-shadow: 0 0 10px var(--accent-glow);
 }
 
+.gitea-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 12px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    transition: 0.3s;
+}
+
+.gitea-link img {
+    height: 24px;
+    width: auto;
+    display: block;
+}
+
+.gitea-link:hover {
+    background: var(--card-hover);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
 section {
     padding: 120px 40px;
     max-width: 1100px;
@@ -109,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

@@ -14,19 +14,34 @@
     <canvas id="bgCanvas"></canvas>
 
     <header>
-        <div class="logo">
+        <div class="header-left">
-            <!-- <img src="images/logo.png" height="30"> -->
+            <div class="logo">
-            AloeGames
+                AloeGames
+            </div>
+
+            <a class="gitea-link" href="https://gitea.aloegames.com" rel="noopener">
+                <img src="https://about.gitea.com/gitea-text.svg" alt="Gitea logo">
+            </a>
         </div>
+
         <div class="lang-switch" onclick="toggleLang()">RU / EN</div>
     </header>
 
     <section class="hero">
-        <img src="images/logo.png" height="400">
+        <img src="images/logo.png" height="300">
         <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>
-        <!-- <button class="btn" id="button">Explore</button> -->
+
+        <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>
+                <option value="perplexity">Perplexity</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>
     </section>
 
     <section>

html/js/app.js

@@ -27,14 +27,43 @@ function toggleLang() {
     currentLang = currentLang === 'en' ? 'ru' : 'en';
     const t = translations[currentLang];
 
-    document.getElementById('title').textContent = t.title;
+    tryToggleTextContent('title', t.title);
-    document.getElementById('desc').textContent = t.desc;
+    tryToggleTextContent('desc', t.desc);
-    document.getElementById('button').textContent = t.button;
+    tryToggleTextContent('button', t.button);
-    document.getElementById('aboutTitle').textContent = t.aboutTitle;
+    tryToggleTextContent('aboutTitle', t.aboutTitle);
-    document.getElementById('aboutText').textContent = t.aboutText;
+    tryToggleTextContent('aboutText', t.aboutText);
-    document.getElementById('projectsTitle').textContent = t.projectsTitle;
+    tryToggleTextContent('projectsTitle', t.projectsTitle);
-    document.getElementById('contactTitle').textContent = t.contactTitle;
+    tryToggleTextContent('contactTitle', t.contactTitle);
-    document.getElementById('contactText').textContent = t.contactText;
+    tryToggleTextContent('contactText', t.contactText);
+}
+
+function tryToggleTextContent(elementId, textContent) {
+    let el = document.getElementById(elementId);
+    if (el != null)
+        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;
+    } else if (engine === 'perplexity') {
+        url = 'https://www.perplexity.ai/search?q=' + encodedQuery;
+    }
+
+    window.location.href = url;
 }
 
 // Background animation