Changeset 6b8332f for src/app/page.tsx


Ignore:
Timestamp:
10/21/25 15:49:14 (11 months ago)
Author:
stefansaveski <stefansaveski19@…>
Branches:
master
Children:
2d635ae
Parents:
636f86c
Message:

feat: Add student exams, profile, semesters, and subjects pages with respective components and data integration

File:
1 edited

Legend:

Unmodified
Added
Removed

  • src/app/page.tsx

    r636f86c r6b8332f  
    1 import Image from "next/image";
     1"use client"
    22
    3 export default function Home() {
     3import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
     4import {
     5  faUser,
     6  faLock,
     7  faEye,
     8  faEyeSlash,
     9  faSignInAlt,
     10  faGraduationCap
     11} from '@fortawesome/free-solid-svg-icons';
     12import { useState } from 'react';
     13
     14export default function LoginPage() {
     15  const [showPassword, setShowPassword] = useState(false);
     16  const [formData, setFormData] = useState({
     17    username: '',
     18    password: ''
     19  });
     20
     21  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     22    const { name, value } = e.target;
     23    setFormData(prev => ({
     24      ...prev,
     25      [name]: value
     26    }));
     27  };
     28
     29  const handleSubmit = (e: React.FormEvent) => {
     30    e.preventDefault();
     31    // Handle login logic here
     32    console.log('Login attempt:', formData);
     33  };
     34
    435  return (
    5     <>
    6      
    7     </>
     36    <div className="container mx-auto px-4">
     37      <div className="min-h-screen ">
     38        {/* Login Form */}
     39        <div className="flex items-center justify-center min-h-[calc(100vh-160px)] p-4">
     40          <div className="w-full max-w-md">
     41            {/* Login Card */}
     42            <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
     43            {/* Header */}
     44            <div className="bg-primary text-white px-8 py-6 text-center">
     45              <div className="mb-4">
     46                <div className="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full">
     47                  <FontAwesomeIcon icon={faUser} className="text-2xl text-primary" />
     48                </div>
     49              </div>
     50              <h1 className="text-2xl font-bold mb-2">Добредојде</h1>
     51              <p className="text-blue-100 text-sm">
     52                Најавете се во вашиот IKnow акаунт
     53              </p>
     54            </div>
     55
     56            {/* Form */}
     57            <div className="p-8">
     58              <form onSubmit={handleSubmit} className="space-y-6">
     59                {/* Username Field */}
     60                <div>
     61                  <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
     62                    Корисничко име
     63                  </label>
     64                  <div className="relative">
     65                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
     66                      <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-gray-400" />
     67                    </div>
     68                    <input
     69                      id="username"
     70                      name="username"
     71                      type="text"
     72                      required
     73                      value={formData.username}
     74                      onChange={handleInputChange}
     75                      className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
     76                      placeholder="Внесете корисничко име"
     77                    />
     78                  </div>
     79                </div>
     80
     81                {/* Password Field */}
     82                <div>
     83                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
     84                    Лозинка
     85                  </label>
     86                  <div className="relative">
     87                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
     88                      <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-gray-400" />
     89                    </div>
     90                    <input
     91                      id="password"
     92                      name="password"
     93                      type={showPassword ? "text" : "password"}
     94                      required
     95                      value={formData.password}
     96                      onChange={handleInputChange}
     97                      className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
     98                      placeholder="Внесете лозинка"
     99                    />
     100                    <button
     101                      type="button"
     102                      onClick={() => setShowPassword(!showPassword)}
     103                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors"
     104                    >
     105                      <FontAwesomeIcon
     106                        icon={showPassword ? faEyeSlash : faEye}
     107                        className="h-4 w-4"
     108                      />
     109                    </button>
     110                  </div>
     111                </div>
     112
     113                {/* Remember Me & Forgot Password */}
     114                <div className="flex items-center justify-between">
     115                  <div className="flex items-center">
     116                    <input
     117                      id="remember"
     118                      name="remember"
     119                      type="checkbox"
     120                      className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
     121                    />
     122                    <label htmlFor="remember" className="ml-2 block text-sm text-gray-700">
     123                      Запомни ме
     124                    </label>
     125                  </div>
     126                  <button
     127                    type="button"
     128                    className="text-sm text-primary hover:text-blue-700 font-medium transition-colors"
     129                  >
     130                    Заборавена лозинка?
     131                  </button>
     132                </div>
     133
     134                {/* Submit Button */}
     135                <button
     136                  type="submit"
     137                  className="w-full bg-primary hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
     138                >
     139                  <FontAwesomeIcon icon={faSignInAlt} className="h-4 w-4" />
     140                  Најави се
     141                </button>
     142              </form>
     143            </div>
     144
     145            {/* Footer */}
     146            <div className="bg-gray-50 px-8 py-4 border-t border-gray-100">
     147              <p className="text-center text-sm text-gray-600">
     148                Немате акаунт?{' '}
     149                <button className="text-primary hover:text-blue-700 font-medium transition-colors">
     150                  Контактирајте ја администрацијата
     151                </button>
     152              </p>
     153            </div>
     154          </div>
     155
     156          {/* Additional Info */}
     157          <div className="mt-6 text-center">
     158            <div className="inline-flex items-center gap-2 px-4 py-2 bg-white bg-opacity-80 rounded-lg shadow-sm">
     159              <FontAwesomeIcon icon={faGraduationCap} className="text-primary" />
     160              <span className="text-sm text-gray-600">
     161                Студентски информационен систем
     162              </span>
     163            </div>
     164          </div>
     165        </div>
     166      </div>
     167    </div>
     168    </div>
    8169  );
    9170}
Note: See TracChangeset for help on using the changeset viewer.