Added a glow indicator to the setup button when the user hasn't fille…

…d in their .env file
Arxari · Sep 7, 2024 · 03825bb · 03825bb
1 parent e5a9610
commit 03825bb
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/static/styles.css b/static/styles.css
@@ -114,6 +114,33 @@ select:focus {
     color: #ff5c82;
 }
 
+.setup-button {
+    transition: all 0.3s ease;
+}
+
+.setup-button.glow {
+    animation: glow 1.5s ease-in-out infinite alternate;
+    box-shadow:
+        0 0 5px #ff5c82,
+        0 0 10px #ff5c82,
+        0 0 15px #ff5c82;
+}
+
+@keyframes glow {
+    from {
+        box-shadow:
+            0 0 5px #ff5c82,
+            0 0 10px #ff5c82,
+            0 0 15px #ff5c82;
+    }
+    to {
+        box-shadow:
+            0 0 10px #ff5c82,
+            0 0 20px #ff5c82,
+            0 0 30px #ff5c82;
+    }
+}
+
 @media screen and (min-width: 768px) {
     .alarm-list {
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

diff --git a/templates/index.html b/templates/index.html
@@ -12,11 +12,12 @@
     <body>
         <div class="container">
             <h1>OpenShockClock</h1>
+
             <div class="alarm-list">
                 {% for name, alarm in alarms.items() %}
                 <div
                     class="alarm"
-                    data-alarm-time="{{ alarm[0].strftime('%Y-%m-%dT%H:%M:%S') }}"
+                    alarm-time="{{ alarm[0].strftime('%Y-%m-%dT%H:%M:%S') }}"
                 >
                     <div class="alarm-header">
                         <h3>{{ name }}</h3>
@@ -86,46 +87,51 @@ <h3>{{ name }}</h3>
                 </div>
                 {% endfor %}
             </div>
+
             <div class="buttons">
-                <a href="{{ url_for('add_alarm') }}">
-                    <button>Add Alarm</button>
-                </a>
+                <a href="{{ url_for('add_alarm') }}"
+                    ><button>Add Alarm</button></a
+                >
                 <a href="{{ url_for('setup') }}">
-                    <button>Setup API and Shocker ID</button>
+                    <button
+                        class="setup-button {% if not env_file_exists %}glow{% endif %}"
+                    >
+                        Setup API and Shocker ID
+                    </button>
                 </a>
             </div>
         </div>
+
         <script>
             function updateCountdowns() {
-                const now = new Date().getTime();
-                document.querySelectorAll(".alarm").forEach((alarm) => {
+                const alarms = document.querySelectorAll(".alarm");
+                alarms.forEach((alarm) => {
                     const alarmTime = new Date(
-                        alarm.dataset.alarmTime,
-                    ).getTime();
-                    const timeDifference = alarmTime - now;
-                    if (timeDifference > 0) {
-                        const hours = Math.floor(
-                            timeDifference / (1000 * 60 * 60),
-                        );
+                        alarm.getAttribute("alarm-time"),
+                    );
+                    const now = new Date();
+                    const timeDiff = alarmTime - now;
+
+                    if (timeDiff > 0) {
+                        const hours = Math.floor(timeDiff / (1000 * 60 * 60));
                         const minutes = Math.floor(
-                            (timeDifference % (1000 * 60 * 60)) / (1000 * 60),
+                            (timeDiff % (1000 * 60 * 60)) / (1000 * 60),
                         );
                         const seconds = Math.floor(
-                            (timeDifference % (1000 * 60)) / 1000,
+                            (timeDiff % (1000 * 60)) / 1000,
                         );
+
                         alarm.querySelector(".countdown").textContent =
                             `${hours}h ${minutes}m ${seconds}s`;
                     } else {
                         alarm.querySelector(".countdown").textContent =
-                            "Alarm time reached!";
-                        const nextAlarmTime = new Date(
-                            alarmTime + 24 * 60 * 60 * 1000,
-                        );
-                        alarm.dataset.alarmTime = nextAlarmTime.toISOString();
+                            "Shock!";
                     }
                 });
             }
+
             setInterval(updateCountdowns, 1000);
+            updateCountdowns();
         </script>
     </body>
 </html>
diff --git a/webui.py b/webui.py
@@ -160,7 +160,8 @@ def index():
     username = session['username']
     api_key, shock_id = load_user_env(username)
     alarms = load_user_config(username)
-    return render_template('index.html', alarms=alarms)
+    env_file_exists = os.path.exists(os.path.join(USER_DIR, username, '.env'))
+    return render_template('index.html', alarms=alarms, env_file_exists=env_file_exists)
 
 @app.route('/add', methods=['GET', 'POST'])
 def add_alarm():