Add matrix url

README.md

@@ -1,14 +1,23 @@
-# AloeGames site
-
-Clearnet:
-+ https://aloegames.com/
-+ https://www.aloegames.com/
-+ https://aloegames.chickenkiller.com/
-+ https://sub.aloegames.chickenkiller.com/
-
-Yggdrasil:
-+ http://ygg.aloegames.com/
-+ http://[201:147:a17f:a04c:b90a:fb29:342:781c]:1616
-
-i2p:
-+ http://ao7r5hzwjb2ynqc5ovy3gelsk24lz7r7yeg6rqjkzc4sqtb3ysia.b32.i2p
+# AloeGames site
+
+## Clearnet
+
++ https://aloegames.com/
++ https://aloegames.chickenkiller.com/
+
+## Yggdrasil
+
++ http://ygg.aloegames.com/
++ http://[200:cd4a:102b:b6b8:cc34:5812:1133:8a21]
+
+## I2P
+
++ http://aloe.i2p/
++ http://aloegames.i2p/
++ Base32:
+  + http://ao7r5hzwjb2ynqc5ovy3gelsk24lz7r7yeg6rqjkzc4sqtb3ysia.b32.i2p
+
+## Tor
+
++ http://aloegamewcp5ivt5myay3bgy3mx65kjnutfauxditrjtbvrrn2woamqd.onion
++ http://aloe67x3qhmvnmcapbq7jdvezmzrh62ekoinuxtsstnxwqhwy7qa3zqd.onion

html/.well-known/matrix/client

@@ -0,0 +1,5 @@
+{
+  "m.homeserver": {
+    "base_url": "https://matrix.aloegames.com"
+  }
+}

html/.well-known/matrix/server

@@ -0,0 +1,3 @@
+{
+  "m.server": "matrix.aloegames.com:443"
+}

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,28 @@ header {
     box-shadow: 0 0 10px var(--accent-glow);
 }
 
+.header-button {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    border-radius: 12px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    transition: 0.3s;
+    margin-right: 14px;
+}
+
+.header-button img {
+    height: 24px;
+    width: auto;
+    display: block;
+}
+
+.header-button:hover {
+    background: var(--card-hover);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
 section {
     padding: 120px 40px;
     max-width: 1100px;
@@ -95,6 +123,19 @@ p {
     line-height: 1.6;
 }
 
+.contact-link {
+    color: var(--accent);
+    text-decoration: none;
+    border-bottom: 1px solid rgba(34, 197, 94, 0.4);
+    transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.contact-link:hover,
+.contact-link:focus {
+    color: #a7f3d0;
+    border-color: rgba(167, 243, 208, 0.8);
+}
+
 .btn {
     margin-top: 30px;
     padding: 14px 28px;
@@ -109,6 +150,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);
@@ -148,6 +232,64 @@ p {
     box-shadow: 0 0 20px var(--accent-glow);
 }
 
+.mirror-links {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+    gap: 18px;
+    margin-top: 24px;
+}
+
+.mirror-card {
+    display: block;
+    padding: 18px 20px;
+    border-radius: 18px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+
+.mirror-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    margin-bottom: 12px;
+    border-radius: 12px;
+    background: rgba(34, 197, 94, 0.12);
+    color: var(--accent);
+    font-size: 18px;
+}
+
+.mirror-card:hover .mirror-icon,
+.mirror-card:focus-visible .mirror-icon {
+    background: rgba(34, 197, 94, 0.24);
+}
+
+.mirror-card:hover,
+.mirror-card:focus-visible {
+    transform: translateY(-2px);
+    background: var(--card-hover);
+    box-shadow: 0 0 24px var(--accent-glow);
+    border-color: rgba(34, 197, 94, 0.35);
+}
+
+.mirror-title {
+    display: block;
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--accent);
+    margin-bottom: 6px;
+}
+
+.mirror-url {
+    display: block;
+    font-size: 14px;
+    color: var(--text-muted);
+    word-break: break-all;
+}
+
 footer {
     text-align: center;
     padding: 40px;

html/index.html

@@ -14,19 +14,33 @@
     <canvas id="bgCanvas"></canvas>
 
     <header>
-        <div class="logo">
-            <!-- <img src="images/logo.png" height="30"> -->
-            AloeGames
+        <div class="header-left">
+            <div class="logo">
+                AloeGames
+            </div>
+
+            <!-- <a class="header-button" href="https://t.me/AloeGames" rel="noopener" target="_blank">
+                <img src="https://telegram.org/img/t_logo.svg" alt="Telegram">
+            </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> -->
+        <p id="desc">AloeGames is a modern, cool company that creates exciting next-generation gaming experiences (actually, we do everything but games).</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>
+                <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>
@@ -42,13 +56,44 @@
     <div class="card"><h3>Project Two</h3><p>Multiplayer world with deep progression systems.</p></div>
     <div class="card"><h3>Project Three</h3><p>Story-driven adventure with emotional narrative.</p></div>
   </div>
-</section>
-
-<section>
-  <h2 id="contactTitle">Contact</h2>
-  <p id="contactText">Get in touch with us for partnerships, collaborations, or just to say hello.</p>
 </section>-->
 
+    <section>
+        <h2 id="mirrorsTitle">Mirrors</h2>
+        <p id="mirrorsText">We support a free internet and provide mirrors in censorship-resistant networks:</p>
+        <div class="mirror-links">
+            <a class="mirror-card" href="http://ygg.aloegames.com/" target="_blank" rel="noopener">
+                <span class="mirror-icon">🌿</span>
+                <span class="mirror-title">Yggdrasil</span>
+                <span class="mirror-url">ygg.aloegames.com</span>
+                <span class="mirror-url">http://[200:cd4a:102b:b6b8:cc34:5812:1133:8a21]</span>
+            </a>
+            <a class="mirror-card" href="http://aloegames.i2p" target="_blank" rel="noopener">
+                <span class="mirror-icon">🔐</span>
+                <span class="mirror-title">I2P</span>
+                <span class="mirror-url">aloe.i2p</span>
+                <span class="mirror-url">aloegames.i2p</span>
+                <span class="mirror-url">ao7r5hzwjb2ynqc5ovy3gelsk24lz7r7yeg6rqjkzc4sqtb3ysia.b32.i2p</span>
+            </a>
+            <a class="mirror-card" href="http://aloegamewcp5ivt5myay3bgy3mx65kjnutfauxditrjtbvrrn2woamqd.onion" target="_blank" rel="noopener">
+                <span class="mirror-icon">🧅</span>
+                <span class="mirror-title">Tor</span>
+                <span class="mirror-url">aloegamewcp5ivt5myay3bgy3mx65kjnutfauxditrjtbvrrn2woamqd.onion</span>
+            </a>
+            <a class="mirror-card" href="https://aloegames.com/" target="_blank" rel="noopener">
+                <span class="mirror-icon">🌐</span>
+                <span class="mirror-title">Clearnet</span>
+                <span class="mirror-url">aloegames.com</span>
+            </a>
+        </div>
+    </section>
+
+    <section>
+        <h2 id="contactTitle">Contact</h2>
+        <p id="contactText">Get in touch with us for partnerships, collaborations, or just to say hello.</p>
+        <p>Telegram: <a class="contact-link" href="https://t.me/AloeGames" rel="noopener" target="_blank">@AloeGames</a></p>
+    </section>
+
     <footer>
         © 2026 AloeGames. All rights reserved.
     </footer>

html/js/app.js

@@ -3,21 +3,25 @@ let currentLang = 'en';
 const translations = {
     en: {
         title: 'We Build Worlds',
-        desc: 'AloeGames is a modern game development studio focused on creating immersive, next-generation experiences.',
+        desc: 'AloeGames is a modern, cool company that creates exciting next-generation gaming experiences (actually, we do everything but games).',
         button: 'Explore',
         aboutTitle: 'About Us',
         aboutText: 'We are a team of passionate developers, designers, and dreamers. Our mission is to push the boundaries of interactive entertainment and deliver unforgettable gaming experiences.',
         projectsTitle: 'Our Projects',
+        mirrorsTitle: 'Mirrors',
+        mirrorsText: 'We support a free internet and provide mirrors in censorship-resistant networks:',
         contactTitle: 'Contact',
         contactText: 'Get in touch with us for partnerships, collaborations, or just to say hello.'
     },
     ru: {
         title: 'Мы создаём миры',
-        desc: 'AloeGames — современная игровая студия, создающая захватывающий игровой опыт нового поколения.',
+        desc: 'AloeGames — современная крутая контора, создающая захватывающий игровой опыт нового поколения (на самом деле мы делаем всё, кроме игр).',
         button: 'Смотреть',
         aboutTitle: 'О нас',
         aboutText: 'Мы команда разработчиков, дизайнеров и мечтателей. Наша цель — расширять границы интерактивных развлечений и создавать незабываемые игры.',
         projectsTitle: 'Наши проекты',
+        mirrorsTitle: 'Зеркала',
+        mirrorsText: 'Мы поддерживаем свободный интернет и предоставляем зеркала в цензуроустойчивых сетях:',
         contactTitle: 'Контакты',
         contactText: 'Свяжитесь с нами для сотрудничества или просто чтобы сказать привет.'
     }
@@ -27,14 +31,45 @@ function toggleLang() {
     currentLang = currentLang === 'en' ? 'ru' : 'en';
     const t = translations[currentLang];
 
-    document.getElementById('title').textContent = t.title;
-    document.getElementById('desc').textContent = t.desc;
-    document.getElementById('button').textContent = t.button;
-    document.getElementById('aboutTitle').textContent = t.aboutTitle;
-    document.getElementById('aboutText').textContent = t.aboutText;
-    document.getElementById('projectsTitle').textContent = t.projectsTitle;
-    document.getElementById('contactTitle').textContent = t.contactTitle;
-    document.getElementById('contactText').textContent = t.contactText;
+    tryToggleTextContent('title', t.title);
+    tryToggleTextContent('desc', t.desc);
+    tryToggleTextContent('button', t.button);
+    tryToggleTextContent('aboutTitle', t.aboutTitle);
+    tryToggleTextContent('aboutText', t.aboutText);
+    tryToggleTextContent('projectsTitle', t.projectsTitle);
+    tryToggleTextContent('mirrorsTitle', t.mirrorsTitle);
+    tryToggleTextContent('mirrorsText', t.mirrorsText);
+    tryToggleTextContent('contactTitle', t.contactTitle);
+    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