implemented blue color interface

frontend/src/screen/Blue.js

@@ -34,7 +34,91 @@ export default function Blue() {
       }, [navigation]);
 
       return(
-          <Text></Text>
+        <SafeAreaView>
+            <View style={{flexDirection: "column"}}>
+                <ImageBackground style={styles.image} source={require("../assets/game/gameback.png")}>
+
+                    <View>
+                        
+                        <View style={styles.textBody}>
+                            <Text style={styles.text}>Say the name of this color?</Text>
+                        </View>
+
+                        <Image style={styles.robo} source={require("../assets/game/robo.png")}></Image>
+
+                    </View>
+
+                    <View>
+
+                        <Image style={styles.blackboard} source={require("../assets/game/blackboard.png")}></Image>
+
+                        <View style={styles.box}>  
+                        </View>
+
+                    </View>
+
+                    <View style={{flexDirection: "row", marginLeft: 480}}>
+                        <Button style={styles.button} title="Recode"/>
+                        <Button  title="Return" color="#1DCE92"/>
+                        <Button  title="Exit" color="#841584"/>
+                    </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
+
+    },
+    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"
+    }
 
-}
+})
\ No newline at end of file

frontend/src/screen/Color.js

@@ -16,23 +16,35 @@ const[names,setNames] = useState([]);
 
     const navigation = useNavigation();
 
-    function getSMSReport() {
-        axios
-          .get(webUrel)
-          .then((response) => {
-            console.log(response.data);
-
-            // setNames(response.data)
-
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-      }
-
-      useEffect(() =>{
-          getSMSReport();
-      })
+    React.useEffect(() => {
+        const unsubscribe = navigation.addListener("focus", () => {
+          // The screen is focused
+          // Call any action
+          Orientation.unlockAllOrientations();
+          Orientation.lockToPortrait();
+        });
+    
+        // Return the function to unsubscribe from the event so it gets removed on unmount
+        return unsubscribe;
+      }, [navigation]);
+
+    // function getSMSReport() {
+    //     axios
+    //       .get(webUrel)
+    //       .then((response) => {
+    //         console.log(response.data);
+
+    //         // setNames(response.data)
+
+    //       })
+    //       .catch((err) => {
+    //         console.log(err);
+    //       });
+    //   }
+
+    //   useEffect(() =>{
+    //       getSMSReport();
+    //   })
     
     return (