Commit f7fabe12 authored by Devin B's avatar Devin B

skin_assets

parent c54d65fc
src/assets/sk_2.png

41.6 KB | W: | H:

src/assets/sk_2.png

1.25 KB | W: | H:

src/assets/sk_2.png
src/assets/sk_2.png
src/assets/sk_2.png
src/assets/sk_2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/sk_3.png

58.9 KB | W: | H:

src/assets/sk_3.png

1.13 KB | W: | H:

src/assets/sk_3.png
src/assets/sk_3.png
src/assets/sk_3.png
src/assets/sk_3.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -15,4 +15,20 @@ export default { ...@@ -15,4 +15,20 @@ export default {
sk_14: require('../assets/sk_14.jpg'), sk_14: require('../assets/sk_14.jpg'),
sk_15: require('../assets/sk_15.png'), sk_15: require('../assets/sk_15.png'),
sk_16: require('../assets/sk_16.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'),
}; };
...@@ -121,8 +121,37 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -121,8 +121,37 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Discoid Additional Symptoms </Text> <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
<View style={styles.videoBox}> <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}> <View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
...@@ -142,26 +171,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -142,26 +171,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image <Image
style={styles.playPauseIcon} style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')} source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Image source={require('./skinassets/scanme.png')} <Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} /> <Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<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>
<View style={styles.checkboxContainer}> <View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => ( {symptomsGroups.map((group, index) => (
<View key={index}> <View key={index}>
...@@ -183,7 +200,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -183,7 +200,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
</View> </View>
<Button <Button
title="Continue for more information" title="Evaluate the risk level"
style={styles.nextButton} style={styles.nextButton}
onPress={handleSubmit} onPress={handleSubmit}
/> />
...@@ -247,8 +264,8 @@ const styles = StyleSheet.create({ ...@@ -247,8 +264,8 @@ const styles = StyleSheet.create({
}, },
checkboxLabel: { checkboxLabel: {
fontSize: 18, fontSize: 16,
fontWeight: 'bold',
marginBottom: 10, marginBottom: 10,
alignSelf: 'center', alignSelf: 'center',
color:COLORS.black, color:COLORS.black,
...@@ -334,7 +351,7 @@ const styles = StyleSheet.create({ ...@@ -334,7 +351,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content 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 width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
...@@ -374,7 +391,7 @@ const styles = StyleSheet.create({ ...@@ -374,7 +391,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
padding: 20, padding: 20,
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
marginBottom: 20, marginBottom: 40,
shadowColor: "#000", shadowColor: "#000",
borderColor: '#80BCBD', borderColor: '#80BCBD',
borderWidth: 2, borderWidth: 2,
...@@ -386,6 +403,7 @@ const styles = StyleSheet.create({ ...@@ -386,6 +403,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
marginTop:16
}, },
qrCodeImage: { qrCodeImage: {
width: 200, // Adjust size as needed width: 200, // Adjust size as needed
...@@ -403,6 +421,38 @@ const styles = StyleSheet.create({ ...@@ -403,6 +421,38 @@ const styles = StyleSheet.create({
color: COLORS.white, color: COLORS.white,
fontSize: 14, fontSize: 14,
fontWeight: 'bold', 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,
} }
......
...@@ -112,297 +112,347 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -112,297 +112,347 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}, []); }, []);
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Patechiae Additional Symptoms</Text> <Text style={styles.topicText}>Peteachie Additional Symptoms </Text>
<View style={styles.videoBox}> <View style={styles.qrCodeBox1}>
<View style={styles.videoDescriptionBox}> <Image
<Text style={styles.descriptionText}> source={IMGS.sk_24} // Make sure the path is correct
Self diagnose with the 3D Model style={styles.qrCodeImage1}
</Text> />
</View> <Text style={styles.dscriptionText1}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. සඳහා වීඩියෝවක් ලබා දී ඇත.
<Video වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
// ref={videoRef} </Text>
source={{ uri: URL_link }} // Replace with the path to your video file <Text style={styles.dscriptionText1}>
style={[styles.video, { height: fullscreen ? '100%' : 300 }]} Check if you have the symptoms listed below. Watch the video for guidance.
paused={videoPaused} If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
resizeMode="contain" // This ensures the video fits within its container </Text>
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</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>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View> </View>
<Image source={IMGS.sk_25}
<Button style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
title="Continue for more information"
style={styles.nextButton} <View style={styles.qrCodeBox}>
onPress={handleSubmit} <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}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/> />
</ScrollView> {controlsVisible && (
</SafeAreaView> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
); <Image
}; style={styles.playPauseIcon}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
const styles = StyleSheet.create({ </TouchableOpacity>
scrollContainer: { )}
flexGrow: 1, </TouchableOpacity>
}, </View>
<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}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
<Button
container: { title="Evaluate the risk level"
flexGrow: 1, style={styles.nextButton}
backgroundColor: COLORS.white, onPress={handleSubmit}
}, />
topContainer: { </ScrollView>
flex: 1, </SafeAreaView>
justifyContent: 'center', );
alignItems: 'center', };
backgroundColor: COLORS.white,
// This creates the curve effect for the background
}, const styles = StyleSheet.create({
scrollContainer: {
topicText: { flexGrow: 1,
fontSize: 24, },
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
},
checkboxLabel: { container: {
fontSize: 18, flexGrow: 1,
fontWeight: 'bold', backgroundColor: COLORS.white,
marginBottom: 10, },
alignSelf: 'center', topContainer: {
color:COLORS.black, flex: 1,
}, justifyContent: 'center',
checkboxRow: { alignItems: 'center',
flexDirection: 'row', backgroundColor: COLORS.white,
alignItems: 'center', // This creates the curve effect for the background
marginBottom: 10, },
}, topicText: {
checkboxText: { fontSize: 24,
fontSize: 16, fontWeight: 'bold',
marginLeft: 8, color: COLORS.black,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line textAlign: 'center',
}, marginVertical: 20,
submitButton: { },
backgroundColor: COLORS.primary, descriptionText: {
borderRadius: 20, fontSize: 18,
padding: 15, textAlign: 'center',
marginVertical: 20, marginHorizontal: 20,
width: '90%', marginBottom: 20,
alignSelf: 'center', color:COLORS.white,
}, fontWeight: 'bold',
bottomContainer: { },
flex: 2, separator: {
justifyContent: 'flex-end', height: 2,
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue, backgroundColor: COLORS.blue,
borderTopRightRadius: 85, marginVertical: 10,
borderTopLeftRadius: 85, width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
}, checkboxContainer: {
nextButton: { backgroundColor: COLORS.lightBlue,
width: '70%', borderRadius: 25,
paddingVertical: 10, width: '100%', // Ensure it's taking the full width of its parent
marginBottom: 80, // Adjust the margin to move the button up further if necessary alignSelf: 'center', // This ensures it's centered relative to the parent
backgroundColor: COLORS.white, paddingTop: 10,
borderRadius: 20, marginLeft:197,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // 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
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxLabel: {
shadowRadius: 3.84, fontSize: 16,
elevation: 5,
}, marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxRow: {
shadowRadius: 3.84, flexDirection: 'row',
elevation: 5, alignItems: 'center',
}, marginBottom: 10,
qrCodeImage: { },
width: 200, // Adjust size as needed checkboxText: {
height: 200, // Adjust size as needed fontSize: 16,
}, marginLeft: 8,
orButton: { flexShrink: 1, // Allows the text to shrink and wrap onto the next line
marginTop: 30, },
backgroundColor: COLORS.primary, submitButton: {
padding: 10, backgroundColor: COLORS.primary,
borderRadius: 5, borderRadius: 20,
alignItems: 'center', padding: 15,
justifyContent: 'center', marginVertical: 20,
}, width: '90%',
orButtonText: { alignSelf: 'center',
color: COLORS.white, },
fontSize: 14, bottomContainer: {
fontWeight: 'bold', flex: 2,
} justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
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: 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)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
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: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
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
});
// ... possibly other styles
});
export default AdditionalSymptomsScreen; export default AdditionalSymptomsScreen;
...@@ -108,297 +108,347 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -108,297 +108,347 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}, []); }, []);
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms</Text> <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text>
<View style={styles.videoBox}> <View style={styles.qrCodeBox1}>
<View style={styles.videoDescriptionBox}> <Image
<Text style={styles.descriptionText}> source={IMGS.sk_24} // Make sure the path is correct
Self diagnose with the 3D Model style={styles.qrCodeImage1}
</Text> />
</View> <Text style={styles.dscriptionText1}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. සඳහා වීඩියෝවක් ලබා දී ඇත.
<Video වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
// ref={videoRef} </Text>
source={{ uri: URL_link }} // Replace with the path to your video file <Text style={styles.dscriptionText1}>
style={[styles.video, { height: fullscreen ? '100%' : 300 }]} Check if you have the symptoms listed below. Watch the video for guidance.
paused={videoPaused} If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
resizeMode="contain" // This ensures the video fits within its container </Text>
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</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>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View> </View>
<Image source={IMGS.sk_25}
<Button style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
title="Continue for more information"
style={styles.nextButton} <View style={styles.qrCodeBox}>
onPress={handleSubmit} <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}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/> />
</ScrollView> {controlsVisible && (
</SafeAreaView> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
); <Image
}; style={styles.playPauseIcon}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
const styles = StyleSheet.create({ </TouchableOpacity>
scrollContainer: { )}
flexGrow: 1, </TouchableOpacity>
}, </View>
<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}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
<Button
container: { title="Evaluate the risk level"
flexGrow: 1, style={styles.nextButton}
backgroundColor: COLORS.white, onPress={handleSubmit}
}, />
topContainer: { </ScrollView>
flex: 1, </SafeAreaView>
justifyContent: 'center', );
alignItems: 'center', };
backgroundColor: COLORS.white,
// This creates the curve effect for the background
}, const styles = StyleSheet.create({
scrollContainer: {
topicText: { flexGrow: 1,
fontSize: 24, },
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
},
checkboxLabel: { container: {
fontSize: 18, flexGrow: 1,
fontWeight: 'bold', backgroundColor: COLORS.white,
marginBottom: 10, },
alignSelf: 'center', topContainer: {
color:COLORS.black, flex: 1,
}, justifyContent: 'center',
checkboxRow: { alignItems: 'center',
flexDirection: 'row', backgroundColor: COLORS.white,
alignItems: 'center', // This creates the curve effect for the background
marginBottom: 10, },
}, topicText: {
checkboxText: { fontSize: 24,
fontSize: 16, fontWeight: 'bold',
marginLeft: 8, color: COLORS.black,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line textAlign: 'center',
}, marginVertical: 20,
submitButton: { },
backgroundColor: COLORS.primary, descriptionText: {
borderRadius: 20, fontSize: 18,
padding: 15, textAlign: 'center',
marginVertical: 20, marginHorizontal: 20,
width: '90%', marginBottom: 20,
alignSelf: 'center', color:COLORS.white,
}, fontWeight: 'bold',
bottomContainer: { },
flex: 2, separator: {
justifyContent: 'flex-end', height: 2,
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue, backgroundColor: COLORS.blue,
borderTopRightRadius: 85, marginVertical: 10,
borderTopLeftRadius: 85, width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
}, checkboxContainer: {
nextButton: { backgroundColor: COLORS.lightBlue,
width: '70%', borderRadius: 25,
paddingVertical: 10, width: '100%', // Ensure it's taking the full width of its parent
marginBottom: 80, // Adjust the margin to move the button up further if necessary alignSelf: 'center', // This ensures it's centered relative to the parent
backgroundColor: COLORS.white, paddingTop: 10,
borderRadius: 20, marginLeft:197,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // 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
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxLabel: {
shadowRadius: 3.84, fontSize: 16,
elevation: 5,
}, marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxRow: {
shadowRadius: 3.84, flexDirection: 'row',
elevation: 5, alignItems: 'center',
}, marginBottom: 10,
qrCodeImage: { },
width: 200, // Adjust size as needed checkboxText: {
height: 200, // Adjust size as needed fontSize: 16,
}, marginLeft: 8,
orButton: { flexShrink: 1, // Allows the text to shrink and wrap onto the next line
marginTop: 30, },
backgroundColor: COLORS.primary, submitButton: {
padding: 10, backgroundColor: COLORS.primary,
borderRadius: 5, borderRadius: 20,
alignItems: 'center', padding: 15,
justifyContent: 'center', marginVertical: 20,
}, width: '90%',
orButtonText: { alignSelf: 'center',
color: COLORS.white, },
fontSize: 14, bottomContainer: {
fontWeight: 'bold', flex: 2,
} justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
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: 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)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
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: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
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
});
// ... possibly other styles
});
export default AdditionalSymptomsScreen; export default AdditionalSymptomsScreen;
...@@ -103,297 +103,346 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -103,297 +103,346 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}, []); }, []);
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Herpes Additional Symptoms</Text> <Text style={styles.topicText}>Herpes Additional Symptoms </Text>
<View style={styles.videoBox}> <View style={styles.qrCodeBox1}>
<View style={styles.videoDescriptionBox}> <Image
<Text style={styles.descriptionText}> source={IMGS.sk_24} // Make sure the path is correct
Self diagnose with the 3D Model style={styles.qrCodeImage1}
</Text> />
</View> <Text style={styles.dscriptionText1}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. සඳහා වීඩියෝවක් ලබා දී ඇත.
<Video වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
// ref={videoRef} </Text>
source={{ uri: URL_link }} // Replace with the path to your video file <Text style={styles.dscriptionText1}>
style={[styles.video, { height: fullscreen ? '100%' : 300 }]} Check if you have the symptoms listed below. Watch the video for guidance.
paused={videoPaused} If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
resizeMode="contain" // This ensures the video fits within its container </Text>
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</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>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View> </View>
<Image source={IMGS.sk_25}
<Button style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
title="Continue for more information"
style={styles.nextButton} <View style={styles.qrCodeBox}>
onPress={handleSubmit} <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}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/> />
</ScrollView> {controlsVisible && (
</SafeAreaView> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
); <Image
}; style={styles.playPauseIcon}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
const styles = StyleSheet.create({ </TouchableOpacity>
scrollContainer: { )}
flexGrow: 1, </TouchableOpacity>
}, </View>
<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}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
<Button
container: { title="Evaluate the risk level"
flexGrow: 1, style={styles.nextButton}
backgroundColor: COLORS.white, onPress={handleSubmit}
}, />
topContainer: { </ScrollView>
flex: 1, </SafeAreaView>
justifyContent: 'center', );
alignItems: 'center', };
backgroundColor: COLORS.white,
// This creates the curve effect for the background
}, const styles = StyleSheet.create({
scrollContainer: {
topicText: { flexGrow: 1,
fontSize: 24, },
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
},
checkboxLabel: { container: {
fontSize: 18, flexGrow: 1,
fontWeight: 'bold', backgroundColor: COLORS.white,
marginBottom: 10, },
alignSelf: 'center', topContainer: {
color:COLORS.black, flex: 1,
}, justifyContent: 'center',
checkboxRow: { alignItems: 'center',
flexDirection: 'row', backgroundColor: COLORS.white,
alignItems: 'center', // This creates the curve effect for the background
marginBottom: 10, },
}, topicText: {
checkboxText: { fontSize: 24,
fontSize: 16, fontWeight: 'bold',
marginLeft: 8, color: COLORS.black,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line textAlign: 'center',
}, marginVertical: 20,
submitButton: { },
backgroundColor: COLORS.primary, descriptionText: {
borderRadius: 20, fontSize: 18,
padding: 15, textAlign: 'center',
marginVertical: 20, marginHorizontal: 20,
width: '90%', marginBottom: 20,
alignSelf: 'center', color:COLORS.white,
}, fontWeight: 'bold',
bottomContainer: { },
flex: 2, separator: {
justifyContent: 'flex-end', height: 2,
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue, backgroundColor: COLORS.blue,
borderTopRightRadius: 85, marginVertical: 10,
borderTopLeftRadius: 85, width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
}, checkboxContainer: {
nextButton: { backgroundColor: COLORS.lightBlue,
width: '70%', borderRadius: 25,
paddingVertical: 10, width: '100%', // Ensure it's taking the full width of its parent
marginBottom: 80, // Adjust the margin to move the button up further if necessary alignSelf: 'center', // This ensures it's centered relative to the parent
backgroundColor: COLORS.white, paddingTop: 10,
borderRadius: 20, marginLeft:197,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // 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
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxLabel: {
shadowRadius: 3.84, fontSize: 16,
elevation: 5,
}, marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxRow: {
shadowRadius: 3.84, flexDirection: 'row',
elevation: 5, alignItems: 'center',
}, marginBottom: 10,
qrCodeImage: { },
width: 200, // Adjust size as needed checkboxText: {
height: 200, // Adjust size as needed fontSize: 16,
}, marginLeft: 8,
orButton: { flexShrink: 1, // Allows the text to shrink and wrap onto the next line
marginTop: 30, },
backgroundColor: COLORS.primary, submitButton: {
padding: 10, backgroundColor: COLORS.primary,
borderRadius: 5, borderRadius: 20,
alignItems: 'center', padding: 15,
justifyContent: 'center', marginVertical: 20,
}, width: '90%',
orButtonText: { alignSelf: 'center',
color: COLORS.white, },
fontSize: 14, bottomContainer: {
fontWeight: 'bold', flex: 2,
} justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
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: 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)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles playPauseButton: {
}); position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
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: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
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; export default AdditionalSymptomsScreen;
...@@ -112,17 +112,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -112,17 +112,17 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image <Image
style={styles.playPauseIcon} style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')} source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Image source={require('./skinassets/scanme.png')} <Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} /> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <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} style={styles.qrCodeImage}
/> />
<TouchableOpacity <TouchableOpacity
......
...@@ -101,297 +101,346 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -101,297 +101,346 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
}, []); }, []);
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms</Text> <Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
<View style={styles.videoBox}> <View style={styles.qrCodeBox1}>
<View style={styles.videoDescriptionBox}> <Image
<Text style={styles.descriptionText}> source={IMGS.sk_24} // Make sure the path is correct
Self diagnose with the 3D Model style={styles.qrCodeImage1}
</Text> />
</View> <Text style={styles.dscriptionText1}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. සඳහා වීඩියෝවක් ලබා දී ඇත.
<Video වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
// ref={videoRef} </Text>
source={{ uri: URL_link }} // Replace with the path to your video file <Text style={styles.dscriptionText1}>
style={[styles.video, { height: fullscreen ? '100%' : 300 }]} Check if you have the symptoms listed below. Watch the video for guidance.
paused={videoPaused} If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms.
resizeMode="contain" // This ensures the video fits within its container </Text>
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</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>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View> </View>
<Image source={IMGS.sk_25}
<Button style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
title="Continue for more information"
style={styles.nextButton} <View style={styles.qrCodeBox}>
onPress={handleSubmit} <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}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/> />
</ScrollView> {controlsVisible && (
</SafeAreaView> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
); <Image
}; style={styles.playPauseIcon}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/>
const styles = StyleSheet.create({ </TouchableOpacity>
scrollContainer: { )}
flexGrow: 1, </TouchableOpacity>
}, </View>
<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}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
<Button
container: { title="Evaluate the risk level"
flexGrow: 1, style={styles.nextButton}
backgroundColor: COLORS.white, onPress={handleSubmit}
}, />
topContainer: { </ScrollView>
flex: 1, </SafeAreaView>
justifyContent: 'center', );
alignItems: 'center', };
backgroundColor: COLORS.white,
// This creates the curve effect for the background
}, const styles = StyleSheet.create({
scrollContainer: {
topicText: { flexGrow: 1,
fontSize: 24, },
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
},
checkboxLabel: { container: {
fontSize: 18, flexGrow: 1,
fontWeight: 'bold', backgroundColor: COLORS.white,
marginBottom: 10, },
alignSelf: 'center', topContainer: {
color:COLORS.black, flex: 1,
}, justifyContent: 'center',
checkboxRow: { alignItems: 'center',
flexDirection: 'row', backgroundColor: COLORS.white,
alignItems: 'center', // This creates the curve effect for the background
marginBottom: 10, },
}, topicText: {
checkboxText: { fontSize: 24,
fontSize: 16, fontWeight: 'bold',
marginLeft: 8, color: COLORS.black,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line textAlign: 'center',
}, marginVertical: 20,
submitButton: { },
backgroundColor: COLORS.primary, descriptionText: {
borderRadius: 20, fontSize: 18,
padding: 15, textAlign: 'center',
marginVertical: 20, marginHorizontal: 20,
width: '90%', marginBottom: 20,
alignSelf: 'center', color:COLORS.white,
}, fontWeight: 'bold',
bottomContainer: { },
flex: 2, separator: {
justifyContent: 'flex-end', height: 2,
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue, backgroundColor: COLORS.blue,
borderTopRightRadius: 85, marginVertical: 10,
borderTopLeftRadius: 85, width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
}, checkboxContainer: {
nextButton: { backgroundColor: COLORS.lightBlue,
width: '70%', borderRadius: 25,
paddingVertical: 10, width: '100%', // Ensure it's taking the full width of its parent
marginBottom: 80, // Adjust the margin to move the button up further if necessary alignSelf: 'center', // This ensures it's centered relative to the parent
backgroundColor: COLORS.white, paddingTop: 10,
borderRadius: 20, marginLeft:197,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // 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
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxLabel: {
shadowRadius: 3.84, fontSize: 16,
elevation: 5,
}, marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
}, },
shadowOpacity: 0.25, checkboxRow: {
shadowRadius: 3.84, flexDirection: 'row',
elevation: 5, alignItems: 'center',
}, marginBottom: 10,
qrCodeImage: { },
width: 200, // Adjust size as needed checkboxText: {
height: 200, // Adjust size as needed fontSize: 16,
}, marginLeft: 8,
orButton: { flexShrink: 1, // Allows the text to shrink and wrap onto the next line
marginTop: 30, },
backgroundColor: COLORS.primary, submitButton: {
padding: 10, backgroundColor: COLORS.primary,
borderRadius: 5, borderRadius: 20,
alignItems: 'center', padding: 15,
justifyContent: 'center', marginVertical: 20,
}, width: '90%',
orButtonText: { alignSelf: 'center',
color: COLORS.white, },
fontSize: 14, bottomContainer: {
fontWeight: 'bold', flex: 2,
} justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
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: 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)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles playPauseButton: {
}); position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
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: 5,
marginTop:16
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
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; export default AdditionalSymptomsScreen;
...@@ -9,7 +9,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'; ...@@ -9,7 +9,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
const RiskEvaluationScreen = ({ navigation }) => { const RiskEvaluationScreen = ({ navigation }) => {
const [audioPaused, setAudioPaused] = useState(true); const [audioPaused, setAudioPaused] = useState(true);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const audioRef = useRef(null); const audioRef = useRef(null);
...@@ -52,12 +52,12 @@ const RiskEvaluationScreen = ({ navigation }) => { ...@@ -52,12 +52,12 @@ const RiskEvaluationScreen = ({ navigation }) => {
</Text> </Text>
<Text style={styles.subTopicText}>Please listen to the below audio</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.playerContainer}>
<View style={styles.controlsContainer}> <View style={styles.controlsContainer}>
<TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}> <TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}>
<Image <Image
source={audioPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')} source={audioPaused ? IMGS.sk_20 : IMGS.sk_19}
style={styles.playPauseIcon} style={styles.playPauseIcon}
/> />
</TouchableOpacity> </TouchableOpacity>
...@@ -69,7 +69,7 @@ const RiskEvaluationScreen = ({ navigation }) => { ...@@ -69,7 +69,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
onEnd={() => setAudioPaused(true)} onEnd={() => setAudioPaused(true)}
/> />
<View style={styles.progressContainer}> <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({ <Animated.View style={[styles.progressBar, { width: progressAnim.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: ['0%', '100%'] outputRange: ['0%', '100%']
......
...@@ -136,24 +136,25 @@ const Camera = ({ navigation }) => { ...@@ -136,24 +136,25 @@ const Camera = ({ navigation }) => {
)} )}
{prediction && ( {prediction && (
<View style={styles.predictionContainer}> <View style={styles.predictionContainer}>
<Text style={styles.predictionText}>Predicted Class: {prediction.class}</Text> <Text style={styles.predictionText}>Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}</Text>
<Text style={styles.predictionText}>Confidence: {prediction.confidence}</Text> <Text style={styles.predictionText}>How sure are we | නිරවද්යතාව: {prediction.confidence}</Text>
</View> </View>
)} )}
{/* <Button <Button
title="Continue for more information" title="Take your next step"
style={styles.nextButton} style={styles.nextButton}
onPress={handleContinue} onPress={handleContinue}
/> */} />
<Button {/* <Button
title="Start Today" title="Take your next step"
style={{ style={{
marginTop: 12, marginTop: 12,
width: "100%", width: "90%",
marginTop:43 marginTop:43,
marginBottom:83
}} }}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> /> */}
</View> </View>
</View> </View>
); );
...@@ -248,7 +249,7 @@ const styles = StyleSheet.create({ ...@@ -248,7 +249,7 @@ const styles = StyleSheet.create({
}, },
nextButton: { nextButton: {
width: '70%', width: '90%',
paddingVertical: 10, paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
...@@ -288,6 +289,8 @@ const styles = StyleSheet.create({ ...@@ -288,6 +289,8 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 2 }, // iOS shadow shadowOffset: { width: 0, height: 2 }, // iOS shadow
shadowOpacity: 0.1, // iOS shadow shadowOpacity: 0.1, // iOS shadow
shadowRadius: 2, // iOS shadow shadowRadius: 2, // iOS shadow
bottom:75,
top:-10
}, },
resultsHeading: { resultsHeading: {
fontSize: 16, fontSize: 16,
...@@ -295,7 +298,7 @@ const styles = StyleSheet.create({ ...@@ -295,7 +298,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
padding: 10, padding: 10,
textAlign: 'center', textAlign: 'center',
marginBottom: 100, marginBottom: 90,
marginLeft:0 marginLeft:0
}, },
......
...@@ -43,19 +43,19 @@ const WelcomeExercise = ({ navigation }) => { ...@@ -43,19 +43,19 @@ const WelcomeExercise = ({ navigation }) => {
fontSize: 50, fontSize: 50,
// fontWeight: 800, // fontWeight: 800,
color: COLORS.white color: COLORS.white
}}>Let's Get</Text> }}>Reveal Your</Text>
<Text style={{ <Text style={{
fontSize: 46, fontSize: 46,
// fontWeight: 800, // fontWeight: 800,
color: COLORS.white color: COLORS.white
}}>Started</Text> }}>Skin's Story</Text>
<View style={{ marginVertical: 22 }}> <View style={{ marginVertical: 22 }}>
<Text style={{ <Text style={{
fontSize: 16, fontSize: 16,
color: COLORS.white, color: COLORS.white,
marginVertical: 4 marginVertical: 4
}}>Reveal Your Skin's Story </Text> }}></Text>
<Text style={{ <Text style={{
fontSize: 16, fontSize: 16,
color: COLORS.white, color: COLORS.white,
...@@ -63,7 +63,7 @@ const WelcomeExercise = ({ navigation }) => { ...@@ -63,7 +63,7 @@ const WelcomeExercise = ({ navigation }) => {
</View> </View>
<Button <Button
title="Start Today" title="Diagnose"
style={{ style={{
marginTop: 12, marginTop: 12,
width: "100%", width: "100%",
......
...@@ -58,10 +58,10 @@ const Additionalinformation = ({ navigation }) => { ...@@ -58,10 +58,10 @@ const Additionalinformation = ({ navigation }) => {
<Text style={styles.contactTitle}>{title}</Text> <Text style={styles.contactTitle}>{title}</Text>
<View style={styles.contactSpace} /> <View style={styles.contactSpace} />
<TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}> <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> <Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity> </TouchableOpacity>
<Image source={require('./skinassets/email.png')} style={styles.contactIcon} /> <Image source={IMGS.sk_18} style={styles.contactIcon} />
<TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}> <TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
<Text style={styles.contactInfo}>Email: {email}</Text> <Text style={styles.contactInfo}>Email: {email}</Text>
</TouchableOpacity> </TouchableOpacity>
...@@ -116,7 +116,7 @@ const Additionalinformation = ({ navigation }) => { ...@@ -116,7 +116,7 @@ const Additionalinformation = ({ navigation }) => {
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}> <TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image <Image
style={styles.playPauseIcon} style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')} source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
...@@ -125,7 +125,7 @@ const Additionalinformation = ({ navigation }) => { ...@@ -125,7 +125,7 @@ const Additionalinformation = ({ navigation }) => {
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <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} style={styles.qrCodeImage}
/> />
<Text style={styles.dscriptionText}> <Text style={styles.dscriptionText}>
...@@ -138,7 +138,7 @@ const Additionalinformation = ({ navigation }) => { ...@@ -138,7 +138,7 @@ const Additionalinformation = ({ navigation }) => {
style={styles.orButton} style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/sbrNx78JSV0?si=OsHd9sft8jDg1O1j')}> onPress={() => Linking.openURL('https://youtu.be/sbrNx78JSV0?si=OsHd9sft8jDg1O1j')}>
<Image <Image
source={require('./skinassets/youtube.png')} source={IMGS.sk_22}
style={styles.buttonIcon} style={styles.buttonIcon}
/> />
<Text style={styles.orButtonText}>Click here to view video</Text> <Text style={styles.orButtonText}>Click here to view video</Text>
...@@ -147,7 +147,7 @@ const Additionalinformation = ({ navigation }) => { ...@@ -147,7 +147,7 @@ const Additionalinformation = ({ navigation }) => {
style={styles.orButton} style={styles.orButton}
onPress={() => Linking.openURL('https://youtu.be/T9WQvX3W92A?si=dw7MhHk7TOpquJx_')}> onPress={() => Linking.openURL('https://youtu.be/T9WQvX3W92A?si=dw7MhHk7TOpquJx_')}>
<Image <Image
source={require('./skinassets/youtube.png')} source={IMGS.sk_22}
style={styles.buttonIcon} style={styles.buttonIcon}
/> />
<Text style={styles.orButtonText}>Click here to view video</Text> <Text style={styles.orButtonText}>Click here to view video</Text>
...@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => { ...@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
</View> </View>
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <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} style={styles.qrCodeImage1}
/> />
<Text style={styles.dscriptionText}> <Text style={styles.dscriptionText}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment