<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cutesy.me paste</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/lua.min.js"></script>
    <style>
        :root {
            --bg-dark: #0f172a;
            --bg-medium: #1e293b;
            --bg-light: #334155;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --accent-primary: #3b82f6;
            --accent-secondary: #6366f1;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, var(--bg-dark) 0%, #0f1623 100%);
            color: var(--text-primary);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 1rem;
        }

        .container {
            width: 100%;
            max-width: 800px;
            background-color: var(--bg-medium);
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
            color: white;
            padding: 1.5rem;
            text-align: center;
        }

        .content {
            padding: 2rem;
        }

        #paste-content {
            background-color: var(--bg-light);
            color: var(--text-primary);
            border: 2px solid var(--bg-light);
            transition: border-color 0.3s ease;
        }

        #paste-content:focus {
            border-color: var(--accent-primary);
            outline: none;
        }

        .btn-primary {
            background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary));
            transition: transform 0.2s ease;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        #paste-result {
            background-color: var(--bg-light);
            border-radius: 0.5rem;
            padding: 1rem;
        }

        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #10b981;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            display: none;
        }

        @media (max-width: 640px) {
            .container {
                width: 100%;
                margin: 0;
                border-radius: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="text-3xl font-bold">cutesy.me paste</h1>
        </div>
        <div class="content">
            <div id="create-paste-section">
                <textarea 
                    id="paste-content" 
                    class="w-full p-4 rounded-lg min-h-[300px] resize-y mb-4"
                    placeholder="Paste your code or text here..."
                ></textarea>
                
                <div class="flex justify-between items-center space-x-4">
                    <select 
                        id="syntax-highlight" 
                        class="p-2 rounded-md bg-slate-700 text-white"
                    >
                        <option value="">No Syntax Highlighting</option>
                        <option value="python">Python</option>
                        <option value="javascript">JavaScript</option>
                        <option value="html">HTML</option>
                        <option value="css">CSS</option>
                        <option value="lua">Lua</option>
                    </select>

                    <button 
                        id="create-paste-btn"
                        class="btn-primary text-white px-6 py-2 rounded-md"
                    >
                        Create Paste
                    </button>
                </div>
            </div>
            
            <div id="paste-result" class="mt-6 hidden">
                <div class="flex items-center">
                    <input 
                        type="text" 
                        id="paste-link" 
                        readonly 
                        class="flex-grow p-2 bg-slate-800 text-white mr-2 rounded-md"
                    >
                    <button 
                        id="copy-link-btn"
                        class="bg-green-500 text-white px-4 py-2 rounded-md"
                    >
                        Copy Link
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="toast" class="toast">Copied to clipboard!</div>

    <script>
        document.getElementById('create-paste-btn').addEventListener('click', () => {
            const contentElement = document.getElementById('paste-content');
            const syntaxHighlight = document.getElementById('syntax-highlight').value;
            const content = contentElement.value;

            if (!content.trim()) {
                alert('Please enter some content');
                return;
            }

            const pasteId = crypto.randomUUID();
            const pasteData = {
                content: sanitizeContent(content),
                syntax_highlight: syntaxHighlight,
                created_at: Date.now()
            };

            localStorage.setItem(pasteId, JSON.stringify(pasteData));

            const fullLink = `${window.location.origin}?paste=${pasteId}`;
            
            document.getElementById('paste-link').value = fullLink;
            document.getElementById('paste-result').classList.remove('hidden');
            document.getElementById('create-paste-section').classList.add('hidden');
        });

        document.getElementById('copy-link-btn').addEventListener('click', () => {
            const linkInput = document.getElementById('paste-link');
            navigator.clipboard.writeText(linkInput.value).then(() => {
                const toast = document.getElementById('toast');
                toast.style.display = 'block';
                setTimeout(() => {
                    toast.style.display = 'none';
                }, 2000);
            });
        });

        function sanitizeContent(content) {
            const div = document.createElement('div');
            div.textContent = content;
            return div.innerHTML;
        }

        function viewPaste(pasteId) {
            const pasteDataString = localStorage.getItem(pasteId);
            
            if (!pasteDataString) {
                alert('Paste not found or has been deleted');
                return;
            }

            const paste = JSON.parse(pasteDataString);

            const oneWeekAgo = Date.now() - (7 * 24 * 60 * 60 * 1000);
            if (paste.created_at < oneWeekAgo) {
                localStorage.removeItem(pasteId);
                alert('This paste has expired');
                return;
            }

            const viewContainer = document.createElement('div');
            viewContainer.className = 'mt-6 bg-slate-800 p-6 rounded-lg';
            
            const preElement = document.createElement('pre');
            preElement.className = `w-full p-4 rounded-lg bg-slate-900 overflow-x-auto ${paste.syntax_highlight ? `language-${paste.syntax_highlight}` : ''}`;
            preElement.innerHTML = paste.content;

            viewContainer.appendChild(preElement);
            document.querySelector('.container .content').appendChild(viewContainer);

            if (paste.syntax_highlight) {
                hljs.highlightElement(preElement);
            }

        }

        window.addEventListener('load', () => {
            const urlParams = new URLSearchParams(window.location.search);
            const pasteId = urlParams.get('paste');

            if (pasteId) {
                document.getElementById('create-paste-section').classList.add('hidden');
                document.getElementById('paste-result').classList.add('hidden');
                
                viewPaste(pasteId);
            }
        });
    </script>
</body>
</html>