Merge branch 'it18257632' into 'master'

changed Read Category

See merge request !144

API/app.py

 import re
 
-import MySQLdb
+# import MySQLdb
 import mysql
 from flask import Flask, redirect, url_for, render_template, request, jsonify, make_response
 import random
@@ -22,31 +22,31 @@ app = Flask(__name__)
 def home():
     return render_template('home.html')
 
-@app.route('/register', methods =['POST'])
-def register():
-    msg = ''
-    if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form:
-        username = request.form['username']
-        password = request.form['password']
-        email = request.form['email']
-        cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
-        cursor.execute('SELECT * FROM user WHERE name = % s', (username,))
-        account = cursor.fetchone()
-        if account:
-            msg = 'Account already exists !'
-        elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
-            msg = 'Invalid email address !'
-        elif not re.match(r'[A-Za-z0-9]+', username):
-            msg = 'Username must contain only characters and numbers !'
-        elif not username or not password or not email:
-            msg = 'Please fill out the form !'
-        else:
-            cursor.execute('INSERT INTO accounts VALUES (NULL, % s, % s, % s)', (username, password, email,))
-            mysql.connection.commit()
-            msg = 'You have successfully registered !'
-    elif request.method == 'POST':
-        msg = 'Please fill out the form !'
-    return msg
+# @app.route('/register', methods =['POST'])
+# def register():
+#     msg = ''
+#     if request.method == 'POST' and 'username' in request.form and 'password' in request.form and 'email' in request.form:
+#         username = request.form['username']
+#         password = request.form['password']
+#         email = request.form['email']
+#         cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
+#         cursor.execute('SELECT * FROM user WHERE name = % s', (username,))
+#         account = cursor.fetchone()
+#         if account:
+#             msg = 'Account already exists !'
+#         elif not re.match(r'[^@]+@[^@]+\.[^@]+', email):
+#             msg = 'Invalid email address !'
+#         elif not re.match(r'[A-Za-z0-9]+', username):
+#             msg = 'Username must contain only characters and numbers !'
+#         elif not username or not password or not email:
+#             msg = 'Please fill out the form !'
+#         else:
+#             cursor.execute('INSERT INTO accounts VALUES (NULL, % s, % s, % s)', (username, password, email,))
+#             mysql.connection.commit()
+#             msg = 'You have successfully registered !'
+#     elif request.method == 'POST':
+#         msg = 'Please fill out the form !'
+#     return msg
 
 # Color Function Route (IT18218640)
 
@@ -165,6 +165,6 @@ def login():
     return make_response(body)
 
 if __name__ == "__main__":
-    app.run(host='192.168.8.102')
-    # app.run(host='192.168.8.100,port='5000', debug=True)
+    app.run(host='192.168.1.101')
+    # app.run(host='192.168.8.102')
     # app.run(debug=True)
\ No newline at end of file

API/db/dbConnection.py

@@ -12,7 +12,7 @@ def create_con():
         database="helply",
         host="127.0.0.1",
         user="root",
-        password="rp19970520"
+        password="12345678"
     )
     return db
 

frontend/src/assets/read/data/ReadData.js

+const ImagePaths = {
+  roundOne: require('../image/round1.jpeg'),
+  roundTwo: require('../image/round2.png'),
+  summery: require('../image/ReadHeaderImg4.webp'),
+  robot1: require('../image/robot1.png'),
+  robot2: require('../image/activity-2-rob.png'),
+};
+export default ImagePaths;

frontend/src/component/buttonView.js

@@ -33,7 +33,7 @@ export default function ColorActivity(props) {
       <View style={[{flexDirection: 'row'}]}>
         <View style={styles.cardImage}>
           <Image
-            source={require('../assets/read/backboard3.jpeg')}
+            source={require('../assets/read/image/backboard3.jpeg')}
             style={{width: 100, height: 100, borderRadius: 20}}></Image>
         </View>
 

frontend/src/component/reading/ReadCategory.js

+import React, {useEffect} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ImageBackground,
+  TouchableNativeFeedback,
+  Platform,
+} from 'react-native';
+
+const ReadCategory = props => {
+  const {title, image, id, color, onSelectGame, path} = props;
+  return (
+    <View style={styles.gameItem}>
+      <TouchableOpacity onPress={onSelectGame}>
+        <View>
+          {/* <View style={{...styles.gameItemRow, ...styles.gameItemHeader}}> */}
+            <ImageBackground style={styles.bgImage} source={image}>
+              <View style={styles.titleContainer}>
+                <Text style={styles.title} numberOfLines={1}>
+                  {title}
+                </Text>
+              </View>
+            </ImageBackground>
+          {/* </View> */}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  gameItem: {
+    
+    height: 300,
+    width: '100%',
+    backgroundColor: '#ccc',
+    marginVertical: 10,
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+
+  gameItemHeader: {
+    height: '90%',
+  },
+  gameItemRow: {
+    flexDirection: 'row',
+    backgroundColor: 'green',
+  },
+  gameItemDetails: {
+    height: '10%',
+    paddingHorizontal: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  bgImage: {
+    
+    height: '100%',
+    width: '100%',
+    justifyContent: 'flex-end',
+  },
+  title: {
+    color: 'white',
+    fontFamily: 'open-sans-bold',
+    fontSize: 20,
+    textAlign: 'center',
+  },
+  titleContainer: {
+    padding: 10,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+  },
+});
+
+export default ReadCategory;

frontend/src/router/router.js

 import React from 'react';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import Colors from '../constants/Colors'
+import Colors from '../constants/Colors';
 
 import Home from '../screen/home';
 import Start from '../screen/Start';
@@ -11,13 +11,12 @@ import Splash from '../screen/splash/splash';
 import Color from '../screen/Color';
 import Blue from '../screen/activity/Blue';
 import Read from '../screen/Read';
-import ReadActivity from '../screen/activity/readActivity';
-import ReadActivity2 from '../screen/activity/readActivity2'
-import ColorResult from '../screen/result/ColorResult';;
-import PrimaryType from '../screen/activity/PrimaryType'
-import SecondaryType from '../screen/activity/SecondaryType'
+import ReadActivity from '../screen/reading/ReadActivity';
+import ColorResult from '../screen/result/ColorResult';
+import PrimaryType from '../screen/activity/PrimaryType';
+import SecondaryType from '../screen/activity/SecondaryType';
 import GameList from '../screen/memory/GameList';
-import StartGameScreen from '../screen/memory/StartGameScreen'
+import StartGameScreen from '../screen/memory/StartGameScreen';
 import GameScreenOne from '../screen/memory/elementry/GameScreenOne';
 import GameScreenOneAll from '../screen/memory/elementry/GameScreenOneAll';
 import GameScreenTwo from '../screen/memory/elementry/GameScreenTwo';
@@ -25,11 +24,11 @@ import GameScreenTwoAll from '../screen/memory/elementry/GameScreenTwoAll';
 import GameScreenThree from '../screen/memory/elementry/GameScreenThree';
 import GameScreenThreeAll from '../screen/memory/elementry/GameScreenThreeAll';
 import GameScreenFour from '../screen/memory/elementry/GameScreenFour';
-import GameScreenFourAll from '../screen/memory/elementry/GameScreenFourAll'
+import GameScreenFourAll from '../screen/memory/elementry/GameScreenFourAll';
 import GameScreenFive from '../screen/memory/elementry/GameScreenFive';
-import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll'
+import GameScreenFiveAll from '../screen/memory/elementry/GameScreenFiveAll';
 import GameScreenSix from '../screen/memory/elementry/GameScreenSix';
-import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll'
+import GameScreenSixAll from '../screen/memory/elementry/GameScreenSixAll';
 import GameOverScreen from '../screen/memory/GameOverScreen';
 
 const Stack = createNativeStackNavigator();
@@ -74,7 +73,11 @@ const AppRouter = () => {
           component={Blue}
         />
         <Stack.Screen
-          options={{headerShown: false}}
+          options={{
+            title: 'Read Activity',
+            headerTintColor: 'white',
+            headerStyle: {backgroundColor: Colors.secondary},
+          }}
           name="Read"
           component={Read}
         />
@@ -83,11 +86,6 @@ const AppRouter = () => {
           name="ReadActivity"
           component={ReadActivity}
         />
-        <Stack.Screen
-          options={{headerShown: false}}
-          name="ReadActivity2"
-          component={ReadActivity2}
-        />
         <Stack.Screen
           options={{headerShown: false}}
           name="ColorResult"
@@ -99,7 +97,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: { backgroundColor: Colors.primary },
+            headerStyle: {backgroundColor: Colors.primary},
           }}
         />
         <Stack.Screen
@@ -109,7 +107,7 @@ const AppRouter = () => {
             headerShown: true,
             title: 'Game Start',
             headerTintColor: 'white',
-            headerStyle: { backgroundColor: Colors.primary },
+            headerStyle: {backgroundColor: Colors.primary},
           }}
         />
         <Stack.Screen
@@ -175,12 +173,12 @@ const AppRouter = () => {
         <Stack.Screen
           name="GameOverScreen"
           component={GameOverScreen}
-          options={{ 
-            headerShown: true ,
+          options={{
+            headerShown: true,
             title: 'Game Over',
             headerTintColor: 'white',
-            headerStyle: { backgroundColor: Colors.primary },
-           }}
+            headerStyle: {backgroundColor: Colors.primary},
+          }}
         />
         <Stack.Screen
           options={{headerShown: false}}

frontend/src/screen/Read.js

@@ -15,9 +15,12 @@ import {
   Animated,
   Easing,
   NativeModules,
+  TouchableOpacity,
 } from 'react-native';
 import ImageButton from '../component/ImageButton';
 import ButtonView from '../component/buttonView';
+import ReadCategory from '../component/reading/ReadCategory';
+import ImagePaths from '../assets/read/data/ReadData';
 
 const webUrel = 'http://127.0.0.1:5000/reading';
 
@@ -52,35 +55,55 @@ export default function Read() {
   return (
     <SafeAreaView>
       <ScrollView>
-        <View>
-          <View>
-            <ImageBackground
-              source={require('../assets/read/background3.jpeg')}
-              style={styles.image}>
-              <Text style={styles.title}>Read Activity</Text>
-            </ImageBackground>
-          </View>
-        </View>
-
-        {/* {activity.map((data, index) => {
-          return <ButtonView title={data.round} color="#00008B" />;
-        })} */}
-
-        <ButtonView
-          title="First Round"
-          color="#00008B"
-          path="ReadActivity"></ButtonView>
-        <ButtonView
-          title="Second Round"
-          color="#00008B"
-          path="ReadActivity2"></ButtonView>
-        {/* <ButtonView title="Third Round" color="#00008B"></ButtonView> */}
+        {/* <View style={styles.screenHeader}>
+          <ImageBackground
+            source={require('../assets/read/image/ReadHeaderImg3.jpeg')}
+            style={styles.image}>
+            <Text style={styles.title}>Read Activity</Text>
+          </ImageBackground>
+        </View> */}
+        <TouchableOpacity style={styles.screen}>
+          <ReadCategory
+            id={1}
+            title={'First Round'}
+            image={ImagePaths.roundOne}
+            onSelectGame={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+          <ReadCategory
+            id={1}
+            title={'Second Round'}
+            image={ImagePaths.roundTwo}
+            onSelectGame={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+          <ReadCategory
+            id={1}
+            title={'Result & Summery'}
+            image={ImagePaths.summery}
+            onSelectGame={() => {
+              navigation.navigate('ReadActivity');
+            }}
+          />
+        </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  screenHeader: {
+    height:200
+  },
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: '#ffff',
+  },
   imageContainer: {
     flexDirection: 'row',
     marginTop: 70,

frontend/src/screen/activity/readActivity.js

-import {useNavigation} from '@react-navigation/native';
-import Orientation from 'react-native-orientation-locker';
-import React, {useEffect, useState} from 'react';
-import {
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  View,
-  Dimensions,
-  SafeAreaView,
-  ImageBackground,
-  Button,
-  Image,
-} from 'react-native';
-
-export default function ReadActivity() {
-  const navigation = useNavigation();
-
-  React.useEffect(() => {
-    const unsubscribe = navigation.addListener('focus', () => {
-      // The screen is focused
-      // Call any action
-      Orientation.unlockAllOrientations();
-      Orientation.lockToLandscape();
-    });
-
-    return unsubscribe;
-  }, [navigation]);
-
-  return (
-    <SafeAreaView>
-      <View style={{flexDirection: 'column'}}>
-        <ImageBackground
-          style={styles.image}
-          source={require('../../assets/read/background2.jpeg')}>
-          <View>
-            <View style={styles.textBody}>
-              <Text style={styles.text}>Pronounce this Word!</Text>
-            </View>
-
-            <Image
-              style={styles.robo}
-              source={require('../../assets/read/activity-2-rob.png')}></Image>
-          </View>
-
-          <View>
-            <Image
-              style={styles.blackboard}
-              source={require('../../assets/read/reading.png')}></Image>
-          </View>
-
-          <View style={{flexDirection: 'row', marginLeft: 580, marginTop: -30}}>
-            <Button style={styles.button} title="Start" />
-          </View>
-        </ImageBackground>
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  body: {
-    flex: 1,
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  box: {
-    width: 180,
-    height: 180,
-    // borderColor: "#000000",
-    backgroundColor: 'blue',
-    marginTop: -370,
-    marginLeft: 455,
-    borderRadius: 100,
-  },
-  aa: {
-    marginTop: -120,
-  },
-  blackboard: {
-    marginTop: -320,
-    marginLeft: 240,
-    width: '50%',
-    height: 300,
-  },
-  robo: {
-    marginTop: -70,
-    marginLeft: -5,
-    width: 150,
-    height: 200,
-  },
-  textBody: {
-    marginTop: 150,
-    marginLeft: 95,
-    backgroundColor: '#00008B',
-    width: 150,
-    borderRadius: 50,
-    padding: 5,
-  },
-  text: {
-    fontSize: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: 'white',
-    textAlign: 'center',
-    fontWeight: 'bold',
-  },
-  button: {
-    padding: 10,
-    marginRight: 50,
-    color: '#000000',
-  },
-});

frontend/src/screen/auth/Login.js

-import { useNavigation } from "@react-navigation/native";
+import {useNavigation} from '@react-navigation/native';
 import Orientation from 'react-native-orientation-locker';
 import React, { useState } from "react";
 import { SafeAreaView, ScrollView, View, StyleSheet, ImageBackground, Text, TextInput, TouchableOpacity, Image } from "react-native";
@@ -12,18 +12,19 @@ const isValidObjectField = (obj) => {
 }
 
 const updateError = (error, stateUpdater) => {
-    stateUpdater(error);
-    setTimeout( () => {
-        stateUpdater('')
-    }, 2500);
-}
+  stateUpdater(error);
+  setTimeout(() => {
+    stateUpdater('');
+  }, 2500);
+};
 
-const isValidEmail = (value) => {
-    const regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
-    return regex.test(value);
-}
+const isValidEmail = value => {
+  const regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
+  return regex.test(value);
+};
 
 const Login = () => {
+  const navigation = useNavigation();
 
     const dispatch = useDispatch();
 
@@ -43,33 +44,27 @@ const Login = () => {
         email: '',
         password: '',
     });
+    return unsubscribe;
+  }, [navigation]);
 
-    const { email, password } = userInfo;
-
-    const handleOnChangeText = (value, fieldName) => {
-
-        setUserInfo({ ...userInfo, [fieldName]: value });
+  const [userInfo, setUserInfo] = useState({
+    email: '',
+    password: '',
+  });
 
-        // console.log(value, fieldName);
-    };
+  const {email, password} = userInfo;
 
-    const [ error, setError ] = useState('');
+  const handleOnChangeText = (value, fieldName) => {
+    setUserInfo({...userInfo, [fieldName]: value});
 
-    const isValidForm = () => {
-
-        if (!isValidObjectField(userInfo)) {
-            return updateError('Required all fields!', setError);
-        }
-
-        if (!isValidEmail(email)){
-            return updateError('Invalid email !', setError);
-        }
+    // console.log(value, fieldName);
+  };
 
-        if (!password.trim() || password.length < 8){
-            return updateError('Password is less than 8 characters !', setError);
-        }
+  const [error, setError] = useState('');
 
-        return true;
+  const isValidForm = () => {
+    if (!isValidObjectField(userInfo)) {
+      return updateError('Required all fields!', setError);
     }
 
     const loginHandler = () => {
@@ -94,37 +89,8 @@ const Login = () => {
         }
     }
 
-    const loginFun = () => {
-
-        var formData = JSON.stringify(userInfo);
-
-        client.post('login', formData, {
-            headers: {
-                Accept: 'application/json',
-                'Content-Type': 'application/json',
-
-            },
-        })
-        .then((response) => {
-            
-            console.log(response.data);
-
-            if(response.data.status == 404){
-            
-                return updateError('Please register our system', setError);
-            
-            }
-            if(response.data.status == 200){
-
-                return navigation.navigate("Start");
-
-            }
-
-        })
-        .catch((err) => {
-            console.log(err);
-        });
-
+    if (!password.trim() || password.length < 8) {
+      return updateError('Password is less than 8 characters !', setError);
     }
 
     return(
@@ -172,80 +138,80 @@ const Login = () => {
 }
 
 const styles = StyleSheet.create({
-
-    continer:{
-        flex:1
-    },
-    backgroundImage:{
-        width: '100%',
-        height: 900
-    },
-    logo:{
-        marginTop: 100,
-        marginLeft: 50,
-        width: '80%',
-        height: '40%'
+  continer: {
+    flex: 1,
+  },
+  backgroundImage: {
+    width: '100%',
+    height: 900,
+  },
+  logo: {
+    marginTop: 100,
+    marginLeft: 50,
+    width: '80%',
+    height: '40%',
+  },
+  main_container: {
+    marginTop: -170,
+    marginLeft: 30,
+    width: 350,
+    height: 450,
+    backgroundColor: '#ffffff',
+    borderColor: '#000000',
+    borderRadius: 50,
+    shadowColor: '#000000',
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    shadowOffset: {
+      height: 1,
+      width: 1,
     },
-    main_container:{
-        marginTop: -170,
-        marginLeft: 30,
-        width: 350,
-        height: 450,
-        backgroundColor: "#ffffff",
-        borderColor: '#000000',
-        borderRadius: 50,
-        shadowColor: "#000000",
-        shadowOpacity: 0.8,
-        shadowRadius: 2,
-        shadowOffset: {
-            height: 1,
-            width: 1
-        },
-    },
-    main_title:{
-        textAlign: 'center',
-        fontSize: 40,
-        color: '#000000'
-    },
-    form_input:{
-        marginTop: 20,
-        padding: 20,
-    },text_input:{
-        padding: 15,
-        fontSize: 16,
-        borderWidth: 1,
-        borderRadius: 50,
-        backgroundColor: '#EDEDED',
-        color:'#000000'
-        
-    },btn:{
-        padding: 15,
-        borderRadius: 50,
-        backgroundColor: '#1DCE92',
-        width: 150,
-        textAlign: 'center',
-        alignItems: 'center',
-        marginLeft: 80   
-    },
-    btn_text:{
-        fontSize: 20,
-        fontWeight: 'bold',
-        color:'#000000',
-    },btn_text2:{
-        fontSize: 20,
-        fontWeight: 'bold',
-        color:'#000000',
-        marginTop:-10
-    },
-    text_if:{
-        fontSize: 20,
-        fontWeight: 'bold',
-        color:'#000000',
-        textAlign: 'center',
-        alignItems: 'center',
-        marginTop: 10 
-    }
-
-})
-
-export default Login;
+  },
+  main_title: {
+    textAlign: 'center',
+    fontSize: 40,
+    color: '#000000',
+  },
+  form_input: {
+    marginTop: 20,
+    padding: 20,
+  },
+  text_input: {
+    padding: 15,
+    fontSize: 16,
+    borderWidth: 1,
+    borderRadius: 50,
+    backgroundColor: '#EDEDED',
+    color: '#000000',
+  },
+  btn: {
+    padding: 15,
+    borderRadius: 50,
+    backgroundColor: '#1DCE92',
+    width: 150,
+    textAlign: 'center',
+    alignItems: 'center',
+    marginLeft: 80,
+  },
+  btn_text: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000000',
+  },
+  btn_text2: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000000',
+    marginTop: -10,
+  },
+  text_if: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#000000',
+    textAlign: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+});
+
+export default Login;
\ No newline at end of file

frontend/src/screen/client/Client.js

 import axios from 'axios';
 
-export default axios.create({ baseURL: 'http://192.168.8.102:5000/',timeout: 15000, });
+// export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, });
\ No newline at end of file
+export default axios.create({
+  baseURL: 'http://192.168.1.101:5000/',
+  timeout: 15000,
+});

frontend/src/screen/home.js

@@ -31,7 +31,7 @@ export default function Home({ navigation }){
             <View style={styles.imageView}>
               <Image
                 style={styles.image}
-                source={require('../assets/read/background4.jpg')}
+                source={require('../assets/read/image/background4.jpg')}
                 resizeMode="contain"></Image>
               <ImageButton path="Read" title="Read Activity" />
             </View>

frontend/src/screen/activity/readActivity2.js → frontend/src/screen/reading/ReadActivity.js

@@ -13,7 +13,7 @@ import {
   Image,
 } from 'react-native';
 
-export default function ReadActivity2() {
+export default function ReadActivity() {
   const navigation = useNavigation();
 
   // React.useEffect(() => {
@@ -32,12 +32,12 @@ export default function ReadActivity2() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={require('../../assets/read/activity-2-backg.jpeg')}>
+          source={require('../../assets/read/image/activity-2-backg.jpeg')}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
                 <Image
-                  source={require('../../assets/read/activity-2-rob.png')}></Image>
+                  source={require('../../assets/read/image/activity-2-rob.png')}></Image>
               </View>
             </View>
             <View style={styles.textBody}>
@@ -55,12 +55,11 @@ export default function ReadActivity2() {
           <View>
             <Image
               style={styles.blackboard}
-              source={require('../../assets/read/backboard3.png')}></Image>
+              source={require('../../assets/read/image/backboard3.png')}></Image>
           </View>
-
-          {/* <View style={{flexDirection: 'row', marginTop: 120}}>
+          <View style={{flexDirection: 'row', marginTop: 120}}>
             <Button style={styles.button} title="Start" />
-          </View> */}
+          </View>
         </ImageBackground>
       </View>
     </SafeAreaView>
@@ -121,10 +120,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     color: '#00008B',
+    borderRadius:10,
+    backgroundColor: 'rgba(0,0,0,0.2)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
-  
+
   button: {
     padding: 10,
     marginLeft: 5,