Progress

frontend/package-lock.json

@@ -3968,7 +3968,6 @@
       "peerDependencies": {
         "react-native": ">=0.59"
       }
-<<<<<<< HEAD
     },
     "node_modules/@react-native-picker/picker": {
       "version": "2.4.1",
@@ -3978,8 +3977,6 @@
         "react": "16 || 17",
         "react-native": ">=0.57"
       }
-=======
->>>>>>> a7a9d5d3add78ba5f3c20db3f2d330f56f73a488
     },
     "node_modules/@react-native-voice/voice": {
       "version": "3.2.3",
@@ -18355,15 +18352,12 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-7.1.12.tgz",
       "integrity": "sha512-fkCRkOgzfdD0sr8JTasDgm716l8bJPkCNjXIyllG8K+UyixVa68lroQmgW9pewE5G5p43I9MWPtGZR/kVowBzg==",
       "requires": {}
-<<<<<<< HEAD
     },
     "@react-native-picker/picker": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.4.1.tgz",
       "integrity": "sha512-1XWy3IQgwr7MWd30KdY1iUh2gQZD+JiotN1ifj/ptFUYKon/0UFwngKQaWCO/CP/FdLl20/huSSLwKedYrdMMA==",
       "requires": {}
-=======
->>>>>>> a7a9d5d3add78ba5f3c20db3f2d330f56f73a488
     },
     "@react-native-voice/voice": {
       "version": "3.2.3",

frontend/src/screen/Progress.js

-import React, {Component} from 'react';
+import React, {Component, useState} from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
@@ -14,23 +14,59 @@ import {
   Easing,
   NativeModules,
   Button,
+  Modal,
 } from 'react-native';
 import {useNavigation} from '@react-navigation/native';
 
 export default function Progress() {
+  const [modalVisible, setModalVisible2] = useState(false);
+
   const Separator = () => <View style={styles.separator} />;
   const navigation = useNavigation();
   return (
     <SafeAreaView style={styles.container}>
+      <View>
+        <Modal
+          animationType="fade"
+          transparent={true}
+          hidden={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            setModalVisible2(!modalVisible);
+          }}>
+          <View style={styles.centeredView2}>
+            <View style={styles.modalView2}>
+              {/* <Image
+                style={styles.alert2}
+                source={require('../../assets/alert/2.png')}></Image> */}
+                <View></View>
+
+              <Text style={styles.headStyle2}>Color Activity Progress</Text>
+              <button>Time</button>
+              <button>Speed</button>
+              <button>Accuracy</button>
+              <TouchableOpacity
+                style={[styles.buttonClose2]}
+                onPress={() =>
+                  navigation.navigate('Color', {type: 'secondary'})
+                }>
+                {/* <Image
+                  source={require('../../assets/game/next.png')}
+                  resizeMode="contain"
+                  style={{width: 100, height: 70, marginBottom: -10}}
+                /> */}
+              </TouchableOpacity>
+            </View>
+          </View>
+        </Modal>
+      </View>
+
       <View>
         <Button
           title="Color Activity"
-          onPress={() =>
-            navigation.navigate('PrimaryType', {
-              title: 'Primary Activities',
-              id: 1,
-            })
-          }></Button>
+          onPress={() => {
+            setModalVisible2(true);
+          }}></Button>
       </View>
       <Separator />
 
@@ -53,4 +89,197 @@ const styles = StyleSheet.create({
   separator: {
     marginVertical: 10,
   },
+  body: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  blackboard: {
+    marginTop: -420,
+    marginLeft: 240,
+    width: '70%',
+    height: 500,
+  },
+  robo: {
+    marginTop: -70,
+    marginLeft: -5,
+    width: 150,
+    height: 200,
+  },
+  textBody: {
+    marginTop: 150,
+    marginLeft: 95,
+    backgroundColor: '#1DCE92',
+    width: 200,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  button: {
+    padding: 10,
+    marginRight: 50,
+    color: '#000000',
+    marginLeft: 50,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -90,
+    marginLeft: -100,
+  },
+  modalView: {
+    marginRight: 20,
+    backgroundColor: '#00000000',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+
+  centeredView2: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView2: {
+    marginTop: -10,
+    margin: 20,
+    backgroundColor: '#FFFFFFEF',
+    borderRadius: 20,
+    padding: 35,
+    borderWidth: 5,
+    borderColor: '#1DCE92',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button2: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen2: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose2: {
+    // backgroundColor: "#1DCE92",
+  },
+  textStyle2: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText2: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  headStyle2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style2: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  alert2: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -80,
+  },
+
+  centeredView3: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -20,
+  },
+  modalView3: {
+    margin: 20,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 20,
+    borderWidth: 5,
+    borderColor: '#1DCE92',
+    alignItems: 'center',
+    shadowColor: 'red',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button3: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen3: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose3: {
+    backgroundColor: '#1DCE92',
+  },
+  textStyle3: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  headStyle3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 5,
+  },
+  head2Style3: {
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    fontSize: 30,
+    marginBottom: 20,
+  },
+  modalText3: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  alert3: {
+    backgroundColor: 'white',
+    borderRadius: 50,
+    width: 100,
+    height: 100,
+    marginBottom: 20,
+    marginTop: -65,
+  },
 });