diff --git a/frontend/lib/main.dart b/frontend/lib/main.dart index e55cf3d..9785e5d 100644 --- a/frontend/lib/main.dart +++ b/frontend/lib/main.dart @@ -459,195 +459,196 @@ class _SignInPageState extends State { ], ), child: Form( - key: _formKey, - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - SizedBox(height: 20), + key: _formKey, + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + SizedBox(height: 20), - // Logo - Center( - child: Text( - 'وصال', - style: TextStyle( - fontSize: 48, - fontWeight: FontWeight.w200, - fontFamily: 'Blaka', - color: Color(0xFF6A4C93), - ), - ), - ), - - SizedBox(height: 40), - - // Welcome text - Text( - 'Welcome Back!', - style: TextStyle( - fontSize: 24, - fontWeight: FontWeight.bold, - color: Colors.black87, - ), - textAlign: TextAlign.center, - ), - - SizedBox(height: 8), - - Text( - 'Sign in to socialize with your colleagues\nand transform your social life!', - style: TextStyle( - fontSize: 16, - color: Colors.grey[600], - ), - textAlign: TextAlign.center, - ), - - SizedBox(height: 40), - - // Email field - TextFormField( - controller: _emailController, - keyboardType: TextInputType.emailAddress, - decoration: InputDecoration( - labelText: 'Email', - prefixIcon: Icon(Icons.email_outlined), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(12), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(12), - borderSide: BorderSide( - color: Color(0xFF6A4C93), - ), - ), - ), - validator: (value) { - if (value == null || value.isEmpty) { - return 'Please enter your email'; - } - if (!value.contains('@')) { - return 'Please enter a valid email'; - } - return null; - }, - ), - - SizedBox(height: 20), - - // Password field - TextFormField( - controller: _passwordController, - obscureText: !_isPasswordVisible, - decoration: InputDecoration( - labelText: 'Password', - prefixIcon: Icon(Icons.lock_outline), - suffixIcon: IconButton( - icon: Icon( - _isPasswordVisible - ? Icons.visibility_off - : Icons.visibility, - ), - onPressed: () { - setState(() { - _isPasswordVisible = !_isPasswordVisible; - }); - }, - ), - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(12), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(12), - borderSide: BorderSide( - color: Color(0xFF6A4C93), - ), - ), - ), - validator: (value) { - if (value == null || value.isEmpty) { - return 'Please enter your password'; - } - if (value.length < 6) { - return 'Password must be at least 6 characters'; - } - return null; - }, - ), - - SizedBox(height: 12), - - // Forgot password - Align( - alignment: Alignment.centerRight, - child: TextButton( - onPressed: _showHelpBottomSheet, + // Logo + Center( child: Text( - 'Forgot Password?', + 'وصال', style: TextStyle( + fontSize: 48, + fontWeight: FontWeight.w200, + fontFamily: 'Blaka', color: Color(0xFF6A4C93), - fontWeight: FontWeight.w600, ), ), ), - ), - SizedBox(height: 30), + SizedBox(height: 40), - // Sign in button - Container( - height: 56, - child: ElevatedButton( - onPressed: _isLoading ? null : _handleSignIn, - style: ElevatedButton.styleFrom( - backgroundColor: Color(0xFF6A4C93), - foregroundColor: Colors.white, - shape: RoundedRectangleBorder( + // Welcome text + Text( + 'Welcome Back!', + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + color: Colors.black87, + ), + textAlign: TextAlign.center, + ), + + SizedBox(height: 8), + + Text( + 'Sign in to socialize with your colleagues\nand transform your social life!', + style: TextStyle( + fontSize: 16, + color: Colors.grey[600], + ), + textAlign: TextAlign.center, + ), + + SizedBox(height: 40), + + // Email field + TextFormField( + controller: _emailController, + keyboardType: TextInputType.emailAddress, + decoration: InputDecoration( + labelText: 'Email', + prefixIcon: Icon(Icons.email_outlined), + border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), ), - elevation: 2, + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: BorderSide( + color: Color(0xFF6A4C93), + ), + ), ), - child: _isLoading - ? CircularProgressIndicator( - valueColor: AlwaysStoppedAnimation( - Colors.white, - ), - ) - : Text( - 'Sign In', - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.w600, - ), - ), + validator: (value) { + if (value == null || value.isEmpty) { + return 'Please enter your email'; + } + if (!value.contains('@')) { + return 'Please enter a valid email'; + } + return null; + }, ), - ), - SizedBox(height: 20), + SizedBox(height: 20), - // Contact link for new accounts - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "Don't have an account? ", - style: TextStyle(color: Colors.grey[600]), + // Password field + TextFormField( + controller: _passwordController, + obscureText: !_isPasswordVisible, + decoration: InputDecoration( + labelText: 'Password', + prefixIcon: Icon(Icons.lock_outline), + suffixIcon: IconButton( + icon: Icon( + _isPasswordVisible + ? Icons.visibility_off + : Icons.visibility, + ), + onPressed: () { + setState(() { + _isPasswordVisible = !_isPasswordVisible; + }); + }, + ), + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(12), + borderSide: BorderSide( + color: Color(0xFF6A4C93), + ), + ), ), - GestureDetector( - onTap: _showHelpBottomSheet, + validator: (value) { + if (value == null || value.isEmpty) { + return 'Please enter your password'; + } + if (value.length < 6) { + return 'Password must be at least 6 characters'; + } + return null; + }, + ), + + SizedBox(height: 12), + + // Forgot password + Align( + alignment: Alignment.centerRight, + child: TextButton( + onPressed: _showHelpBottomSheet, child: Text( - 'Contact Support', + 'Forgot Password?', style: TextStyle( color: Color(0xFF6A4C93), fontWeight: FontWeight.w600, ), ), ), - ], - ), + ), - SizedBox(height: 40), - ], - ), + SizedBox(height: 30), + + // Sign in button + Container( + height: 56, + child: ElevatedButton( + onPressed: _isLoading ? null : _handleSignIn, + style: ElevatedButton.styleFrom( + backgroundColor: Color(0xFF6A4C93), + foregroundColor: Colors.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + ), + elevation: 2, + ), + child: _isLoading + ? CircularProgressIndicator( + valueColor: + AlwaysStoppedAnimation( + Colors.white, + ), + ) + : Text( + 'Sign In', + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w600, + ), + ), + ), + ), + + SizedBox(height: 20), + + // Contact link for new accounts + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "Don't have an account? ", + style: TextStyle(color: Colors.grey[600]), + ), + GestureDetector( + onTap: _showHelpBottomSheet, + child: Text( + 'Contact Support', + style: TextStyle( + color: Color(0xFF6A4C93), + fontWeight: FontWeight.w600, + ), + ), + ), + ], + ), + + SizedBox(height: 40), + ], + ), ), ), ), diff --git a/frontend/web/index.html b/frontend/web/index.html index 136f569..c555e36 100644 --- a/frontend/web/index.html +++ b/frontend/web/index.html @@ -45,13 +45,66 @@ position: fixed; width: 100%; height: 100%; + margin: 0; + padding: 0; + } + + /* Loading screen styles */ + #loading { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(180deg, #32B0A5 0%, #4600B9 50%); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + } + + /* Loading spinner */ + .spinner { + width: 80px; + height: 80px; + border: 6px solid rgba(255, 255, 255, 0.3); + border-top: 6px solid white; + border-radius: 50%; + animation: spin 1s linear infinite; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + /* Hide loading screen when Flutter loads */ + .flutter-loaded #loading { + display: none; } + +
+ +
+ + + +