Code Editor - Finesse code editor

HTML

CSS

JavaScript

HTML Ctrl+Space for cursor suggestions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor-Aware Suggestions Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 2.5rem;
        }
        
        .demo-section {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            padding: 30px;
            margin: 30px 0;
        }
        
        .instructions {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }
        
        .instructions h3 {
            color: #4ec9b0;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .instructions ul {
            list-style: none;
            padding-left: 0;
        }
        
        .instructions li {
            margin-bottom: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .instructions li i {
            color: #4ec9b0;
            width: 20px;
        }
        
        .btn {
            background: #4ec9b0;
            color: #1e1e1e;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            margin: 10px;
        }
        
        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(78, 201, 176, 0.4);
        }
        
        #output {
            margin-top: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            min-height: 60px;
            font-size: 1.1rem;
        }
        
        .cursor-info {
            background: rgba(78, 201, 176, 0.2);
            border: 2px solid #4ec9b0;
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: center;
            font-family: monospace;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .btn {
                width: 100%;
                margin: 5px 0;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
                <h1><i class="fas fa-code"></i> Hello, Welcome to Finesse Code Studio</h1>
        
        <div class="instructions">
            <h3><i class="fas fa-info-circle"></i> How Suggestions Work:</h3>
            <ul>
                <li><i class="fas fa-keyboard"></i> <strong>Press Ctrl+Space</strong> anywhere in the code</li>
                <li><i class="fas fa-mouse-pointer"></i> <strong>Suggestions appear at cursor</strong> position</li>
                <li><i class="fas fa-arrow-up"></i> <strong>Use Arrow Keys</strong> to navigate suggestions</li>
                <li><i class="fas fa-enter"></i> <strong>Press Enter</strong> to insert selected suggestion</li>
                <li><i class="fas fa-escape"></i> <strong>Press Escape</strong> to close suggestions</li>
            </ul>
        </div>
        
        <div class="demo-section">
            <h3><i class="fas fa-code"></i> Try These Code Patterns:</h3>
            
            <div class="cursor-info">
                <p>Place cursor after any tag and press Ctrl+Space</p>
                <p>Try: <div>| (press Ctrl+Space at | position)</p>
            </div>
            
            <div class="buttons">
                <button class="btn" onclick="showMessage('Cursor suggestions are working!')">
                    <i class="fas fa-check"></i> Test Function
                </button>
                
                <button class="btn" onclick="changeTheme()">
                    <i class="fas fa-palette"></i> Change Theme
                </button>
            </div>
            
            <div id="output">
                Click buttons to test functionality
            </div>
        </div>
        
        <div class="instructions">
            <h3><i class="fas fa-lightbulb"></i> Smart Features:</h3>
            <ul>
                <li><i class="fas fa-bolt"></i> <strong>Context-aware:</strong> Suggestions change based on cursor position</li>
                <li><i class="fas fa-language"></i> <strong>Language-specific:</strong> Different suggestions for HTML, CSS, JS</li>
                <li><i class="fas fa-magic"></i> <strong>Intelligent:</strong> Detects if you're typing tags, attributes, or values</li>
                <li><i class="fas fa-expand-alt"></i> <strong>Position-aware:</strong> Always appears near cursor, never off-screen</li>
            </ul>
        </div>
    </div>
    
    <script>
        function showMessage(text) {
            const output = document.getElementById('output');
            output.innerHTML = `<i class="fas fa-check-circle"></i> ${text}`;
            output.style.color = '#4ec9b0';
            
            setTimeout(() => {
                output.style.color = 'white';
            }, 1000);
        }
        
        function changeTheme() {
            const colors = [
                'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
                'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
            ];
            
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            document.body.style.background = randomColor;
            showMessage('Theme changed! Try cursor suggestions again.');
        }
        
        // Initial message
        setTimeout(() => {
            showMessage('Place cursor in code editor and press Ctrl+Space!');
        }, 1000);
    </script>
</body>
</html>

/* Additional CSS for cursor suggestions demo */

/* Highlight animation for cursor position */
@keyframes cursorPulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.7; }
    100% { opacity: 0.3; }
}

.cursor-highlight {
    position: absolute;
    background: rgba(78, 201, 176, 0.3);
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
    animation: cursorPulse 2s infinite;
}

/* Suggestion item animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.suggestion-item {
    animation: slideIn 0.2s ease-out;
}

.suggestion-item:nth-child(2) { animation-delay: 0.05s; }
.suggestion-item:nth-child(3) { animation-delay: 0.1s; }
.suggestion-item:nth-child(4) { animation-delay: 0.15s; }
.suggestion-item:nth-child(5) { animation-delay: 0.2s; }

/* Scrollbar styling for suggestions */
.cursor-suggestions::-webkit-scrollbar {
    width: 8px;
}

.cursor-suggestions::-webkit-scrollbar-track {
    background: #2d2d2d;
    border-radius: 4px;
}

.cursor-suggestions::-webkit-scrollbar-thumb {
    background: #4ec9b0;
    border-radius: 4px;
}

.cursor-suggestions::-webkit-scrollbar-thumb:hover {
    background: #3db39a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cursor-suggestions {
        max-width: 90vw;
    }
    
    .suggestion-item {
        padding: 12px 15px;
    }
}

/* Print styles */
@media print {
    .cursor-suggestions {
        display: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .suggestion-item:hover {
        outline: 2px solid white;
    }
    
    .suggestion-item.selected {
        outline: 2px solid #4ec9b0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cursor-highlight,
    .suggestion-item {
        animation: none;
    }
}

/* Focus states for accessibility */
.suggestion-item:focus {
    outline: 2px solid #4ec9b0;
    outline-offset: -2px;
}

/* Loading state for suggestions */
.suggestions-loading {
    padding: 20px;
    text-align: center;
    color: #888;
}

.suggestions-loading i {
    margin-right: 8px;
    color: #4ec9b0;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

// JavaScript for cursor suggestions demo

// Enhanced message function with cursor position logging
function showMessage(text) {
    const output = document.getElementById('output');
    const cursorInfo = getCursorInfo();
    
    output.innerHTML = `
        <div style="margin-bottom: 10px;">
            <i class="fas fa-check-circle"></i> ${text}
        </div>
        <div style="font-size: 0.9rem; opacity: 0.8;">
            <i class="fas fa-mouse-pointer"></i> Cursor: Line ${cursorInfo.line}, Column ${cursorInfo.column}
        </div>
    `;
    output.style.color = '#4ec9b0';
    
    // Log to console
    console.log(`Message: ${text}`);
    console.log(`Cursor position: Line ${cursorInfo.line}, Column ${cursorInfo.column}`);
    
    setTimeout(() => {
        output.style.color = 'white';
    }, 1500);
}

// Simulate cursor position detection
function getCursorInfo() {
    // In a real editor, this would get actual cursor position
    // For demo, we simulate random positions
    return {
        line: Math.floor(Math.random() * 20) + 1,
        column: Math.floor(Math.random() * 40) + 1
    };
}

// Enhanced theme change with cursor feedback
function changeTheme() {
    const themes = [
        { name: "Ocean Blue", gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" },
        { name: "Sunset", gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" },
        { name: "Sky", gradient: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" },
        { name: "Nature", gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" },
        { name: "Sunrise", gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)" }
    ];
    
    const theme = themes[Math.floor(Math.random() * themes.length)];
    document.body.style.background = theme.gradient;
    
    showMessage(`Theme changed to "${theme.name}"! Try Ctrl+Space at cursor position.`);
}

// Demo for cursor-aware features
function demonstrateCursorFeatures() {
    const features = [
        "Suggestions appear exactly where your cursor is",
        "Different suggestions for different contexts",
        "Use arrow keys to navigate suggestions",
        "Press Enter to insert at cursor",
        "Suggestions adjust based on surrounding code"
    ];
    
    let currentFeature = 0;
    
    const featureInterval = setInterval(() => {
        if (currentFeature < features.length) {
            showMessage(features[currentFeature]);
            currentFeature++;
        } else {
            clearInterval(featureInterval);
            showMessage("All cursor features demonstrated!");
        }
    }, 2000);
}

// Keyboard shortcut simulation
document.addEventListener('keydown', function(e) {
    // Simulate Ctrl+Space for demo page
    if (e.ctrlKey && e.key === ' ') {
        e.preventDefault();
        const cursorInfo = getCursorInfo();
        showMessage(`Ctrl+Space pressed! Suggestions would appear at Line ${cursorInfo.line}, Column ${cursorInfo.column}`);
    }
    
    // Simulate arrow key navigation
    if (e.key.startsWith('Arrow')) {
        const directions = {
            'ArrowUp': 'up',
            'ArrowDown': 'down',
            'ArrowLeft': 'left',
            'ArrowRight': 'right'
        };
        
        if (directions[e.key]) {
            const cursorInfo = getCursorInfo();
            console.log(`Cursor moved ${directions[e.key]} to Line ${cursorInfo.line}, Column ${cursorInfo.column}`);
        }
    }
    
    // Simulate Enter to insert
    if (e.key === 'Enter' && e.ctrlKey) {
        e.preventDefault();
        showMessage('Enter pressed! Suggestion inserted at cursor position.');
    }
    
    // Simulate Escape to close
    if (e.key === 'Escape') {
        showMessage('Escape pressed! Suggestions closed.');
    }
});

// Initialize demo
console.log('Cursor-aware suggestions demo loaded');
console.log('Try Ctrl+Space in the code editor for context-aware suggestions!');

// Export demo functions
window.demoFunctions = {
    showMessage,
    changeTheme,
    demonstrateCursorFeatures,
    getCursorInfo
};

// Add click handlers to demonstrate cursor positions
document.querySelectorAll('.cursor-info, .instructions li').forEach(element => {
    element.style.cursor = 'pointer';
    element.addEventListener('click', function() {
        const cursorInfo = getCursorInfo();
        showMessage(`Cursor simulation: Line ${cursorInfo.line}, Column ${cursorInfo.column}`);
    });
});

Code Suggestions ↑↓ to navigate, Enter to insert