fixed syntax and view page issues

app.py

@@ -77,7 +77,7 @@ EXPIRY_MAP = {
     "24h": timedelta(hours=24), "48h": timedelta(hours=48)
 }
 POPULAR_LANGUAGES = [
-    'bash', 'c', 'cpp', 'csharp', 'css', 'go', 'html', 'java', 'javascript', 'json',
+    'text', 'bash', 'c', 'cpp', 'csharp', 'css', 'go', 'html', 'java', 'javascript', 'json',
     'kotlin', 'lua', 'markdown', 'php', 'python', 'ruby', 'rust', 'sql', 'swift',
     'typescript', 'xml', 'yaml'
 ]
@@ -253,9 +253,11 @@ def index():
     db = get_db()
     rows = db.execute("SELECT stat_key, stat_value FROM stats").fetchall()
     stats = {r['stat_key']: r['stat_value'] for r in rows}
+    # We want 'text' to be at the top of the list in the index page dropdown
+    index_languages = [lang for lang in POPULAR_LANGUAGES if lang != 'text']
     return render_template(
         'index.html',
-        languages=POPULAR_LANGUAGES,
+        languages=index_languages,
         stats=stats,
         allowed_extensions=list(ALLOWED_EXTENSIONS)
     )
@@ -319,6 +321,7 @@ def upload_image():
         db.commit()
         update_stat('total_images')
         
+        flash('Image uploaded successfully! This is your shareable link.', 'success')
         return redirect(url_for('view_image', filename=new_fn))
 
     flash('Invalid file type.', 'error')
@@ -350,6 +353,7 @@ def upload_paste():
     db.commit()
     update_stat('total_pastes')
     
+    flash('Paste created successfully! This is your shareable link.', 'success')
     return redirect(url_for('view_paste', paste_id=paste_id))
 
 
@@ -405,14 +409,22 @@ def view_paste(paste_id):
         db.commit()
         abort(410)
 
+    # Only increment view count on the initial, non-overridden view
+    if 'lang' not in request.args:
         db.execute("UPDATE pastes SET view_count = view_count + 1 WHERE id = ?", (paste_id,))
         db.commit()
 
     content = fernet.decrypt(row['content']).decode('utf-8')
+    
+    # Get the language, allowing for a user override via URL parameter
+    default_language = row['language']
+    selected_language = request.args.get('lang', default_language)
+
     try:
-        lexer = get_lexer_by_name(row['language'])
+        lexer = get_lexer_by_name(selected_language)
     except:
         lexer = get_lexer_by_name('text')
+        
     fmt = HtmlFormatter(style='monokai', cssclass='syntax', linenos='table')
     highlighted = highlight(content, lexer, fmt)
 
@@ -420,7 +432,9 @@ def view_paste(paste_id):
                            password_required=False,
                            paste_id=paste_id,
                            highlighted_content=highlighted,
-                           time_left=get_time_left(row['expiry_date'])
+                           time_left=get_time_left(row['expiry_date']),
+                           languages=POPULAR_LANGUAGES,
+                           selected_language=selected_language
                            )
 
 
@@ -587,4 +601,3 @@ if __name__ == '__main__':
     # Run the app. Debug mode is controlled by the SSP_FLASK_DEBUG environment variable.
     # For production, it's recommended to use a proper WSGI server like Gunicorn or uWSGI.
     app.run(debug=app.config['FLASK_DEBUG'], use_reloader=False)
-

templates/admin.html

@@ -32,11 +32,9 @@
     {% endif %}
 
     <div class="flex items-center justify-center min-h-screen py-8">
-        <div class="w-full max-w-4xl mx-auto p-4">
+<a href="/" class="inline-block mb-4">
-            <header class="text-center mb-8">
+    <img src="/static/images/stormycloud.svg" alt="StormyCloud Logo" style="width:350px; max-width:100%;" class="mx-auto"/>
-                <a href="/" class="inline-block mb-4">
+</a>
-                    <img src="{{ url_for('static', filename='images/stormycloud.svg') }}" alt="StormyCloud Logo" style="width: 550px; max-width: 100%;" class="mx-auto">
-                </a>
                 <h1 class="text-4xl font-bold text-white">Admin Dashboard</h1>
             </header>
 

templates/donate.html

@@ -26,9 +26,9 @@
     <div class="flex items-center justify-center min-h-screen py-8">
         <div class="w-full max-w-2xl mx-auto p-4">
             <header class="text-center mb-8">
-                <a href="/" class="inline-block mb-4">
+<a href="/" class="inline-block mb-4">
-                    <img src="/static/images/stormycloud.svg" alt="StormyCloud Logo" style="width: 550px; max-width: 100%;" class="mx-auto">
+    <img src="/static/images/stormycloud.svg" alt="StormyCloud Logo" style="width:350px; max-width:100%;" class="mx-auto"/>
-                </a>
+</a>
                 <h1 class="text-3xl font-bold text-white">Support the Service</h1>
             </header>
 

templates/index.html

@@ -100,12 +100,9 @@
 <div class="flex items-center justify-center min-h-screen py-8">
   <div id="main-container" class="w-full max-w-2xl mx-auto p-4">
     <header class="text-center mb-8">
-      <a href="/" class="inline-block mb-4">
+<a href="/" class="inline-block mb-4">
-        <img src="/static/images/stormycloud.svg"
+    <img src="/static/images/stormycloud.svg" alt="StormyCloud Logo" style="width:350px; max-width:100%;" class="mx-auto"/>
-             alt="StormyCloud Logo"
+</a>
-             style="width:550px;max-width:100%;"
-             class="mx-auto"/>
-      </a>
       <h1 class="text-4xl font-bold text-white">I2P Secure Share</h1>
       <p class="text-gray-400">Anonymously share images and text pastes.</p>
     </header>
@@ -141,7 +138,6 @@
       </div>
 
       <div class="noscript-forms-container">
-        <!-- IMAGE FORM -->
         <div id="image-form" class="content-container rounded-lg p-8 shadow-lg tab-content">
           <form action="/upload/image" method="POST" enctype="multipart/form-data">
             <h2 class="text-2xl font-semibold mb-6 text-white">Upload an Image</h2>
@@ -197,7 +193,6 @@
           </form>
         </div>
 
-        <!-- PASTE FORM -->
         <div id="paste-form" class="content-container rounded-lg p-8 shadow-lg hidden tab-content">
           <form action="/upload/paste" method="POST">
             <h2 class="text-2xl font-semibold mb-6 text-white">Create a Paste</h2>
@@ -251,7 +246,6 @@
           </form>
         </div>
       
-        <!-- API DOCS -->
         <div id="api-docs" class="content-container docs-container rounded-lg p-8 shadow-lg hidden tab-content">
             <h3>Introduction</h3>
             <p>The API allows programmatic uploads. All endpoints are rate-limited. No API key is required.</p>
@@ -282,7 +276,6 @@
 http://{{ request.host }}/api/upload/paste</pre>
         </div>
 
-        <!-- STATS -->
         <div id="stats-content" class="content-container rounded-lg p-8 shadow-lg hidden tab-content">
             <h2 class="text-3xl font-bold text-white text-center mb-8">Service Statistics</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -301,7 +294,6 @@ http://{{ request.host }}/api/upload/paste</pre>
             </div>
         </div>
 
-        <!-- TERMS OF SERVICE -->
         <div id="tos-content" class="content-container tos-container rounded-lg p-8 shadow-lg hidden tab-content">
             <h2 class="text-3xl font-bold text-white mb-4">Terms of Service</h2>
             <p><strong>Last Updated: June 20, 2025</strong></p>
@@ -320,14 +312,12 @@ http://{{ request.host }}/api/upload/paste</pre>
         </div>
       </div>
 
-      <!-- Version Info (Moved outside the tabbed content) -->
       <div class="text-center text-xs text-gray-500 mt-6 mb-8">
           <a href="https://github.com/your-username/your-repo-name" target="_blank" rel="noopener noreferrer" class="hover:text-gray-400 transition-colors">
               Version 1.1
           </a>
       </div>
 
-      <!-- FEATURES -->
       <section class="text-center features-section">
         <h2 class="text-3xl font-bold text-white mb-8">Features</h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

templates/view_image.html

@@ -3,18 +3,21 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Image Uploaded - I2P Secure Share</title>
+  <title>View Image - I2P Secure Share</title>
   <link rel="stylesheet" href="/static/css/tailwind.css"/>
   <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
 
   <style>
     body { background-color: #1a202c; color: #cbd5e0; }
+    .content-container { background-color: #2d3748; border: 1px solid #4a5568; }
     .link-box { background-color: #2d3748; border:1px solid #4a5568; word-break:break-all; }
     .btn { background-color:#4299e1; transition:background-color .3s ease; }
     .btn:hover { background-color:#3182ce; }
     .thumbnail-container { border:2px dashed #4a5568; max-width:100%; }
     .thumbnail { max-width:100%; max-height:60vh; object-fit:contain; }
     .announcement-bar { background-color:#2563eb; border-bottom:1px solid #1e3a8a; }
+    .alert-success { background-color:#38a169; }
+    .alert-error   { background-color:#e53e3e; }
   </style>
 </head>
 <body class="font-sans">
@@ -43,16 +46,25 @@
         </div>
       {% else %}
         <header class="text-center mb-8">
-          <a href="/" class="inline-block mb-4">
+<a href="/" class="inline-block mb-4">
-            <img src="/static/images/stormycloud.svg"
+    <img src="/static/images/stormycloud.svg" alt="StormyCloud Logo" style="width:350px; max-width:100%;" class="mx-auto"/>
-                 alt="StormyCloud Logo"
+</a>
-                 style="width:550px; max-width:100%;" class="mx-auto"/>
+          <h1 class="text-3xl font-bold text-white">View Image</h1>
-          </a>
-          <h1 class="text-3xl font-bold text-white">Image Uploaded Successfully</h1>
           <p class="text-gray-400 mt-2 text-xl">Expires in: {{ time_left }}</p>
         </header>
 
         <main>
+          {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+              <div class="mb-4">
+                {% for category, message in messages %}
+                  <div class="alert-{{category}} text-white p-3 rounded-md shadow-lg"
+                       role="alert">{{ message }}</div>
+                {% endfor %}
+              </div>
+            {% endif %}
+          {% endwith %}
+
           <div class="thumbnail-container rounded-lg p-4 mb-6 flex justify-center items-center">
             <img src="/uploads/{{ filename }}"
                  alt="Uploaded Image" class="thumbnail rounded-md"/>

templates/view_paste.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Paste Created - I2P Secure Share</title>
+  <title>View Paste - I2P Secure Share</title>
   <link rel="stylesheet" href="/static/css/tailwind.css"/>
   <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
 
@@ -20,7 +20,80 @@
     }
     .announcement-bar { background-color:#2563eb; border-bottom:1px solid #1e3a8a; }
     .wide-container { max-width: 85rem; }
+    .alert-success { background-color:#38a169; }
+    .alert-error   { background-color:#e53e3e; }
 
+    /* Pygments 'monokai' theme CSS */
+    .syntax .hll { background-color: #49483e }
+    .syntax { background: #272822; color: #f8f8f2 }
+    .syntax .c { color: #75715e } /* Comment */
+    .syntax .err { color: #960050; background-color: #1e0010 } /* Error */
+    .syntax .k { color: #66d9ef } /* Keyword */
+    .syntax .l { color: #ae81ff } /* Literal */
+    .syntax .n { color: #f8f8f2 } /* Name */
+    .syntax .o { color: #f92672 } /* Operator */
+    .syntax .p { color: #f8f8f2 } /* Punctuation */
+    .syntax .ch { color: #75715e } /* Comment.Hashbang */
+    .syntax .cm { color: #75715e } /* Comment.Multiline */
+    .syntax .cp { color: #75715e } /* Comment.Preproc */
+    .syntax .cpf { color: #75715e } /* Comment.PreprocFile */
+    .syntax .c1 { color: #75715e } /* Comment.Single */
+    .syntax .cs { color: #75715e } /* Comment.Special */
+    .syntax .gd { color: #f92672 } /* Generic.Deleted */
+    .syntax .ge { font-style: italic } /* Generic.Emph */
+    .syntax .gi { color: #a6e22e } /* Generic.Inserted */
+    .syntax .gs { font-weight: bold } /* Generic.Strong */
+    .syntax .gu { color: #75715e } /* Generic.Subheading */
+    .syntax .kc { color: #66d9ef } /* Keyword.Constant */
+    .syntax .kd { color: #66d9ef } /* Keyword.Declaration */
+    .syntax .kn { color: #f92672 } /* Keyword.Namespace */
+    .syntax .kp { color: #66d9ef } /* Keyword.Pseudo */
+    .syntax .kr { color: #66d9ef } /* Keyword.Reserved */
+    .syntax .kt { color: #66d9ef } /* Keyword.Type */
+    .syntax .ld { color: #e6db74 } /* Literal.Date */
+    .syntax .m { color: #ae81ff } /* Literal.Number */
+    .syntax .s { color: #e6db74 } /* Literal.String */
+    .syntax .na { color: #a6e22e } /* Name.Attribute */
+    .syntax .nb { color: #f8f8f2 } /* Name.Builtin */
+    .syntax .nc { color: #a6e22e } /* Name.Class */
+    .syntax .no { color: #66d9ef } /* Name.Constant */
+    .syntax .nd { color: #a6e22e } /* Name.Decorator */
+    .syntax .ni { color: #f8f8f2 } /* Name.Entity */
+    .syntax .ne { color: #a6e22e } /* Name.Exception */
+    .syntax .nf { color: #a6e22e } /* Name.Function */
+    .syntax .nl { color: #f8f8f2 } /* Name.Label */
+    .syntax .nn { color: #f8f8f2 } /* Name.Namespace */
+    .syntax .nx { color: #a6e22e } /* Name.Other */
+    .syntax .py { color: #f8f8f2 } /* Name.Property */
+    .syntax .nt { color: #f92672 } /* Name.Tag */
+    .syntax .nv { color: #f8f8f2 } /* Name.Variable */
+    .syntax .ow { color: #f92672 } /* Operator.Word */
+    .syntax .w { color: #f8f8f2 } /* Text.Whitespace */
+    .syntax .mb { color: #ae81ff } /* Literal.Number.Bin */
+    .syntax .mf { color: #ae81ff } /* Literal.Number.Float */
+    .syntax .mh { color: #ae81ff } /* Literal.Number.Hex */
+    .syntax .mi { color: #ae81ff } /* Literal.Number.Integer */
+    .syntax .mo { color: #ae81ff } /* Literal.Number.Oct */
+    .syntax .sa { color: #e6db74 } /* Literal.String.Affix */
+    .syntax .sb { color: #e6db74 } /* Literal.String.Backtick */
+    .syntax .sc { color: #e6db74 } /* Literal.String.Char */
+    .syntax .dl { color: #e6db74 } /* Literal.String.Delimiter */
+    .syntax .sd { color: #e6db74 } /* Literal.String.Doc */
+    .syntax .s2 { color: #e6db74 } /* Literal.String.Double */
+    .syntax .se { color: #ae81ff } /* Literal.String.Escape */
+    .syntax .sh { color: #e6db74 } /* Literal.String.Heredoc */
+    .syntax .si { color: #e6db74 } /* Literal.String.Interpol */
+    .syntax .sx { color: #e6db74 } /* Literal.String.Other */
+    .syntax .sr { color: #e6db74 } /* Literal.String.Regex */
+    .syntax .s1 { color: #e6db74 } /* Literal.String.Single */
+    .syntax .ss { color: #e6db74 } /* Literal.String.Symbol */
+    .syntax .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+    .syntax .fm { color: #a6e22e } /* Name.Function.Magic */
+    .syntax .vc { color: #f8f8f2 } /* Name.Variable.Class */
+    .syntax .vg { color: #f8f8f2 } /* Name.Variable.Global */
+    .syntax .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+    .syntax .vm { color: #f8f8f2 } /* Name.Variable.Magic */
+    .syntax .il { color: #ae81ff } /* Literal.Number.Integer.Long */
   </style>
 </head>
 <body class="font-sans">
@@ -49,16 +122,39 @@
         </div>
       {% else %}
         <header class="text-center mb-8">
-          <a href="/" class="inline-block mb-4">
+<a href="/" class="inline-block mb-4">
-            <img src="/static/images/stormycloud.svg"
+    <img src="/static/images/stormycloud.svg" alt="StormyCloud Logo" style="width:350px; max-width:100%;" class="mx-auto"/>
-                 alt="StormyCloud Logo"
+</a>
-                 style="width:550px; max-width:100%;" class="mx-auto"/>
+          <h1 class="text-3xl font-bold text-white">View Paste</h1>
-          </a>
-          <h1 class="text-3xl font-bold text-white">Paste Created Successfully</h1>
           <p class="text-gray-400 mt-2 text-xl">Expires in: {{ time_left }}</p>
         </header>
 
         <main>
+          {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+              <div class="mb-4">
+                {% for category, message in messages %}
+                  <div class="alert-{{category}} text-white p-3 rounded-md shadow-lg"
+                       role="alert">{{ message }}</div>
+                {% endfor %}
+              </div>
+            {% endif %}
+          {% endwith %}
+          
+          <div class="flex justify-end mb-2">
+            <form method="GET" action="" class="flex items-center space-x-2">
+                <label for="language-switcher" class="text-sm text-gray-400">Syntax:</label>
+                <select name="lang" id="language-switcher" onchange="this.form.submit()" class="text-sm rounded-md p-1 bg-gray-700 border border-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                    {% for lang in languages %}
+                        <option value="{{ lang }}" {% if lang == selected_language %}selected{% endif %}>
+                            {{ lang|capitalize }}
+                        </option>
+                    {% endfor %}
+                </select>
+                <noscript><button type="submit" class="btn text-sm py-1 px-3">Update</button></noscript>
+            </form>
+          </div>
+
           <div class="code-container mb-6 syntax">
             {{ highlighted_content|safe }}
           </div>