diff --git a/css/style.css b/css/style.css index e59c158..b7fa4f4 100644 --- a/css/style.css +++ b/css/style.css @@ -179,6 +179,214 @@ textarea { transition: all 0.2s ease; } +/* Special styling for encoded message textarea */ +.output-section textarea { + background-color: var(--secondary-bg); + color: var(--accent-color); + border: 1px solid rgba(100, 181, 246, 0.3); + border-radius: 6px; + font-family: 'Fira Code', monospace; + letter-spacing: 0.5px; + line-height: 1.5; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); + padding: 14px; + font-weight: 500; +} + +/* Emoji Library Styling */ +.emoji-library { + margin: 16px 0; + background-color: var(--main-bg-color); + border-radius: 8px; + padding: 16px; + border: 1px solid var(--input-border); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.emoji-library-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + border-bottom: 1px solid var(--input-border); + padding-bottom: 12px; +} + +.emoji-library-title { + font-size: 1.1rem; + font-weight: 600; + display: flex; + flex-direction: column; + gap: 4px; +} + +.emoji-library-title i { + margin-right: 8px; + color: var(--accent-color); +} + +.emoji-library-subtitle { + font-size: 0.8rem; + font-weight: normal; + opacity: 0.7; + margin-top: 4px; +} + +.emoji-search { + position: relative; + width: 220px; +} + +.emoji-search input { + width: 100%; + padding: 8px 12px 8px 32px; + background-color: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 4px; + color: var(--text-color); + font-size: 0.9rem; + transition: all 0.2s ease; +} + +.emoji-search input:focus { + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2); + outline: none; +} + +.emoji-search i { + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + color: var(--text-color); + opacity: 0.5; +} + +.emoji-grid-wrapper { + border-radius: 6px; + background-color: var(--secondary-bg); + padding: 8px; + margin-bottom: 12px; +} + +.emoji-grid-note { + background-color: rgba(var(--accent-color-rgb), 0.1); + padding: 8px 12px; + border-radius: 4px; + margin-bottom: 8px; + font-size: 0.9rem; + color: var(--text-color); + display: flex; + align-items: center; + gap: 8px; +} + +.emoji-grid-note i { + color: var(--accent-color); +} + +.emoji-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); + gap: 10px; + max-height: 250px; + overflow-y: auto; + padding: 8px; + scrollbar-width: thin; + border-radius: 6px; + border: 1px solid var(--input-border); +} + +.emoji-button { + display: flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + font-size: 1.25rem; + background-color: var(--button-bg); + border: 1px solid transparent; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + padding: 0; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.emoji-button:hover { + background-color: var(--button-hover-bg); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-color: var(--accent-color); +} + +.emoji-button:active { + transform: translateY(0); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +/* Emoji Library Footer */ +.emoji-library-footer { + display: flex; + justify-content: flex-start; + align-items: center; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid var(--input-border); +} + +.selected-emoji-info { + display: flex; + align-items: center; + gap: 8px; +} + +.selected-emoji { + font-size: 1.5rem; + padding: 4px 8px; + background-color: var(--secondary-bg); + border-radius: 6px; + border: 1px solid var(--input-border); +} + +.selected-emoji-label { + font-size: 0.85rem; + color: var(--text-muted); + font-style: italic; +} + +.emoji-button.selected { + background-color: var(--accent-color); + color: var(--main-bg-color); + border-color: var(--accent-color); +} + +.emoji-category-tabs { + display: flex; + gap: 8px; + margin-bottom: 12px; + overflow-x: auto; + padding-bottom: 4px; +} + +.emoji-category-tab { + padding: 6px 12px; + background-color: var(--button-bg); + border: 1px solid var(--input-border); + border-radius: 4px; + color: var(--text-color); + font-size: 0.8rem; + cursor: pointer; + white-space: nowrap; +} + +.emoji-category-tab.active { + background-color: var(--accent-color); + color: var(--main-bg-color); + border-color: var(--accent-color); +} + textarea::placeholder { color: rgba(224, 224, 224, 0.5); } @@ -199,6 +407,43 @@ button:active { transform: translateY(1px); } +/* Invisible Text Button */ +.invisible-button { + width: 100%; + margin-top: 12px; + padding: 12px; + background-color: var(--secondary-bg); + border: 2px dashed var(--accent-color); + transition: all 0.3s ease; + display: flex; + justify-content: center; + position: relative; +} + +.invisible-button .carrier-content { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.1rem; +} + +.invisible-button .carrier-emoji { + font-size: 1.5rem; + margin-right: 12px; +} + +.invisible-button:hover { + background-color: rgba(var(--accent-color-rgb), 0.1); + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.invisible-button.active { + background-color: var(--accent-color); + color: var(--main-bg-color); + border-style: solid; +} + button { background-color: var(--button-bg); color: var(--text-color); @@ -261,6 +506,52 @@ button:hover { gap: 12px; } +/* Carrier styling */ +.carrier-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + margin-bottom: 6px; +} + +.carrier-emoji { + font-size: 1.5rem; + line-height: 1; + display: block; + margin-bottom: 2px; +} + +.carrier-name { + font-size: 0.85rem; + font-weight: 500; +} + +/* Preview styling */ +.transform-preview { + margin-top: auto; + width: 100%; + font-size: 0.7rem; + padding: 4px; + background-color: rgba(0, 0, 0, 0.1); + border-radius: 3px; + white-space: normal; + line-height: 1.2; +} + +.preview-label { + color: var(--accent-color); + opacity: 0.8; + font-weight: 500; + display: block; + margin-bottom: 2px; +} + +.preview-ellipsis { + color: var(--accent-color); + font-weight: bold; +} + /* Encoded preview styling */ .encoded-preview { display: inline-block; @@ -341,21 +632,110 @@ button:hover { background: var(--button-bg); color: var(--text-color); transition: all 0.2s ease; + overflow: hidden; +} + +.transform-button:before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid transparent; + border-radius: 6px; + transition: all 0.2s ease; + pointer-events: none; } .transform-button:hover { background: var(--button-hover-bg); - color: var(--main-bg-color); + border-color: var(--accent-color); transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} + +.transform-button:hover:before { + border-color: var(--accent-color); + opacity: 0.4; } .transform-button.active { background: var(--button-active-bg); color: var(--main-bg-color); border-color: var(--button-active-bg); + box-shadow: 0 2px 12px rgba(100, 181, 246, 0.3); +} + +.transform-button.active:before { + border-color: var(--accent-color); + opacity: 1; +} + +/* Add a subtle indicator for clickable buttons */ +.transform-button:after { + content: ''; + position: absolute; + bottom: 4px; + left: 50%; + transform: translateX(-50%); + width: 20px; + height: 2px; + background: var(--accent-color); + opacity: 0; + transition: all 0.2s ease; +} + +.transform-button.active:after { + opacity: 0.8; + width: 30px; } /* Output section */ +.output-section { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 16px; + padding: 16px; + background: var(--main-bg-color); + border-radius: 6px; + border: 1px solid var(--accent-color); + box-shadow: 0 2px 12px rgba(100, 181, 246, 0.15); +} + +.output-heading h4 { + display: flex; + align-items: center; + gap: 8px; + color: var(--success-color); + margin-bottom: 8px; + font-size: 1rem; +} + +.output-heading h4 small { + color: var(--accent-color); + font-size: 0.8rem; + margin-left: 8px; + font-weight: normal; + opacity: 0.8; +} + +.output-instructions { + font-size: 0.85rem; + color: var(--text-color); + opacity: 0.7; + padding: 6px; + border-radius: 4px; + background-color: rgba(0, 0, 0, 0.2); + margin-top: 8px; +} + +.output-instructions i { + color: var(--accent-color); + margin-right: 6px; +} + .output-container { position: relative; } diff --git a/index.html b/index.html index 07f6cf4..6dfcac6 100644 --- a/index.html +++ b/index.html @@ -79,32 +79,76 @@ @click="selectCarrier(carrier)" :title="carrier.desc" > - {{ carrier.emoji }} {{ carrier.name }} +
+ {{ carrier.emoji }} + {{ carrier.name }} +
+ Preview: {{ carrier.preview ? carrier.preview(emojiMessage.slice(0, 10)) : '' }} + ... - + + + + + + + +
+
+
+ Quick Emoji Picker + Click any emoji to insert it at cursor position +
+
+ + +
+
+
+
+
+ {{ selectedEmoji }} + Last selected +
+
+

+ + Encoded Message + using {{ selectedCarrier.name }} + using Invisible Text +

+
+
+ Copy this text and share it. Only people who know how to decode it will be able to read your message. +
@@ -179,6 +223,7 @@ + diff --git a/js/app.js b/js/app.js index 9e684d6..07293ba 100644 --- a/js/app.js +++ b/js/app.js @@ -26,7 +26,11 @@ new Vue({ selectedCarrier: null, activeSteg: null, carriers: window.steganography.carriers, - showDecoder: true + showDecoder: true, + // Emoji Library + emojiSearch: '', + filteredEmojis: [...window.emojiLibrary.EMOJI_LIST], + selectedEmoji: null }, methods: { // Theme Toggle @@ -52,13 +56,29 @@ new Vue({ // Steganography Methods selectCarrier(carrier) { - this.selectedCarrier = carrier; - this.activeSteg = 'emoji'; - this.autoEncode(); + // Toggle carrier selection if clicking the same one again + if (this.selectedCarrier === carrier) { + this.selectedCarrier = null; + this.encodedMessage = ''; + } else { + this.selectedCarrier = carrier; + this.activeSteg = 'emoji'; + this.autoEncode(); + } }, setStegMode(mode) { - this.activeSteg = mode; - this.autoEncode(); + // Toggle mode selection if clicking the same one again + if (this.activeSteg === mode) { + this.activeSteg = null; + this.encodedMessage = ''; + } else { + this.activeSteg = mode; + // When switching to invisible mode, clear the carrier selection + if (mode === 'invisible') { + this.selectedCarrier = null; + } + this.autoEncode(); + } }, autoEncode() { if (!this.emojiMessage) { @@ -249,13 +269,67 @@ new Vue({ } return null; + }, + + // Emoji Library Methods + filterEmojis() { + if (!this.emojiSearch) { + this.filteredEmojis = [...window.emojiLibrary.EMOJI_LIST]; + this.renderEmojiGrid(); + return; + } + + const searchTerm = this.emojiSearch.toLowerCase(); + this.filteredEmojis = window.emojiLibrary.EMOJI_LIST.filter(emoji => { + // Simple search - we could enhance this with emoji names/descriptions later + return emoji.toLowerCase().includes(searchTerm); + }); + + this.renderEmojiGrid(); + }, + + selectEmoji(emoji) { + this.selectedEmoji = emoji; + + // Insert the emoji at cursor position in the textarea + const textarea = document.getElementById('steg-input'); + if (textarea) { + const startPos = textarea.selectionStart; + const endPos = textarea.selectionEnd; + const currentValue = this.emojiMessage; + + // Insert emoji at cursor position + this.emojiMessage = currentValue.substring(0, startPos) + emoji + currentValue.substring(endPos); + + // Set cursor position after the inserted emoji + this.$nextTick(() => { + textarea.focus(); + textarea.selectionStart = startPos + emoji.length; + textarea.selectionEnd = startPos + emoji.length; + + // Trigger encoding + this.autoEncode(); + }); + + this.showNotification(`Emoji ${emoji} inserted`); + } + }, + + renderEmojiGrid() { + window.emojiLibrary.renderEmojiGrid('emoji-grid-container', this.selectEmoji.bind(this), this.filteredEmojis); } }, - // Initialize theme + // Initialize theme and components mounted() { + // Apply theme if (this.isDarkTheme) { document.body.classList.add('dark-theme'); } + + // Initialize emoji grid + this.$nextTick(() => { + this.renderEmojiGrid(); + }); }, // Keyboard shortcuts created() { diff --git a/js/emojiLibrary.js b/js/emojiLibrary.js new file mode 100644 index 0000000..ff9bc41 --- /dev/null +++ b/js/emojiLibrary.js @@ -0,0 +1,226 @@ +// Emoji Library for P4RS3LT0NGV3 + +// Create namespace for emoji library +window.emojiLibrary = {}; + +// Make emoji list globally available +window.emojiLibrary.EMOJI_LIST = [ + // Faces and People + "๐Ÿ˜€", // Grinning Face + "๐Ÿ˜‚", // Face with Tears of Joy + "๐Ÿฅฐ", // Smiling Face with Hearts + "๐Ÿ˜Ž", // Smiling Face with Sunglasses + "๐Ÿค”", // Thinking Face + "๐Ÿ˜…", // Smiling Face with Sweat + "๐Ÿ˜Š", // Smiling Face with Smiling Eyes + "๐Ÿ˜‡", // Smiling Face with Halo + "๐Ÿ™ƒ", // Upside-Down Face + "๐Ÿ˜‰", // Winking Face + "๐Ÿฅณ", // Partying Face + "๐Ÿ˜ด", // Sleeping Face + "๐Ÿฅฑ", // Yawning Face + "๐Ÿคฏ", // Exploding Head + "๐Ÿง ", // Brain + + // Gestures and Body Parts + "๐Ÿ‘", // Thumbs Up + "๐Ÿ‘Ž", // Thumbs Down + "๐Ÿ‘", // Clapping Hands + "๐Ÿค", // Handshake + "๐Ÿ‘‹", // Waving Hand + "โœŒ๏ธ", // Victory Hand + "๐ŸคŸ", // Love-You Gesture + "๐Ÿ‘€", // Eyes + "๐Ÿ‘๏ธ", // Eye + "๐Ÿงฟ", // Nazar Amulet + + // Celebration & Objects + "๐ŸŽ‰", // Party Popper + "๐ŸŽ‚", // Birthday Cake + "๐ŸŽ", // Wrapped Gift + "๐Ÿ†", // Trophy + "๐Ÿ…", // Sports Medal + "๐Ÿ’ฐ", // Money Bag + "๐Ÿ’ธ", // Money with Wings + "๐Ÿ’ฏ", // Hundred Points + "๐Ÿ“ฑ", // Mobile Phone + "๐Ÿ’ป", // Laptop + "โŒจ๏ธ", // Keyboard + "๐Ÿ”’", // Locked + "๐Ÿ”“", // Unlocked + + // Food & Drink + "๐Ÿ•", // Pizza + "๐Ÿ”", // Hamburger + "๐Ÿฆ", // Ice Cream + "๐Ÿฉ", // Doughnut + "๐Ÿบ", // Beer Mug + "๐Ÿท", // Wine Glass + "โ˜•", // Hot Beverage + + // Nature & Weather + "๐ŸŒˆ", // Rainbow + "๐ŸŒž", // Sun with Face + "๐ŸŒ™", // Crescent Moon + "โญ", // Star + "๐ŸŒŸ", // Glowing Star + "โšก", // High Voltage + "โ„๏ธ", // Snowflake + "๐Ÿ”ฅ", // Fire + "๐Ÿ’ง", // Droplet + "๐ŸŒŠ", // Water Wave + + // Animals + "๐Ÿฑ", // Cat Face + "๐Ÿถ", // Dog Face + "๐ŸฆŠ", // Fox + "๐Ÿผ", // Panda + "๐Ÿฆ", // Lion + "๐Ÿฌ", // Dolphin + "๐Ÿฆ„", // Unicorn + + // Symbols & Special + "โค๏ธ", // Red Heart + "๐Ÿงก", // Orange Heart + "๐Ÿ’š", // Green Heart + "๐Ÿ’™", // Blue Heart + "๐Ÿ’œ", // Purple Heart + "๐Ÿš€", // Rocket + "๐Ÿ‘€", // Eyes + "๐Ÿ’€", // Skull + "๐Ÿฅน", // Face Holding Back Tears + "๐Ÿ", // Snake + "๐Ÿ‰", // Dragon + "๐Ÿฒ", // Dragon Face + "๐Ÿง™โ€โ™‚๏ธ", // Wizard + "๐Ÿช„", // Magic Wand + "๐Ÿดโ€โ˜ ๏ธ", // Pirate Flag + "๐Ÿฆ…", // Eagle (often associated with pirates) + "๐Ÿฆœ", // Parrot (pirate symbol) + "๐Ÿ’ป", // Laptop (hacker symbol) + "๐Ÿ•ถ๏ธ", // Sunglasses (cool guy symbol) + "๐Ÿง‘โ€๐Ÿ’ป", // Technologist + "๐Ÿ‘จโ€๐Ÿ’ป", // Man Technologist + "๐Ÿ‘ฉโ€๐Ÿ’ป", // Woman Technologist + "๐Ÿ•ต๏ธ", // Detective + "๐Ÿ•ต๏ธโ€โ™‚๏ธ", // Man Detective + "๐Ÿ•ต๏ธโ€โ™€๏ธ", // Woman Detective + "๐Ÿ–ฅ๏ธ", // Desktop Computer + "โŒจ๏ธ", // Keyboard + "๐Ÿ–ฑ๏ธ", // Computer Mouse + "๐Ÿ•น๏ธ", // Joystick + "๐Ÿ“ฑ", // Mobile Phone + "๐Ÿ“ฒ", // Mobile Phone with Arrow + "๐Ÿ”“", // Unlocked (hacker symbol) + "๐Ÿ”‘", // Key (hacker symbol) + "๐Ÿ—๏ธ", // Old Key (hacker symbol) + "๐Ÿ›ก๏ธ", // Shield (hacker symbol) + "โš”๏ธ", // Crossed Swords (hacker symbol) + "๐Ÿงฌ", // DNA (hacker symbol) + "๐Ÿงซ", // Petri Dish (hacker symbol) + "๐Ÿงช", // Test Tube (hacker symbol) + "๐Ÿ› ๏ธ", // Hammer and Wrench (hacker symbol) + "โš™๏ธ", // Gear (hacker symbol) + "๐Ÿงฐ", // Toolbox (hacker symbol) + "๐Ÿงฒ", // Magnet (hacker symbol) + "๐Ÿ’ฃ", // Bomb (hacker symbol) + "๐Ÿ•ณ๏ธ", // Hole (hacker symbol) + "๐Ÿ“ก", // Satellite Antenna (hacker symbol) + "๐Ÿ›ฐ๏ธ", // Satellite (hacker symbol) + "๐Ÿ“ž", // Telephone Receiver (hacker symbol) + "โ˜Ž๏ธ", // Telephone (hacker symbol) + "๐Ÿ“Ÿ", // Pager (hacker symbol) + "๐Ÿ“ ", // Fax Machine (hacker symbol) + "๐Ÿ”Œ", // Electric Plug (hacker symbol) + "๐Ÿ’ก", // Light Bulb (hacker symbol) + "๐Ÿ”ฆ", // Flashlight (hacker symbol) + "๐Ÿ•ฏ๏ธ", // Candle (hacker symbol) + "๐Ÿ—ž๏ธ", // Rolled-Up Newspaper (hacker symbol) + "๐Ÿ“œ", // Scroll (hacker symbol) + "๐Ÿ“ƒ", // Page with Curl (hacker symbol) + "๐Ÿ“„", // Page Facing Up (hacker symbol) + "๐Ÿ“‘", // Bookmark Tabs (hacker symbol) + "๐Ÿ“Š", // Bar Chart (hacker symbol) + "๐Ÿ“ˆ", // Chart Increasing (hacker symbol) + "๐Ÿ“‰", // Chart Decreasing (hacker symbol) + "๐Ÿ—‚๏ธ", // Card Index Dividers (hacker symbol) + "๐Ÿ—ƒ๏ธ", // Card File Box (hacker symbol) + "๐Ÿ—„๏ธ", // File Cabinet (hacker symbol) + "๐Ÿ—‘๏ธ", // Wastebasket (hacker symbol) + "๐Ÿ›ข๏ธ", // Oil Drum (hacker symbol) + "๐Ÿ›Ž๏ธ", // Bellhop Bell (hacker symbol) + "๐Ÿงณ", // Luggage (hacker symbol) + "๐Ÿ›Œ", // Person in Bed (hacker symbol) + "๐Ÿ›๏ธ", // Bed (hacker symbol) + "๐Ÿ›‹๏ธ", // Couch and Lamp (hacker symbol) + "๐Ÿช‘", // Chair (hacker symbol) + "๐Ÿšช", // Door (hacker symbol) + "๐Ÿงด", // Lotion Bottle (hacker symbol) + "๐Ÿงท", // Safety Pin (hacker symbol) + "๐Ÿงน", // Broom (hacker symbol) + "๐Ÿงบ", // Basket (hacker symbol) + "๐Ÿงป", // Roll of Paper (hacker symbol) + "๐Ÿงผ", // Soap (hacker symbol) + "๐Ÿงฝ", // Sponge (hacker symbol) + "๐Ÿงฏ", // Fire Extinguisher (hacker symbol) + "๐Ÿ›’", // Shopping Cart (hacker symbol) + "๐Ÿšฌ", // Cigarette (hacker symbol) + "โšฐ๏ธ", // Coffin (hacker symbol) + "โšฑ๏ธ", // Funeral Urn (hacker symbol) + "๐Ÿ—ฟ", // Moai (hacker symbol) + "๐Ÿ›‚", // Passport Control (hacker symbol) + "๐Ÿ›ƒ", // Customs (hacker symbol) + "๐Ÿ›„", // Baggage Claim (hacker symbol) + "๐Ÿ›…", // Left Luggage (hacker symbol) + "๐Ÿšน", // Men's Room (hacker symbol) + "๐Ÿšบ", // Women's Room (hacker symbol) + "๐Ÿšผ", // Baby Symbol (hacker symbol) + "๐Ÿšป", // Restroom (hacker symbol) + "๐Ÿšฎ", // Litter in Bin Sign (hacker symbol) + "๐Ÿšฐ", // Potable Water (hacker symbol) + "๐Ÿšพ", // Water Closet (hacker symbol) + "๐Ÿšญ", // No Smoking (hacker symbol) + "๐Ÿšฏ", // No Littering (hacker symbol) + "๐Ÿšฑ", // Non-Potable Water (hacker symbol) +]; + +// Function to render emoji grid +window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filteredList) { + const container = document.getElementById(containerId); + if (!container) return; + + // Clear container + container.innerHTML = ''; + + // Create emoji grid + const gridContainer = document.createElement('div'); + gridContainer.className = 'emoji-grid'; + + // Set a heading explaining the full library is shown + if (!filteredList || filteredList.length === window.emojiLibrary.EMOJI_LIST.length) { + const fullLibraryNote = document.createElement('div'); + fullLibraryNote.className = 'emoji-grid-note'; + fullLibraryNote.innerHTML = ' Showing all emojis. Use search to filter.'; + container.appendChild(fullLibraryNote); + } + + // Determine which list to use (filtered or full) + const emojisToShow = filteredList || window.emojiLibrary.EMOJI_LIST; + + // Add emojis to grid + emojisToShow.forEach(emoji => { + const emojiButton = document.createElement('button'); + emojiButton.className = 'emoji-button'; + emojiButton.innerHTML = emoji; + emojiButton.title = 'Click to select this emoji'; + emojiButton.addEventListener('click', () => { + if (typeof onEmojiSelect === 'function') { + onEmojiSelect(emoji); + } + }); + + gridContainer.appendChild(emojiButton); + }); + + container.appendChild(gridContainer); +};