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

1,579 ashimadison8

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

26 June 2024

Bouton de médias sociaux multiples

27 November 2024

Page de destination - Apple

10 October 2025

Conteneur de fragments d'animation CSS

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

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';
        }
    }
}