UI enhanced, pop-up appears if try to open same app again, if one app open then that button is disabled

Author: PayalLakra

app.py

@@ -44,7 +44,7 @@ def run_app():
 
     # Check if the app is already running
     if app_name in app_processes and app_processes[app_name].poll() is None:
-        return jsonify({"status": f"{app_name} is already running"})
+        return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=f"{app_name} is already Running")
 
     try:
         # Start the app subprocess
@@ -54,9 +54,9 @@ def run_app():
             process = subprocess.Popen(["python", f"{app_name}.py"])
 
         app_processes[app_name] = process
-        return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green")
+        return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=None)
     except Exception as e:
-        return jsonify({"status": f"Error starting {app_name}: {e}"})
+        return render_template("index.html", lsl_started=True, lsl_status="Running", lsl_color="green", message=f"Error starting {app_name}: {e}")
 
 @app.route("/stop_lsl", methods=['POST'])
 def stop_lsl():

static/style.css

@@ -11,67 +11,115 @@ body {
 }
 
 .header h1 {
-    font-size: 2em;
+    font-size: 2.5em;
     margin-bottom: 20px;
+    color: #333;
 }
 
-.controls button, .app-button {
-    padding: 10px 20px;
+.controls button {
+    padding: 15px 30px;
     margin: 10px;
-    font-size: 16px;
+    font-size: 18px;
     cursor: pointer;
     border: none;
-    border-radius: 5px;
-    background-color: #4CAF50;
-    color: white;
+    border-radius: 25px; /* Rounded shape */
+    background-color: #d1a56c; /* Beige color */
+    color: #333; /* Dark text */
+    transition: transform 0.3s ease, background-color 0.3s ease;
 }
 
-.controls button:hover, .app-button:hover {
-    background-color: #45a049;
+.controls button:hover {
+    background-color: hsl(34, 47%, 40%); /* Dark beige on hover */
 }
 
 button:disabled {
     background-color: #cccccc;
     cursor: not-allowed;
 }
 
-/* LSL buttons styles */
-#start_lsl_button, #stop_lsl_button {
-    width: auto;
-    margin: 10px;
-}
-
 /* App button layout */
 .app-buttons {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     margin-top: 20px;
 }
 
-/* Row layout for app buttons */
 .row {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    margin-bottom: 15px;
+    margin-bottom: 20px;
+}
+
+.app-buttons form {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 15px; /* Spacing between buttons */
 }
 
-.app-button {
-    width: 200px;  /* Set fixed width for all app buttons */
+/* App button styles */
+.app-buttons button {
+    width: 200px;
+    height: 80px;
     margin: 10px;
+    font-size: 20px; /* Larger font size */
+    font-weight: bold;
+    text-transform: uppercase; /* Stylish text */
+    border-radius: 25px; /* Rounded edges */
+    border: none;
+    color: white; /* Font color */
+    cursor: pointer;
+    background-color:#9ba59c; /* gray color */
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s, background-color 0.3s;
 }
 
-/* Status section */
-.status {
-    margin-top: 20px;
-    font-size: 18px;
+/* Hover effect for app buttons */
+.app-buttons button:hover {
+    background-color: #656d67; /* Darker shade on hover */
+    transform: scale(1.1);
+    opacity: 0.9;
 }
 
-.status h3 {
-    color: #333;
+/* Button active (on click) effect */
+.app-buttons button:active {
+    transform: scale(1.05);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+button:disabled {
+    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text x="0" y="16" font-size="16">🚫</text></svg>'), not-allowed;
+}
+
+.popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 2px solid #333;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    text-align: center;
+    animation: fade-out 3s forwards;
 }
 
-#lsl_status {
+.popup p {
+    font-size: 18px;
     font-weight: bold;
+    color: #333;
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        visibility: hidden;
+    }
 }

templates/index.html

@@ -11,6 +11,13 @@
         <div class="header">
             <h1>Chords-Python</h1>
         </div>
+
+         <!-- Pop-up message -->
+         {% if message %}
+         <div class="popup fade-out">
+             <p>{{ message }}</p>
+         </div>
+         {% endif %}
 
         <div class="controls">
             {% if not lsl_started %}
@@ -22,10 +29,6 @@ <h1>Chords-Python</h1>
             {% endif %}
         </div>
 
-        <!-- <div class="status">
-            <h3>LSL Status: <span id="lsl_status" style="color:{{ lsl_color }};">{{ lsl_status }}</span></h3>
-        </div> -->
-
         <div class="app-buttons">
             <!-- Row 1: ECG, EMG, EOG, EEG -->
             <div class="row">