diff --git a/goal_prompt.txt b/goal_prompt.txt deleted file mode 100644 index 35a21ef..0000000 --- a/goal_prompt.txt +++ /dev/null @@ -1,88 +0,0 @@ -# Goal: Redesign all buttons into bold, square, visually striking interactive elements - -## Objective -Replace every basic/rectangular button in the app with larger, square-aspect-ratio buttons that have eye-catching visual design. The goal is to transform the UI from a generic Material 3 look into a distinctive, personality-rich interface that matches the playful "BONG HIT TIMER" brand. - -## Current State -The app uses 4 visible buttons across 2 screens: - -**MainActivity (home screen):** -- `btnDurationLabel` — outlined button showing selected duration (e.g. "10s") with a dropdown arrow. Uses `Widget.Material3.Button.OutlinedButton` with 20dp corners. -- `btnStart` — filled button labeled "Start Timer" with a play icon. Uses `Widget.Material3.Button` with 20dp corners. - -**CountdownDialog (timer screen):** -- `btnStop` — plain Android `Button` labeled "Stop" (default styling, small) -- `btnRestart` — plain Android `Button` labeled "Restart" (default styling, small) -- `btnDismiss` — plain Android `Button` labeled "Dismiss" (currently gone, shows after timer completes) - -## Design Requirements - -### 1. Square Aspect Ratio -- Change all buttons from `wrap_content` rectangles to a fixed square size (e.g., `120dp` x `120dp` or `100dp` x `100dp`) -- Use `app:layout_constraintDimensionRatio="1:1"` where dynamic sizing is needed -- Buttons should feel substantial and tappable, not compact - -### 2. Visual Interest — Each button should have its own personality -Create custom drawable backgrounds for each button type. Design ideas (pick the best approach): - -- **Circular/spherical buttons** — Buttons that look like physical 3D balls or pucks. Use gradient fills with highlights/shadows to create a convex "pressable" look. -- **Neon/glow effect** — Since the app is a bong hit timer, a subtle neon glow that pulses or intensifies during countdown would be thematically appropriate. -- **Retro/gaming arcade style** — Bold colors, thick borders, pressed/active states that simulate physical button depression. -- **Gradient + icon centering** — For the timer screen, center the stop/restart icons prominently in the square buttons with bold gradient backgrounds. - -### 3. Interactive States -Every button must have rich feedback: -- **Pressed/active state** — noticeable visual change (shrink, darker shade, or inner glow) -- **Default state** — visually engaging with gradients, shadows, or subtle animations -- **Disabled state** — reduced opacity but still recognizable - -### 4. Icon Integration -Square buttons are perfect for icon-first design: -- **Stop button** — large centered pause/stop icon -- **Restart button** — large centered refresh/replay icon -- **Start button** — center the play icon, consider removing the text label since the icon is universal -- **Duration label** — consider a pill-shaped or circular chip that pulses when tapped - -### 5. Color Palette -Stay within the existing green theme (`#2E7D32` primary, `#4C6842` secondary, `#E8F5E9`/`#C8E6C9` gradient) but push it further: -- Use the primary green for the start/positive actions -- A red/coral accent for stop -- A neutral or blue for restart/duration selection -- Consider gradient transitions within each button (e.g., green to darker green top-to-bottom for a 3D effect) - -### 6. Shadow & Elevation -- Add drop shadows to all buttons for depth (use `app:strokeWidth="0dp"` and custom `rippleColor` for Material buttons) -- Create a `btn_square_default.xml` and `btn_square_pressed.xml` in `res/drawable/` for each button type -- The pressed state should visually simulate "pressing in" (reduced shadow, lighter/darker fill) - -## Technical Implementation - -### New drawable files to create (in `res/drawable/`): -- `btn_start_square.xml` — gradient + shadow drawable for start button -- `btn_start_square_pressed.xml` — pressed state variant -- `btn_stop_square.xml` — gradient + shadow drawable for stop button -- `btn_stop_square_pressed.xml` — pressed state variant -- `btn_restart_square.xml` — gradient + shadow drawable for restart button -- `btn_restart_square_pressed.xml` — pressed state variant -- `btn_duration_chip.xml` — drawable for duration selector - -### Layout changes needed: -- `activity_main.xml`: - - `btnDurationLabel`: change to square dimensions, wrap text/icon in center, apply new drawable - - `btnStart`: change to square, center play icon, apply new drawable -- `dialog_countdown.xml`: - - `btnStop`: change from `Button` to `com.google.android.material.button.MaterialButton`, set square dimensions, apply drawable - - `btnRestart`: same treatment - - `btnDismiss`: same treatment, keep as gone by default - - Adjust the ConstraintLayout chain to accommodate square buttons (may need a horizontal chain with proper spacing) - -### Code changes needed: -- `CountdownDialog.kt`: Set button backgrounds programmatically if needed, ensure clickable/pressable states work -- No changes to button click logic — only visual overhaul - -## Constraints -- Use only Material 3 components already in the dependency (`com.google.android.material:material:1.11.0`) -- Traditional XML layouts — no Compose -- Minimum SDK 24 — no API 30+ features -- Keep the app's existing green aesthetic but make it bolder -- Maintain accessibility (minimum 48dp touch target, sufficient contrast)