Neumorphic Alarm Clock UI
Build a modern Neumorphic Alarm Clock UI based on the provided design. The interface should include a clock display, alarm list, toggle switches, and an add button. Focus on creating the neumorphism effect using soft shadows, depth, and smooth UI elements in both light and dark modes. Use HTML for structure, CSS for neumorphic styling, and JavaScript for interactions such as toggling alarms and adding new alarms dynamically.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build the full alarm clock UI based on the provided design
- Use semantic HTML5 structure
- Style the UI using neumorphism design principles
- Implement soft shadows and depth effects using CSS
- Create a clock display section (static or real-time using JS optional)
- Build an alarms list with multiple alarm items
- Display time and optional day information for each alarm
- Add toggle switches to enable or disable alarms
- Allow toggles to be interactive using JavaScript
- Create an "Add Alarm" floating button
- Allow users to add a new alarm dynamically (optional but bonus)
- Implement both light and dark UI versions (optional bonus)
- Add hover and active states for UI elements
- Make the layout responsive for mobile devices
- Keep code clean and organized
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.