-
Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I’m not talking about slow Wi-Fi or forced software updates. I’m talking about something far more insidious, something we’ve been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options.
The Physical Toll: Let’s start with the biomechanical nightmare. Right-clicking demands precision. It’s not just clicking anywhere; it’s clicking right. What if your finger twitches? What if the mouse doesn’t register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day? diff --git a/text-seleciton.css b/text-selection.css similarity index 100% rename from text-seleciton.css rename to text-selection.css From b29ca4d79e178f7eec21d0e1b1c8bbf6d158cfa2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 13 Jan 2026 17:47:10 +0000 Subject: [PATCH 3/5] Enhance demo with modern, professional design Co-authored-by: nodered <18429021+nodered@users.noreply.github.com> --- floating-menu.css | 164 ++++++++++++++----- index.html | 139 ++++++++++------ index.html.backup | 82 ++++++++++ text-selection.css | 385 ++++++++++++++++++++++++++++++++++++++------- 4 files changed, 620 insertions(+), 150 deletions(-) create mode 100644 index.html.backup diff --git a/floating-menu.css b/floating-menu.css index 0633b25..ac7ef3e 100644 --- a/floating-menu.css +++ b/floating-menu.css @@ -1,39 +1,125 @@ -/* Styles for the floating menu */ -#floating-menu { - position: absolute; - display: none; /* Initial state is hidden */ - background: var(--floating-menu-bg-color, #2d2d2d); /* Changed to use background shorthand */ - background-color: var(--floating-menu-bg-color, #2d2d2d) !important; - border: var(--floating-menu-border, 1px solid #404040); - border-radius: var(--floating-menu-border-radius, 20px); - padding: var(--floating-menu-padding, 8px 12px); - box-shadow: var(--floating-menu-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.3)); - z-index: 1000; -} - -/* Position the floating menu at the bottom center of the text area */ -#floating-menu.show { - display: flex; /* Show with flex when .show class is applied */ - justify-content: center; /* Center the buttons horizontally */ - left: 50%; - transform: translateX(-50%); - top: calc(100% + 10px); /* 10px offset for spacing */ - background: var(--floating-menu-bg-color, #2d2d2d); /* Added to ensure consistency */ - background-color: var(--floating-menu-bg-color, #2d2d2d) !important; -} - -/* Styles for the buttons inside the floating menu */ -#floating-menu button { - margin: var(--floating-menu-button-margin, 0 5px); /* Horizontal margin between buttons */ - padding: var(--floating-menu-button-padding, 6px 12px); - background-color: var(--floating-menu-button-bg-color, #404040); - color: var(--floating-menu-button-color, #e0e0e0); - border: none; - border-radius: var(--floating-menu-button-border-radius, 15px); - cursor: pointer; -} - -/* Hover effect for the buttons */ -#floating-menu button:hover { - background-color: var(--floating-menu-button-hover-bg-color, #505050); -} +/* Floating Menu - Modern Design */ +#floating-menu { + position: absolute; + display: none; + background: linear-gradient(135deg, rgba(26, 26, 46, 0.98) 0%, rgba(22, 33, 62, 0.98) 100%); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(108, 99, 255, 0.3); + border-radius: 24px; + padding: 10px 16px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 99, 255, 0.1); + z-index: 1000; + transition: opacity 0.2s ease, transform 0.2s ease; + opacity: 0; + transform: translateY(10px); +} + +#floating-menu.show { + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + left: 50%; + transform: translateX(-50%) translateY(0); + opacity: 1; + animation: slideUp 0.3s ease-out; +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateX(-50%) translateY(10px); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} + +/* Button Styles */ +#floating-menu button { + margin: 0; + padding: 10px 18px; + background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%); + color: #ffffff; + border: none; + border-radius: 18px; + cursor: pointer; + font-size: 0.9rem; + font-weight: 600; + transition: all 0.2s ease; + box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3); + white-space: nowrap; + position: relative; + overflow: hidden; +} + +#floating-menu button::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); + opacity: 0; + transition: opacity 0.2s ease; +} + +#floating-menu button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(108, 99, 255, 0.5); +} + +#floating-menu button:hover::before { + opacity: 1; +} + +#floating-menu button:active { + transform: translateY(0); + box-shadow: 0 2px 6px rgba(108, 99, 255, 0.4); +} + +/* Special styling for Clear All button */ +#floating-menu button:last-child { + background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); +} + +#floating-menu button:last-child:hover { + box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5); +} + +/* Special styling for placeholder buttons */ +#floating-menu button:nth-child(2), +#floating-menu button:nth-child(3) { + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); + min-width: 45px; + padding: 10px 14px; + box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); +} + +#floating-menu button:nth-child(2):hover, +#floating-menu button:nth-child(3):hover { + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5); +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + #floating-menu { + padding: 8px 12px; + border-radius: 20px; + } + + #floating-menu button { + padding: 8px 14px; + font-size: 0.85rem; + } + + #floating-menu button:nth-child(2), + #floating-menu button:nth-child(3) { + min-width: 40px; + padding: 8px 12px; + } +} diff --git a/index.html b/index.html index 52fe0ba..c5e8213 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,89 @@ - - -
- - -Select and Deselect sentences and words by clicking on them.
-Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I’m not talking about slow Wi-Fi or forced software updates. I’m talking about something far more insidious, something we’ve been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options. -
-The Physical Toll: Let’s start with the biomechanical nightmare. Right-clicking demands precision. It’s not just clicking anywhere; it’s clicking right. What if your finger twitches? What if the mouse doesn’t register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day? -
-The Psychological Burden: The contextual menu, with its cascade of choices, represents the Pandora’s box of digital existence. Copy, paste, open in new tab, inspect element—inspect element? What does that even mean? And why does “delete” always sit perilously close to “rename”? It’s a minefield of potential disaster, one that leaves the user in a state of constant, low-grade anxiety. -
-- The Time Sink: In the split second it takes for the contextual menu to appear, valuable milliseconds of our lives are lost. Multiply that by the number of right-clicks in a day, a week, a lifetime. How many sunsets missed? How many fleeting moments of joy sacrificed? Right-clicking is not just a waste of time; it’s a thief of human potential. -
-Interactive Text Selection for AI-Powered Workflows
+Select and deselect sentences and words by clicking on them.
+Select a sentence
+Select individual words
+Clear sentence selections
+Send to LLM/Chatbot
+Click on sentences and words below to build your context
+Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I'm not talking about slow Wi-Fi or forced software updates. I'm talking about something far more insidious, something we've been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options. +
+The Physical Toll: Let's start with the biomechanical nightmare. Right-clicking demands precision. It's not just clicking anywhere; it's clicking right. What if your finger twitches? What if the mouse doesn't register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day? +
+The Psychological Burden: The contextual menu, with its cascade of choices, represents the Pandora's box of digital existence. Copy, paste, open in new tab, inspect element—inspect element? What does that even mean? And why does "delete" always sit perilously close to "rename"? It's a minefield of potential disaster, one that leaves the user in a state of constant, low-grade anxiety. +
+The Time Sink: In the split second it takes for the contextual menu to appear, valuable milliseconds of our lives are lost. Multiply that by the number of right-clicks in a day, a week, a lifetime. How many sunsets missed? How many fleeting moments of joy sacrificed? Right-clicking is not just a waste of time; it's a thief of human potential. +
+Your selections are formatted and ready to use
+Interactive Text Selection for AI-Powered Workflows
+Select and deselect sentences and words by clicking on them.
+Select a sentence
+Select individual words
+Clear sentence selections
+Send to LLM/Chatbot
+Click on sentences and words below to build your context
+Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I’m not talking about slow Wi-Fi or forced software updates. I’m talking about something far more insidious, something we’ve been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options. +
+The Physical Toll: Let’s start with the biomechanical nightmare. Right-clicking demands precision. It’s not just clicking anywhere; it’s clicking right. What if your finger twitches? What if the mouse doesn’t register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day? +
+The Psychological Burden: The contextual menu, with its cascade of choices, represents the Pandora’s box of digital existence. Copy, paste, open in new tab, inspect element—inspect element? What does that even mean? And why does “delete” always sit perilously close to “rename”? It’s a minefield of potential disaster, one that leaves the user in a state of constant, low-grade anxiety. +
++ The Time Sink: In the split second it takes for the contextual menu to appear, valuable milliseconds of our lives are lost. Multiply that by the number of right-clicks in a day, a week, a lifetime. How many sunsets missed? How many fleeting moments of joy sacrificed? Right-clicking is not just a waste of time; it’s a thief of human potential. +
+Interactive Text Selection for AI-Powered Workflows
-Select and deselect sentences and words by clicking on them.
-Select a sentence
-Select individual words
-Clear sentence selections
-Send to LLM/Chatbot
-Click on sentences and words below to build your context
-Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I’m not talking about slow Wi-Fi or forced software updates. I’m talking about something far more insidious, something we’ve been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options. -
-The Physical Toll: Let’s start with the biomechanical nightmare. Right-clicking demands precision. It’s not just clicking anywhere; it’s clicking right. What if your finger twitches? What if the mouse doesn’t register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day? -
-The Psychological Burden: The contextual menu, with its cascade of choices, represents the Pandora’s box of digital existence. Copy, paste, open in new tab, inspect element—inspect element? What does that even mean? And why does “delete” always sit perilously close to “rename”? It’s a minefield of potential disaster, one that leaves the user in a state of constant, low-grade anxiety. -
-- The Time Sink: In the split second it takes for the contextual menu to appear, valuable milliseconds of our lives are lost. Multiply that by the number of right-clicks in a day, a week, a lifetime. How many sunsets missed? How many fleeting moments of joy sacrificed? Right-clicking is not just a waste of time; it’s a thief of human potential. -
-