Frontend components

Insight/App.js

@@ -1,20 +1,28 @@
+import React from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+import { StyleSheet, Text, View, Image, SafeAreaView, Button } from 'react-native';
+import WelcomeScreen from './app/screens/WelcomeScreen';
+import LocationPage from './app/screens/LocationPage';
+import DrivingFactPage from './app/screens/DrivingFactPage';
+import ContactsScreen from './app/screens/ContactsPage';
+// import { NavigationContainer } from '@react-navigration/native';
+// import { createNativeStackNavigator} from '@react-navigration/native-stack';
+
+//App Component
+export default function App() { 
+  const handlePress = () => console.log("Text pressed")
+
+  /*return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="WelcomeScreen">
+        <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
+        <Stack.Screen name="LoginScLoreen" component={LoginScreen} />
+        <Stack.Screen name="FactHome" component={FactHomeScreen} />
+        <Stack.Screen name="Contacts" component={ContactsScreen} />
+        <Stack.Screen name="LocationPg" component={LocationPgScreen} />
+        <Stack.Screen name="Driving" component={DrivingScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+  */
+};

Insight/assets/components/BackButton/BackButton.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+
+const BackButton = ({ onPress }) => {
+    return (
+        <Pressable onPress={onPress} style={styles.container}>
+            <Text style={styles.text}>Back</Text>
+        </Pressable>
+    );
+}; 
+
+const styles = StyleSheet.create({
+   container: {
+    backgroundColor: "#962626", 
+    width: 118,
+    height: 66,
+    padding: 15,
+    marginVertical: 5, 
+
+    alignItems: 'center', 
+    justifyContent: 'center',
+    borderRadius: 5, 
+    top: '20%',
+    left: '40%',
+    borderRadius: 30
+   },
+
+   text: {
+    fontWeight: 'bold',
+    color: '#E0EEC6',
+    fontSize: 23
+   }
+
+
+})
+export default BackButton;

Insight/assets/components/ContactsButton/ContactsButton.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+
+const ContactsButton = ({ onPress}) => {
+    return (
+        <Pressable onPress={onPress} style={styles.container}>
+            <Text style={styles.text}>contacts</Text>
+        </Pressable>
+    );
+}; 
+
+const styles = StyleSheet.create({
+   container: {
+    backgroundColor: "#962626", 
+    width: 140,
+    height: 175,
+    padding: 15,
+    marginVertical: 5, 
+
+    alignItems: 'center', 
+    borderRadius: 5, 
+    bottom: '61%',
+    left: '20%',
+    borderRadius: 30
+   },
+
+   text: {
+    fontWeight: 'bold',
+    color: '#FFD6D6',
+    fontSize: 28,
+    top: '72%'
+   }
+
+
+})
+export default ContactsButton;

Insight/assets/components/DriveButton/DriveButton.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+
+const DriveButton = ({ onPress}) => {
+    return (
+        <Pressable onPress={onPress} style={styles.container}>
+            <Text style={styles.text}>drive</Text>
+        </Pressable>
+    );
+}; 
+
+const styles = StyleSheet.create({
+   container: {
+    backgroundColor: "#962626", 
+    width: 140,
+    height: 175,
+    padding: 15,
+    marginVertical: 5, 
+
+    alignItems: 'center', 
+    borderRadius: 5, 
+    bottom: '40.3%',
+    left: '60%',
+    borderRadius: 30
+   },
+
+   text: {
+    fontWeight: 'bold',
+    color: '#FFD6D6',
+    fontSize: 28,
+    top: '73%'
+   }
+
+
+})
+export default DriveButton;

Insight/assets/components/EnterLocationButton/EnterLocationButton.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+
+const EnterLocationButton = ({ onPress}) => {
+    return (
+        <Pressable onPress={onPress} style={styles.container}>
+            <Text style={styles.text}>enter location...</Text>
+        </Pressable>
+    );
+}; 
+
+const styles = StyleSheet.create({
+   container: {
+    backgroundColor: "#962626", 
+    width: 284,
+    height: 66,
+    padding: 15,
+    marginVertical: 5, 
+
+    alignItems: 'center', 
+    justifyContent: 'center',
+    borderRadius: 5, 
+    top: '20%',
+    left: '20%',
+    borderRadius: 30
+   },
+
+   text: {
+    fontWeight: 'bold',
+    color: '#E0EEC6',
+    fontSize: 23
+   }
+
+
+})
+export default EnterLocationButton;

Insight/assets/components/WelcomeButton/WelcomeButton.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {View, Text, StyleSheet, Pressable} from 'react-native';
+
+const WelcomeButton = ({ onPress }) => {
+    return (
+        <Pressable onPress={onPress} style={styles.container}>
+            <Text style={styles.text}>Start now!</Text>
+        </Pressable>
+    );
+}; 
+
+const styles = StyleSheet.create({
+   container: {
+    backgroundColor: "#E0EEC6", 
+    width: 217,
+    height: 60,
+    padding: 15,
+    marginVertical: 5, 
+
+    alignItems: 'center', 
+    justifyContent: 'center',
+    borderRadius: 5, 
+    bottom: 0,
+    borderRadius: 30,
+   },
+
+   text: {
+    fontWeight: 'bold',
+    color: '#243E36',
+    fontSize: 23
+   }
+
+
+})
+export default WelcomeButton;

Insight/assets/screens/ContactsPage.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { useState } from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image} from 'react-native';
+
+export default function ContactsScreen() {
+  const [parentName, setName] = useState('');
+  const [parentNumber, setNumber] = useState('');
+
+  const handleSubmit = async () => {
+    console.log('Submitted:', parentName, parentNumber);
+    await add_contacts(parentName, parentNumber); 
+    console.log("Function returned")
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.line1}>
+      </View>
+      <View style={styles.heading}>
+        <Image 
+            style={styles.image}
+            source={require('../assets/Contacts(2).png')}
+        />
+        <Text
+            style={{fontWeight: 'bold', fontSize: 45, left: '40%', bottom: 50, color: '#243E36'}}>
+            Contacts
+        </Text>
+      </View>
+      <View style={styles.line2}>
+      </View>
+      <TextInput
+        value={parentName}
+        onChangeText={(text) => setName(text)}
+        placeholder="Parent Name"
+        style={styles.textbox}
+      />
+
+      <TextInput
+        value={parentNumber}
+        onChangeText={(text) => setNumber(text)}
+        placeholder="Parent Phone"
+        style={styles.textbox}
+      />
+
+      <TouchableOpacity onPress={handleSubmit} style={styles.button}>
+        <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 25}}>Submit</Text>
+      </TouchableOpacity>
+
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#243E36',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  heading: {
+    backgroundColor: '#E0EEC6',
+    width: 321, 
+    height: 126,
+    justifyContent: 'center',
+    borderRadius: 20
+  },
+
+  line1: {
+    backgroundColor: '#7CA982',
+    width: 213,
+    height: 8, 
+    marginBottom: 30
+  },
+
+  line2: {
+    backgroundColor: '#7CA982',
+    width: 213,
+    height: 8, 
+    marginTop: 30, 
+    marginBottom: 20
+  },
+
+  textbox: {
+    width: '80%',
+    marginVertical: 10,
+    padding: 8,
+    borderWidth: 1,
+    backgroundColor: '#962626',
+    borderRadius: 4,
+    borderColor: 'black',
+    fontSize: 25,
+    fontWeight: 'bold', 
+    color: '#E0EEC6'
+  },
+
+  button: {
+    backgroundColor: '#962626',
+    padding: 5,
+    borderRadius: 20,
+    marginTop: 30,
+    height: 50, 
+    width: 231, 
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+
+  image: {
+    width: 96, 
+    height: 96, 
+    left: '5%',
+    top: '25%'
+  }
+});