add landing page

innovativecreations · Jun 27, 2024 · a1716a0 · a1716a0
1 parent 29427df
commit a1716a0
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 66 deletions.
diff --git a/emojixt/code.css b/emojixt/code.css
@@ -0,0 +1,56 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url('bg.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.8);
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+textarea {
+    width: 95%;
+    height: 100px;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    background-color: #28a745;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #218838;
+}
+
+#output {
+    margin-top: 20px;
+    font-size: 24px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+
+h1{
+ font-weight: 900;
+}
diff --git a/emojixt/code.html b/emojixt/code.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emoji Translator</title>
+    <link rel="stylesheet" href="code.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Emoji Translator</h1>
+        <textarea id="inputText" placeholder="What are you thinking?"></textarea>
+        <button onclick="translateText()">Translate</button>
+        <div id="output"></div>
+    </div>
+    <script src="code.js"></script>
+</body>
+</html>
diff --git a/emojixt/code.js b/emojixt/code.js
@@ -0,0 +1,42 @@
+const emojiDict = {
+    "a": "😀",
+    "b": "😃",
+    "c": "😄",
+    "d": "😁",
+    "e": "😆",
+    "f": "😅",
+    "g": "🤣",
+    "h": "😂",
+    "i": "🙂",
+    "j": "🙃",
+    "k": "😉",
+    "l": "😊",
+    "m": "😇",
+    "n": "🥰",
+    "o": "😍",
+    "p": "🤩",
+    "q": "😘",
+    "r": "😗",
+    "s": "😚",
+    "t": "😋",
+    "u": "😛",
+    "v": "😜",
+    "w": "🤪",
+    "x": "😝",
+    "y": "🤑",
+    "z": "🤗",
+    " ": "⬛" 
+};
+
+function translateText() {
+    const inputText = document.getElementById('inputText').value.toLowerCase();
+    const outputDiv = document.getElementById('output');
+    outputDiv.innerHTML = '';
+
+    for (let char of inputText) {
+        const emoji = emojiDict[char] || char; 
+        const span = document.createElement('span');
+        span.textContent = emoji;
+        outputDiv.appendChild(span);
+    }
+}
diff --git a/emojixt/decode.html b/emojixt/decode.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emoji Translator</title>
+    <link rel="stylesheet" href="decode.css">
+</head>
+<body>
+
+</body>
+</html>
diff --git a/emojixt/index.html b/emojixt/index.html
@@ -3,16 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Emoji Translator</title>
+    <title>Emoji Translator and Decryptor</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="container">
-        <h1>Emoji Translator</h1>
-        <textarea id="inputText" placeholder="What are you thinking?"></textarea>
-        <button onclick="translateText()">Translate</button>
-        <div id="output"></div>
+    <div class="landing-page">
+        <h1>Welcome to Emoji Translator</h1>
+        <div class="options">
+            <a class="button" href="code.html">Text to Emoji</a>
+            <a class="button" href="decode.html">Emoji to Text</a>
+        </div>
     </div>
-    <script src="script.js"></script>
+
 </body>
-</html>
+</html>
diff --git a/emojixt/script.js b/emojixt/script.js
@@ -1,42 +0,0 @@
-const emojiDict = {
-    "a": "😀",
-    "b": "😃",
-    "c": "😄",
-    "d": "😁",
-    "e": "😆",
-    "f": "😅",
-    "g": "🤣",
-    "h": "😂",
-    "i": "🙂",
-    "j": "🙃",
-    "k": "😉",
-    "l": "😊",
-    "m": "😇",
-    "n": "🥰",
-    "o": "😍",
-    "p": "🤩",
-    "q": "😘",
-    "r": "😗",
-    "s": "😚",
-    "t": "😋",
-    "u": "😛",
-    "v": "😜",
-    "w": "🤪",
-    "x": "😝",
-    "y": "🤑",
-    "z": "🤗",
-    " ": "⬛" // Use a block or space emoji for spaces
-};
-
-function translateText() {
-    const inputText = document.getElementById('inputText').value.toLowerCase();
-    const outputDiv = document.getElementById('output');
-    outputDiv.innerHTML = ''; // Clear previous output
-
-    for (let char of inputText) {
-        const emoji = emojiDict[char] || char; // Default to the character if no emoji is found
-        const span = document.createElement('span');
-        span.textContent = emoji;
-        outputDiv.appendChild(span);
-    }
-}

diff --git a/emojixt/style.css b/emojixt/style.css
@@ -11,46 +11,61 @@ body {
     margin: 0;
 }
 
-.container {
+.hidden {
+    display: none;
+}
+
+.landing-page, .container {
     background: rgba(255, 255, 255, 0.8);
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
     text-align: center;
+    width: 80%;
 }
 
-textarea {
-    width: 100%;
-    height: 100px;
-    margin: 10px 0;
-    padding: 10px;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    font-size: 16px;
+.landing-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.options {
+    margin-top: 20px;
+    padding-bottom: 40px;
 }
 
-button {
+.button {
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     background-color: #28a745;
     color: white;
     font-size: 16px;
     cursor: pointer;
+    margin: 10px;
+    text-decoration: none;
 }
 
-button:hover {
+.button:hover {
     background-color: #218838;
 }
 
-#output {
+textarea {
+    width: 100%;
+    height: 100px;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    font-size: 16px;
+}
+
+#output, #decryptedOutput {
     margin-top: 20px;
     font-size: 24px;
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
-
-h1{
- font-weight: 900;
-}
+}