diff --git a/Flames Calculator/Styles.css b/Flames Calculator/Styles.css new file mode 100644 index 00000000..88efee8a --- /dev/null +++ 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 new file mode 100644 index 00000000..c59dd863 --- /dev/null +++ b/Flames Calculator/index.html @@ -0,0 +1,37 @@ + + + + + + FLAMES Calculator + + + +
+

FLAMES Calculator

+
+
+ + +
+
+ + +
+ +
+
+
+ + + diff --git a/Flames Calculator/manifest.json b/Flames Calculator/manifest.json new file mode 100644 index 00000000..57c4fd1e --- /dev/null +++ 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" + } + ] + } + \ No newline at end of file diff --git a/Flames Calculator/script.js b/Flames Calculator/script.js new file mode 100644 index 00000000..0b45124a --- /dev/null +++ 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}`; +});