Sorry

This feed does not validate.

In addition, interoperability with the widest range of feed readers could be improved by implementing the following recommendation.

Source: https://harpswellstories.org

  1. tes
  2.  
  3. <!DOCTYPE html>
  4. <html lang="ms">
  5.  
  6. <head>
  7.    <meta charset="utf-8">
  8.    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.    <title>Sistem Permohonan Perumahan & Hartanah KEJORA - Log Masuk</title>
  11.    
  12.    <!-- Favicon -->
  13.    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M16.59,7.58L10,14.17l-2.59-2.58L6,13l4,4l8-8L16.59,7.58z' fill='%23006837'/%3E%3C/svg%3E" type="image/svg+xml">
  14.    
  15.    <!-- Font Awesome -->
  16.    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  17.    
  18.    <!-- Google Fonts -->
  19.    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  20.    
  21.    <style>
  22.        :root {
  23.            --kejora-primary: #0f6ead;
  24.            --kejora-secondary: #0098DB;
  25.            --kejora-dark: #004d29;
  26.            --kejora-light: #e6f4f9;
  27.            --kejora-gradient: linear-gradient(135deg, var(--kejora-primary) 0%, var(--kejora-secondary) 100%);
  28.            --kejora-gradient-reverse: linear-gradient(135deg, var(--kejora-secondary) 0%, var(--kejora-primary) 100%);
  29.            --light: #f8f9fa;
  30.            --dark: #1b263b;
  31.            --gray: #6c757d;
  32.        }
  33.        
  34.        * {
  35.            margin: 0;
  36.            padding: 0;
  37.            box-sizing: border-box;
  38.        }
  39.        
  40.        body {
  41.            font-family: 'Poppins', sans-serif;
  42.            background: var(--kejora-light);
  43.            min-height: 100vh;
  44.            display: flex;
  45.            justify-content: center;
  46.            align-items: center;
  47.            color: var(--dark);
  48.            padding: 20px;
  49.            background-image:
  50.                radial-gradient(circle at 10% 20%, rgba(0, 152, 219, 0.05) 0%, transparent 20%),
  51.                radial-gradient(circle at 90% 80%, rgba(0, 104, 55, 0.05) 0%, transparent 20%);
  52.        }
  53.        
  54.        .login-container {
  55.            max-width: 1200px;
  56.            width: 100%;
  57.            border-radius: 20px;
  58.            overflow: hidden;
  59.            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  60.            background: white;
  61.            animation: fadeIn 0.8s ease-out;
  62.            transform: translateY(0);
  63.            transition: transform 0.4s, box-shadow 0.4s;
  64.            position: relative;
  65.            overflow: hidden;
  66.        }
  67.        
  68.        .login-container::before {
  69.            content: '';
  70.            position: absolute;
  71.            top: 0;
  72.            left: 0;
  73.            width: 100%;
  74.            height: 5px;
  75.            background: var(--kejora-gradient);
  76.        }
  77.        
  78.        .login-container:hover {
  79.            transform: translateY(-10px);
  80.            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  81.        }
  82.        
  83.        .row {
  84.            display: flex;
  85.            flex-wrap: wrap;
  86.            min-height: 600px;
  87.        }
  88.        
  89.        .login-image {
  90.            flex: 1;
  91.            min-width: 400px;
  92.            background: var(--kejora-gradient), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23004924" fill-opacity="0.2" d="M0,160L48,138.7C96,117,192,75,288,74.7C384,75,480,117,576,122.7C672,128,768,96,864,96C960,96,1056,128,1152,138.7C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  93.            background-size: cover;
  94.            background-position: center;
  95.            display: flex;
  96.            align-items: center;
  97.            justify-content: center;
  98.            position: relative;
  99.            padding: 30px;
  100.        }
  101.        
  102.        .image-content {
  103.            position: relative;
  104.            z-index: 10;
  105.            text-align: center;
  106.            color: white;
  107.            padding: 30px;
  108.            max-width: 500px;
  109.            animation: slideIn 1s 0.3s forwards;
  110.            opacity: 0;
  111.        }
  112.        
  113.        .logo-container {
  114.            margin-bottom: 30px;
  115.        }
  116.        
  117.        .logo {
  118.            display: inline-flex;
  119.            align-items: center;
  120.            justify-content: center;
  121.            background: rgba(255, 255, 255, 0.2);
  122.            border-radius: 50%;
  123.            width: 100px;
  124.            height: 100px;
  125.            margin-bottom: 20px;
  126.            backdrop-filter: blur(5px);
  127.            border: 2px solid rgba(255, 255, 255, 0.3);
  128.            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  129.        }
  130.        
  131.        .logo i {
  132.            font-size: 50px;
  133.            color: white;
  134.        }
  135.        
  136.        .image-content h2 {
  137.            font-size: 28px;
  138.            font-weight: 700;
  139.            margin-bottom: 20px;
  140.            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  141.        }
  142.        
  143.        .image-content p {
  144.            font-size: 16px;
  145.            line-height: 1.6;
  146.            margin-bottom: 25px;
  147.            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  148.        }
  149.        
  150.        .features {
  151.            display: flex;
  152.            justify-content: center;
  153.            gap: 20px;
  154.            margin-top: 30px;
  155.            flex-wrap: wrap;
  156.        }
  157.        
  158.        .feature {
  159.            background: rgba(255, 255, 255, 0.15);
  160.            backdrop-filter: blur(5px);
  161.            border-radius: 12px;
  162.            padding: 15px;
  163.            width: 140px;
  164.            text-align: center;
  165.            border: 1px solid rgba(255, 255, 255, 0.2);
  166.            transition: all 0.3s;
  167.        }
  168.        
  169.        .feature:hover {
  170.            transform: translateY(-5px);
  171.            background: rgba(255, 255, 255, 0.25);
  172.            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  173.        }
  174.        
  175.        .feature i {
  176.            font-size: 24px;
  177.            margin-bottom: 10px;
  178.            color: white;
  179.            display: inline-block;
  180.        }
  181.        
  182.        .feature span {
  183.            font-size: 14px;
  184.            font-weight: 500;
  185.            display: block;
  186.        }
  187.        
  188.        .login-content {
  189.            flex: 1;
  190.            min-width: 400px;
  191.            padding: 40px;
  192.            display: flex;
  193.            flex-direction: column;
  194.            justify-content: center;
  195.            background: white;
  196.            animation: fadeInUp 0.8s 0.5s forwards;
  197.            opacity: 0;
  198.        }
  199.        
  200.        .login-header {
  201.            text-align: center;
  202.            margin-bottom: 40px;
  203.        }
  204.        
  205.        .login-title {
  206.            font-weight: 700;
  207.            color: var(--kejora-primary);
  208.            margin-bottom: 10px;
  209.            font-size: 32px;
  210.            position: relative;
  211.            display: inline-block;
  212.            padding-bottom: 15px;
  213.        }
  214.        
  215.        .login-title::after {
  216.            content: '';
  217.            position: absolute;
  218.            bottom: 0;
  219.            left: 50%;
  220.            transform: translateX(-50%);
  221.            width: 80px;
  222.            height: 4px;
  223.            background: var(--kejora-gradient);
  224.            border-radius: 2px;
  225.        }
  226.        
  227.        .login-subtitle {
  228.            color: var(--gray);
  229.            margin-top: 15px;
  230.            font-size: 16px;
  231.        }
  232.        
  233.        form {
  234.            max-width: 450px;
  235.            margin: 0 auto;
  236.            width: 100%;
  237.        }
  238.        
  239.        .form-group {
  240.            margin-bottom: 25px;
  241.            position: relative;
  242.        }
  243.        
  244.        .form-label {
  245.            font-weight: 500;
  246.            margin-bottom: 8px;
  247.            color: var(--dark);
  248.            display: block;
  249.            transition: all 0.3s;
  250.        }
  251.        
  252.        .input-group {
  253.            position: relative;
  254.        }
  255.        
  256.        .form-control {
  257.            width: 100%;
  258.            border-radius: 12px;
  259.            padding: 15px 20px;
  260.            border: 2px solid #e1e5e9;
  261.            transition: all 0.3s;
  262.            font-size: 16px;
  263.            background: #f8fafc;
  264.            transition: all 0.3s ease;
  265.        }
  266.        
  267.        .form-control:focus {
  268.            border-color: var(--kejora-primary);
  269.            box-shadow: 0 0 0 3px rgba(0, 104, 55, 0.15);
  270.            background: white;
  271.            outline: none;
  272.        }
  273.        
  274.        .password-toggle {
  275.            position: absolute;
  276.            right: 15px;
  277.            top: 50%;
  278.            transform: translateY(-50%);
  279.            cursor: pointer;
  280.            color: var(--gray);
  281.            transition: color 0.3s;
  282.            background: none;
  283.            border: none;
  284.            font-size: 18px;
  285.            z-index: 10;
  286.            width: 40px;
  287.            height: 40px;
  288.            display: flex;
  289.            align-items: center;
  290.            justify-content: center;
  291.            border-radius: 50%;
  292.        }
  293.        
  294.        .password-toggle:hover {
  295.            color: var(--kejora-primary);
  296.            background: rgba(0, 104, 55, 0.05);
  297.        }
  298.        
  299.        .role-selector {
  300.            display: flex;
  301.            justify-content: center;
  302.            gap: 20px;
  303.            margin-bottom: 30px;
  304.        }
  305.        
  306.        .role-option {
  307.            position: relative;
  308.            flex: 1;
  309.            max-width: 180px;
  310.        }
  311.        
  312.        .role-option input[type="radio"] {
  313.            position: absolute;
  314.            opacity: 0;
  315.            width: 0;
  316.            height: 0;
  317.        }
  318.        
  319.        .role-option label {
  320.            display: flex;
  321.            align-items: center;
  322.            justify-content: center;
  323.            padding: 15px;
  324.            background: #f8fafc;
  325.            border-radius: 12px;
  326.            cursor: pointer;
  327.            transition: all 0.3s;
  328.            font-weight: 500;
  329.            text-align: center;
  330.            border: 2px solid #e1e5e9;
  331.            height: 100%;
  332.            position: relative;
  333.            overflow: hidden;
  334.        }
  335.        
  336.        .role-option label i {
  337.            margin-right: 10px;
  338.            font-size: 20px;
  339.            transition: all 0.3s;
  340.        }
  341.        
  342.        .role-option input[type="radio"]:checked + label {
  343.            background: var(--kejora-gradient);
  344.            color: white;
  345.            border-color: var(--kejora-primary);
  346.            box-shadow: 0 5px 15px rgba(0, 104, 55, 0.2);
  347.        }
  348.        
  349.        .role-option input[type="radio"]:checked + label i {
  350.            color: white;
  351.            transform: scale(1.1);
  352.        }
  353.        
  354.        .role-option input[type="radio"]:focus + label {
  355.            box-shadow: 0 0 0 3px rgba(0, 104, 55, 0.25);
  356.        }
  357.        
  358.        .role-option label:hover {
  359.            transform: translateY(-3px);
  360.            border-color: var(--kejora-primary);
  361.            box-shadow: 0 8px 16px rgba(0, 104, 55, 0.1);
  362.        }
  363.        
  364.        .btn-login {
  365.            width: 100%;
  366.            background: var(--kejora-gradient);
  367.            border: none;
  368.            border-radius: 12px;
  369.            padding: 16px;
  370.            font-weight: 600;
  371.            font-size: 18px;
  372.            letter-spacing: 0.5px;
  373.            transition: all 0.4s;
  374.            position: relative;
  375.            overflow: hidden;
  376.            z-index: 1;
  377.            color: white;
  378.            margin-top: 10px;
  379.            box-shadow: 0 5px 15px rgba(0, 104, 55, 0.3);
  380.            cursor: pointer;
  381.            display: flex;
  382.            align-items: center;
  383.            justify-content: center;
  384.            gap: 10px;
  385.        }
  386.        
  387.        .btn-login::before {
  388.            content: '';
  389.            position: absolute;
  390.            top: 0;
  391.            left: 0;
  392.            width: 100%;
  393.            height: 100%;
  394.            background: var(--kejora-gradient-reverse);
  395.            z-index: -1;
  396.            opacity: 0;
  397.            transition: opacity 0.4s;
  398.        }
  399.        
  400.        .btn-login:hover {
  401.            transform: translateY(-5px);
  402.            box-shadow: 0 10px 25px rgba(0, 104, 55, 0.4);
  403.        }
  404.        
  405.        .btn-login:hover::before {
  406.            opacity: 1;
  407.        }
  408.        
  409.        .btn-login:active {
  410.            transform: translateY(0);
  411.        }
  412.        
  413.        .login-footer {
  414.            text-align: center;
  415.            margin-top: 30px;
  416.        }
  417.        
  418.        .register-link {
  419.            color: var(--kejora-primary);
  420.            font-weight: 500;
  421.            text-decoration: none;
  422.            transition: all 0.3s;
  423.            position: relative;
  424.            display: inline-block;
  425.            padding: 5px 0;
  426.        }
  427.        
  428.        .register-link::after {
  429.            content: '';
  430.            position: absolute;
  431.            bottom: 0;
  432.            left: 0;
  433.            width: 0;
  434.            height: 2px;
  435.            background: var(--kejora-primary);
  436.            transition: width 0.3s;
  437.        }
  438.        
  439.        .register-link:hover {
  440.            color: var(--kejora-secondary);
  441.        }
  442.        
  443.        .register-link:hover::after {
  444.            width: 100%;
  445.        }
  446.        
  447.        .copyright {
  448.            margin-top: 30px;
  449.            color: var(--gray);
  450.            font-size: 14px;
  451.        }
  452.  
  453.        /* Forgot Password Link */
  454.        .forgot-password {
  455.            text-align: center;
  456.            margin-top: 15px;
  457.        }
  458.  
  459.        .forgot-password a {
  460.            color: var(--kejora-secondary);
  461.            text-decoration: none;
  462.            font-size: 14px;
  463.            transition: all 0.3s;
  464.        }
  465.  
  466.        .forgot-password a:hover {
  467.            color: var(--kejora-primary);
  468.            text-decoration: underline;
  469.        }
  470.  
  471.        /* Modal Styles */
  472.        .modal {
  473.            display: none;
  474.            position: fixed;
  475.            z-index: 1000;
  476.            left: 0;
  477.            top: 0;
  478.            width: 100%;
  479.            height: 100%;
  480.            background-color: rgba(0, 0, 0, 0.5);
  481.            animation: fadeIn 0.3s;
  482.        }
  483.  
  484.        .modal-content {
  485.            background-color: white;
  486.            margin: 10% auto;
  487.            padding: 30px;
  488.            border-radius: 15px;
  489.            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  490.            max-width: 500px;
  491.            width: 90%;
  492.            position: relative;
  493.            animation: slideDown 0.4s;
  494.        }
  495.  
  496.        .close-modal {
  497.            position: absolute;
  498.            top: 15px;
  499.            right: 20px;
  500.            font-size: 24px;
  501.            cursor: pointer;
  502.            color: var(--gray);
  503.        }
  504.  
  505.        .close-modal:hover {
  506.            color: var(--kejora-primary);
  507.        }
  508.  
  509.        /* Animations */
  510.        @keyframes fadeIn {
  511.            from { opacity: 0; transform: translateY(20px); }
  512.            to { opacity: 1; transform: translateY(0); }
  513.        }
  514.        
  515.        @keyframes fadeInUp {
  516.            from { opacity: 0; transform: translateY(30px); }
  517.            to { opacity: 1; transform: translateY(0); }
  518.        }
  519.        
  520.        @keyframes slideIn {
  521.            from { opacity: 0; transform: translateY(50px); }
  522.            to { opacity: 1; transform: translateY(0); }
  523.        }
  524.        
  525.        @keyframes float {
  526.            0% { transform: translateY(0); }
  527.            50% { transform: translateY(-10px); }
  528.            100% { transform: translateY(0); }
  529.        }
  530.  
  531.        @keyframes slideDown {
  532.            from {
  533.                transform: translateY(-50px);
  534.                opacity: 0;
  535.            }
  536.            to {
  537.                transform: translateY(0);
  538.                opacity: 1;
  539.            }
  540.        }
  541.        
  542.        .feature i {
  543.            animation: float 3s ease-in-out infinite;
  544.        }
  545.        
  546.        /* Responsive */
  547.        @media (max-width: 900px) {
  548.            .row {
  549.                flex-direction: column;
  550.            }
  551.            
  552.            .login-image, .login-content {
  553.                min-width: 100%;
  554.            }
  555.            
  556.            .login-image {
  557.                min-height: 300px;
  558.                padding: 20px;
  559.            }
  560.            
  561.            .features {
  562.                gap: 10px;
  563.            }
  564.            
  565.            .feature {
  566.                width: 120px;
  567.                padding: 10px;
  568.            }
  569.        }
  570.        
  571.        @media (max-width: 480px) {
  572.            .login-content {
  573.                padding: 25px;
  574.            }
  575.            
  576.            .role-selector {
  577.                flex-direction: column;
  578.                gap: 10px;
  579.                align-items: center;
  580.            }
  581.            
  582.            .role-option {
  583.                max-width: 100%;
  584.                width: 100%;
  585.            }
  586.            
  587.            .login-title {
  588.                font-size: 28px;
  589.            }
  590.            
  591.            .login-container {
  592.                border-radius: 15px;
  593.            }
  594.  
  595.            .modal-content {
  596.                padding: 20px;
  597.            }
  598.        }
  599.        
  600.        /* Loading spinner */
  601.        .spinner {
  602.            display: none;
  603.            animation: spin 1s linear infinite;
  604.        }
  605.        
  606.        @keyframes spin {
  607.            0% { transform: rotate(0deg); }
  608.            100% { transform: rotate(360deg); }
  609.        }
  610.        
  611.        /* Error message */
  612.        .error-message {
  613.            color: #e74c3c;
  614.            font-size: 14px;
  615.            margin-top: 5px;
  616.            display: none;
  617.            animation: shake 0.5s;
  618.        }
  619.        
  620.        @keyframes shake {
  621.            0%, 100% { transform: translateX(0); }
  622.            25% { transform: translateX(-5px); }
  623.            75% { transform: translateX(5px); }
  624.        }
  625.    </style>
  626. </head>
  627.  
  628. <body>
  629.    <div class="login-container">
  630.        <div class="row">
  631.            <div class="login-image">
  632.                <div class="image-content">
  633.                    <div class="logo-container">
  634.                        <div class="logo">
  635. <a href="index.php">
  636. <i class="fas fa-home"></i>
  637. </a>
  638.                        </div>
  639.                        <h2>SISTEM PERMOHONAN PERUMAHAN & HARTANAH KEJORA</h2>
  640.                    </div>
  641.                    <p>Platform digital untuk permohonan Perumahan & Hartanah secara efisien dan telus. Memberi perkhidmatan terbaik kepada rakyat.</p>
  642.                    
  643.                    <div class="features">
  644.                        <div class="feature">
  645.                            <i class="fas fa-house-user"></i>
  646.                            <span>Perumahan</span>
  647.                        </div>
  648.                        <div class="feature">
  649.                            <i class="fas fa-landmark"></i>
  650.                            <span>Hartanah</span>
  651.                        </div>
  652.                        <div class="feature">
  653.                            <i class="fas fa-file-contract"></i>
  654.                            <span>Permohonan</span>
  655.                        </div>
  656.                        <div class="feature">
  657.                            <i class="fas fa-headset"></i>
  658.                            <span>Bantuan</span>
  659.                        </div>
  660.                    </div>
  661.                </div>
  662.            </div>
  663.            
  664.            <div class="login-content">
  665.                <div class="login-header">
  666.                    <h1 class="login-title">LOG MASUK</h1>
  667.                    <p class="login-subtitle">Sila masukkan maklumat anda untuk mengakses sistem</p>
  668.                </div>
  669.                
  670.                <form action="login.php" method="POST">
  671.                    <div class="role-selector">
  672.                        <div class="role-option">
  673.                            <input type="radio" name="role" id="pemohon" value="pemohon" required checked>
  674.                            <label for="pemohon"><i class="fas fa-user"></i> Pemohon</label>
  675.                        </div>
  676.                        <div class="role-option">
  677.                            <input type="radio" name="role" id="admin" value="admin" required>
  678.                            <label for="admin"><i class="fas fa-user-shield"></i> Admin</label>
  679.                        </div>
  680.                    </div>
  681.                    
  682.                    <div class="form-group">
  683.                        <label for="noKp" class="form-label">No. Kad Pengenalan</label>
  684.                        <div class="input-group">
  685.                            <input type="text" name="noKp" class="form-control" id="noKp" placeholder="Contoh: 901010101010" required>
  686.                        </div>
  687.                    </div>
  688.                    
  689.                    <div class="form-group">
  690.                        <label for="password" class="form-label">Kata Laluan</label>
  691.                        <div class="input-group">
  692.                            <input type="password" name="password" class="form-control" id="password" placeholder="Masukkan kata laluan" required>
  693.                            <button type="button" class="password-toggle" id="togglePassword">
  694.                                <i class="far fa-eye"></i>
  695.                            </button>
  696.                        </div>
  697.                    </div>
  698.                    
  699.                    <button type="submit" class="btn-login">
  700.                        <i class="fas fa-sign-in-alt"></i> LOG MASUK
  701.                    </button>
  702.  
  703.                    <div class="forgot-password">
  704.                        <a href="#" id="forgotPasswordLink">Lupa Kata Laluan?</a>
  705.                    </div>
  706.                    
  707.                    <div class="login-footer">
  708.                        <a href="register.php" class="register-link">
  709.                            <i class="fas fa-user-plus"></i> Daftar Akaun Baru
  710.                        </a>
  711.                        <p class="copyright">
  712.                            &copy; 2025 Lembaga Kemajuan Johor Tenggara (KEJORA). Hak Cipta Terpelihara.
  713.                        </p>
  714.                    </div>
  715.                </form>
  716.            </div>
  717.        </div>
  718.    </div>
  719.  
  720.    <!-- Modal Lupa Kata Laluan -->
  721.    <div id="forgotPasswordModal" class="modal">
  722.        <div class="modal-content">
  723. <span class="close-modal">&times;</span>
  724. <h2>Reset Kata Laluan</h2>
  725. <form id="forgotPasswordForm" method="POST" action="login.php">
  726. <input type="hidden" name="reset_password" value="1">
  727. <div class="form-group">
  728. <label for="email">Emel yang Didaftarkan</label>
  729. <input type="email" id="email" name="email" required placeholder="Masukkan emel anda" class="form-control">
  730. </div>
  731. <div class="form-group">
  732. <label for="noKpPemohon">No Kad Pengenalan</label>
  733. <input type="text" id="noKpPemohon" name="noKpPemohon" required placeholder="Masukkan no Kad Pengenalan anda" class="form-control">
  734. </div>
  735. <button type="submit" class="btn-login">
  736. <i class="fas fa-paper-plane"></i> Hantar Permohonan Reset
  737. </button>
  738. </form>
  739.        </div>
  740.    </div>
  741.  
  742.    <script>
  743.        // Password toggle functionality
  744.        document.getElementById('togglePassword').addEventListener('click', function() {
  745.            const password = document.getElementById('password');
  746.            const icon = this.querySelector('i');
  747.            
  748.            if (password.type === 'password') {
  749.                password.type = 'text';
  750.                icon.classList.remove('fa-eye');
  751.                icon.classList.add('fa-eye-slash');
  752.            } else {
  753.                password.type = 'password';
  754.                icon.classList.remove('fa-eye-slash');
  755.                icon.classList.add('fa-eye');
  756.            }
  757.        });
  758.  
  759.        // Form validation and animation
  760.        document.querySelectorAll('.form-control').forEach(input => {
  761.            input.addEventListener('focus', function() {
  762.                this.parentElement.style.transform = 'translateY(-2px)';
  763.            });
  764.            
  765.            input.addEventListener('blur', function() {
  766.                this.parentElement.style.transform = 'translateY(0)';
  767.            });
  768.        });
  769.  
  770.        // Form submission animation
  771.        document.querySelector('form').addEventListener('submit', function(e) {
  772.            const btn = document.querySelector('.btn-login');
  773.            const originalHTML = btn.innerHTML;
  774.            
  775.            // Show loading indicator
  776.            btn.innerHTML = '<i class="fas fa-spinner spinner"></i> Memproses...';
  777.            btn.disabled = true;
  778.            
  779.            // Simulate processing
  780.            setTimeout(() => {
  781.                btn.innerHTML = originalHTML;
  782.                btn.disabled = false;
  783.            }, 1500);
  784.        });
  785.  
  786.        // Role selector animation
  787.        document.querySelectorAll('.role-option').forEach(option => {
  788.            option.addEventListener('click', function() {
  789.                document.querySelectorAll('.role-option').forEach(opt => {
  790.                    opt.style.transform = 'scale(1)';
  791.                });
  792.                this.style.transform = 'scale(1.05)';
  793.            });
  794.        });
  795.  
  796.        // Input animation on page load
  797.        document.addEventListener('DOMContentLoaded', function() {
  798.            setTimeout(() => {
  799.                document.querySelectorAll('.form-control').forEach((input, i) => {
  800.                    setTimeout(() => {
  801.                        input.style.opacity = "1";
  802.                        input.style.transform = "translateY(0)";
  803.                    }, i * 100);
  804.                });
  805.            }, 500);
  806.        });
  807.  
  808.        // Modal Lupa Kata Laluan
  809.        const forgotPasswordLink = document.getElementById('forgotPasswordLink');
  810.        const forgotPasswordModal = document.getElementById('forgotPasswordModal');
  811.        const closeModal = document.querySelector('.close-modal');
  812.  
  813.        forgotPasswordLink.addEventListener('click', function(e) {
  814.            e.preventDefault();
  815.            forgotPasswordModal.style.display = 'block';
  816.        });
  817.  
  818.        closeModal.addEventListener('click', function() {
  819.            forgotPasswordModal.style.display = 'none';
  820.        });
  821.  
  822.        window.addEventListener('click', function(e) {
  823.            if (e.target === forgotPasswordModal) {
  824.                forgotPasswordModal.style.display = 'none';
  825.            }
  826.        });
  827.  
  828.        // Handle form submission for password reset
  829.        document.getElementById('forgotPasswordForm').addEventListener('submit', function(e) {
  830.            e.preventDefault();
  831.            
  832.            const email = document.getElementById('email').value;
  833.            const btn = this.querySelector('.btn-login');
  834.            const originalText = btn.textContent;
  835.            
  836.            // Show loading state
  837.            btn.innerHTML = '<i class="fas fa-spinner spinner"></i> Menghantar...';
  838.            btn.disabled = true;
  839.            
  840.            // Submit the form programmatically
  841.            this.submit();
  842.        });
  843.    </script>
  844. </body>
  845. </html>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda