devdunia/blank-page.html at main · echobash/devdunia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="images/logo.png">
    <link rel="apple-touch-icon" href="images/logo.png">
    <meta name="description" content="A blank full-page editor for writing, note-taking, and text preview. Perfect for drafting content, taking notes, or testing text formatting.">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
        }
    </style>
</head>
<body class="h-screen w-full" class="h-screen lg:ml-72">
    <!-- Background: Consistent Subtle Dark Gradient -->
    <div class="fixed inset-0 -z-10 bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900"></div>

    <!-- Full Page Editor -->
    <div class="h-screen w-full flex flex-col">

        <!-- Minimal Header -->
        <div class="bg-slate-800/70 backdrop-blur-md border-b border-slate-700/60 p-3 flex-shrink-0">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-500">
                        Blank Page
                    </h1>
                </div>
                <div class="flex items-center space-x-2">
                    <button id="clear-btn" class="px-3 py-1.5 bg-red-600/20 border border-red-500/30 rounded text-red-400 hover:bg-red-600/30 transition-colors duration-200 text-sm">
                        Clear
                    </button>
                    <button id="copy-btn" class="px-3 py-1.5 bg-blue-600/20 border border-blue-500/30 rounded text-blue-400 hover:bg-blue-600/30 transition-colors duration-200 text-sm">
                        Copy
                    </button>
                </div>
            </div>
        </div>

        <!-- Full Height Text Area -->
        <div class="flex-1 p-4">
            <textarea
                id="text-input"
                placeholder="Start writing your text here...

• Use this space for notes, drafts, or any text content
• Perfect for writing, editing, or testing text formatting
• Use the buttons above to clear or copy your content
• Press Ctrl/Cmd + S to copy your text quickly"
                class="w-full h-full bg-transparent text-white placeholder-gray-500 resize-none border-none outline-none text-base leading-relaxed"
                style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"
            ></textarea>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const textInput = document.getElementById('text-input');
            const clearBtn = document.getElementById('clear-btn');
            const copyBtn = document.getElementById('copy-btn');

            // Clear button
            clearBtn.addEventListener('click', function() {
                if (confirm('Are you sure you want to clear all text?')) {
                    textInput.value = '';
                    textInput.focus();
                }
            });

            // Copy button
            copyBtn.addEventListener('click', function() {
                const text = textInput.value;
                if (text.trim() === '') {
                    alert('No text to copy!');
                    return;
                }

                navigator.clipboard.writeText(text).then(() => {
                    // Visual feedback
                    const originalText = copyBtn.textContent;
                    copyBtn.textContent = 'Copied!';
                    copyBtn.classList.add('bg-green-600/20', 'border-green-500/30', 'text-green-400');
                    copyBtn.classList.remove('bg-blue-600/20', 'border-blue-500/30', 'text-blue-400');

                    setTimeout(() => {
                        copyBtn.textContent = originalText;
                        copyBtn.classList.remove('bg-green-600/20', 'border-green-500/30', 'text-green-400');
                        copyBtn.classList.add('bg-blue-600/20', 'border-blue-500/30', 'text-blue-400');
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy text: ', err);
                    alert('Failed to copy text. Please try again.');
                });
            });

            // Auto-focus on the textarea
            textInput.focus();

            // Handle keyboard shortcuts
            textInput.addEventListener('keydown', function(e) {
                // Ctrl/Cmd + A to select all
                if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
                    e.preventDefault();
                    textInput.select();
                }
                // Ctrl/Cmd + S to copy (since we don't have save functionality)
                if ((e.ctrlKey || e.metaKey) && e.key === 's') {
                    e.preventDefault();
                    copyBtn.click();
                }
            });
        });
    </script>
    <!-- Include Final Sidebar -->
    <div id="sidebar-container"></div>
    <script>
        // Load final_sidebar.html content
        fetch('final_sidebar.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('sidebar-container').innerHTML = html;
            })
            .catch(error => {
                console.error('Error loading sidebar:', error);
            });
    </script>
</body>
</html>