Initial working state
This commit is contained in:
308
public/index.html
Normal file
308
public/index.html
Normal file
@ -0,0 +1,308 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user