Skip to content

Commit 993e1a1

Browse files
committed
feat: Add template for showing the paste and improve design
1 parent 809a9c2 commit 993e1a1

File tree

1 file changed

+393
-0
lines changed

1 file changed

+393
-0
lines changed

src/paste/templates/paste.html

Lines changed: 393 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,393 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %} {{ uuid }} | paste.py 🐍 {% endblock %}
4+
5+
{% block headlinks %}
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
7+
{% endblock %}
8+
9+
{% block style %}
10+
11+
@import url('https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/fira_code.min.css');
12+
@import url('https://fonts.cdnfonts.com/css/vt323');
13+
14+
:root {
15+
--terminal-green: #00ff00;
16+
--terminal-dark: #0c0c0c;
17+
--terminal-shadow: rgba(0, 255, 0, 0.2);
18+
--terminal-font: 'VT323', 'Fira Code', monospace;
19+
}
20+
21+
* {
22+
box-sizing: border-box;
23+
margin: 0;
24+
padding: 0;
25+
}
26+
27+
body {
28+
background-color: var(--terminal-dark);
29+
margin: 0;
30+
padding: 20px;
31+
font-family: var(--terminal-font);
32+
line-height: 1.6;
33+
font-size: 20px;
34+
color: var(--terminal-green);
35+
position: relative;
36+
overflow-x: hidden;
37+
}
38+
39+
/* Matrix Rain Effect */
40+
#matrix-bg {
41+
position: fixed;
42+
top: 0;
43+
left: 0;
44+
width: 100vw;
45+
height: 100vh;
46+
z-index: -1;
47+
opacity: 0.15;
48+
}
49+
50+
.container {
51+
max-width: 90%;
52+
margin: 20px auto;
53+
background-color: rgba(12, 12, 12, 0.95);
54+
border: 1px solid var(--terminal-green);
55+
border-radius: 0;
56+
box-shadow: 0 0 20px var(--terminal-shadow);
57+
position: relative;
58+
backdrop-filter: blur(5px);
59+
}
60+
61+
/* Terminal Window Header */
62+
.terminal-header {
63+
background: var(--terminal-green);
64+
color: var(--terminal-dark);
65+
padding: 12px;
66+
font-size: 22px;
67+
display: flex;
68+
justify-content: space-between;
69+
align-items: center;
70+
}
71+
72+
.terminal-header .controls {
73+
display: flex;
74+
gap: 8px;
75+
}
76+
77+
.terminal-header .control {
78+
width: 14px;
79+
height: 14px;
80+
border-radius: 50%;
81+
border: 1px solid var(--terminal-dark);
82+
}
83+
84+
.terminal-header .control.close {
85+
background: #ff5f56;
86+
}
87+
88+
.terminal-header .control.minimize {
89+
background: #ffbd2e;
90+
}
91+
92+
.terminal-header .control.maximize {
93+
background: #27c93f;
94+
}
95+
96+
.glitch-text {
97+
position: relative;
98+
display: inline-block;
99+
}
100+
101+
.glitch-text::before,
102+
.glitch-text::after {
103+
content: attr(data-text);
104+
position: absolute;
105+
top: 0;
106+
left: 0;
107+
width: 100%;
108+
height: 100%;
109+
}
110+
111+
.glitch-text::before {
112+
left: 2px;
113+
text-shadow: -2px 0 #ff00ff;
114+
animation: glitch-1 2s infinite linear alternate-reverse;
115+
}
116+
117+
.glitch-text::after {
118+
left: -2px;
119+
text-shadow: 2px 0 #00ffff;
120+
animation: glitch-2 2s infinite linear alternate-reverse;
121+
}
122+
123+
/* Code Display Styles */
124+
.code {
125+
background-color: rgba(0, 0, 0, 0.7);
126+
border: 1px solid var(--terminal-green);
127+
margin: 20px;
128+
overflow: auto;
129+
position: relative;
130+
}
131+
132+
.code pre {
133+
padding: 20px;
134+
font-family: 'Fira Code', monospace !important;
135+
font-size: 18px !important;
136+
line-height: 1.5 !important;
137+
}
138+
139+
.code pre span.linenos {
140+
color: rgba(0, 255, 0, 0.6);
141+
padding-right: 20px;
142+
user-select: none;
143+
border-right: 1px solid rgba(0, 255, 0, 0.3);
144+
margin-right: 20px;
145+
}
146+
147+
/* Syntax Highlighting Override */
148+
.highlight,
149+
.highlight pre,
150+
.highlight span {
151+
background-color: transparent !important;
152+
color: var(--terminal-green) !important;
153+
}
154+
155+
.highlight .k,
156+
.highlight .kd {
157+
color: #ff79c6 !important;
158+
}
159+
160+
.highlight .s,
161+
.highlight .s1,
162+
.highlight .s2 {
163+
color: #f1fa8c !important;
164+
}
165+
166+
.highlight .nb,
167+
.highlight .bp {
168+
color: #8be9fd !important;
169+
}
170+
171+
.highlight .c,
172+
.highlight .c1 {
173+
color: #6272a4 !important;
174+
}
175+
176+
.highlight .o {
177+
color: #ff79c6 !important;
178+
}
179+
180+
.highlight .n {
181+
color: #f8f8f2 !important;
182+
}
183+
184+
.highlight .mi {
185+
color: #bd93f9 !important;
186+
}
187+
188+
/* Copy Button */
189+
.copy-button {
190+
position: fixed;
191+
top: 90px;
192+
right: 7%;
193+
padding: 12px 20px;
194+
background-color: rgba(0, 255, 0, 0.2);
195+
color: var(--terminal-green);
196+
cursor: pointer;
197+
border: 1px solid var(--terminal-green);
198+
font-family: var(--terminal-font);
199+
font-size: 18px;
200+
outline: none;
201+
transition: all 0.3s ease;
202+
z-index: 100;
203+
display: flex;
204+
align-items: center;
205+
gap: 8px;
206+
}
207+
208+
.copy-button:hover {
209+
background-color: var(--terminal-green);
210+
color: var(--terminal-dark);
211+
box-shadow: 0 0 15px var(--terminal-shadow);
212+
}
213+
214+
/* Animation Keyframes */
215+
@keyframes glitch-1 {
216+
0% {
217+
clip-path: inset(20% 0 30% 0);
218+
}
219+
220+
20% {
221+
clip-path: inset(65% 0 1% 0);
222+
}
223+
224+
40% {
225+
clip-path: inset(43% 0 1% 0);
226+
}
227+
228+
60% {
229+
clip-path: inset(25% 0 58% 0);
230+
}
231+
232+
80% {
233+
clip-path: inset(75% 0 5% 0);
234+
}
235+
236+
100% {
237+
clip-path: inset(10% 0 85% 0);
238+
}
239+
}
240+
241+
@keyframes glitch-2 {
242+
0% {
243+
clip-path: inset(25% 0 58% 0);
244+
}
245+
246+
20% {
247+
clip-path: inset(75% 0 5% 0);
248+
}
249+
250+
40% {
251+
clip-path: inset(10% 0 85% 0);
252+
}
253+
254+
60% {
255+
clip-path: inset(20% 0 30% 0);
256+
}
257+
258+
80% {
259+
clip-path: inset(65% 0 1% 0);
260+
}
261+
262+
100% {
263+
clip-path: inset(43% 0 1% 0);
264+
}
265+
}
266+
267+
@media only screen and (max-width: 768px) {
268+
body {
269+
padding: 10px;
270+
font-size: 16px;
271+
}
272+
273+
.container {
274+
max-width: 95%;
275+
margin: 10px auto;
276+
}
277+
278+
.code pre {
279+
font-size: 16px !important;
280+
padding: 15px;
281+
}
282+
283+
.copy-button {
284+
top: 80px;
285+
right: 5%;
286+
padding: 10px 15px;
287+
font-size: 16px;
288+
}
289+
}
290+
291+
{{ pygments_css }}
292+
293+
{% endblock %}
294+
295+
{% block content %}
296+
297+
<canvas id="matrix-bg"></canvas>
298+
<div class="container">
299+
<div class="terminal-header">
300+
<div class="controls">
301+
<div class="control close"></div>
302+
<div class="control minimize"></div>
303+
<div class="control maximize"></div>
304+
</div>
305+
<div class="glitch-text" data-text="paste.py 🐍">paste.py 🐍</div>
306+
<div style="width: 50px;"></div>
307+
</div>
308+
<button id="copyButton" class="copy-button" onclick="copyAllText()">
309+
<i class="fas fa-copy"></i> COPY CODE
310+
</button>
311+
<div class="code">
312+
{{ highlighted_code | safe }}
313+
</div>
314+
</div>
315+
316+
{% endblock %}
317+
318+
{% block script %}
319+
320+
document.addEventListener('DOMContentLoaded', function () {
321+
const canvas = document.getElementById('matrix-bg');
322+
const ctx = canvas.getContext('2d');
323+
324+
canvas.width = window.innerWidth;
325+
canvas.height = window.innerHeight;
326+
327+
const characters = "ヲアウエオカキケコサシスセソタツテナニヌネハヒホマミムメモヤユラリワ0123456789".split("");
328+
const fontSize = 16;
329+
const columns = canvas.width / fontSize;
330+
const drops = [];
331+
332+
for (let i = 0; i < columns; i++) {
333+
drops[i] = 1;
334+
}
335+
336+
function draw() {
337+
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
338+
ctx.fillRect(0, 0, canvas.width, canvas.height);
339+
340+
ctx.fillStyle = "#0F0";
341+
ctx.font = fontSize + "px monospace";
342+
343+
for (let i = 0; i < drops.length; i++) {
344+
const text = characters[Math.floor(Math.random() * characters.length)];
345+
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
346+
347+
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
348+
drops[i] = 0;
349+
}
350+
351+
drops[i]++;
352+
}
353+
}
354+
355+
window.addEventListener('resize', () => {
356+
canvas.width = window.innerWidth;
357+
canvas.height = window.innerHeight;
358+
});
359+
360+
setInterval(draw, 35);
361+
362+
// Add boot sequence effect
363+
const container = document.querySelector('.container');
364+
container.style.opacity = '0';
365+
366+
setTimeout(() => {
367+
container.style.transition = 'opacity 0.5s';
368+
container.style.opacity = '1';
369+
}, 300);
370+
});
371+
372+
function copyAllText() {
373+
const codeElement = document.querySelector('.code pre');
374+
const range = document.createRange();
375+
range.selectNode(codeElement);
376+
377+
const selection = window.getSelection();
378+
selection.removeAllRanges();
379+
selection.addRange(range);
380+
381+
document.execCommand('copy');
382+
selection.removeAllRanges();
383+
384+
const copyButton = document.getElementById('copyButton');
385+
const originalText = copyButton.innerHTML;
386+
copyButton.innerHTML = '<i class="fas fa-check"></i> COPIED!';
387+
388+
setTimeout(() => {
389+
copyButton.innerHTML = originalText;
390+
}, 2000);
391+
}
392+
393+
{% endblock %}

0 commit comments

Comments
 (0)