kunjgit · Saipradyumnagoud · May 28, 2024 · May 28, 2024 · May 28, 2024 · May 28, 2024
diff --git a/Games/Flames-game/README.md b/Games/Flames-game/README.md
@@ -0,0 +1,59 @@
+# FLAMES Game
+
+This is a simple FLAMES game built using HTML, CSS, and JavaScript. The FLAMES game takes two names as input and calculates the relationship between them based on the FLAMES logic.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Technologies Used](#technologies-used)
+- [License](#license)
+
+## Introduction
+
+The FLAMES game is a fun and simple game to determine the type of relationship between two people based on their names. FLAMES stands for Friends, Lovers, Affectionate, Marriage, Enemies, and Siblings. This project provides an interactive interface where users can input two names and see the result of their relationship.
+
+## Features
+
+- Interactive flip card UI with a toggle switch
+- Responsive design
+- Easy to use
+- Instant calculation of FLAMES result
+
+## Installation
+
+To get a local copy of this project up and running, follow these simple steps:
+
+1. Clone the repository:
+
+    ```bash
+    git clone https://github.com/yourusername/flames-game.git
+    ```
+
+2. Navigate to the project directory:
+
+    ```bash
+    cd flames-game
+    ```
+
+## Usage
+
+1. Open the `index.html` file in your preferred web browser.
+
+2. Enter your name and your crush's name in the respective input fields.
+
+3. Click on the "Calculate" button.
+
+4. The result of the FLAMES game will be displayed below the input fields.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
diff --git a/Games/Flames-game/index.html b/Games/Flames-game/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FLAMES Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="card-switch">
+            <label class="switch">
+                <div class="flip-card__inner">
+                    <div class="flip-card__front">
+                        <div class="title">FLAMES Game</div>
+                        <form id="flamesForm" class="flip-card__form">
+                            <input class="flip-card__input" id="name1" placeholder="Your Name" type="text" required>
+                            <input class="flip-card__input" id="name2" placeholder="Crush's Name" type="text" required>
+                            <button class="flip-card__btn">Calculate</button>
+                        </form>
+                        <div id="result" class="result"></div>
+                    </div>
+                </div>
+            </label>
+        </div>   
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Flames-game/script.js b/Games/Flames-game/script.js
@@ -0,0 +1,25 @@
+document.getElementById('flamesForm').addEventListener('submit', function (e) {
+    e.preventDefault();
+
+    const name1 = document.getElementById('name1').value.toLowerCase().replace(/ /g, '');
+    const name2 = document.getElementById('name2').value.toLowerCase().replace(/ /g, '');
+
+    let name1Array = name1.split('');
+    let name2Array = name2.split('');
+
+    name1Array.forEach(char => {
+        const index = name2Array.indexOf(char);
+        if (index !== -1) {
+            name2Array.splice(index, 1);
+            name1Array.splice(name1Array.indexOf(char), 1);
+        }
+    });
+
+    const count = name1Array.length + name2Array.length;
+    const flames = ['Friends', 'Lovers', 'Affectionate', 'Marriage', 'Enemies', 'Siblings'];
+    let flamesIndex = count % flames.length;
+
+    const resultText = flamesIndex === 0 ? flames[flames.length - 1] : flames[flamesIndex - 1];
+
+    document.getElementById('result').innerText = `Result: ${resultText}`;
+});
diff --git a/Games/Flames-game/style.css b/Games/Flames-game/style.css
@@ -0,0 +1,203 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+.wrapper {
+  --input-focus: #2d8cf0;
+  --font-color: #323232;
+  --font-color-sub: #666;
+  --bg-color: #fff;
+  --bg-color-alt: #666;
+  --main-color: #323232;
+}
+
+.switch {
+  transform: translateY(-200px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  width: 50px;
+  height: 20px;
+}
+
+.card-side::before {
+  position: absolute;
+  content: 'FLAMES Game';
+  left: -120px;
+  top: 0;
+  width: 200px;
+  text-decoration: underline;
+  color: var(--font-color);
+  font-weight: 600;
+}
+
+.card-side::after {
+  position: absolute;
+  content: '';
+  left: 70px;
+  top: 0;
+  width: 100px;
+  text-decoration: none;
+  color: var(--font-color);
+  font-weight: 600;
+}
+
+.toggle {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  box-sizing: border-box;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  box-shadow: 4px 4px var(--main-color);
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--bg-colorcolor);
+  transition: 0.3s;
+}
+
+.slider:before {
+  box-sizing: border-box;
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  border: 2px solid var(--main-color);
+  border-radius: 5px;
+  left: -2px;
+  bottom: 2px;
+  background-color: var(--bg-color);
+  box-shadow: 0 3px 0 var(--main-color);
+  transition: 0.3s;
+}
+
+.toggle:checked + .slider {
+  background-color: var(--input-focus);
+}
+
+.toggle:checked + .slider:before {
+  transform: translateX(30px);
+}
+
+.toggle:checked ~ .card-side:before {
+  text-decoration: none;
+}
+
+.toggle:checked ~ .card-side:after {
+  text-decoration: underline;
+}
+
+.flip-card__inner {
+  width: 300px;
+  height: 350px;
+  position: relative;
+  background-color: transparent;
+  perspective: 1000px;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.toggle:checked ~ .flip-card__inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card__front, .flip-card__back {
+  padding: 20px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background: lightgrey;
+  gap: 20px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  box-shadow: 4px 4px var(--main-color);
+}
+
+.flip-card__back {
+  width: 100%;
+  transform: rotateY(180deg);
+}
+
+.flip-card__form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.title {
+  margin: 20px 0 20px 0;
+  font-size: 25px;
+  font-weight: 900;
+  text-align: center;
+  color: var(--main-color);
+}
+
+.flip-card__input {
+  width: 250px;
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--font-color);
+  padding: 5px 10px;
+  outline: none;
+}
+
+.flip-card__input::placeholder {
+  color: var(--font-color-sub);
+  opacity: 0.8;
+}
+
+.flip-card__input:focus {
+  border: 2px solid var(--input-focus);
+}
+
+.flip-card__btn:active, .button-confirm:active {
+  box-shadow: 0px 0px var(--main-color);
+  transform: translate(3px, 3px);
+}
+
+.flip-card__btn {
+  margin: 20px 0 20px 0;
+  width: 120px;
+  height: 40px;
+  border-radius: 5px;
+  border: 2px solid var(--main-color);
+  background-color: var(--bg-color);
+  box-shadow: 4px 4px var(--main-color);
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--font-color);
+  cursor: pointer;
+}
+
+.result {
+  margin-top: 20px;
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--main-color);
+}
diff --git a/Games/Flames_game b/Games/Flames_game