Webleb - UI Elements - Interface utilisateur de l'application Réveil et Chronomètre

HTML

<main x-show="activeScreen === 'clock'" class="flex-grow flex flex-col h-full">
            <div class="flex items-center text-xs text-gray-700 mb-8">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1 text-black">
                    <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.145l.002-.001Zm.31-1.717A5.733 5.733 0 0010 17.25c-3.146 0-5.713-2.566-5.713-5.712 0-3.145 2.567-5.712 5.713-5.712 3.145 0 5.712 2.566 5.712 5.712 0 .278-.02.553-.059.822l.006.003a5.712 5.712 0 00-.28.145l-.002-.001-.006-.003-.018.008.002.001Z" clip-rule="evenodd" />
                    <path d="M10 18a8 8 0 100-16 8 8 0 000 16ZM12 7a1 1 0 01-1 1H9a1 1 0 01-1-1V5a1 1 0 011-1h2a1 1 0 011 1v2Z" />
                </svg>
                <span x-text="location" class="font-medium text-black"></span>
            </div>

<main x-show="activeScreen === 'alarm'" class="flex-grow flex flex-col h-full">
            <div class="flex justify-between items-center mb-8">
                <h1 class="text-2xl font-semibold text-black">Set Alarm</h1>
                <button class="bg-black text-white w-8 h-8 rounded-full flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                </button>
            </div>

<h2 class="text-sm font-semibold text-black mb-3">Upcoming Alarm</h2>
            <div class="space-y-3 overflow-y-auto flex-grow pr-1">
                <template x-for="alarm in alarms" :key="alarm.id">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <p class="font-semibold text-black" x-text="alarm.title"></p>
                            <p class="text-2xl font-bold text-black" x-text="alarm.time"></p>
                            <p class="alarm-days">S M T W T F S</p>
                        </div>
                        <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
                            <input type="checkbox" :name="'toggle-' + alarm.id" :id="'toggle-' + alarm.id" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer opacity-0" x-model="alarm.enabled"/>
                            <label :for="'toggle-' + alarm.id" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
                                <span class="toggle-dot absolute left-0 top-0 inline-block w-6 h-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out"></span>
                            </label>
                        </div>
                    </div>
                </template>
            </div>
        </main>

<main x-show="activeScreen === 'stopwatch'" class="flex-grow flex flex-col items-center justify-center h-full">
            <div class="w-64 h-64 rounded-full border-[12px] border-gray-100 flex items-center justify-center mb-12">
                <div class="w-full h-full rounded-full bg-black flex items-center justify-center">
                    <span class="text-5xl font-bold text-white" x-text="stopwatchDisplay"></span>
                </div>
            </div>
            <button @click="toggleStopwatch()"
                    class="bg-black text-white text-lg font-semibold py-3 px-16 rounded-xl hover:bg-gray-800 transition-colors"
                    x-text="stopwatchRunning ? 'Pause' : 'Start'">
            </button>
             <button @click="resetStopwatch()" x-show="stopwatchTime > 0"
                    class="mt-4 text-gray-600 hover:text-black text-sm">
                Reset
            </button>
        </main>

<nav class="flex justify-around items-center pt-4 mt-auto border-t border-gray-100">
            <button @click="activeScreen = 'alarm'" class="flex flex-col items-center space-y-1" :class="activeScreen === 'alarm' ? 'nav-item-active' : 'nav-item-inactive'">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                </svg>
                <span class="text-xs font-medium">Alarm</span>
            </button>
            <button @click="activeScreen = 'clock'" class="flex flex-col items-center space-y-1" :class="activeScreen === 'clock' ? 'nav-item-active' : 'nav-item-inactive'">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="text-xs font-medium">Clock</span>
            </button>
            <button @click="activeScreen = 'stopwatch'" class="flex flex-col items-center space-y-1" :class="activeScreen === 'stopwatch' ? 'nav-item-active' : 'nav-item-inactive'">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h12.5m-4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3.75v1.5M12 20.25v-1.5M5.25 12h-1.5M20.25 12h-1.5M7.05 7.05l-1.06-1.06M18.01 18.01l-1.06-1.06M7.05 16.95l-1.06 1.06M18.01 5.99l-1.06 1.06" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 2.25V4.5M12 19.5v2.25M4.5 12H2.25M19.5 12h2.25M6.345 6.345l-1.59-1.59M17.655 17.655l-1.59-1.59M6.345 17.655l-1.59 1.59M17.655 6.345l-1.59-1.59" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 2.25V1.5M10.5 1.5h3" /> 
                </svg>
                <span class="text-xs font-medium">Stopwatch</span>
            </button>
        </nav>
    </div>
</div>

<div class="fixed bottom-4 left-4 text-xs text-gray-600">Inspiration from <a href="https://dribbble.com/shots/14889407-Alarm-Clock-Stopwatch-Mobile-Apps" target="_blank" class="hover:text-gray-800">@rrauix</a>
</div>

<div class="flex items-end justify-end fixed bottom-0 right-0 mb-4 mr-4 z-10">
    <div>
        <a title="Buy me a beer" href="https://www.buymeacoffee.com/scottwindon" target="_blank" class="block w-16 h-16 rounded-full transition-all shadow hover:shadow-lg transform hover:scale-110 hover:rotate-12">
            <img class="object-cover object-center w-full h-full rounded-full" src="https://i.pinimg.com/originals/60/fd/e8/60fde811b6be57094e0abc69d9c2622a.jpg"/>
        </a>
    </div>
</div>

CSS

JS

function app() {
    return {
        activeScreen: 'clock', // Default screen
        // Clock Screen Data
        location: 'Sydney',
        currentDate: 'Friday, 01 January 2021',
        currentTime: { time: '00:00', period: 'AM' },
        greeting: 'Good Evening',
        hourAngle: 0,
        minuteAngle: 0,

// Alarm Screen Data
        alarms: [
            { id: 2, title: 'Morning Exercise', time: '06:30 AM', enabled: true },
            { id: 3, title: 'Study', time: '09:00 AM', enabled: true },
            { id: 4, title: 'Online Class', time: '13:00 PM', enabled: true }
        ],

// Stopwatch Screen Data
        stopwatchTime: 0, // in seconds
        stopwatchDisplay: '00:00',
        stopwatchInterval: null,
        stopwatchRunning: false,

initApp() {
            // Any initial setup if needed, for now static data is used.
            // If dynamic time was needed:
            this.updateLiveTime();
            setInterval(() => this.updateLiveTime(), 1000 * 60); // Update every minute
        },

updateLiveTime() { // Example for dynamic time
            const now = new Date();
            this.currentDate = now.toLocaleDateString('en-US', { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' });
            let hours = now.getHours();
            const minutes = now.getMinutes();
            const ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            this.currentTime.time = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
            this.currentTime.period = ampm;

this.hourAngle = (hours * 30) + (minutes / 60 * 30);
            this.minuteAngle = (minutes * 6);

const currentHour = now.getHours();
            if (currentHour < 12) this.greeting = 'Good Morning';
            else if (currentHour < 18) this.greeting = 'Good Afternoon';
            else this.greeting = 'Good Evening';
        },

toggleStopwatch() {
            if (this.stopwatchRunning) {
                clearInterval(this.stopwatchInterval);
                thiswatchRunning = false;
            } else {
                this.stopwatchRunning = true;
                this.stopwatchInterval = setInterval(() => {
                    this.stopwatchTime++;
                    const minutes = Math.floor(this.stopwatchTime / 60);
                    const seconds = this.stopwatchTime % 60;
                    this.stopwatchDisplay = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                }, 1000);
            }
        },
        resetStopwatch() {
            clearInterval(this.stopwatchInterval);
            this.stopwatchRunning = false;
            this.stopwatchTime = 0;
            this.stopwatchDisplay = '00:00';
        }
    }
}

Interface utilisateur de l'application Réveil et Chronomètre

Recommended