Update app.py

app.py

@@ -5,55 +5,42 @@ from datetime import datetime
 import matplotlib.pyplot as plt
 
 # Set page configuration
-st.set_page_config(page_title="MK316 Timer with Circular Progress", layout="centered")
+st.set_page_config(page_title="MK316 Quiet Timer", layout="centered")
 
-# Function to display the current time (Seoul Time)
+# Initialize session state for countdown
+if "countdown_started" not in st.session_state:
+    st.session_state.countdown_started = False
+if "start_time" not in st.session_state:
+    st.session_state.start_time = 0
+if "remaining_time" not in st.session_state:
+    st.session_state.remaining_time = 0
+if "time_up" not in st.session_state:
+    st.session_state.time_up = False
+
+# Title
+st.title("🐧 MK316 Quiet Timer ⏳ ")
+
+# Function to display the current time (as a live digital clock)
 def display_current_time():
     seoul_tz = pytz.timezone('Asia/Seoul')  # Set timezone to Seoul
     current_time = datetime.now(seoul_tz).strftime("%H:%M:%S")  # Convert to Seoul time
     
     # Style the clock (increase font size and set color)
     st.markdown(
-        f"<h1 style='text-align: center; font-size: 60px; color: #5785A4;'>{current_time}</h1>",  # Big font size for the clock
+        f"<h1 style='text-align: center; font-size: 80px; color: #5785A4;'>{current_time}</h1>",  # Large font
         unsafe_allow_html=True
     )
 
-# Function to update the progress circle with time inside or display "Time's Up!"
-def update_progress_circle(remaining_time, total_time, time_up):
+# Function to update the progress circle
+def update_progress_circle(remaining_time, total_time):
     fig, ax = plt.subplots(figsize=(2, 2))  # Smaller figure size to fit layout
-
-    if time_up:
-        # Show "Time's Up!" in the center of the circle
-        ax.pie([1], colors=['#6d8c9c'], startangle=90, counterclock=False, wedgeprops=dict(width=0.3))
-        ax.text(0, 0, "Time's Up!", fontsize=10, va='center', ha='center')  # Smaller font size for "Time's Up!"
-    else:
-        # Calculate the proportion of remaining time
-        fraction_completed = remaining_time / total_time if total_time > 0 else 0
-        ax.pie([fraction_completed, 1 - fraction_completed], colors=['#6d8c9c', '#D5DEDD'], startangle=90, counterclock=False, wedgeprops=dict(width=0.3))
-
-        # Format and add remaining time as text in the center of the circle
-        minutes, seconds = divmod(remaining_time, 60)
-        ax.text(0, 0, f"{int(minutes):02d}:{int(seconds):02d}", fontsize=14, va='center', ha='center')  # Adjusted font size for remaining time
-
+    fraction_completed = remaining_time / total_time if total_time > 0 else 0
+    ax.pie([fraction_completed, 1 - fraction_completed], colors=['#5785A4', '#D5DEDD'], startangle=90, counterclock=False, wedgeprops=dict(width=0.3))
+    minutes, seconds = divmod(remaining_time, 60)
+    ax.text(0, 0, f"{int(minutes):02d}:{int(seconds):02d}", fontsize=14, va='center', ha='center')  # Remaining time
     ax.set_aspect('equal')
     return fig
 
-# Initialize session state for countdown
-if "countdown_started" not in st.session_state:
-    st.session_state.countdown_started = False
-if "start_time" not in st.session_state:
-    st.session_state.start_time = 0
-if "remaining_time" not in st.session_state:
-    st.session_state.remaining_time = 0
-if "time_up" not in st.session_state:
-    st.session_state.time_up = False
-
-# Display current time
-display_current_time()
-
-# Input field for countdown time in seconds
-st.session_state.start_time = st.number_input("Set Countdown Time (in seconds)", min_value=0, max_value=3600, value=10)
-
 # Function to start the countdown timer
 def start_countdown():
     if not st.session_state.countdown_started:
@@ -68,36 +55,57 @@ def reset_countdown():
     st.session_state.countdown_started = False
     st.session_state.time_up = False
 
-# Buttons to Start and Reset the countdown
-start_button, reset_button = st.columns([1, 1])
-with start_button:
-    if st.button("Start Countdown"):
-        start_countdown()
+# Input field for countdown time in seconds
+st.session_state.start_time = st.number_input("Set Countdown Time (in seconds)", min_value=0, max_value=3600, value=10)
+
+# Two columns: one for current time and buttons, another for circular progress
+col1, col2 = st.columns([2, 1])
+
+# Left column: Current time, input, buttons
+with col1:
+    # Display current time
+    display_current_time()
 
-with reset_button:
-    if st.button("Reset Countdown"):
-        reset_countdown()
+    # Buttons to Start and Reset the countdown
+    start_button, reset_button = st.columns([1, 1])
+    with start_button:
+        if st.button("Start"):
+            start_countdown()
+    with reset_button:
+        if st.button("Reset"):
+            reset_countdown()
 
-# Placeholder for displaying the countdown time
-progress_placeholder = st.empty()
+    # Placeholder for displaying countdown text message
+    countdown_placeholder = st.empty()
+
+# Right column: Circular progress chart
+with col2:
+    progress_placeholder = st.empty()
 
 # Timer countdown logic (runs when countdown has started)
 if st.session_state.countdown_started and not st.session_state.time_up:
     if st.session_state.remaining_time > 0:
         # Update the circular progress chart with time in the center
-        fig = update_progress_circle(st.session_state.remaining_time, st.session_state.start_time, time_up=False)
+        fig = update_progress_circle(st.session_state.remaining_time, st.session_state.start_time)
         progress_placeholder.pyplot(fig)
 
-        # Decrease the remaining time
+        # Update the remaining time
         st.session_state.remaining_time -= 1
+
+        # Sleep for a second
         time.sleep(1)
+        
+        # Rerun the app to update every second
+        st.experimental_rerun()
     else:
         # When the countdown finishes, display "Time's Up!" inside the circle
         st.session_state.time_up = True
-        fig = update_progress_circle(st.session_state.remaining_time, st.session_state.start_time, time_up=True)
+        fig = update_progress_circle(0, st.session_state.start_time)
         progress_placeholder.pyplot(fig)
+        countdown_placeholder.write("⏰ **Time's Up!**")
 
-        st.session_state.countdown_started = False
+        # Play the sound using Streamlit's audio player
+        audio_file = open("timesup.mp3", "rb")
+        st.audio(audio_file.read(), format="audio/mp3")
 
-# Ensure continuous display of current time
-time.sleep(0.1)
+        st.session_state.countdown_started = False