Skip to content

E
EmidWife-New
Commit f7fabe12 authored by Devin B's avatar Devin B
Browse files
Options

skin_assets

parent c54d65fc
Hide whitespace changes
Inline Side-by-side
Showing with 1451 additions and 1184 deletions
src/assets/sk_2.png
View replaced file @ c54d65fc View file @ f7fabe12
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
View replaced file @ c54d65fc View file @ f7fabe12
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
src/constants/imgs.js
View file @ f7fabe12
...@@ -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'),
}; };
src/screens/home/skin/AdditionalSymptoms.js
View file @ f7fabe12
...@@ -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,
} }
......
src/screens/home/skin/AdditionalSymptoms1.js
View file @ f7fabe12
...@@ -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;
src/screens/home/skin/AdditionalSymptoms2.js
View file @ f7fabe12
...@@ -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;
src/screens/home/skin/AdditionalSymptoms3.js
View file @ f7fabe12
...@@ -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;
src/screens/home/skin/AdditionalSymptoms4.js
View file @ f7fabe12
...@@ -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
......
src/screens/home/skin/AdditionalSymptoms5.js
View file @ f7fabe12
...@@ -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;
src/screens/home/skin/SkinRisk.js
View file @ f7fabe12
...@@ -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%']
......
src/screens/home/skin/SkinUploader.js
View file @ f7fabe12
...@@ -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
}, },
......
src/screens/home/skin/WelcomeSkin.js
View file @ f7fabe12
...@@ -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%",
......
src/screens/home/skin/information1.js
View file @ f7fabe12
...@@ -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