A
Anonymous

Android Contacts Component - Copy this Html, Tailwind Component to your project

Create the main page of an Android contact app with a modern UI tailored for elderly users. The app should feature a bottom navigation bar with three buttons: "Contacts," "Dial," and "Settings." Each button should allow seamless sliding between pages.Contacts Page:Top Section:Include a 3D search bar at the top for easy contact search.Place a red delete button to the right of the search bar. Clicking the delete button should enable a multi selection mode where contacts can be selected for deletion. After selection, a confirmation prompt should appear to delete the chosen contacts.Contacts Grid Layout:Display contacts in a grid format with two contacts per row.Each contact card should have a rounded rectangular shape.Center the contact's image at the top of the card.Display the contact's name below the image in the center.Add a 3D star icon in the top right corner of each card to pin the contact to the top when clicked.Include an edit button in the top left corner of each card for modifying contact details.When the contact name is clicked, play an associated audio file. If the audio is already playing, clicking the name again should stop playback.Add Contact Functionality:Provide a plus icon (+) in the bottom right corner to add new contacts.Clicking the plus icon should open a pop up window with fields for the name, phone number, and options to select an image and an audio file for the contact. The selected audio will play when the contact's name is clicked on their card.

Prompt
Component Preview

About

Android Contacts Component - Modern UI for elderly users with a 3D search bar, grid layout, edit options, and audio playback. Built w. Copy component code!

Share

Last updated 1 month ago