Home
Tanvir Hasan Bappy (Tanvir)
NDUSTRIALCORE login

NDUSTRIALCORE login

NDUSTRIALCORE

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 13-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Tanvir Hasan Bappy (Tanvir)

126

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" x-data="loginForm()">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mechanical Login Panel</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes rotate-reverse {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }
        .gear-rotate {
            animation: rotate 5s linear infinite;
        }
        .gear-rotate-reverse {
            animation: rotate-reverse 5s linear infinite;
        }
        .pressure-gauge {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(
                from 0deg,
                #ef4444 0%,
                #f59e0b 30%,
                #10b981 70%,
                #10b981 100%
            );
        }
        .gauge-needle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 3px;
            background: #111827;
            transform-origin: left center;
            transition: transform 0.5s ease-out;
        }
        .mechanical-btn {
            position: relative;
            overflow: hidden;
        }
        .mechanical-btn:after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            transition: all 0.3s ease;
        }
        .mechanical-btn:hover:after {
            left: 100%;
            top: 100%;
        }
        .input-field {
            border-bottom: 3px solid #4b5563;
            transition: all 0.3s ease;
        }
        .input-field:focus {
            border-bottom-color: #3b82f6;
        }
        .bolt {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #4b5563;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bolt:after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            background: #1f2937;
            border-radius: 50%;
        }
        .panel-light {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
        }
    </style>
</head>
<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
    <div class="relative max-w-md w-full bg-gray-800 rounded-lg shadow-2xl overflow-hidden border-2 border-gray-700">
        
        <div class="bolt top-2 left-2"></div>
        <div class="bolt top-2 right-2"></div>
        <div class="bolt bottom-2 left-2"></div>
        <div class="bolt bottom-2 right-2"></div>
        
        <div class="p-8">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h1 class="text-3xl font-bold text-blue-400">INDUSTRIAL<span class="text-blue-500">CORE</span></h1>
                    <p class="text-gray-400">Secure Access Terminal</p>
                </div>
                <div class="flex space-x-2">
                    <div class="gear-rotate text-gray-500 text-2xl">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="gear-rotate-reverse text-gray-500 text-3xl -ml-2">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </div>
            
            <div class="mb-8 flex justify-center">
                <div class="pressure-gauge">
                    <div class="gauge-needle" x-bind:style="'transform: rotate(' + gaugeAngle + 'deg) translateX(-50%);'"></div>
                </div>
            </div>
            
            <form @submit.prevent="authenticate" class="space-y-6">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-300 mb-1">Operator ID</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fas fa-user-cog"></i>
                        </div>
                        <input 
                            x-model="username" 
                            @input="updateGauge()" 
                            type="text" 
                            id="username" 
                            class="input-field w-full bg-gray-800 text-gray-200 py-3 px-4 pl-10 focus:outline-none" 
                            placeholder="IND-XXXXX"
                        >
                    </div>
                </div>
                
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Access Code</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fas fa-lock"></i>
                        </div>
                        <input 
                            x-model="password" 
                            @input="updateGauge()" 
                            :type="showPassword ? 'text' : 'password'" 
                            id="password" 
                            class="input-field w-full bg-gray-800 text-gray-200 py-3 px-4 pl-10 focus:outline-none" 
                            placeholder="••••••••"
                        >
                        <button 
                            type="button" 
                            @click="showPassword = !showPassword" 
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-blue-400"
                        >
                            <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input 
                            x-model="remember" 
                            id="remember" 
                            type="checkbox" 
                            class="h-4 w-4 text-blue-500 focus:ring-blue-400 border-gray-600 rounded bg-gray-700"
                        >
                        <label for="remember" class="ml-2 block text-sm text-gray-300">Persist session</label>
                    </div>
                    <a href="#" class="text-sm text-blue-400 hover:text-blue-300">Lost access?</a>
                </div>
                
                <div>
                    <button 
                        type="submit" 
                        :disabled="isLoading"
                        :class="{
                            'from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900': !isLoading && !authStatus,
                            'from-green-600 to-green-800': authStatus === 'success',
                            'from-red-600 to-red-800': authStatus === 'error',
                            'from-gray-600 to-gray-800 cursor-not-allowed': isLoading
                        }"
                        class="mechanical-btn w-full bg-gradient-to-r text-white py-3 px-4 rounded-lg font-bold tracking-wider transition duration-300 flex items-center justify-center space-x-2"
                    >
                        <template x-if="isLoading">
                            <span class="flex items-center">
                                <i class="fas fa-cog fa-spin mr-2"></i>
                                PROCESSING
                            </span>
                        </template>
                        <template x-if="!isLoading && !authStatus">
                            <span class="flex items-center">
                                ENGAGE <i class="fas fa-power-off ml-2"></i>
                            </span>
                        </template>
                        <template x-if="authStatus === 'success'">
                            <span class="flex items-center">
                                ACCESS GRANTED <i class="fas fa-check ml-2"></i>
                            </span>
                        </template>
                        <template x-if="authStatus === 'error'">
                            <span class="flex items-center">
                                ACCESS DENIED <i class="fas fa-times ml-2"></i>
                            </span>
                        </template>
                    </button>
                </div>
            </form>
            
            <div class="mt-6 text-center text-sm text-gray-500">
                <p x-text="statusMessage"></p>
            </div>
        </div>
        
        <div class="bg-gray-700 px-6 py-3 flex justify-between items-center">
            <div class="text-xs text-gray-400">
                <span x-text="systemStatus"></span>
            </div>
            <div class="flex space-x-2">
                <div class="panel-light" :class="{
                    'bg-green-500 animate-pulse': systemStatus === 'System: Operational',
                    'bg-green-500': systemStatus !== 'System: Operational'
                }"></div>
                <div class="panel-light" :class="{
                    'bg-yellow-500 animate-pulse': systemStatus === 'System: Authenticating',
                    'bg-yellow-500': systemStatus !== 'System: Authenticating'
                }"></div>
                <div class="panel-light" :class="{
                    'bg-red-500 animate-pulse': systemStatus === 'System: Security Alert',
                    'bg-red-500': systemStatus !== 'System: Security Alert'
                }"></div>
            </div>
        </div>
    </div>

Related Examples