Merge pull request #2155 from Saipradyumnagoud/master

Added Flames Calculator
Sulagna-Dutta-Roy · Jul 5, 2024 · ec28a7b · ec28a7b
2 parents 9b72e20 + f04dc5f
commit ec28a7b
Show file tree

Hide file tree

Showing 4 changed files with 263 additions and 0 deletions.
diff --git a/Flames Calculator/Styles.css b/Flames Calculator/Styles.css
@@ -0,0 +1,150 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #FBEAEB;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background: white;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 300px;
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    color: #333;
+}
+
+.input-group {
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+label {
+    display: block;
+    font-size: 14px;
+    color: #666;
+}
+
+.input {
+    background-color: #212121;
+    max-width: 100%;
+    height: 40px;
+    padding: 10px;
+    border: 2px solid white;
+    border-radius: 5px;
+    color: white;
+}
+
+.input:focus {
+    color: rgb(0, 255, 255);
+    background-color: #212121;
+    outline-color: rgb(0, 255, 255);
+    box-shadow: -3px -3px 15px rgb(0, 255, 255);
+    transition: .1s;
+    transition-property: box-shadow;
+}
+
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    position: relative;
+    padding: 0 20px;
+    font-size: 18px;
+    text-transform: uppercase;
+    border: 0;
+    box-shadow: hsl(210deg 87% 36%) 0px 7px 0px 0px;
+    background-color: hsl(210deg 100% 44%);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: 31ms cubic-bezier(.5, .7, .4, 1);
+}
+
+button:before {
+    content: attr(alt);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inset: 0;
+    font-size: 15px;
+    font-weight: bold;
+    color: white;
+    letter-spacing: 4px;
+    opacity: 1;
+}
+
+button:active {
+    box-shadow: none;
+    transform: translateY(7px);
+    transition: 35ms cubic-bezier(.5, .7, .4, 1);
+}
+
+button:hover:before {
+    transition: all .0s;
+    transform: translateY(100%);
+    opacity: 0;
+}
+
+button i {
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    letter-spacing: 4px;
+    font-style: normal;
+    transition: all 2s ease;
+    transform: translateY(-20px);
+    opacity: 0;
+}
+
+button:hover i {
+    transition: all .2s ease;
+    transform: translateY(0px);
+    opacity: 1;
+}
+
+button:hover i:nth-child(1) {
+    transition-delay: 0.045s;
+}
+
+button:hover i:nth-child(2) {
+    transition-delay: calc(0.045s * 3);
+}
+
+button:hover i:nth-child(3) {
+    transition-delay: calc(0.045s * 4);
+}
+
+button:hover i:nth-child(4) {
+    transition-delay: calc(0.045s * 5);
+}
+
+button:hover i:nth-child(5) {
+    transition-delay: calc(0.045s * 6);
+}
+
+button:hover i:nth-child(6) {
+    transition-delay: calc(0.045s * 7);
+}
+
+button:hover i:nth-child(7) {
+    transition-delay: calc(0.045s * 8);
+}
+
+button:hover i:nth-child(8) {
+    transition-delay: calc(0.045s * 9);
+}
+
+button:hover i:nth-child(9) {
+    transition-delay: calc(0.045s * 10);
+}
diff --git a/Flames Calculator/index.html b/Flames Calculator/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FLAMES Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>FLAMES Calculator</h1>
+        <form id="flamesForm">
+            <div class="input-group">
+                <label for="name1">Your Name:</label>
+                <input placeholder="Your Name" class="input" id="name1" name="text" type="text" required>
+            </div>
+            <div class="input-group">
+                <label for="name2">Their Name:</label>
+                <input placeholder="Your crush Name" class="input" id="name2" name="text" type="text" required>
+            </div>
+            <button alt="Calculate">
+                <i>C</i>
+                <i>A</i>
+                <i>L</i>
+                <i>C</i>
+                <i>U</i>
+                <i>L</i>
+                <i>A</i>
+                <i>T</i>
+                <i>E</i>
+            </button>
+        </form>
+        <div id="result" class="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Flames Calculator/manifest.json b/Flames Calculator/manifest.json
@@ -0,0 +1,52 @@
+{
+    "name": "FLAMES Calculator",
+    "short_name": "FLAMES",
+    "description": "A FLAMES calculator with an excellent UI",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#FBEAEB",
+    "theme_color": "#212121",
+    "icons": [
+      {
+        "src": "/icons/icon-72x72.png",
+        "sizes": "72x72",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-96x96.png",
+        "sizes": "96x96",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-128x128.png",
+        "sizes": "128x128",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-144x144.png",
+        "sizes": "144x144",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-152x152.png",
+        "sizes": "152x152",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-384x384.png",
+        "sizes": "384x384",
+        "type": "image/png"
+      },
+      {
+        "src": "/icons/icon-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+
diff --git a/Flames Calculator/script.js b/Flames Calculator/script.js
@@ -0,0 +1,24 @@
+document.getElementById('flamesForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    const name1 = document.getElementById('name1').value.toLowerCase().replace(/\s+/g, '');
+    const name2 = document.getElementById('name2').value.toLowerCase().replace(/\s+/g, '');
+
+    const flames = ['Friends', 'Love', 'Affection', 'Marriage', 'Enemy', 'Siblings'];
+
+    let totalLength = name1.length + name2.length;
+    let commonChars = 0;
+
+    for (let i = 0; i < name1.length; i++) {
+        if (name2.includes(name1[i])) {
+            commonChars++;
+            name2 = name2.replace(name1[i], '');
+        }
+    }
+
+    totalLength -= 2 * commonChars;
+
+    const resultIndex = totalLength % flames.length;
+    const result = flames[resultIndex];
+
+    document.getElementById('result').textContent = `Your relationship is: ${result}`;
+});