Refactor layout and enhance login screen with input fields and styles

app/_layout.tsx

@@ -2,5 +2,5 @@ import { Stack } from "expo-router";
 import React from "react";
 
 export default function RootLayout() {
-  return <Stack />;
+  return <Stack screenOptions={{ headerShown: false }} />;
 }

app/index.tsx

@@ -1,6 +1,10 @@
 import * as Notifications from 'expo-notifications';
-import React, { useEffect } from "react";
-import { Alert, Button, Platform, Text, View } from "react-native";
+import { StatusBar } from 'expo-status-bar';
+import React, { useEffect, useState } from "react";
+import { Alert, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+
+const PRIMARY = '#A24BFA';
+const BG = '#0c0a0a';
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -8,7 +12,7 @@ Notifications.setNotificationHandler({
     shouldShowList: true,
     shouldPlaySound: false,
     shouldSetBadge: false,
-  }),
+  })
 });
 
 async function registerForPushNotificationsAsync() {
@@ -43,20 +47,151 @@ async function sendNotification() {
 }
 
 export default function Index() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
   useEffect(() => {
     registerForPushNotificationsAsync();
   }, []);
 
   return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-      <Button title="Küldj értesítést" onPress={sendNotification} />
+    <View style={styles.container}>
+      <StatusBar style="light" backgroundColor={BG} />
+      <View style={styles.card}>
+        <View style={{ alignItems: 'center', marginBottom: 16 }}>
+          <Text style={styles.logoText}>ANGELIC{"\n"}MC</Text>
+        </View>
+        <Text style={styles.title}>Üdv újra</Text>
+        <Text style={styles.subtitle}>Jelentkezz be a fiókodba</Text>
+        <View style={{ height: 24 }} />
+        <Text style={styles.label}>Felhasználónév</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Add meg a felhasználóneved"
+          placeholderTextColor="#aaa"
+          value={username}
+          onChangeText={setUsername}
+          autoCapitalize="none"
+        />
+        <View style={{ height: 16 }} />
+        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Text style={styles.label}>Jelszó</Text>
+          <TouchableOpacity>
+            <Text style={styles.forgot}>Elfelejtetted?</Text>
+          </TouchableOpacity>
+        </View>
+        <TextInput
+          style={styles.input}
+          placeholder="••••••••"
+          placeholderTextColor="#aaa"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+        />
+        <View style={{ height: 24 }} />
+        <TouchableOpacity style={styles.button} onPress={sendNotification}>
+          <Text style={styles.buttonText}>Bejelentkezés</Text>
+        </TouchableOpacity>
+        <View style={{ height: 16 }} />
+        <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+          <Text style={styles.bottomText}>Nincs még fiókod? </Text>
+          <TouchableOpacity>
+            <Text style={styles.register}>Regisztrálj most!</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
     </View>
   );
 }
+
+export const options = {
+  headerShown: false,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: BG,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    width: '90%',
+    maxWidth: 400,
+    backgroundColor: 'rgba(24, 20, 28, 0.95)',
+    borderRadius: 24,
+    padding: 32,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 8,
+  },
+  logoText: {
+    color: PRIMARY,
+    fontWeight: 'bold',
+    fontSize: 28,
+    textAlign: 'center',
+    letterSpacing: 2,
+    marginBottom: 4,
+  },
+  title: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 28,
+    textAlign: 'center',
+    marginBottom: 4,
+  },
+  subtitle: {
+    color: '#bdbdbd',
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  label: {
+    color: '#bdbdbd',
+    fontSize: 14,
+    marginBottom: 4,
+  },
+  input: {
+    backgroundColor: 'rgba(20,18,24,1)',
+    borderColor: PRIMARY,
+    borderWidth: 1,
+    borderRadius: 12,
+    color: '#fff',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    fontSize: 16,
+  },
+  forgot: {
+    color: PRIMARY,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  button: {
+    backgroundColor: PRIMARY,
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+    shadowColor: PRIMARY,
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 18,
+  },
+  bottomText: {
+    color: '#bdbdbd',
+    fontSize: 15,
+  },
+  register: {
+    color: PRIMARY,
+    fontWeight: 'bold',
+    fontSize: 15,
+  },
+});