skin_assets

src/constants/imgs.js

@@ -15,4 +15,20 @@ export default {
   sk_14: require('../assets/sk_14.jpg'),
   sk_15: require('../assets/sk_15.png'),
   sk_16: require('../assets/sk_16.png'),
+  sk_17: require('../assets/sk_17.png'),
+  sk_18: require('../assets/sk_18.png'),
+  sk_19: require('../assets/sk_19.png'),
+  sk_20: require('../assets/sk_20.png'),
+  sk_21: require('../assets/sk_21.png'),
+  sk_22: require('../assets/sk_22.png'),
+  sk_23: require('../assets/sk_23.jpg'),
+  sk_24: require('../assets/sk_24.jpg'),
+  sk_25: require('../assets/sk_25.png'),
+  sk_26: require('../assets/sk_26.png'),
+  sk_27: require('../assets/sk_27.png'),
+  sk_28: require('../assets/sk_28.png'),
+  sk_29: require('../assets/sk_29.png'),
+  sk_30: require('../assets/sk_30.png'),
+  sk_31: require('../assets/sk_31.png'),
+  sk_32: require('../assets/sk_32.png'),
 };

src/screens/home/skin/AdditionalSymptoms.js

@@ -122,6 +122,35 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
       <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
             <View style={styles.topContainer}>
             <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
+            <View style={styles.qrCodeBox1}>
+                          <Image
+                            source={IMGS.sk_24}  // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                        <Text style={styles.dscriptionText1}>
+                        මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                        වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                        </Text>
+                        <Text style={styles.dscriptionText1}>
+                        Check if you have the symptoms listed below. Watch the video for guidance. 
+                        If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                        </Text>
+                         
+            </View>
+            <Image source={IMGS.sk_25}
+                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                        
+            <View style={styles.qrCodeBox}>
+                        <Image
+                            source={IMGS.sk_26}  // Make sure the path is correct
+                            style={styles.qrCodeImage1}
+                        />
+                         <TouchableOpacity
+                          style={styles.orButton}
+                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
+                                 <Text style={styles.orButtonText}>OR Click This</Text>
+                        </TouchableOpacity>
+            </View>
             <View style={styles.videoBox}>
                     <View style={styles.videoDescriptionBox}>
             <Text style={styles.descriptionText}>
@@ -142,26 +171,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
             <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                 <Image
                     style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                 />
             </TouchableOpacity>
             )}
             </TouchableOpacity>
             </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</Text>
+            <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
+            <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
                     <View style={styles.checkboxContainer}>
                         {symptomsGroups.map((group, index) => (
                             <View key={index}>
@@ -183,7 +200,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 </View>
 
                 <Button
-                    title="Continue for more information"
+                    title="Evaluate the risk level"
                     style={styles.nextButton}
                     onPress={handleSubmit} 
                 />
@@ -247,8 +264,8 @@ const styles = StyleSheet.create({
         
     },
     checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+        fontSize: 16,
+        
         marginBottom: 10,
         alignSelf: 'center',
         color:COLORS.black,
@@ -334,7 +351,7 @@ const styles = StyleSheet.create({
         borderColor: '#80BCBD', // Set the border color
         borderRadius: 10, // Set border radius for rounded corners
         padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+        marginBottom: 40, // Add bottom margin for spacing
         width: '100%', // Adjust the width as necessary
         alignSelf: 'center', // Center the box within its container
         // Add shadows for elevation effect (optional)
@@ -374,7 +391,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         padding: 20,
         backgroundColor: COLORS.white,
-        marginBottom: 20,
+        marginBottom: 40,
         shadowColor: "#000",
         borderColor: '#80BCBD',
         borderWidth: 2,
@@ -386,6 +403,7 @@ const styles = StyleSheet.create({
         shadowOpacity: 0.25,
         shadowRadius: 3.84,
         elevation: 5,
+        marginTop:16
     },
     qrCodeImage: {
         width: 200, // Adjust size as needed
@@ -403,6 +421,38 @@ const styles = StyleSheet.create({
         color: COLORS.white,
         fontSize: 14,
         fontWeight: 'bold',
+    },
+    qrCodeBox1: {
+        width: '95%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 30,
+        backgroundColor: COLORS.white,
+        marginBottom: 40,
+        shadowColor: "#000",
+        borderColor: '#80BCBD',
+        borderWidth: 2,
+        borderRadius: 10,
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 10,
+        marginTop:10
+    },
+   
+    qrCodeImage1:{
+        width: 210, // Adjust size as needed
+        height: 170,
+    },
+    dscriptionText1: {
+        fontSize: 14,
+        textAlign: 'center',
+        color: COLORS.darkGray,
+        marginTop: 20,
+        marginBottom: 20,
     }
 
    

src/screens/home/skin/AdditionalSymptoms1.js

@@ -115,7 +115,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Patechiae Additional Symptoms</Text>
+                <Text style={styles.topicText}>Peteachie Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}   // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25}
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_27}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_1_kashsimytd')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -136,26 +165,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR2.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_1_kashsimytd')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</Text>
+                <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
+                <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
                         <View style={styles.checkboxContainer}>
                             {symptomsGroups.map((group, index) => (
                                 <View key={index}>
@@ -177,17 +194,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -204,7 +221,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -217,7 +233,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -242,8 +258,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -324,12 +340,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -369,7 +385,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -381,6 +397,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -398,11 +415,44 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
+    
 
 export default AdditionalSymptomsScreen;

src/screens/home/skin/AdditionalSymptoms2.js

@@ -111,7 +111,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text>
+                <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}    // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25}
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_29}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_3_oq5mkmz3uu')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -132,26 +161,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR4.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_3_oq5mkmz3uu')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</Text>
+                <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
+                <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
                         <View style={styles.checkboxContainer}>
                             {symptomsGroups.map((group, index) => (
                                 <View key={index}>
@@ -173,17 +190,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -200,7 +217,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -213,7 +229,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -238,8 +254,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -320,12 +336,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -365,7 +381,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -377,6 +393,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -394,11 +411,44 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
+    
 
 export default AdditionalSymptomsScreen;

src/screens/home/skin/AdditionalSymptoms3.js

@@ -106,7 +106,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Herpes Additional Symptoms</Text>
+                <Text style={styles.topicText}>Herpes Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25} 
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_28}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_2_qbealmm517')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -127,26 +156,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR3.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_2_qbealmm517')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</Text>
+                <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
+                <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
                         <View style={styles.checkboxContainer}>
                             {symptomsGroups.map((group, index) => (
                                 <View key={index}>
@@ -168,17 +185,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -195,7 +212,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -208,7 +224,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -233,8 +249,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -315,12 +331,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -360,7 +376,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -372,6 +388,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -389,11 +406,43 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
 
 export default AdditionalSymptomsScreen;

src/screens/home/skin/AdditionalSymptoms4.js

@@ -112,17 +112,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
             <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                 <Image
                     style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                 />
             </TouchableOpacity>
             )}
             </TouchableOpacity>
             </View>
-            <Image source={require('./skinassets/scanme.png')}
+            <Image source={IMGS.sk_25} 
                         style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
             <View style={styles.qrCodeBox}>
                         <Image
-                            source={require('./skinassets/QR1.png')}  // Make sure the path is correct
+                            source={IMGS.sk_26}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                          <TouchableOpacity

src/screens/home/skin/AdditionalSymptoms5.js

@@ -104,7 +104,36 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
         <SafeAreaView style={styles.container}>
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
                 <View style={styles.topContainer}>
-              <Text style={styles.topicText}>Melanoma Additional Symptoms</Text>
+                <Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
+                <View style={styles.qrCodeBox1}>
+                              <Image
+                                source={IMGS.sk_24}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                            <Text style={styles.dscriptionText1}>
+                            මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. 
+                            වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
+                            </Text>
+                            <Text style={styles.dscriptionText1}>
+                            Check if you have the symptoms listed below. Watch the video for guidance. 
+                            If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
+                            </Text>
+                             
+                </View>
+                <Image source={IMGS.sk_25}
+                            style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
+                            
+                <View style={styles.qrCodeBox}>
+                            <Image
+                                source={IMGS.sk_30}  // Make sure the path is correct
+                                style={styles.qrCodeImage1}
+                            />
+                             <TouchableOpacity
+                              style={styles.orButton}
+                                      onPress={() => Linking.openURL('https://mywebar.com/p/Project_4_wzkzvl12m')}>
+                                     <Text style={styles.orButtonText}>OR Click This</Text>
+                            </TouchableOpacity>
+                </View>
                 <View style={styles.videoBox}>
                         <View style={styles.videoDescriptionBox}>
                 <Text style={styles.descriptionText}>
@@ -125,26 +154,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                 <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                     <Image
                         style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                        source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                     />
                 </TouchableOpacity>
                 )}
                 </TouchableOpacity>
                 </View>
-            <Image source={require('./skinassets/scanme.png')}
-                        style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
-            <View style={styles.qrCodeBox}>
-                        <Image
-                            source={require('./skinassets/QR5.png')}  // Make sure the path is correct
-                            style={styles.qrCodeImage}
-                        />
-                         <TouchableOpacity
-                          style={styles.orButton}
-                                  onPress={() => Linking.openURL('https://mywebar.com/p/Project_4_wzkzvl12m')}>
-                                 <Text style={styles.orButtonText}>OR Click This</Text>
-                        </TouchableOpacity>
-            </View>
-            <Text style={styles.checkboxLabel}>Check the related box</Text>
+                <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
+                <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
                         <View style={styles.checkboxContainer}>
                             {symptomsGroups.map((group, index) => (
                                 <View key={index}>
@@ -166,17 +183,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
                     </View>
     
                     <Button
-                    title="Continue for more information"
+                        title="Evaluate the risk level"
                         style={styles.nextButton}
                         onPress={handleSubmit} 
                     />
                 </ScrollView>
             </SafeAreaView>
         );
-};
+    };
     
     
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         scrollContainer: {
             flexGrow: 1,
         },
@@ -193,7 +210,6 @@ const styles = StyleSheet.create({
             backgroundColor: COLORS.white,
         // This creates the curve effect for the background
         },
-  
         topicText: {
             fontSize: 24,
             fontWeight: 'bold',
@@ -206,7 +222,7 @@ const styles = StyleSheet.create({
             textAlign: 'center',
             marginHorizontal: 20,
             marginBottom: 20,
-        color:COLORS.black,
+            color:COLORS.white,
             fontWeight: 'bold',
         },
         separator: {
@@ -231,8 +247,8 @@ const styles = StyleSheet.create({
             
         },
         checkboxLabel: {
-        fontSize: 18,
-        fontWeight: 'bold',
+            fontSize: 16,
+            
             marginBottom: 10,
             alignSelf: 'center',
             color:COLORS.black,
@@ -313,12 +329,12 @@ const styles = StyleSheet.create({
         },
     
         videoBox: {
-        backgroundColor: COLORS.white, // Set background color to white
+            backgroundColor: '#11324D', // Set background color to white
             borderWidth: 2, // Set the border width
             borderColor: '#80BCBD', // Set the border color
             borderRadius: 10, // Set border radius for rounded corners
             padding: 20, // Add padding around the content
-        marginBottom: -20, // Add bottom margin for spacing
+            marginBottom: 40, // Add bottom margin for spacing
             width: '100%', // Adjust the width as necessary
             alignSelf: 'center', // Center the box within its container
             // Add shadows for elevation effect (optional)
@@ -358,7 +374,7 @@ const styles = StyleSheet.create({
             alignItems: 'center',
             padding: 20,
             backgroundColor: COLORS.white,
-        marginBottom: 20,
+            marginBottom: 40,
             shadowColor: "#000",
             borderColor: '#80BCBD',
             borderWidth: 2,
@@ -370,6 +386,7 @@ const styles = StyleSheet.create({
             shadowOpacity: 0.25,
             shadowRadius: 3.84,
             elevation: 5,
+            marginTop:16
         },
         qrCodeImage: {
             width: 200, // Adjust size as needed
@@ -387,11 +404,43 @@ const styles = StyleSheet.create({
             color: COLORS.white,
             fontSize: 14,
             fontWeight: 'bold',
+        },
+        qrCodeBox1: {
+            width: '95%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 30,
+            backgroundColor: COLORS.white,
+            marginBottom: 40,
+            shadowColor: "#000",
+            borderColor: '#80BCBD',
+            borderWidth: 2,
+            borderRadius: 10,
+            shadowOffset: {
+                width: 0,
+                height: 2,
+            },
+            shadowOpacity: 0.25,
+            shadowRadius: 3.84,
+            elevation: 10,
+            marginTop:10
+        },
+       
+        qrCodeImage1:{
+            width: 210, // Adjust size as needed
+            height: 170,
+        },
+        dscriptionText1: {
+            fontSize: 14,
+            textAlign: 'center',
+            color: COLORS.darkGray,
+            marginTop: 20,
+            marginBottom: 20,
         }
     
        
         
         // ... possibly other styles
-});
+    });
 
 export default AdditionalSymptomsScreen;

src/screens/home/skin/SkinRisk.js

@@ -52,12 +52,12 @@ const RiskEvaluationScreen = ({ navigation }) => {
                 </Text>
                 <Text style={styles.subTopicText}>Please listen to the below audio</Text>            
                
-                 <Image source={require('./skinassets/musicicon.png')} style={styles.musicIcon} />
+                 <Image source={IMGS.sk_31} style={styles.musicIcon} />
                 <View style={styles.playerContainer}>
                 <View style={styles.controlsContainer}>
                         <TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}>
                             <Image
-                                source={audioPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                                source={audioPaused ? IMGS.sk_20 : IMGS.sk_19}
                                 style={styles.playPauseIcon}
                             />
                         </TouchableOpacity>
@@ -69,7 +69,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
                         onEnd={() => setAudioPaused(true)}
                     />
                 <View style={styles.progressContainer}>
-                            <Image source={require('./skinassets/sound-waves.png')} style={styles.progressBarBackground} />
+                            <Image source={IMGS.sk_32} style={styles.progressBarBackground} />
                             <Animated.View style={[styles.progressBar, { width: progressAnim.interpolate({
                                 inputRange: [0, 1],
                                 outputRange: ['0%', '100%']

src/screens/home/skin/SkinUploader.js

@@ -136,24 +136,25 @@ const Camera = ({ navigation }) => {
         )}
             {prediction && (
             <View style={styles.predictionContainer}>
-                <Text style={styles.predictionText}>Predicted Class: {prediction.class}</Text>
-                 <Text style={styles.predictionText}>Confidence: {prediction.confidence}</Text>
+                <Text style={styles.predictionText}>Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}</Text>
+                 <Text style={styles.predictionText}>How sure are we | නිරවද්යතාව: {prediction.confidence}</Text>
             </View>
             )}
-            {/* <Button
-                    title="Continue for more information"
+            <Button
+                    title="Take your next step"
                     style={styles.nextButton}
                     onPress={handleContinue}
-                /> */}
-                 <Button
-                        title="Start Today"
+                />
+                 {/* <Button
+                        title="Take your next step"
                         style={{
                             marginTop: 12,
-                            width: "100%",
-                            marginTop:43
+                            width: "90%",
+                            marginTop:43,
+                            marginBottom:83
                         }}
                         onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
-                    />
+                    /> */}
             </View>
         </View>
     );
@@ -248,7 +249,7 @@ const styles = StyleSheet.create({
            
         },
         nextButton: {
-            width: '70%',
+            width: '90%',
             paddingVertical: 10,
             marginBottom: 80, // Adjust the margin to move the button up further if necessary
             backgroundColor: COLORS.white,
@@ -288,6 +289,8 @@ const styles = StyleSheet.create({
             shadowOffset: { width: 0, height: 2 }, // iOS shadow
             shadowOpacity: 0.1, // iOS shadow
             shadowRadius: 2, // iOS shadow
+            bottom:75,
+            top:-10
         },
         resultsHeading: {
             fontSize: 16,
@@ -295,7 +298,7 @@ const styles = StyleSheet.create({
             fontWeight: 'bold',
             padding: 10,
             textAlign: 'center',
-            marginBottom: 100,
+            marginBottom: 90,
             marginLeft:0
         },
 

src/screens/home/skin/WelcomeSkin.js

@@ -43,19 +43,19 @@ const WelcomeExercise = ({ navigation }) => {
                         fontSize: 50,
                         // fontWeight: 800,
                         color: COLORS.white
-                    }}>Let's Get</Text>
+                    }}>Reveal Your</Text>
                     <Text style={{
                         fontSize: 46,
                         // fontWeight: 800,
                         color: COLORS.white
-                    }}>Started</Text>
+                    }}>Skin's Story</Text>
 
                     <View style={{ marginVertical: 22 }}>
                         <Text style={{
                             fontSize: 16,
                             color: COLORS.white,
                             marginVertical: 4
-                        }}>Reveal Your Skin's Story </Text>
+                        }}></Text>
                         <Text style={{
                             fontSize: 16,
                             color: COLORS.white,
@@ -63,7 +63,7 @@ const WelcomeExercise = ({ navigation }) => {
                     </View>
 
                     <Button
-                        title="Start Today"
+                        title="Diagnose"
                         style={{
                             marginTop: 12,
                             width: "100%",

src/screens/home/skin/information1.js

@@ -58,10 +58,10 @@ const Additionalinformation = ({ navigation }) => {
             <Text style={styles.contactTitle}>{title}</Text>
             <View style={styles.contactSpace} />
             <TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
-            <Image source={require('./skinassets/calling.png')} style={styles.contactIcon} />
+            <Image source={IMGS.sk_17} style={styles.contactIcon} />
                 <Text style={styles.contactInfo}>Phone: {phone}</Text>
             </TouchableOpacity>
-            <Image source={require('./skinassets/email.png')} style={styles.contactIcon} />
+            <Image source={IMGS.sk_18} style={styles.contactIcon} />
             <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
                 <Text style={styles.contactInfo}>Email: {email}</Text>
             </TouchableOpacity>
@@ -116,7 +116,7 @@ const Additionalinformation = ({ navigation }) => {
             <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
                 <Image
                     style={styles.playPauseIcon}
-                    source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
+                    source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
                 />
             </TouchableOpacity>
             )}
@@ -125,7 +125,7 @@ const Additionalinformation = ({ navigation }) => {
         
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/vector2.png')}  // Make sure the path is correct
+                            source={IMGS.sk_21}  // Make sure the path is correct
                             style={styles.qrCodeImage}
                         />
                         <Text style={styles.dscriptionText}>
@@ -138,7 +138,7 @@ const Additionalinformation = ({ navigation }) => {
                             style={styles.orButton}
                             onPress={() => Linking.openURL('https://youtu.be/sbrNx78JSV0?si=OsHd9sft8jDg1O1j')}>
                             <Image
-                                source={require('./skinassets/youtube.png')}
+                                source={IMGS.sk_22}
                                 style={styles.buttonIcon}
                             />
                             <Text style={styles.orButtonText}>Click here to view video</Text>
@@ -147,7 +147,7 @@ const Additionalinformation = ({ navigation }) => {
                             style={styles.orButton}
                             onPress={() => Linking.openURL('https://youtu.be/T9WQvX3W92A?si=dw7MhHk7TOpquJx_')}>
                             <Image
-                                source={require('./skinassets/youtube.png')}
+                                 source={IMGS.sk_22}
                                 style={styles.buttonIcon}
                             />
                             <Text style={styles.orButtonText}>Click here to view video</Text>
@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
             </View>
             <View style={styles.qrCodeBox}>
                           <Image
-                            source={require('./skinassets/Vectorw.jpg')}  // Make sure the path is correct
+                             source={IMGS.sk_23} // Make sure the path is correct
                             style={styles.qrCodeImage1}
                         />
                         <Text style={styles.dscriptionText}>