Skip to content

Polish demo: fix typos, improve HTML semantics, and add modern design #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nodered merged 5 commits into from
Jan 13, 2026
Merged

Polish demo: fix typos, improve HTML semantics, and add modern design #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c3ff6b
Initial plan
Copilot Jan 13, 2026
a5c8cda
Polish demo: fix typos, clean HTML structure, remove debug logs
Copilot Jan 13, 2026
b29ca4d
Enhance demo with modern, professional design
Copilot Jan 13, 2026
f1daa51
Remove backup file
Copilot Jan 13, 2026
4df07c3
Address code review feedback: fix selection override and improve brow…
Copilot Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 125 additions & 39 deletions floating-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, #1a1a2e 0%, #16213e 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;
}
}
3 changes: 0 additions & 3 deletions floating-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ class FloatingMenu {

// Append the menu to the document body
document.body.appendChild(menu);
console.log("Floating menu created");

return menu;
}
Expand All @@ -66,14 +65,12 @@ class FloatingMenu {
this.menu.style.top = `${textAreaRect.bottom + window.scrollY + 10}px`; // 10px offset for spacing
this.menu.classList.add("show");
this.menu.style.display = "block";
console.log(`Floating menu shown at (${this.menu.style.left}, ${this.menu.style.top})`);
}

hide() {
if (!this.menu) return;
this.menu.classList.remove("show");
this.menu.style.display = "none";
console.log("Floating menu hidden");
}
}

Expand Down
145 changes: 89 additions & 56 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Selection</title>
<!-- Link to the main stylesheet -->
<link rel="stylesheet" href="text-seleciton.css">
<!-- Link to the floating menu stylesheet -->
<link rel="stylesheet" href="floating-menu.css">
</head>
<body>
<!-- Directions for users -->
<div id="directions">
<h3>Context Builder ...</h3>
<h4>A lightweight library for interactive text selection, specifically designed for AI chatbot interaction.
</h4>
<p>Select and Deselect sentences and words by clicking on them.</p>
<ul>
<li>A single-click selects a sentence.</li>
<li>A single-click in a selected sentence will select individual words.</li>
<li>A double-click on a sentence will clear all selections in that sentence and the sentence itself.</li>
<li>The selected words and sentences will be displayed below.</li>
<li>The 'Add context' button will send the payload (JSON, comma seperated, etc) to the LLM/Chatbot.</li>
<li>Wrap payload with a prompt for best results.
</li>
</ul>
</div>
<p></p>
<p></p>
<!-- Container for the text area -->
<div id="text-area">
<p>
<h4>
This is the text-area for interactive text selection.
</h4>
</p>
<p>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.
</p>
<p>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?
</p>
<p>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.
</p>
<p>
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.
</p>
</div>
<!-- Container for the JSON output -->
<pre id="json-output"></pre>
<!-- Button to manually trigger the floating menu for testing -->
<!-- <button id="test-menu-button">Show Floating Menu</button> -->
<!-- Update script loading order -->
<script src="floating-menu.js"></script>
<script src="text-selection.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VectraSelect - Interactive Text Selection</title>
<!-- Link to the main stylesheet -->
<link rel="stylesheet" href="text-selection.css">
<!-- Link to the floating menu stylesheet -->
<link rel="stylesheet" href="floating-menu.css">
</head>
<body>
<div class="container">
<!-- Hero Section -->
<header class="hero">
<div class="hero-icon">✨</div>
<h1>VectraSelect</h1>
<p class="tagline">Interactive Text Selection for AI-Powered Workflows</p>
</header>

<!-- Directions Card -->
<div class="card instructions-card">
<h2>🎯 How It Works</h2>
<p class="lead">Select and deselect sentences and words by clicking on them.</p>
<div class="instructions-grid">
<div class="instruction-item">
<span class="instruction-icon">👆</span>
<div class="instruction-content">
<strong>Single Click</strong>
<p>Select a sentence</p>
</div>
</div>
<div class="instruction-item">
<span class="instruction-icon">🔤</span>
<div class="instruction-content">
<strong>Click in Selection</strong>
<p>Select individual words</p>
</div>
</div>
<div class="instruction-item">
<span class="instruction-icon">✌️</span>
<div class="instruction-content">
<strong>Double Click</strong>
<p>Clear sentence selections</p>
</div>
</div>
<div class="instruction-item">
<span class="instruction-icon">🤖</span>
<div class="instruction-content">
<strong>Add Context</strong>
<p>Send to LLM/Chatbot</p>
</div>
</div>
</div>
</div>

<!-- Text Selection Area -->
<div class="card text-selection-card">
<div class="card-header">
<h2>📝 Interactive Demo</h2>
<p class="card-subtitle">Click on sentences and words below to build your context</p>
</div>
<div id="text-area">
<p>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.
</p>
<p>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?
</p>
<p>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.
</p>
<p>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.
</p>
</div>
</div>

<!-- JSON Output Card -->
<div class="card output-card">
<div class="card-header">
<h2>📊 Selected Context</h2>
<p class="card-subtitle">Your selections are formatted and ready to use</p>
</div>
<pre id="json-output"></pre>
</div>
</div>

<!-- Update script loading order -->
<script src="floating-menu.js"></script>
<script src="text-selection.js"></script>
</body>
</html>
61 changes: 0 additions & 61 deletions text-seleciton.css
View file
Open in desktop

This file was deleted.

Loading