First commit

2026-07-13 23:16:58 +00:00 · 2026-05-11 13:12:17 +00:00
commit 5da69356d3
6 changed files with 311 additions and 0 deletions
@@ -0,0 +1 @@
+# AloeGames site
@@ -0,0 +1,164 @@
+:root {
+    --bg-main: #06090f;
+    --bg-secondary: #0b1220;
+    --card: #0f172a;
+    --card-hover: #111c34;
+    --text-main: #e5e7eb;
+    --text-muted: #94a3b8;
+    --accent: #22c55e;
+    --accent-glow: rgba(34, 197, 94, 0.4);
+    --border: rgba(34, 197, 94, 0.15);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: radial-gradient(circle at 20% 20%, #0b1220, #06090f);
+    color: var(--text-main);
+    scroll-behavior: smooth;
+}
+
+header {
+    position: fixed;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 40px;
+    background: rgba(6, 9, 15, 0.7);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+    z-index: 1000;
+}
+
+.logo {
+    font-size: 22px;
+    font-weight: 800;
+    color: var(--accent);
+    text-shadow: 0 0 10px var(--accent-glow);
+    vertical-align: middle;
+}
+
+.lang-switch {
+    cursor: pointer;
+    padding: 8px 14px;
+    border-radius: 10px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    transition: 0.3s;
+}
+
+.lang-switch:hover {
+    background: var(--card-hover);
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+section {
+    padding: 120px 40px;
+    max-width: 1100px;
+    margin: auto;
+}
+
+.hero {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+h1 {
+    font-size: 64px;
+    font-weight: 800;
+    margin-bottom: 20px;
+    background: linear-gradient(90deg, #22c55e, #4ade80);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+h2 {
+    font-size: 32px;
+    margin-bottom: 20px;
+    color: var(--accent);
+}
+
+p {
+    font-size: 18px;
+    color: var(--text-muted);
+    max-width: 700px;
+    line-height: 1.6;
+}
+
+.btn {
+    margin-top: 30px;
+    padding: 14px 28px;
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: 0.3s;
+    color: black;
+    font-weight: 600;
+    box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 25px var(--accent-glow);
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-top: 40px;
+}
+
+.card {
+    background: var(--card);
+    padding: 20px;
+    border-radius: 16px;
+    border: 1px solid var(--border);
+    transition: 0.3s;
+    position: relative;
+}
+
+.card::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 16px;
+    box-shadow: 0 0 0px transparent;
+    transition: 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-6px);
+    background: var(--card-hover);
+}
+
+.card:hover::after {
+    box-shadow: 0 0 20px var(--accent-glow);
+}
+
+footer {
+    text-align: center;
+    padding: 40px;
+    color: #475569;
+}
+
+canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AloeGames</title>
+    <link rel="icon" href="images/favicon.ico">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <canvas id="bgCanvas"></canvas>
+
+    <header>
+        <div class="logo">
+            <!-- <img src="images/logo.png" height="30"> -->
+            AloeGames
+        </div>
+        <div class="lang-switch" onclick="toggleLang()">RU / EN</div>
+    </header>
+
+    <section class="hero">
+        <img src="images/logo.png" height="400">
+        <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> -->
+    </section>
+
+    <section>
+        <h2 id="aboutTitle">About Us</h2>
+        <p id="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.</p>
+    </section>
+
+    <!--<section>
+  <h2 id="projectsTitle">Our Projects</h2>
+  <div class="grid">
+    <div class="card"><h3>Project One</h3><p>Next-gen action experience with stunning visuals.</p></div>
+    <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>-->
+
+    <footer>
+        © 2026 AloeGames. All rights reserved.
+    </footer>
+
+    <script src="js/app.js"></script>
+
+</body>
+
+</html>
@@ -0,0 +1,86 @@
+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.',
+        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',
+        contactTitle: 'Contact',
+        contactText: 'Get in touch with us for partnerships, collaborations, or just to say hello.'
+    },
+    ru: {
+        title: 'Мы создаём миры',
+        desc: 'AloeGames — современная игровая студия, создающая захватывающий игровой опыт нового поколения.',
+        button: 'Смотреть',
+        aboutTitle: 'О нас',
+        aboutText: 'Мы команда разработчиков, дизайнеров и мечтателей. Наша цель — расширять границы интерактивных развлечений и создавать незабываемые игры.',
+        projectsTitle: 'Наши проекты',
+        contactTitle: 'Контакты',
+        contactText: 'Свяжитесь с нами для сотрудничества или просто чтобы сказать привет.'
+    }
+};
+
+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;
+}
+
+// Background animation
+const canvas = document.getElementById('bgCanvas');
+const ctx = canvas.getContext('2d');
+
+function resize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+window.addEventListener('resize', resize);
+resize();
+
+const particles = [];
+
+for (let i = 0; i < 80; i++) {
+    particles.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        vx: (Math.random() - 0.5) * 0.5,
+        vy: (Math.random() - 0.5) * 0.5,
+        size: Math.random() * 2 + 1
+    });
+}
+
+function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    particles.forEach(p => {
+        p.x += p.vx;
+        p.y += p.vy;
+
+        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
+        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(34,197,94,0.8)';
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = 'rgba(34,197,94,0.8)';
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    });
+
+    requestAnimationFrame(animate);
+}
+
+animate();