1
0
forked from spitkov/sxbin

made pastebin viewing experience much better added copy and view raw buttons added auto formatting too :3

This commit is contained in:
spitkov 2024-09-09 21:47:21 +02:00
parent c1201dd7a6
commit 0b5adf56aa
5 changed files with 311 additions and 331 deletions

43
app.py
View File

@ -9,6 +9,11 @@ import threading
import time import time
import shutil import shutil
from datetime import timedelta from datetime import timedelta
from pygments import highlight
from pygments.lexers import get_lexer_by_name, guess_lexer
from pygments.formatters import HtmlFormatter
from pygments.util import ClassNotFound
import json
app = Flask(__name__) app = Flask(__name__)
UPLOAD_FOLDER = './uploads' UPLOAD_FOLDER = './uploads'
@ -86,7 +91,23 @@ def content(vanity):
if target: if target:
content_type, content_data = target[1], target[2] content_type, content_data = target[1], target[2]
if content_type == 'pastebin': if content_type == 'pastebin':
return render_template('content.html', content=content_data, created_at=target[3]) try:
lexer = guess_lexer(content_data)
language = lexer.aliases[0]
except ClassNotFound:
language = 'text'
lexer = get_lexer_by_name(language)
formatter = HtmlFormatter(style='monokai', linenos=True, cssclass="source")
highlighted_code = highlight(content_data, lexer, formatter)
css = formatter.get_style_defs('.source')
return render_template('content.html',
highlighted_content=highlighted_code,
css=css,
raw_content=content_data,
created_at=target[3],
vanity=vanity,
language=language)
elif content_type == 'file': elif content_type == 'file':
file_path = os.path.join(app.config['UPLOAD_FOLDER'], f'{vanity}_{content_data}') file_path = os.path.join(app.config['UPLOAD_FOLDER'], f'{vanity}_{content_data}')
file_info = { file_info = {
@ -206,7 +227,23 @@ def redirect_vanity(vanity):
if target: if target:
content_type, content_data = target[1], target[2] content_type, content_data = target[1], target[2]
if content_type == 'pastebin': if content_type == 'pastebin':
return render_template('content.html', content=content_data, created_at=target[3]) try:
lexer = guess_lexer(content_data)
language = lexer.aliases[0]
except ClassNotFound:
language = 'text'
lexer = get_lexer_by_name(language)
formatter = HtmlFormatter(style='monokai', linenos=True, cssclass="source")
highlighted_code = highlight(content_data, lexer, formatter)
css = formatter.get_style_defs('.source')
return render_template('content.html',
highlighted_content=highlighted_code,
css=css,
raw_content=content_data,
created_at=target[3],
vanity=vanity,
language=language)
elif content_type == 'file': elif content_type == 'file':
file_path = os.path.join(app.config['UPLOAD_FOLDER'], f'{vanity}_{content_data}') file_path = os.path.join(app.config['UPLOAD_FOLDER'], f'{vanity}_{content_data}')
file_info = { file_info = {
@ -219,7 +256,7 @@ def redirect_vanity(vanity):
elif content_type == 'folder': elif content_type == 'folder':
return redirect(url_for('folder_content', vanity=vanity)) return redirect(url_for('folder_content', vanity=vanity))
elif content_type == 'url': elif content_type == 'url':
return render_template('content.html', url=content_data) return render_template('content.html', content=content_data, url=content_data)
return render_template('404.html'), 404 return render_template('404.html'), 404
@app.route('/<vanity>/raw', methods=['GET']) @app.route('/<vanity>/raw', methods=['GET'])

View File

@ -1,152 +1,211 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark-mode">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text</title> <title>Content</title>
<style> <style>
body { :root {
font-family: Arial, sans-serif; --bg-color: #1e1e1e;
background-color: #121212; --text-color: #e0e0e0;
color: #e0e0e0; --highlight-bg: #2d2d2d;
margin: 0; --highlight-border: #444;
padding: 0; --button-bg: #3a3a3a;
display: flex; --button-text: #e0e0e0;
justify-content: center; }
align-items: center;
height: 100vh;
}
.container { .light-mode {
background: #1e1e1e; --bg-color: #ffffff;
border-radius: 8px; --text-color: #333333;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); --highlight-bg: #f8f8f8;
padding: 20px; --highlight-border: #ccc;
width: 80%; --button-bg: #f0f0f0;
max-width: 800px; --button-text: #333333;
text-align: center; }
}
h1, h2 { body {
color: #ffffff; font-family: Arial, sans-serif;
} line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
transition: background-color 0.3s, color 0.3s;
}
p, div { .container {
color: #e0e0e0; max-width: 800px;
} margin: 0 auto;
padding: 20px;
}
a { h1 {
color: #1e90ff; margin-bottom: 20px;
text-decoration: none; }
}
a:hover { .button-container {
text-decoration: underline; margin-bottom: 20px;
} }
textarea, input[type="file"], input[type="text"], input[type="url"] { button {
background-color: #2c2c2c; background-color: var(--button-bg);
color: #e0e0e0; color: var(--button-text);
border: 1px solid #444444; border: none;
border-radius: 4px; padding: 10px 15px;
padding: 10px; margin-right: 10px;
box-sizing: border-box; cursor: pointer;
} border-radius: 4px;
transition: background-color 0.3s;
}
button[type="button"] { button:hover {
background-color: #007bff; opacity: 0.8;
color: #ffffff; }
border: none;
border-radius: 4px;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
button[type="button"]:hover { .highlight {
background-color: #0056b3; background-color: var(--highlight-bg);
} border: 1px solid var(--highlight-border);
border-radius: 4px;
padding: 1em;
overflow: auto;
}
.result { #theme-toggle {
margin-top: 20px; position: fixed;
color: #ffffff; top: 20px;
} right: 20px;
}
a {
color: var(--text-color);
text-decoration: none;
}
.file-details, .content-details { a:hover {
background: #1e1e1e; text-decoration: underline;
padding: 15px; }
border-radius: 8px;
border: 1px solid #444444;
}
.file-details h3, .content-details h3 {
color: #ffffff;
}
.file-details p, .content-details p {
color: #e0e0e0;
}
.footer {
background-color: #2c2f33;
color: #99aab5;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
font-size: 14px;
}
.footer a {
color: #61afef;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.footer .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Ensure proper contrast for syntax highlighting */
.highlight pre {
color: var(--text-color);
}
/* Override Pygments styles for dark mode */
.dark-mode .highlight .hll { background-color: #49483e }
.dark-mode .highlight .c { color: #75715e } /* Comment */
.dark-mode .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.dark-mode .highlight .k { color: #66d9ef } /* Keyword */
.dark-mode .highlight .l { color: #ae81ff } /* Literal */
.dark-mode .highlight .n { color: #f8f8f2 } /* Name */
.dark-mode .highlight .o { color: #f92672 } /* Operator */
.dark-mode .highlight .p { color: #f8f8f2 } /* Punctuation */
.dark-mode .highlight .cm { color: #75715e } /* Comment.Multiline */
.dark-mode .highlight .cp { color: #75715e } /* Comment.Preproc */
.dark-mode .highlight .c1 { color: #75715e } /* Comment.Single */
.dark-mode .highlight .cs { color: #75715e } /* Comment.Special */
.dark-mode .highlight .ge { font-style: italic } /* Generic.Emph */
.dark-mode .highlight .gs { font-weight: bold } /* Generic.Strong */
.dark-mode .highlight .kc { color: #66d9ef } /* Keyword.Constant */
.dark-mode .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.dark-mode .highlight .kn { color: #f92672 } /* Keyword.Namespace */
.dark-mode .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.dark-mode .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.dark-mode .highlight .kt { color: #66d9ef } /* Keyword.Type */
.dark-mode .highlight .ld { color: #e6db74 } /* Literal.Date */
.dark-mode .highlight .m { color: #ae81ff } /* Literal.Number */
.dark-mode .highlight .s { color: #e6db74 } /* Literal.String */
.dark-mode .highlight .na { color: #a6e22e } /* Name.Attribute */
.dark-mode .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.dark-mode .highlight .nc { color: #a6e22e } /* Name.Class */
.dark-mode .highlight .no { color: #66d9ef } /* Name.Constant */
.dark-mode .highlight .nd { color: #a6e22e } /* Name.Decorator */
.dark-mode .highlight .ni { color: #f8f8f2 } /* Name.Entity */
.dark-mode .highlight .ne { color: #a6e22e } /* Name.Exception */
.dark-mode .highlight .nf { color: #a6e22e } /* Name.Function */
.dark-mode .highlight .nl { color: #f8f8f2 } /* Name.Label */
.dark-mode .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.dark-mode .highlight .nx { color: #a6e22e } /* Name.Other */
.dark-mode .highlight .py { color: #f8f8f2 } /* Name.Property */
.dark-mode .highlight .nt { color: #f92672 } /* Name.Tag */
.dark-mode .highlight .nv { color: #f8f8f2 } /* Name.Variable */
.dark-mode .highlight .ow { color: #f92672 } /* Operator.Word */
.dark-mode .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.dark-mode .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.dark-mode .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.dark-mode .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.dark-mode .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.dark-mode .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.dark-mode .highlight .sc { color: #e6db74 } /* Literal.String.Char */
.dark-mode .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.dark-mode .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.dark-mode .highlight .se { color: #ae81ff } /* Literal.String.Escape */
.dark-mode .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.dark-mode .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.dark-mode .highlight .sx { color: #e6db74 } /* Literal.String.Other */
.dark-mode .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.dark-mode .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.dark-mode .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.dark-mode .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.dark-mode .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.dark-mode .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.dark-mode .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.dark-mode .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
{{ css|safe }}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Text</h1> <h1>Content</h1>
<div class="content"> {% if created_at %}
{% if content %} <p>Created at: {{ created_at }}</p>
{{ content }} {% endif %}
{% elif url %} {% if language %}
<p>Redirecting to: <a href="{{ url }}" target="_blank">{{ url }}</a></p> <p>Detected Language: {{ language }}</p>
{% endif %}
<div class="button-container">
<button id="copy-button" onclick="copyToClipboard()">Copy Raw</button>
<a href="{{ url_for('raw_vanity', vanity=vanity) }}" target="_blank"><button>View Raw</button></a>
</div>
<div class="highlight">
{% if highlighted_content %}
{{ highlighted_content|safe }}
{% else %} {% else %}
<p>Content not found.</p> <pre>{{ content }}</pre>
{% endif %} {% endif %}
</div> </div>
{% if created_at %}
<div class="details">
<p>Created at: {{ created_at }}</p>
</div>
{% endif %}
</div> </div>
<button id="theme-toggle">Toggle Theme</button>
<script>
const rawContent = {{ raw_content|tojson }};
function copyToClipboard() {
navigator.clipboard.writeText(rawContent).then(() => {
const copyButton = document.getElementById("copy-button");
const originalText = copyButton.textContent;
copyButton.textContent = "Copied!";
setTimeout(() => {
copyButton.textContent = originalText;
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
function toggleTheme() {
html.classList.toggle('light-mode');
localStorage.setItem('lightMode', html.classList.contains('light-mode'));
}
themeToggle.addEventListener('click', toggleTheme);
// Check for saved theme preference
if (localStorage.getItem('lightMode') === 'true') {
html.classList.add('light-mode');
}
</script>
</body> </body>
<footer class="footer">
<div class="container">
<p class="footer-text">Source code available on:
<a href="https://github.com/realcgcristi/order" target="_blank">GitHub</a> |
<a href="https://git.spitkov.hu/cgcristi/aCloud" target="_blank">Spitkov's Git</a>
</p>
</div>
</footer>
</html> </html>

View File

@ -1,143 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark-mode">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File</title> <title>File Content</title>
<style> <style>
body { /* Copy the entire style section from content.html */
font-family: Arial, sans-serif; /* ... */
background-color: #121212;
color: #e0e0e0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #1e1e1e;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 20px;
width: 80%;
max-width: 800px;
text-align: center;
}
h1, h2 {
color: #ffffff;
}
p, div {
color: #e0e0e0;
}
a {
color: #1e90ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
textarea, input[type="file"], input[type="text"], input[type="url"] {
background-color: #2c2c2c;
color: #e0e0e0;
border: 1px solid #444444;
border-radius: 4px;
padding: 10px;
box-sizing: border-box;
}
button[type="button"] {
background-color: #007bff;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
button[type="button"]:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
color: #ffffff;
}
.file-details, .content-details {
background: #1e1e1e;
padding: 15px;
border-radius: 8px;
border: 1px solid #444444;
}
.file-details h3, .content-details h3 {
color: #ffffff;
}
.file-details p, .content-details p {
color: #e0e0e0;
}
.footer {
background-color: #2c2f33;
color: #99aab5;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
font-size: 14px;
}
.footer a {
color: #61afef;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.footer .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>File</h1> <h1>File: {{ name }}</h1>
<div class="details"> <p>Size: {{ size }} bytes</p>
<p><strong>File Name:</strong> {{ name }}</p> <p>Modified at: {{ modified_at }}</p>
<p><strong>File Size:</strong> {{ size }} bytes</p> <div class="button-container">
<p><strong>Last Modified:</strong> {{ modified_at }}</p> <a href="{{ url }}" download><button>Download File</button></a>
<p><a href="{{ url }}" download>Download the file</a></p>
</div> </div>
</div> </div>
<button id="theme-toggle">Toggle Theme</button>
<script>
// Copy the script section from content.html, but remove the copyToClipboard function
// ...
</script>
</body> </body>
<footer class="footer">
<div class="container">
<p class="footer-text">Source code available on:
<a href="https://github.com/realcgcristi/order" target="_blank">GitHub</a> |
<a href="https://git.spitkov.hu/cgcristi/order" target="_blank">Spitkov's Git</a>
</p>
</div>
</footer>
</html> </html>

View File

@ -1,103 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark-mode">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folder Contents</title> <title>Folder Content</title>
<style> <style>
body { /* Copy the entire style section from content.html */
font-family: Arial, sans-serif; /* ... */
background-color: #121212;
color: #e0e0e0;
margin: 0;
padding: 20px;
}
.container {
background: #1e1e1e;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
margin-bottom: 20px;
color: #f5f5f5;
text-align: center;
}
.folder-structure {
background: #2a2a2a;
border-radius: 4px;
padding: 10px;
margin-bottom: 20px;
}
.file-list { .file-list {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
.file-list li { .file-list li {
margin: 10px 0; margin-bottom: 10px;
padding: 5px;
background: #333;
border-radius: 4px;
}
a {
color: #61afef;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.download-all-btn {
display: block;
width: 200px;
margin: 20px auto;
padding: 10px;
background-color: #4CAF50;
color: white;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
.download-all-btn:hover {
background-color: #45a049;
}
.pagination {
text-align: center;
margin-top: 20px;
}
.pagination a {
margin: 0 10px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Folder Contents</h1> <h1>Folder: {{ current_folder }}</h1>
<div class="button-container">
<div class="folder-structure"> <a href="{{ download_all_url }}"><button>Download All</button></a>
<!-- You can add a tree-like structure here if needed -->
<p>Current folder: /{{ current_folder }}</p>
</div> </div>
<ul class="file-list"> <ul class="file-list">
{% for file in files %} {% for file in files %}
<li><a href="{{ file.url }}">{{ file.name }}</a></li> <li><a href="{{ file.url }}">{{ file.name }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<div class="button-container">
<a href="{{ download_all_url }}" class="download-all-btn">Download All</a>
<div class="pagination">
{% if prev_url %} {% if prev_url %}
<a href="{{ prev_url }}">Previous</a> <a href="{{ prev_url }}"><button>Previous</button></a>
{% endif %} {% endif %}
{% if next_url %} {% if next_url %}
<a href="{{ next_url }}">Next</a> <a href="{{ next_url }}"><button>Next</button></a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<button id="theme-toggle">Toggle Theme</button>
<script>
// Copy the script section from content.html, but remove the copyToClipboard function
// ...
</script>
</body> </body>
</html> </html>

54
templates/pastebin.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pastebin Content</title>
<style>
{{ css|safe }}
/* Add any additional styles here */
.button-container {
margin-bottom: 10px;
}
.button-container button {
margin-right: 10px;
}
.highlight {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 4px;
padding: 1em;
overflow: auto;
}
</style>
</head>
<body>
<h1>Pastebin Content</h1>
<p>Created at: {{ created_at }}</p>
<p>Detected Language: {{ language }}</p>
<div class="button-container">
<button id="copy-button" onclick="copyToClipboard()">Copy Raw</button>
<a href="{{ url_for('raw_vanity', vanity=vanity) }}" target="_blank"><button>View Raw</button></a>
</div>
<div class="highlight">
{{ content|safe }}
</div>
<script>
const rawContent = {{ raw_content|tojson }};
function copyToClipboard() {
navigator.clipboard.writeText(rawContent).then(() => {
const copyButton = document.getElementById("copy-button");
const originalText = copyButton.textContent;
copyButton.textContent = "Copied!";
setTimeout(() => {
copyButton.textContent = originalText;
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
</script>
</body>
</html>