import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'LoginAnimate.dart';
import 'login_screen_black.dart';

class LoginScreen1 extends StatefulWidget {
  const LoginScreen1({Key? key}) : super(key: key);

  @override
  State<LoginScreen1> createState() => _LoginScreen1State();
}

class _LoginScreen1State extends State<LoginScreen1> {
  @override
  Widget build(BuildContext context) {
    //change the color here to change theme of the page
    const shadeColor=Colors.teal;
    return Scaffold(
      body:
      AnnotatedRegion<SystemUiOverlayStyle>(
          value:SystemUiOverlayStyle.light,
          child:
          Stack(
          children: [
            Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                    colors: [
                      shadeColor.shade800,
                      shadeColor.shade600,
                      shadeColor.shade400,
                      shadeColor.shade200,
                    ]
                )
              ),
              child: SingleChildScrollView(
                physics:  const AlwaysScrollableScrollPhysics(),
                padding:  const EdgeInsets.symmetric(horizontal: 25,vertical: 120),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('Sign In',style: TextStyle(
                      color: Colors.white,
                      fontSize: 45,
                      fontWeight: FontWeight.bold
                    ),),
                    const SizedBox(height: 40,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(left: 20),
                          child: Text('Email',style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold
                          ),),
                        ),
                        const SizedBox(height: 5,),
                        TextField(
                          keyboardType: TextInputType.emailAddress,
                          style: const TextStyle(
                            color: Colors.black87
                          ),
                          decoration: InputDecoration(
                            filled: true,
                            fillColor: Colors.white,
                            contentPadding: const EdgeInsets.all(15),
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(30)),
                            prefixIcon: const Icon(Icons.email,color: shadeColor,),
                            hintText: 'Email',
                            hintStyle: const TextStyle(
                              color: Colors.black38,
                            )
                          ),
                        )
                      ],
                    ),
                    const SizedBox(height: 10,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(left: 20),
                          child: Text('Password',style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              fontWeight: FontWeight.bold
                          ),),
                        ),
                        const SizedBox(height: 5,),
                        TextField(
                          obscureText: true,
                          keyboardType: TextInputType.emailAddress,
                          style: const TextStyle(
                              color: Colors.black87
                          ),
                          decoration: InputDecoration(
                              filled: true,
                              fillColor: Colors.white,
                              contentPadding: const EdgeInsets.all(15),
                              border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(30)),
                              prefixIcon: const Icon(Icons.password,color: shadeColor,),
                              hintText: 'Password',
                              hintStyle: const TextStyle(
                                color: Colors.black38,
                              )
                          ),
                        )
                      ],
                    ),
                    const SizedBox(height: 10),
                    Container(
                        alignment: Alignment.centerRight,
                        padding: const EdgeInsets.only(right: 20),
                        child: GestureDetector(
                            onTap: (){
                            },
                            child: const Text('Forget Password?',style: TextStyle(color: Colors.white,fontSize: 16))
                        )
                    ),
                    Container(
                      padding: const EdgeInsets.symmetric(vertical: 25),
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: () {
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.white,
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(25)
                            )
                          ),
                          child: const Text('Log in',style: TextStyle(
                            color: shadeColor,
                            fontSize: 20
                          ),),
                        ),
                    ),
                    GestureDetector(
                      onTap: (){
                      },
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("Don't have an account?",style: TextStyle(
                            color: Colors.white,
                            fontSize: 18
                          ),),
                          SizedBox(width: 5,),
                          Text("Register",style: TextStyle(
                            color: Colors.white,fontSize: 18
                          ),)

                        ],
                      ),
                    )

                  ],
                ),
              ),
            )
          ],
      ),
      ),

    );
  }
}