From ff5b0c3a54bb3ce437361a1de475ba30b376cf4b Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Wed, 7 Jan 2026 03:55:19 +0100
Subject: [PATCH] 	modified:   templates/itemeditor_command_storage.html

---
 templates/itemeditor_command_storage.html | 32 ++++++++++++++++-------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/templates/itemeditor_command_storage.html b/templates/itemeditor_command_storage.html
index 68861a1..0367a65 100644
--- a/templates/itemeditor_command_storage.html
+++ b/templates/itemeditor_command_storage.html
@@ -109,18 +109,25 @@
 
                 <div class="info-card">
                     <div class="info-icon">
-                        <i class="fas fa-code"></i>
+                        <i class="fas fa-server"></i>
                     </div>
-                    <h3>Plugin Usage</h3>
-                    <p class="code-description">Load command in your plugin:</p>
-                    <pre class="code-block">GET https://devanturas.net/projects/itemeditor/storage/{uuid}
-
-Response:
+                    <h3>Self-Hosting on Your Webserver</h3>
+                    <p class="code-description">You can run this command storage system on your own webserver for production use:</p>
+                    <ol class="info-steps">
+                        <li>Install <strong>Python 3.10+</strong> and <strong>Flask</strong> on your server</li>
+                        <li>Deploy the Flask app using a production WSGI server like <strong>Gunicorn</strong> or <strong>uWSGI</strong></li>
+                        <li>Use a reverse proxy (e.g. <strong>Nginx</strong> or <strong>Apache</strong>) to route traffic to the Flask app</li>
+                        <li>Optional: Use <strong>Docker</strong> for easy deployment (see <code>Dockerfile</code> in the project)</li>
+                        <li>Access via: <br><code>https://your-domain/projects/itemeditor/storage</code></li>
+                        <li>API endpoint: <br><code>https://your-domain/projects/itemeditor/storage/&lt;uuid&gt;</code></li>
+                    </ol>
+                    <p class="code-block">GET https://your-domain/projects/itemeditor/storage/&lt;uuid&gt;
 {
   "command": "your command here",
-  "created_at": "2026-01-07T12:00:00",
-  "expires_at": "2026-01-07T12:30:00"
-}</pre>
+  "created_at": "...",
+  "expires_at": "..."
+}</p>
+                    <p class="code-description">For best performance and security, do <strong>not</strong> use the Flask development server in production. Use Gunicorn + Nginx or Docker for real deployments.</p>
                 </div>
             </div>
         </div>
@@ -489,6 +496,12 @@ function startCountdown(expiresAt) {
     const expiryTime = document.getElementById('expiryTime');
     const endTime = new Date(expiresAt).getTime();
     
+    // If expiry is in the past, show expired immediately
+    if (endTime < new Date().getTime()) {
+        expiryTime.innerHTML = '<span style="color: #ff5555;">Expired</span>';
+        return;
+    }
+    
     const interval = setInterval(() => {
         const now = new Date().getTime();
         const distance = endTime - now;
@@ -501,7 +514,6 @@ function startCountdown(expiresAt) {
         
         const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
         const seconds = Math.floor((distance % (1000 * 60)) / 1000);
-        
         expiryTime.textContent = `${minutes}m ${seconds}s`;
     }, 1000);
 }