Working state
This commit is contained in:
parent
7f3425b386
commit
d69b8aad67
414
public/index.css
414
public/index.css
@ -1,33 +1,35 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg-primary: #ffffff;
|
/* Light theme variables */
|
||||||
--bg-secondary: #f5f7fa;
|
--bg-color: #f8f9fa;
|
||||||
--text-primary: #333333;
|
--text-color: #212529;
|
||||||
--text-secondary: #666666;
|
--editor-bg: #ffffff;
|
||||||
--border-color: #e0e0e0;
|
--line-number-bg: #f1f3f5;
|
||||||
--accent-color: #4f46e5;
|
--line-number-color: #868e96;
|
||||||
--accent-hover: #4338ca;
|
--header-bg: #ffffff;
|
||||||
--line-numbers-bg: #f0f0f0;
|
--border-color: #dee2e6;
|
||||||
--line-numbers-text: #888888;
|
--btn-bg: #e9ecef;
|
||||||
--editor-bg: #f8f9fc;
|
--btn-hover: #ced4da;
|
||||||
--toast-bg: rgba(0, 0, 0, 0.8);
|
--accent-color: #228be6;
|
||||||
--toast-text: #ffffff;
|
--notification-bg: #d3f9d8;
|
||||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
--notification-text: #2b8a3e;
|
||||||
|
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme='dark'] {
|
||||||
--bg-primary: #1a1a1a;
|
/* Dark theme variables */
|
||||||
--bg-secondary: #252525;
|
--bg-color: #212529;
|
||||||
--text-primary: #e0e0e0;
|
--text-color: #f8f9fa;
|
||||||
--text-secondary: #a0a0a0;
|
--editor-bg: #343a40;
|
||||||
--border-color: #3a3a3a;
|
--line-number-bg: #2b3035;
|
||||||
--accent-color: #6366f1;
|
--line-number-color: #adb5bd;
|
||||||
--accent-hover: #818cf8;
|
--header-bg: #343a40;
|
||||||
--line-numbers-bg: #2a2a2a;
|
--border-color: #495057;
|
||||||
--line-numbers-text: #777777;
|
--btn-bg: #495057;
|
||||||
--editor-bg: #2d2d2d;
|
--btn-hover: #6c757d;
|
||||||
--toast-bg: rgba(255, 255, 255, 0.8);
|
--accent-color: #74c0fc;
|
||||||
--toast-text: #1a1a1a;
|
--notification-bg: #0b7285;
|
||||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
--notification-text: #e3fafc;
|
||||||
|
--editor-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@ -37,24 +39,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
background-color: var(--bg-primary);
|
background-color: var(--bg-color);
|
||||||
color: var(--text-primary);
|
color: var(--text-color);
|
||||||
transition: background-color 0.3s, color 0.3s;
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 20px;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: var(--bg-secondary);
|
background-color: var(--header-bg);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
padding: 15px 0;
|
padding: 1rem 0;
|
||||||
box-shadow: 0 1px 3px var(--shadow-color);
|
margin-bottom: 1.5rem;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
@ -64,318 +67,161 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo i {
|
.controls {
|
||||||
font-size: 1.75rem;
|
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 {
|
.theme-toggle {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
color: var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--text-secondary);
|
font-size: 1.2rem;
|
||||||
font-size: 1.25rem;
|
display: flex;
|
||||||
padding: 8px;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-toggle:hover {
|
.theme-toggle:hover {
|
||||||
background-color: var(--border-color);
|
background-color: var(--btn-bg);
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
padding: 30px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-container {
|
.editor-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
border-radius: 6px;
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-header h2 {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor-wrapper {
|
|
||||||
display: flex;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 2px 5px var(--shadow-color);
|
box-shadow: var(--editor-shadow);
|
||||||
position: relative;
|
background-color: var(--editor-bg);
|
||||||
height: 500px;
|
height: calc(100vh - 200px);
|
||||||
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line-numbers {
|
.line-numbers {
|
||||||
background-color: var(--line-numbers-bg);
|
background-color: var(--line-number-bg);
|
||||||
color: var(--line-numbers-text);
|
color: var(--line-number-color);
|
||||||
padding: 15px 10px;
|
padding: 1rem 0.5rem;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
user-select: none;
|
|
||||||
overflow-y: hidden;
|
|
||||||
min-width: 50px;
|
|
||||||
font-family: 'Fira Code', monospace;
|
font-family: 'Fira Code', monospace;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
min-width: 3.5rem;
|
||||||
|
user-select: none;
|
||||||
|
overflow-y: hidden;
|
||||||
border-right: 1px solid var(--border-color);
|
border-right: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-area {
|
.line-numbers div {
|
||||||
flex-grow: 1;
|
padding: 0 0.5rem;
|
||||||
position: relative;
|
height: 1.5rem;
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#editor {
|
#editor, #viewer {
|
||||||
width: 100%;
|
flex-grow: 1;
|
||||||
height: 100%;
|
padding: 1rem;
|
||||||
padding: 15px;
|
font-family: 'Fira Code', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
background-color: var(--editor-bg);
|
background-color: var(--editor-bg);
|
||||||
color: var(--text-primary);
|
color: var(--text-color);
|
||||||
border: none;
|
border: none;
|
||||||
resize: none;
|
resize: none;
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
tab-size: 4;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
white-space: pre;
|
||||||
|
overflow-y: auto;
|
||||||
.viewer-area {
|
tab-size: 4;
|
||||||
width: 100%;
|
line-height: 1.5rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 15px;
|
|
||||||
background-color: var(--editor-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
overflow: auto;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
white-space: pre;
|
|
||||||
tab-size: 4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-viewer {
|
#viewer {
|
||||||
white-space: pre;
|
display: none;
|
||||||
tab-size: 4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-viewer pre,
|
.viewer-active #editor {
|
||||||
.code-viewer code {
|
display: none;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
white-space: pre;
|
|
||||||
overflow-x: auto;
|
|
||||||
width: 100%;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ensure highlight.js doesn't add extra space */
|
.viewer-active #viewer {
|
||||||
.hljs {
|
display: block;
|
||||||
padding: 0 !important;
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.notification {
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: var(--accent-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background-color: var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 20px;
|
top: 20px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
padding: 12px 20px;
|
padding: 0.75rem 1.25rem;
|
||||||
background-color: var(--toast-bg);
|
background-color: var(--notification-bg);
|
||||||
color: var(--toast-text);
|
color: var(--notification-text);
|
||||||
border-radius: 6px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
transform: translateY(100px);
|
transition: transform 0.3s, opacity 0.3s;
|
||||||
|
transform: translateY(-10px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: all 0.3s;
|
pointer-events: none;
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast.show {
|
.notification.show {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-overlay {
|
.footer {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 100;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 5px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top-color: white;
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row; /* Ensure horizontal layout */
|
|
||||||
align-items: stretch; /* Make items same height */
|
|
||||||
margin-top: 20px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-display {
|
|
||||||
flex: 1; /* Take up available space */
|
|
||||||
padding: 12px 15px;
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-right: none; /* Remove right border to connect with button */
|
|
||||||
border-radius: 6px 0 0 6px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-btn {
|
|
||||||
flex: 0 0 auto; /* Don't grow or shrink */
|
|
||||||
padding: 12px 15px;
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0 6px 6px 0;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy-btn:hover {
|
|
||||||
background-color: var(--accent-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
padding: 20px 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--text-secondary);
|
padding: 1rem 0;
|
||||||
|
margin-top: 1.5rem;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
margin-top: 30px;
|
color: var(--line-number-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive adjustments */
|
.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) {
|
@media (max-width: 768px) {
|
||||||
.editor-wrapper {
|
.header-content {
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.controls {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom styling for highlight.js themes */
|
.editor-container {
|
||||||
[data-theme="light"] .hljs {
|
height: calc(100vh - 260px);
|
||||||
background: var(--editor-bg);
|
}
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] .hljs {
|
|
||||||
background: var(--editor-bg);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom scrollbar */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--border-color);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: var(--text-secondary);
|
|
||||||
}
|
}
|
||||||
@ -12,245 +12,21 @@
|
|||||||
<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/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/css.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js"></script>
|
||||||
<style>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/json.min.js"></script>
|
||||||
:root {
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
||||||
/* Light theme variables */
|
<script src="/index.js" type="text/javascript"></script>
|
||||||
--bg-color: #f8f9fa;
|
<link rel="stylesheet" href="/index.css">
|
||||||
--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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<div class="logo">PasteBoard</div>
|
<div><span class="logo">PasteBoard </span><small>by <a style="color:inherit;" href="https://github.com/Walzen665">Walzen665</a></small></div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<select class="language-selector" id="language-selector">
|
<select class="language-selector" id="language-selector">
|
||||||
<option value="plaintext">Plain Text</option>
|
<option value="plaintext">Plain Text</option>
|
||||||
<option value="javascript" selected>JavaScript</option>
|
<option value="javascript" selected>JavaScript</option>
|
||||||
|
<option value="json">JSON</option>
|
||||||
<option value="html">HTML</option>
|
<option value="html">HTML</option>
|
||||||
<option value="css">CSS</option>
|
<option value="css">CSS</option>
|
||||||
<option value="python">Python</option>
|
<option value="python">Python</option>
|
||||||
@ -301,232 +77,5 @@
|
|||||||
<p>Pastes will be stored for 2 hours only.</p>
|
<p>Pastes will be stored for 2 hours only.</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
288
public/index.js
Normal file
288
public/index.js
Normal file
@ -0,0 +1,288 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
// DOM Elements
|
||||||
|
const $editor = $('#editor');
|
||||||
|
const $viewer = $('#viewer');
|
||||||
|
const $lineNumbers = $('#line-numbers');
|
||||||
|
const $themeToggle = $('#theme-toggle');
|
||||||
|
const $sunIcon = $themeToggle.find('.sun-icon');
|
||||||
|
const $moonIcon = $themeToggle.find('.moon-icon');
|
||||||
|
const $saveBtn = $('#save-btn');
|
||||||
|
const $copyBtn = $('#copy-btn');
|
||||||
|
const $newBtn = $('#new-btn');
|
||||||
|
const $notification = $('#notification');
|
||||||
|
const $languageSelector = $('#language-selector');
|
||||||
|
const $editorContainer = $('.editor-container');
|
||||||
|
|
||||||
|
// Format JSON button
|
||||||
|
const $formatJsonBtn = $('<button>', {
|
||||||
|
class: 'control-btn',
|
||||||
|
id: 'format-json-btn',
|
||||||
|
html: `
|
||||||
|
<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="M21 3H3C1.89 3 1 3.89 1 5V19C1 20.11 1.89 21 3 21H21C22.11 21 23 20.11 23 19V5C23 3.89 22.11 3 21 3Z"></path><path d="M7 8L12 13L17 8"></path></svg>
|
||||||
|
Format JSON
|
||||||
|
`
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.controls').prepend($formatJsonBtn);
|
||||||
|
|
||||||
|
// Initial theme setup
|
||||||
|
function setInitialTheme() {
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||||
|
$('html').attr('data-theme', 'dark');
|
||||||
|
$sunIcon.hide();
|
||||||
|
$moonIcon.show();
|
||||||
|
} else {
|
||||||
|
$('html').attr('data-theme', 'light');
|
||||||
|
$sunIcon.show();
|
||||||
|
$moonIcon.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Line numbers
|
||||||
|
function updateLineNumbers() {
|
||||||
|
const lineCount = $editor.val().split('\n').length;
|
||||||
|
$lineNumbers.empty();
|
||||||
|
|
||||||
|
for (let i = 1; i <= lineCount; i++) {
|
||||||
|
$('<div>').text(i).appendTo($lineNumbers);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-detect JSON content
|
||||||
|
function detectContentType(content) {
|
||||||
|
try {
|
||||||
|
JSON.parse(content);
|
||||||
|
return 'json';
|
||||||
|
} catch (e) {
|
||||||
|
return $languageSelector.val() || 'javascript';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show notification
|
||||||
|
function showNotification(message, type = 'success') {
|
||||||
|
$notification.text(message).addClass('show');
|
||||||
|
|
||||||
|
if (type === 'error') {
|
||||||
|
$notification.css({
|
||||||
|
'background-color': 'var(--error-bg, #fa5252)',
|
||||||
|
'color': 'var(--error-text, #fff5f5)'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$notification.css({
|
||||||
|
'background-color': 'var(--notification-bg)',
|
||||||
|
'color': 'var(--notification-text)'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$notification.removeClass('show');
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load paste on page load
|
||||||
|
async function loadPasteFromUrl() {
|
||||||
|
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.val(content);
|
||||||
|
updateLineNumbers();
|
||||||
|
|
||||||
|
// Auto-detect JSON content
|
||||||
|
if (content.trim().startsWith('{') || content.trim().startsWith('[')) {
|
||||||
|
try {
|
||||||
|
JSON.parse(content);
|
||||||
|
$languageSelector.val('json');
|
||||||
|
} catch (e) {
|
||||||
|
// Not valid JSON, check URL hash or use default
|
||||||
|
const hash = window.location.hash.substring(1);
|
||||||
|
if (hash && $(`option[value="${hash}"]`).length) {
|
||||||
|
$languageSelector.val(hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Check for language in URL hash
|
||||||
|
const hash = window.location.hash.substring(1);
|
||||||
|
if (hash && $(`option[value="${hash}"]`).length) {
|
||||||
|
$languageSelector.val(hash);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update viewer
|
||||||
|
$viewer.text(content);
|
||||||
|
$viewer.attr('class', `language-${$languageSelector.val()}`);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
|
||||||
|
// Switch to viewer mode
|
||||||
|
$editorContainer.addClass('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
|
||||||
|
setInitialTheme();
|
||||||
|
updateLineNumbers();
|
||||||
|
loadPasteFromUrl();
|
||||||
|
hljs.highlightAll();
|
||||||
|
|
||||||
|
// Theme toggle
|
||||||
|
$themeToggle.on('click', () => {
|
||||||
|
if ($('html').attr('data-theme') === 'dark') {
|
||||||
|
$('html').attr('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
$sunIcon.show();
|
||||||
|
$moonIcon.hide();
|
||||||
|
} else {
|
||||||
|
$('html').attr('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
$sunIcon.hide();
|
||||||
|
$moonIcon.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle editor input
|
||||||
|
$editor.on('input', () => {
|
||||||
|
updateLineNumbers();
|
||||||
|
|
||||||
|
// Update viewer content with syntax highlighting
|
||||||
|
$viewer.text($editor.val());
|
||||||
|
|
||||||
|
// Try to auto-detect JSON if content changes significantly
|
||||||
|
if ($editor.val().trim().startsWith('{') || $editor.val().trim().startsWith('[')) {
|
||||||
|
const detectedLanguage = detectContentType($editor.val());
|
||||||
|
if (detectedLanguage === 'json') {
|
||||||
|
$languageSelector.val('json');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$viewer.attr('class', `language-${$languageSelector.val()}`);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle tab key in editor
|
||||||
|
$editor.on('keydown', (e) => {
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
e.preventDefault();
|
||||||
|
const start = e.target.selectionStart;
|
||||||
|
const end = e.target.selectionEnd;
|
||||||
|
|
||||||
|
// Insert tab at cursor position
|
||||||
|
const value = $editor.val();
|
||||||
|
$editor.val(value.substring(0, start) + ' ' + value.substring(end));
|
||||||
|
|
||||||
|
// Move cursor after the inserted tab
|
||||||
|
e.target.selectionStart = e.target.selectionEnd = start + 4;
|
||||||
|
|
||||||
|
// Update line numbers
|
||||||
|
updateLineNumbers();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save paste
|
||||||
|
$saveBtn.on('click', async () => {
|
||||||
|
if (!$editor.val().trim()) {
|
||||||
|
showNotification('Cannot save empty paste!', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/pastes', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/plain'
|
||||||
|
},
|
||||||
|
body: $editor.val()
|
||||||
|
});
|
||||||
|
|
||||||
|
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.val()}`;
|
||||||
|
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.val()}`);
|
||||||
|
|
||||||
|
// Switch to viewer mode
|
||||||
|
$editorContainer.addClass('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.on('click', () => {
|
||||||
|
if ($editorContainer.hasClass('viewer-active')) {
|
||||||
|
navigator.clipboard.writeText($viewer.text());
|
||||||
|
} else {
|
||||||
|
navigator.clipboard.writeText($editor.val());
|
||||||
|
}
|
||||||
|
showNotification('Content copied to clipboard!', 'success');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create new paste
|
||||||
|
$newBtn.on('click', () => {
|
||||||
|
$editor.val('');
|
||||||
|
updateLineNumbers();
|
||||||
|
window.history.pushState({}, '', '/'); // Reset URL to homepage
|
||||||
|
$editorContainer.removeClass('viewer-active');
|
||||||
|
$languageSelector.val('javascript');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Language change
|
||||||
|
$languageSelector.on('change', () => {
|
||||||
|
if ($editorContainer.hasClass('viewer-active')) {
|
||||||
|
$viewer.attr('class', `language-${$languageSelector.val()}`);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
|
||||||
|
// Update URL hash
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const pasteId = urlParams.get('id');
|
||||||
|
if (pasteId) {
|
||||||
|
window.history.replaceState({}, '', `/?id=${pasteId}#${$languageSelector.val()}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Format JSON handler
|
||||||
|
$formatJsonBtn.on('click', () => {
|
||||||
|
if ($languageSelector.val() === 'json') {
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse($editor.val());
|
||||||
|
const formatted = JSON.stringify(parsed, null, 2);
|
||||||
|
$editor.val(formatted);
|
||||||
|
$viewer.text(formatted);
|
||||||
|
hljs.highlightElement($viewer[0]);
|
||||||
|
updateLineNumbers();
|
||||||
|
showNotification('JSON formatted successfully!', 'success');
|
||||||
|
} catch (e) {
|
||||||
|
showNotification('Invalid JSON: ' + e.message, 'error');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
showNotification('Select JSON language first', 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sync scroll between line numbers and editor
|
||||||
|
$editor.on('scroll', () => {
|
||||||
|
$lineNumbers.scrollTop($editor.scrollTop());
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user