Last active
June 18, 2025 06:03
-
-
Save Albatrosicks/7ca4c0f9cc739195603b259fb3970754 to your computer and use it in GitHub Desktop.
Context menu to show/hide email input overlay
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Email Input Overlay | |
| // @namespace http://tampermonkey.net/ | |
| // @description Press Ctrl+Shift+L to show/hide email input overlay | |
| // @version 1.0 | |
| // @author Albatrosicks | |
| // @include * | |
| // @grant none | |
| // ==/UserScript== | |
| (function() { | |
| 'use strict'; | |
| let overlay = null; | |
| let isOverlayVisible = false; | |
| function createOverlay() { | |
| // Create overlay container | |
| overlay = document.createElement('div'); | |
| overlay.id = 'email-overlay-container'; | |
| overlay.style.cssText = ` | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| z-index: 999999; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| backdrop-filter: blur(3px); | |
| `; | |
| // Create email input container | |
| const inputContainer = document.createElement('div'); | |
| inputContainer.style.cssText = ` | |
| background: white; | |
| padding: 40px; | |
| border-radius: 15px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); | |
| min-width: 400px; | |
| max-width: 600px; | |
| width: 80%; | |
| position: relative; | |
| `; | |
| // Create close button | |
| const closeButton = document.createElement('button'); | |
| closeButton.innerHTML = '×'; | |
| closeButton.style.cssText = ` | |
| position: absolute; | |
| top: 15px; | |
| right: 20px; | |
| background: none; | |
| border: none; | |
| font-size: 28px; | |
| color: #999; | |
| cursor: pointer; | |
| line-height: 1; | |
| padding: 0; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| `; | |
| closeButton.addEventListener('mouseenter', () => { | |
| closeButton.style.backgroundColor = '#f0f0f0'; | |
| closeButton.style.color = '#333'; | |
| }); | |
| closeButton.addEventListener('mouseleave', () => { | |
| closeButton.style.backgroundColor = 'transparent'; | |
| closeButton.style.color = '#999'; | |
| }); | |
| closeButton.addEventListener('click', hideOverlay); | |
| // Create email input | |
| const emailInput = document.createElement('input'); | |
| emailInput.type = 'email'; | |
| emailInput.placeholder = 'Enter your email address...'; | |
| emailInput.style.cssText = ` | |
| width: 100%; | |
| padding: 20px; | |
| font-size: 18px; | |
| border: 2px solid #e1e5e9; | |
| border-radius: 8px; | |
| outline: none; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| transition: border-color 0.3s ease; | |
| box-sizing: border-box; | |
| `; | |
| // Add focus effect to input | |
| emailInput.addEventListener('focus', () => { | |
| emailInput.style.borderColor = '#007bff'; | |
| }); | |
| emailInput.addEventListener('blur', () => { | |
| emailInput.style.borderColor = '#e1e5e9'; | |
| }); | |
| // Handle Enter key in input | |
| emailInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| const email = emailInput.value.trim(); | |
| if (email) { | |
| // You can customize this action - for now it just shows an alert | |
| alert(`Email entered: ${email}`); | |
| hideOverlay(); | |
| } else { | |
| alert('Please enter a valid email address.'); | |
| } | |
| } | |
| }); | |
| // Assemble the elements | |
| inputContainer.appendChild(closeButton); | |
| inputContainer.appendChild(emailInput); | |
| overlay.appendChild(inputContainer); | |
| // Auto-focus the input when overlay is shown | |
| setTimeout(() => emailInput.focus(), 100); | |
| return overlay; | |
| } | |
| function showOverlay() { | |
| if (!overlay) { | |
| overlay = createOverlay(); | |
| } | |
| document.body.appendChild(overlay); | |
| isOverlayVisible = true; | |
| } | |
| function hideOverlay() { | |
| if (overlay && overlay.parentNode) { | |
| overlay.parentNode.removeChild(overlay); | |
| } | |
| isOverlayVisible = false; | |
| } | |
| function toggleOverlay() { | |
| if (isOverlayVisible) { | |
| hideOverlay(); | |
| } else { | |
| showOverlay(); | |
| } | |
| } | |
| // Handle ESC key | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape' && isOverlayVisible) { | |
| hideOverlay(); | |
| } | |
| }); | |
| // Handle Ctrl+Shift+L keyboard shortcut | |
| document.addEventListener('keydown', (e) => { | |
| if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'l') { | |
| e.preventDefault(); | |
| toggleOverlay(); | |
| } | |
| }); | |
| // Handle clicking outside the input container | |
| document.addEventListener('click', (e) => { | |
| if (isOverlayVisible && overlay && e.target === overlay) { | |
| hideOverlay(); | |
| } | |
| }); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment