308 lines
10 KiB
HTML
308 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CodeShare - Modern Pastebin</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
|
|
<!-- Highlight.js for syntax highlighting -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap">
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body data-theme="light">
|
|
<header>
|
|
<div class="container header-content">
|
|
<div class="logo">
|
|
<i class="fas fa-code"></i>
|
|
<span>CodeShare</span>
|
|
</div>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div class="editor-container">
|
|
<div class="editor-header">
|
|
<h2 id="pageTitle">Create New Paste</h2>
|
|
<div id="viewControls" style="display:none;">
|
|
<button class="btn btn-secondary" id="newPasteBtn">
|
|
<i class="fas fa-plus"></i> New Paste
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="editor-wrapper">
|
|
<div class="line-numbers" id="lineNumbers"></div>
|
|
<div class="editor-area">
|
|
<textarea id="editor" placeholder="Paste or type your code here..."></textarea>
|
|
<div class="viewer-area code-viewer" id="codeViewer">
|
|
<pre><code id="highlightedCode"></code></pre>
|
|
</div>
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons" id="actionButtons">
|
|
<button class="btn btn-primary" id="saveBtn">
|
|
<i class="fas fa-save"></i> Save Paste
|
|
</button>
|
|
</div>
|
|
|
|
<div class="url-container" id="urlContainer">
|
|
<div class="url-display" id="urlDisplay"></div>
|
|
<button class="copy-btn" id="copyBtn">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="toast" id="toast">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span id="toastMessage"></span>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 CodeShare. A modern pastebin application.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// API Endpoint (adjust based on your server settings)
|
|
const baseUrl = window.location.origin;
|
|
const API_BASE_URL = baseUrl + '/api';
|
|
|
|
// Theme toggle functionality
|
|
$('#themeToggle').on('click', function() {
|
|
const currentTheme = $('body').attr('data-theme');
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
$('body').attr('data-theme', newTheme);
|
|
|
|
// Update icon
|
|
if (newTheme === 'dark') {
|
|
$(this).html('<i class="fas fa-sun"></i>');
|
|
} else {
|
|
$(this).html('<i class="fas fa-moon"></i>');
|
|
}
|
|
|
|
// Store preference
|
|
localStorage.setItem('theme', newTheme);
|
|
});
|
|
|
|
// Check for saved theme preference
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
$('body').attr('data-theme', savedTheme);
|
|
if (savedTheme === 'dark') {
|
|
$('#themeToggle').html('<i class="fas fa-sun"></i>');
|
|
}
|
|
}
|
|
|
|
// Line numbers functionality
|
|
function updateLineNumbers() {
|
|
const text = $('#editor').val();
|
|
const lines = text.split('\n');
|
|
const lineCount = lines.length;
|
|
|
|
let lineNumbersHtml = '';
|
|
for (let i = 1; i <= lineCount; i++) {
|
|
lineNumbersHtml += i + '<br>';
|
|
}
|
|
|
|
$('#lineNumbers').html(lineNumbersHtml);
|
|
}
|
|
|
|
// Update line numbers on input
|
|
$('#editor').on('input scroll keyup', function() {
|
|
updateLineNumbers();
|
|
// Sync scroll position between textarea and line numbers
|
|
$('#lineNumbers').scrollTop($(this).scrollTop());
|
|
});
|
|
|
|
// Initialize line numbers
|
|
updateLineNumbers();
|
|
|
|
// Save paste functionality
|
|
$('#saveBtn').on('click', function() {
|
|
const content = $('#editor').val();
|
|
|
|
if (!content.trim()) {
|
|
showToast('Please enter some content first!', 'warning');
|
|
return;
|
|
}
|
|
|
|
$('#loadingOverlay').fadeIn(200);
|
|
|
|
$.ajax({
|
|
url: `${API_BASE_URL}/pastes`,
|
|
method: 'POST',
|
|
data: content,
|
|
contentType: 'text/plain',
|
|
success: function(response) {
|
|
const pasteUrl = `${window.location.origin}${window.location.pathname}?id=${response.id}`;
|
|
$('#urlDisplay').text(pasteUrl);
|
|
$('#urlContainer').fadeIn();
|
|
showToast('Paste created successfully!', 'success');
|
|
|
|
// Update URL without reloading page
|
|
history.pushState({}, '', `?id=${response.id}`);
|
|
|
|
// Copy to clipboard automatically
|
|
copyToClipboard(pasteUrl);
|
|
},
|
|
error: function(xhr) {
|
|
console.error('Error creating paste:', xhr);
|
|
showToast('Failed to create paste. Please try again.', 'error');
|
|
},
|
|
complete: function() {
|
|
$('#loadingOverlay').fadeOut(200);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Copy URL functionality
|
|
$('#copyBtn').on('click', function() {
|
|
const url = $('#urlDisplay').text();
|
|
copyToClipboard(url);
|
|
});
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text)
|
|
.then(function() {
|
|
showToast('URL copied to clipboard!', 'success');
|
|
})
|
|
.catch(function(err) {
|
|
console.error('Failed to copy: ', err);
|
|
showToast('Failed to copy URL.', 'error');
|
|
});
|
|
}
|
|
|
|
// Toast notification
|
|
function showToast(message, type = 'info') {
|
|
let icon = 'fa-info-circle';
|
|
|
|
switch(type) {
|
|
case 'success':
|
|
icon = 'fa-check-circle';
|
|
break;
|
|
case 'error':
|
|
icon = 'fa-exclamation-circle';
|
|
break;
|
|
case 'warning':
|
|
icon = 'fa-exclamation-triangle';
|
|
break;
|
|
}
|
|
|
|
$('#toast').html(`<i class="fas ${icon}"></i><span>${message}</span>`);
|
|
$('#toast').addClass('show');
|
|
|
|
setTimeout(function() {
|
|
$('#toast').removeClass('show');
|
|
}, 3000);
|
|
}
|
|
|
|
// Check for paste ID in URL
|
|
function getParameterByName(name) {
|
|
const url = window.location.href;
|
|
name = name.replace(/[\[\]]/g, '\\$&');
|
|
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
|
|
const results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return '';
|
|
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
|
}
|
|
|
|
const pasteId = getParameterByName('id');
|
|
|
|
if (pasteId) {
|
|
// We're viewing an existing paste
|
|
$('#pageTitle').text('Viewing Paste');
|
|
$('#editor').hide();
|
|
$('#codeViewer').show();
|
|
$('#actionButtons').hide();
|
|
$('#viewControls').show();
|
|
|
|
$('#loadingOverlay').fadeIn(200);
|
|
|
|
$.ajax({
|
|
url: `${API_BASE_URL}/pastes/${pasteId}`,
|
|
method: 'GET',
|
|
success: function(response) {
|
|
const code = response;
|
|
|
|
// Clear any existing content first
|
|
$('#highlightedCode').empty();
|
|
|
|
// Use .text() to safely set the content without HTML interpretation
|
|
$('#highlightedCode').text(code);
|
|
|
|
// Apply syntax highlighting
|
|
hljs.highlightAll();
|
|
|
|
// Update line numbers for the viewer
|
|
const lines = code.split('\n');
|
|
const lineCount = lines.length;
|
|
|
|
let lineNumbersHtml = '';
|
|
for (let i = 1; i <= lineCount; i++) {
|
|
lineNumbersHtml += i + '<br>';
|
|
}
|
|
|
|
$('#lineNumbers').html(lineNumbersHtml);
|
|
},
|
|
error: function(xhr) {
|
|
console.error('Error fetching paste:', xhr);
|
|
showToast('Failed to load paste. It may have expired.', 'error');
|
|
// Redirect to new paste creation after a delay
|
|
setTimeout(function() {
|
|
window.location.href = window.location.pathname;
|
|
}, 2000);
|
|
},
|
|
complete: function() {
|
|
$('#loadingOverlay').fadeOut(200);
|
|
}
|
|
});
|
|
}
|
|
|
|
// New paste button
|
|
$('#newPasteBtn').on('click', function() {
|
|
window.location.href = window.location.pathname;
|
|
});
|
|
|
|
// Handle tab key in textarea
|
|
$('#editor').on('keydown', function(e) {
|
|
if (e.key === 'Tab') {
|
|
e.preventDefault();
|
|
const start = this.selectionStart;
|
|
const end = this.selectionEnd;
|
|
|
|
// Insert tab character
|
|
this.value = this.value.substring(0, start) + ' ' + this.value.substring(end);
|
|
|
|
// Move cursor position
|
|
this.selectionStart = this.selectionEnd = start + 4;
|
|
|
|
// Update line numbers
|
|
updateLineNumbers();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |