532 lines
19 KiB
HTML
532 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PasteBoard - Simple Code Sharing</title>
|
|
<!-- Highlight.js for syntax highlighting -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
|
|
<!-- Load common languages -->
|
|
<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/python.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/css.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
|
|
<style>
|
|
:root {
|
|
/* Light theme variables */
|
|
--bg-color: #f8f9fa;
|
|
--text-color: #212529;
|
|
--editor-bg: #ffffff;
|
|
--line-number-bg: #f1f3f5;
|
|
--line-number-color: #868e96;
|
|
--header-bg: #ffffff;
|
|
--border-color: #dee2e6;
|
|
--btn-bg: #e9ecef;
|
|
--btn-hover: #ced4da;
|
|
--accent-color: #228be6;
|
|
--notification-bg: #d3f9d8;
|
|
--notification-text: #2b8a3e;
|
|
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
/* Dark theme variables */
|
|
--bg-color: #212529;
|
|
--text-color: #f8f9fa;
|
|
--editor-bg: #343a40;
|
|
--line-number-bg: #2b3035;
|
|
--line-number-color: #adb5bd;
|
|
--header-bg: #343a40;
|
|
--border-color: #495057;
|
|
--btn-bg: #495057;
|
|
--btn-hover: #6c757d;
|
|
--accent-color: #74c0fc;
|
|
--notification-bg: #0b7285;
|
|
--notification-text: #e3fafc;
|
|
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--header-bg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1rem 0;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.control-btn {
|
|
background-color: var(--btn-bg);
|
|
border: none;
|
|
color: var(--text-color);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background-color: var(--btn-hover);
|
|
}
|
|
|
|
.theme-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-color);
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background-color: var(--btn-bg);
|
|
}
|
|
|
|
.editor-container {
|
|
display: flex;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: var(--editor-shadow);
|
|
background-color: var(--editor-bg);
|
|
height: calc(100vh - 200px);
|
|
min-height: 400px;
|
|
}
|
|
|
|
.line-numbers {
|
|
background-color: var(--line-number-bg);
|
|
color: var(--line-number-color);
|
|
padding: 1rem 0.5rem;
|
|
text-align: right;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 0.9rem;
|
|
min-width: 3.5rem;
|
|
user-select: none;
|
|
overflow-y: hidden;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.line-numbers div {
|
|
padding: 0 0.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
#editor, #viewer {
|
|
flex-grow: 1;
|
|
padding: 1rem;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 0.9rem;
|
|
background-color: var(--editor-bg);
|
|
color: var(--text-color);
|
|
border: none;
|
|
resize: none;
|
|
outline: none;
|
|
white-space: pre;
|
|
overflow-y: auto;
|
|
tab-size: 4;
|
|
line-height: 1.5rem;
|
|
height: 100%;
|
|
}
|
|
|
|
#viewer {
|
|
display: none;
|
|
}
|
|
|
|
.viewer-active #editor {
|
|
display: none;
|
|
}
|
|
|
|
.viewer-active #viewer {
|
|
display: block;
|
|
}
|
|
|
|
.notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 0.75rem 1.25rem;
|
|
background-color: var(--notification-bg);
|
|
color: var(--notification-text);
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s, opacity 0.3s;
|
|
transform: translateY(-10px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.notification.show {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: 1rem 0;
|
|
margin-top: 1.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--line-number-color);
|
|
}
|
|
|
|
.language-selector {
|
|
padding: 0.5rem;
|
|
background-color: var(--btn-bg);
|
|
color: var(--text-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* For mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.controls {
|
|
width: 100%;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.editor-container {
|
|
height: calc(100vh - 260px);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">PasteBoard</div>
|
|
<div class="controls">
|
|
<select class="language-selector" id="language-selector">
|
|
<option value="plaintext">Plain Text</option>
|
|
<option value="javascript" selected>JavaScript</option>
|
|
<option value="html">HTML</option>
|
|
<option value="css">CSS</option>
|
|
<option value="python">Python</option>
|
|
<option value="java">Java</option>
|
|
<option value="csharp">C#</option>
|
|
<option value="php">PHP</option>
|
|
<option value="ruby">Ruby</option>
|
|
<option value="go">Go</option>
|
|
<option value="rust">Rust</option>
|
|
<option value="swift">Swift</option>
|
|
<option value="kotlin">Kotlin</option>
|
|
</select>
|
|
<button class="control-btn" id="save-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
|
|
Save
|
|
</button>
|
|
<button class="control-btn" id="copy-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
|
Copy
|
|
</button>
|
|
<button class="control-btn" id="new-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
|
|
New
|
|
</button>
|
|
<button class="theme-toggle" id="theme-toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="moon-icon" style="display: none;"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="editor-container">
|
|
<div class="line-numbers" id="line-numbers">
|
|
<div>1</div>
|
|
</div>
|
|
<textarea id="editor" spellcheck="false" placeholder="Paste or type your code here..."></textarea>
|
|
<pre><code id="viewer" class="language-javascript"></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification" id="notification"></div>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>Pastes will be stored for 2 hours only.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// DOM Elements
|
|
const editor = document.getElementById('editor');
|
|
const viewer = document.getElementById('viewer');
|
|
const lineNumbers = document.getElementById('line-numbers');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const sunIcon = themeToggle.querySelector('.sun-icon');
|
|
const moonIcon = themeToggle.querySelector('.moon-icon');
|
|
const saveBtn = document.getElementById('save-btn');
|
|
const copyBtn = document.getElementById('copy-btn');
|
|
const newBtn = document.getElementById('new-btn');
|
|
const notification = document.getElementById('notification');
|
|
const languageSelector = document.getElementById('language-selector');
|
|
const editorContainer = document.querySelector('.editor-container');
|
|
|
|
// Initial theme setup
|
|
function setInitialTheme() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
setInitialTheme();
|
|
|
|
// Theme toggle
|
|
themeToggle.addEventListener('click', () => {
|
|
if (document.documentElement.getAttribute('data-theme') === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
localStorage.setItem('theme', 'light');
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
// Line numbers
|
|
function updateLineNumbers() {
|
|
const lineCount = editor.value.split('\n').length;
|
|
lineNumbers.innerHTML = '';
|
|
|
|
for (let i = 1; i <= lineCount; i++) {
|
|
const div = document.createElement('div');
|
|
div.textContent = i;
|
|
lineNumbers.appendChild(div);
|
|
}
|
|
}
|
|
|
|
// Handle editor input
|
|
editor.addEventListener('input', () => {
|
|
updateLineNumbers();
|
|
|
|
// Update viewer content with syntax highlighting
|
|
viewer.textContent = editor.value;
|
|
viewer.className = `language-${languageSelector.value}`;
|
|
hljs.highlightElement(viewer);
|
|
});
|
|
|
|
// Handle tab key in editor
|
|
editor.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
const start = editor.selectionStart;
|
|
const end = editor.selectionEnd;
|
|
|
|
// Insert tab at cursor position
|
|
editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end);
|
|
|
|
// Move cursor after the inserted tab
|
|
editor.selectionStart = editor.selectionEnd = start + 4;
|
|
|
|
// Update line numbers
|
|
updateLineNumbers();
|
|
}
|
|
});
|
|
|
|
// Save paste
|
|
saveBtn.addEventListener('click', async () => {
|
|
if (!editor.value.trim()) {
|
|
showNotification('Cannot save empty paste!', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/pastes', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'text/plain'
|
|
},
|
|
body: editor.value
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Add language as a hash parameter with query param format
|
|
const url = `${window.location.origin}/?id=${data.id}#${languageSelector.value}`;
|
|
navigator.clipboard.writeText(url);
|
|
showNotification('Paste saved! URL copied to clipboard.', 'success');
|
|
|
|
// Update URL without reloading the page
|
|
window.history.pushState({}, '', `/?id=${data.id}#${languageSelector.value}`);
|
|
|
|
// Switch to viewer mode
|
|
editorContainer.classList.add('viewer-active');
|
|
} else {
|
|
showNotification(`Error: ${data.error}`, 'error');
|
|
}
|
|
} catch (error) {
|
|
showNotification('Failed to save paste. Please try again.', 'error');
|
|
console.error('Save error:', error);
|
|
}
|
|
});
|
|
|
|
// Copy to clipboard
|
|
copyBtn.addEventListener('click', () => {
|
|
if (editorContainer.classList.contains('viewer-active')) {
|
|
navigator.clipboard.writeText(viewer.textContent);
|
|
} else {
|
|
navigator.clipboard.writeText(editor.value);
|
|
}
|
|
showNotification('Content copied to clipboard!', 'success');
|
|
});
|
|
|
|
// Create new paste
|
|
newBtn.addEventListener('click', () => {
|
|
editor.value = '';
|
|
updateLineNumbers();
|
|
window.history.pushState({}, '', '/'); // Reset URL to homepage
|
|
editorContainer.classList.remove('viewer-active');
|
|
languageSelector.value = 'javascript';
|
|
});
|
|
|
|
// Language change
|
|
languageSelector.addEventListener('change', () => {
|
|
if (editorContainer.classList.contains('viewer-active')) {
|
|
viewer.className = `language-${languageSelector.value}`;
|
|
hljs.highlightElement(viewer);
|
|
|
|
// Update URL hash
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const pasteId = urlParams.get('id');
|
|
if (pasteId) {
|
|
window.history.replaceState({}, '', `/?id=${pasteId}#${languageSelector.value}`);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Show notification
|
|
function showNotification(message, type = 'success') {
|
|
notification.textContent = message;
|
|
notification.className = 'notification show';
|
|
|
|
if (type === 'error') {
|
|
notification.style.backgroundColor = 'var(--error-bg, #fa5252)';
|
|
notification.style.color = 'var(--error-text, #fff5f5)';
|
|
} else {
|
|
notification.style.backgroundColor = 'var(--notification-bg)';
|
|
notification.style.color = 'var(--notification-text)';
|
|
}
|
|
|
|
setTimeout(() => {
|
|
notification.className = 'notification';
|
|
}, 3000);
|
|
}
|
|
|
|
// Load paste on page load
|
|
async function loadPasteFromUrl() {
|
|
// Get the id from query parameter instead of path
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const pasteId = urlParams.get('id');
|
|
|
|
if (pasteId) {
|
|
try {
|
|
const response = await fetch(`/api/pastes/${pasteId}`);
|
|
|
|
if (response.ok) {
|
|
const content = await response.text();
|
|
editor.value = content;
|
|
updateLineNumbers();
|
|
|
|
// Check for language in URL hash
|
|
const hash = window.location.hash.substring(1);
|
|
if (hash && document.querySelector(`option[value="${hash}"]`)) {
|
|
languageSelector.value = hash;
|
|
}
|
|
|
|
// Update viewer
|
|
viewer.textContent = content;
|
|
viewer.className = `language-${languageSelector.value}`;
|
|
hljs.highlightElement(viewer);
|
|
|
|
// Switch to viewer mode
|
|
editorContainer.classList.add('viewer-active');
|
|
} else {
|
|
showNotification('Paste not found or has expired.', 'error');
|
|
}
|
|
} catch (error) {
|
|
showNotification('Failed to load paste.', 'error');
|
|
console.error('Load error:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
updateLineNumbers();
|
|
loadPasteFromUrl();
|
|
hljs.highlightAll();
|
|
});
|
|
|
|
// Sync scroll between line numbers and editor
|
|
editor.addEventListener('scroll', () => {
|
|
lineNumbers.scrollTop = editor.scrollTop;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |