Merav/duoli2.0

.gitignore

@@ -0,0 +1 @@
+firebase-config.js

auth-handler.js

@@ -0,0 +1,64 @@
+/*
+ * Authentication Handler Module
+ * Модуль обработки аутентификации
+ *
+ * This module handles Google authentication and guest access functionality
+ * Этот модуль обрабатывает аутентификацию через Google и функционал гостевого доступа
+ */
+
+// Import Firebase modules and configuration
+// Импорт модулей и конфигурации Firebase
+import { auth, provider, db } from "./firebase-init.js";
+import { signInWithPopup } from "https://www.gstatic.com/firebasejs/11.7.3/firebase-auth.js";
+import { doc, setDoc } from "https://www.gstatic.com/firebasejs/11.7.3/firebase-firestore.js";
+
+// Handle Google login button click
+// Обработка клика по кнопке входа через Google
+document.getElementById("google-login").addEventListener("click", async () => {
+  try {
+    // Attempt to sign in with Google popup
+    // Попытка входа через всплывающее окно Google
+    const result = await signInWithPopup(auth, provider);
+    const user = result.user;
+
+    // Create user data object for local storage
+    // Создание объекта данных пользователя для локального хранилища
+    const userData = {
+      name: user.displayName,
+      email: user.email,
+      picture: user.photoURL
+    };
+
+    // Save user data to local storage
+    // Сохранение данных пользователя в локальное хранилище
+    localStorage.setItem("user", JSON.stringify(userData));
+
+    // Save user data to Firestore database
+    // Сохранение данных пользователя в базу данных Firestore
+    await setDoc(doc(db, "users", user.uid), {
+      name: user.displayName,
+      email: user.email,
+      joinedAt: new Date()
+    });
+
+    // Redirect to home page after successful login
+    // Перенаправление на главную страницу после успешного входа
+    window.location.href = "index.html";
+  } catch (err) {
+    // Handle login errors
+    // Обработка ошибок входа
+    console.error("Error in the login:", err.message);
+    alert("Error in login with Google.");
+  }
+});
+
+// Function to handle guest access
+// Функция для обработки гостевого доступа
+export function continueAsGuest() {
+  // Save guest status to local storage
+  // Сохранение статуса гостя в локальное хранилище
+  localStorage.setItem("user", JSON.stringify({ guest: true }));
+  // Redirect to home page
+  // Перенаправление на главную страницу
+  window.location.href = "index.html";
+}

firebase-config.example.js

@@ -0,0 +1,12 @@
+// This is an example configuration file for Firebase.
+// You should create a file named firebase-config.js and filled with your actual Firebase project configuration values.
+// You can find your Firebase configuration in the group google Drive under MegaPath GoogleCloud/FireBase ID.
+
+export const firebaseConfig = {
+  apiKey: "YOUR_API_KEY_HERE",
+  authDomain: "YOUR_PROJECT.firebaseapp.com",
+  projectId: "YOUR_PROJECT_ID",
+  storageBucket: "YOUR_BUCKET.appspot.com",
+  messagingSenderId: "YOUR_SENDER_ID",
+  appId: "YOUR_APP_ID"
+};

firebase-init.js

@@ -0,0 +1,23 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/11.7.3/firebase-app.js";
+import { getAuth, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/11.7.3/firebase-auth.js";
+import { getFirestore } from "https://www.gstatic.com/firebasejs/11.7.3/firebase-firestore.js";
+import { firebaseConfig } from "./firebase-config.js";
+// Initialize Firebase application
+// Инициализация приложения Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firebase Authentication and get a reference to the service
+// Инициализация аутентификации Firebase и получение ссылки на сервис
+const auth = getAuth(app);
+
+// Create Google authentication provider instance
+// Создание экземпляра провайдера аутентификации Google
+const provider = new GoogleAuthProvider();
+
+// Initialize Firestore database and get a reference to the service
+// Инициализация базы данных Firestore и получение ссылки на сервис
+const db = getFirestore(app);
+
+// Export initialized Firebase services for use in other modules
+// Экспорт инициализированных сервисов Firebase для использования в других модулях
+export { app, auth, provider, db };

games.html

@@ -1,35 +1,43 @@
+<!--
+  Game Selection Page
+  Страница выбора игры
+
+  This page allows users to select which game they want to play
+  Эта страница позволяет пользователям выбрать, в какую игру они хотят играть
+-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Select a Game</title>
-  <link rel="stylesheet" href="style.css">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Select Game</title>
+  <!-- Link to external stylesheet
+       Подключение внешней таблицы стилей -->
+  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
   <div class="container">
-    <h1>Select a Game:</h1>
-    <ul>
-      <li><button class="game-button" data-game="flashcard">Flashcards (Match Word & Translation)</button></li>
-      <li><button class="game-button" data-game="word-picture">Match Word & Picture</button></li>
-    </ul>
+    <h1>Select a Game</h1>
+    <!-- Game selection buttons
+         Кнопки выбора игры -->
+    <button class="game-button" data-game="flashcard">Flashcards</button>
+    <button class="game-button" data-game="word-picture">Word & Picture</button>
   </div>
-
   <script>
-    // Extract parameters from URL
+    // Get language and grade parameters from URL
+    // Получение параметров языка и класса из URL
     const urlParams = new URLSearchParams(window.location.search);
-    const selectedLang = urlParams.get('lang');
-    const selectedGrade = urlParams.get('grade');
+    const lang = urlParams.get('lang');
+    const grade = urlParams.get('grade');
 
-    console.log(`Language: ${selectedLang}, Grade: ${selectedGrade}`);
-
-    // Handle game selection
+    // Add click handlers for game selection buttons
+    // Добавление обработчиков клика для кнопок выбора игры
     document.querySelectorAll('.game-button').forEach(button => {
       button.addEventListener('click', () => {
         const gameType = button.dataset.game;
-
-        // Redirect to the game with data
-        window.location.href = play-game.html?lang=${selectedLang}&grade=${selectedGrade}&game=${gameType};
+        // Redirect to the game page with all parameters
+        // Перенаправление на страницу игры со всеми параметрами
+        window.location.href = `play-game.html?lang=${lang}&grade=${grade}&game=${gameType}`;
       });
     });
   </script>

index.html

@@ -1,27 +1,73 @@
+<!--
+  Language and Grade Selection Page
+  Страница выбора языка и класса
+
+  This page allows users to select their preferred language and grade level
+  Эта страница позволяет пользователям выбрать предпочитаемый язык и уровень класса
+-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Registration</title>
-  <link rel="stylesheet" href="style.css">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Language & Grade</title>
+  <!-- Link to external stylesheet
+       Подключение внешней таблицы стилей -->
+  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
   <div class="container">
-    <h1>Registration</h1>
-    <form id="registrationForm">
-      <label for="username">Your name:</label>
-      <input type="text" id="username" name="username" required>
-
-      <label for="password">Password:</label>
-      <input type="password" id="password" name="password" required>
-
-      <button type="submit">Sign up</button>
-    </form>
-    <div id="message"></div>
+    <h1>Select Language and Grade</h1>
+    <!-- Language selection section
+         Секция выбора языка -->
+    <section>
+      <h2>Language</h2>
+      <button class="language-button">English</button>
+      <button class="language-button">Portuguese</button>
+      <button class="language-button">Russian</button>
+    </section>
+    <!-- Grade selection section
+         Секция выбора класса -->
+    <section>
+      <h2>Grade</h2>
+      <button class="grade-button" data-grade="10">Grade 10</button>
+      <button class="grade-button" data-grade="11">Grade 11</button>
+      <button class="grade-button" data-grade="12">Grade 12</button>
+    </section>
   </div>
-  <script src="script.js"></script>
- <script src="updated_words_data.js" defer></script>
-<script src="script.js" defer></script>
+  <script>
+    // Initialize page when DOM is fully loaded
+    // Инициализация страницы после полной загрузки DOM
+    document.addEventListener("DOMContentLoaded", () => {
+      // Variables to store user selections
+      // Переменные для хранения выбора пользователя
+      let selectedLanguage = null;
+      let selectedGrade = null;
+
+      // Add click handlers for language buttons
+      // Добавление обработчиков клика для кнопок выбора языка
+      document.querySelectorAll('.language-button').forEach(button => {
+        button.addEventListener('click', () => {
+          selectedLanguage = button.textContent.toLowerCase();
+          alert(`Selected: ${selectedLanguage}`);
+        });
+      });
+
+      // Add click handlers for grade buttons
+      // Добавление обработчиков клика для кнопок выбора класса
+      document.querySelectorAll('.grade-button').forEach(button => {
+        button.addEventListener('click', () => {
+          selectedGrade = button.dataset.grade;
+          // Redirect to games page if both selections are made
+          // Перенаправление на страницу игр, если сделаны оба выбора
+          if (selectedLanguage && selectedGrade) {
+            window.location.href = `games.html?lang=${selectedLanguage}&grade=${selectedGrade}`;
+          } else {
+            alert("Select language and grade.");
+          }
+        });
+      });
+    });
+  </script>
 </body>
 </html>

login.html

@@ -0,0 +1,34 @@
+<!--
+  Login Page
+  Страница входа
+
+  This page provides options for users to login with Google or continue as a guest
+  Эта страница предоставляет пользователям возможность войти через Google или продолжить как гость
+-->
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Login - Duoli Flashcards</title>
+  <!-- Link to external stylesheet
+       Подключение внешней таблицы стилей -->
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h1>Welcome To MegaPath</h1>
+    <!-- Google login button
+         Кнопка входа через Google -->
+    <button id="google-login">Enter With Google Account</button>
+    <p>ou</p>
+    <!-- Guest access button
+         Кнопка гостевого доступа -->
+    <button onclick="continueAsGuest()">Continue As Guest</button>
+  </div>
+
+  <!-- Import authentication handler module
+       Импорт модуля обработчика аутентификации -->
+  <script type="module" src="./auth-handler.js"></script>
+</body>
+</html>