Add Feature Livewire and Taiwindcss

4 weeks ago · 1a138e86dc
parent 27b05dbc0a
commit 1a138e86dc
3 changed files with 26 additions and 16 deletions
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -5,13 +5,12 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Đăng nhập hệ thống</title>
-
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
    @vite('resources/css/app.css')
    @livewireStyles
 </head>

-<body class="font-sans antialiased bg-cover bg-center"
-    style="background-image: url('{{ asset('images/logo.png') }}')">
+<body class="font-sans antialiased bg-cover bg-center" style="background-image: url('{{ asset('images/logo.png') }}')">
    <div class="min-h-screen flex items-center justify-center bg-gray-900 bg-opacity-50">
        {{ $slot }}
    </div>
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@ -1,4 +1,4 @@
-<div class="max-w-md w-full bg-white shadow-xl rounded-lg p-8">
+<div class="max-w-md w-full bg-white shadow-xl rounded-lg p-8 relative z-10">
    <div class="flex justify-center mb-4">
        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="h-16 w-auto">
    </div>
@ -6,30 +6,39 @@
    <h2 class="text-2xl font-semibold text-center text-gray-900 mb-6">Đăng nhập hệ thống</h2>

    <form wire:submit.prevent="login" class="space-y-4">
+        <!-- Email -->
        <div>
            <label class="block text-sm font-medium text-gray-700">Email:</label>
            <input type="email" wire:model="email" required
-                   class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm py-2 px-3 focus:ring-indigo-500 focus:border-indigo-500">
+                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm py-2 px-3
+               focus:ring-indigo-500 focus:border-indigo-500">
            @error('email')
                <div class="text-red-500 text-sm">{{ $message }}</div>
            @enderror
        </div>

+        <!-- Password -->
        <div>
            <label class="block text-sm font-medium text-gray-700">Mật khẩu:</label>
            <input type="password" wire:model="password" required
-                   class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm py-2 px-3 focus:ring-indigo-500 focus:border-indigo-500">
+                class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm py-2 px-3
+               focus:ring-indigo-500 focus:border-indigo-500">
            @error('password')
                <div class="text-red-500 text-sm">{{ $message }}</div>
            @enderror
        </div>

+        <!-- Remember -->
        <div class="flex items-center">
-            <input type="checkbox" wire:model="remember" id="remember" class="h-4 w-4 text-indigo-600 border-gray-300 rounded">
+            <input type="checkbox" wire:model="remember" id="remember"
+                class="h-4 w-4 bg-red-500 border-gray-300 rounded">
            <label for="remember" class="ml-2 text-sm text-gray-900">Ghi nhớ đăng nhập</label>
        </div>

-        <button type="submit" class="w-full py-2 px-4 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition duration-200">
+        <!-- Button -->
+        <button type="submit"
+            class="block w-full py-3 bg-indigo-600 text-white font-medium rounded hover:bg-indigo-700
+             transition duration-200">
            Đăng nhập
        </button>
    </form>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,10 +1,12 @@
 module.exports = {
-  content: [
-    "./resources/**/*.blade.php",
-    "./resources/**/*.js",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: [
+        "./resources/**/*.blade.php",
+        "./resources/**/*.js",
+        "./resources/**/*.vue",
+        "./app/Http/Livewire/**/*.php",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
 };