isky/SafeQR_Front_End_Mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added scalling compatibilty for smaller devices

Browse Source
This commit is contained in:
iskubee
2024-06-20 18:43:07 +08:00
parent 7f7e65c232
commit 7b396073f7
3 changed files with 65 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
components/ScannedDataBox.tsx
View File

@@ -17,7 +17,7 @@ interface ScanResult {
const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearScanData }) => { const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearScanData }) => {
const [scanResult, setScanResult] = useState<ScanResult | null>(null); const [scanResult, setScanResult] = useState<ScanResult | null>(null);
const [isModalVisible, setIsModalVisible] = useState<boolean>(false); const [isModalVisible, setIsModalVisible] = useState(false);
useEffect(() => { useEffect(() => {
if (data.includes('https://Safe_website.com')) { if (data.includes('https://Safe_website.com')) {
@@ -74,7 +74,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
return ( return (
<View style={styles.dataBox}> <View style={styles.dataBox}>
<TouchableOpacity style={styles.closeButton} onPress={clearScanData}> <TouchableOpacity style={styles.closeButton} onPress={clearScanData}>
<Ionicons name="close-circle-outline" size={24} color="#ff69b4" /> <Ionicons name="close-circle-outline" size={18} color="#ff69b4" />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.row}> <View style={styles.row}>
<Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} /> <Image source={require('../assets/ScanIcon3.png')} style={styles.scan_icon} />
@@ -83,7 +83,7 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
<View style={styles.divider} /> <View style={styles.divider} />
<Text style={styles.timestampText}>{new Date().toLocaleString()}</Text> <Text style={styles.timestampText}>{new Date().toLocaleString()}</Text>
<View style={styles.qrContainer}> <View style={styles.qrContainer}>
<QRCode value={extractedData} size={100} backgroundColor="transparent" /> <QRCode value={extractedData} size={75} backgroundColor="transparent" />
<Text style={[styles.resultText, { color: getResultColor() }]}> <Text style={[styles.resultText, { color: getResultColor() }]}>
Result: {getResultText()} Result: {getResultText()}
</Text> </Text>
@@ -97,25 +97,24 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
<Text style={styles.checksText}>Redirects: {scanResult ? scanResult.redirects : 'N/A'}</Text> <Text style={styles.checksText}>Redirects: {scanResult ? scanResult.redirects : 'N/A'}</Text>
<View style={styles.iconContainer}> <View style={styles.iconContainer}>
<TouchableOpacity style={styles.iconButton}> <TouchableOpacity style={styles.iconButton}>
<Ionicons name="share-social" size={24} color="#2196F3" /> <Ionicons name="share-social" size={18} color="#2196F3" />
<Text style={styles.iconText}>Share</Text> <Text style={styles.iconText}>Share</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.iconButton}> <TouchableOpacity style={styles.iconButton}>
<Ionicons name="open" size={24} color="#2196F3" /> <Ionicons name="open" size={18} color="#2196F3" />
<Text style={styles.iconText}>Open</Text> <Text style={styles.iconText}>Open</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<Text style={styles.moreInfoText}>More Information</Text> <Text style={styles.moreInfoText}>More Information</Text>
<TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsModalVisible(true)}> <TouchableOpacity style={styles.moreInfoButton} onPress={() => setIsModalVisible(true)}>
<Ionicons name="shield-checkmark" size={24} color="#ff69b4" /> <Ionicons name="shield-checkmark" size={18} color="#ff69b4" />
<Text style={styles.moreInfoButtonText}>Security Headers</Text> <Text style={styles.moreInfoButtonText}>Security Headers</Text>
<Ionicons name="chevron-forward" size={24} color="#ff69b4" /> <Ionicons name="chevron-forward" size={18} color="#ff69b4" />
</TouchableOpacity> </TouchableOpacity>
<Modal <Modal
transparent={true}
visible={isModalVisible} visible={isModalVisible}
transparent={true}
animationType="fade" animationType="fade"
onRequestClose={() => setIsModalVisible(false)} onRequestClose={() => setIsModalVisible(false)}
> >
@@ -123,13 +122,13 @@ const ScannedDataBox: React.FC<ScannedDataBoxProps> = ({ data, dataType, clearSc
<View style={styles.modalContent}> <View style={styles.modalContent}>
<Text style={styles.modalTitle}>Security Headers</Text> <Text style={styles.modalTitle}>Security Headers</Text>
<Text style={styles.modalText}>Name: Strict-Transport-Security</Text> <Text style={styles.modalText}>Name: Strict-Transport-Security</Text>
<Text style={styles.modalText}>Value: _</Text> <Text style={styles.modalText}>Value: max-age=31536000; includeSubDomains</Text>
<Text style={styles.modalText}>Name: X-Frame-Options</Text> <Text style={styles.modalText}>Name: X-Frame-Options</Text>
<Text style={styles.modalText}>Value: _</Text> <Text style={styles.modalText}>Value: DENY</Text>
<Text style={styles.modalText}>Name: X-Content-Type-Options</Text> <Text style={styles.modalText}>Name: X-Content-Type-Options</Text>
<Text style={styles.modalText}>Value: _</Text> <Text style={styles.modalText}>Value: nosniff</Text>
<Text style={styles.modalText}>Name: Content-Security-Policy</Text> <Text style={styles.modalText}>Name: Content-Security-Policy</Text>
<Text style={styles.modalText}>Value: _</Text> <Text style={styles.modalText}>Value: default-src 'self'</Text>
<TouchableOpacity style={styles.closeModalButton} onPress={() => setIsModalVisible(false)}> <TouchableOpacity style={styles.closeModalButton} onPress={() => setIsModalVisible(false)}>
<Text style={styles.closeModalButtonText}>Close</Text> <Text style={styles.closeModalButtonText}>Close</Text>
</TouchableOpacity> </TouchableOpacity>
@@ -146,97 +145,101 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
scan_icon: { scan_icon: {
width: 50, width: 37.5,
height: 50, height: 37.5,
marginRight: 8, marginRight: 6,
}, },
payload: { payload: {
fontSize: 20, fontSize: 15,
color: '#000', color: '#000',
marginBottom: 1, flex: 1, // Allow text to use available space
}, },
dataBox: { dataBox: {
padding: 20, padding: 15,
backgroundColor: '#ffe6f0', backgroundColor: '#ffe6f0',
borderRadius: 10, borderRadius: 7.5,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 1.5 },
shadowOpacity: 0.2, shadowOpacity: 0.15,
shadowRadius: 5, shadowRadius: 3.75,
elevation: 3, elevation: 2.25,
zIndex: 1, zIndex: 1,
//width: '95%', // Ensure the box uses the full width of its container
}, },
qrContainer: { qrContainer: {
alignItems: 'center', alignItems: 'center',
marginVertical: 10, marginVertical: 7.5,
}, },
blankLine: { blankLine: {
height: 20, height: 15,
}, },
divider: { divider: {
height: 1, height: 0.75,
backgroundColor: '#ddd', backgroundColor: '#ddd',
marginVertical: 10, marginVertical: 7.5,
alignSelf: 'stretch', alignSelf: 'stretch',
}, },
timestampText: { timestampText: {
fontSize: 12, fontSize: 9,
color: '#000', color: '#000',
marginBottom: 10, marginBottom: 7.5,
}, },
resultText: { resultText: {
fontSize: 16, fontSize: 12,
marginBottom: 10, marginBottom: 7.5,
textAlign: 'center', textAlign: 'center',
}, },
typeText: { typeText: {
fontSize: 16, fontSize: 12,
color: '#000', color: '#000',
marginBottom: 10, marginBottom: 7.5,
}, },
checksText: { checksText: {
fontSize: 16, fontSize: 12,
color: '#000', color: '#000',
marginBottom: 5, marginBottom: 3.75,
}, },
iconContainer: { iconContainer: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
marginTop: 10, marginTop: 7.5,
}, },
iconButton: { iconButton: {
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
flex: 1,
}, },
iconText: { iconText: {
color: '#2196F3', color: '#2196F3',
marginTop: 5, marginTop: 3.75,
textAlign: 'center',
fontSize: 12,
}, },
moreInfoText: { moreInfoText: {
fontSize: 18, fontSize: 13.5,
fontWeight: 'bold', fontWeight: 'bold',
color: '#000', color: '#000',
marginVertical: 10, marginVertical: 7.5,
}, },
moreInfoButton: { moreInfoButton: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingVertical: 10, paddingVertical: 7.5,
paddingHorizontal: 15, paddingHorizontal: 11.25,
backgroundColor: '#ffe6f0', backgroundColor: '#ffe6f0',
borderRadius: 10, borderRadius: 7.5,
marginTop: 10, marginTop: 7.5,
}, },
moreInfoButtonText: { moreInfoButtonText: {
flex: 1, flex: 1,
fontSize: 16, fontSize: 12,
color: '#000', color: '#000',
marginLeft: 10, marginLeft: 7.5,
}, },
closeButton: { closeButton: {
position: 'absolute', position: 'absolute',
top: 10, top: 7.5,
right: 10, right: 7.5,
}, },
modalContainer: { modalContainer: {
flex: 1, flex: 1,
@@ -247,30 +250,30 @@ const styles = StyleSheet.create({
modalContent: { modalContent: {
width: '80%', width: '80%',
backgroundColor: 'white', backgroundColor: 'white',
borderRadius: 10, borderRadius: 7.5,
padding: 20, padding: 15,
alignItems: 'center', alignItems: 'center',
}, },
modalTitle: { modalTitle: {
fontSize: 20, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
marginBottom: 10, marginBottom: 7.5,
}, },
modalText: { modalText: {
fontSize: 16, fontSize: 12,
marginBottom: 5, marginBottom: 3.75,
textAlign: 'left', textAlign: 'left',
width: '100%', width: '100%',
}, },
closeModalButton: { closeModalButton: {
marginTop: 20, marginTop: 15,
paddingVertical: 10, paddingVertical: 7.5,
paddingHorizontal: 20, paddingHorizontal: 15,
backgroundColor: '#ff69b4', backgroundColor: '#ff69b4',
borderRadius: 5, borderRadius: 3.75,
}, },
closeModalButtonText: { closeModalButtonText: {
fontSize: 16, fontSize: 12,
color: '#fff', color: '#fff',
}, },
}); });

2
screens/HistoryScreen.tsx
View File

@@ -165,7 +165,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
dataText: { dataText: {
fontSize: 16, fontSize: 11,
color: '#000', color: '#000',
marginLeft: 10, marginLeft: 10,
}, },

4
screens/QRScannerScreen.tsx
View File

@@ -30,7 +30,7 @@ const determineDataType = (data: string): string => {
// Function to handle VirusTotal scanning // Function to handle VirusTotal scanning
const processWithVirusTotal = async (data: string) => { const processWithVirusTotal = async (data: string) => {
const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
const url = 'https://www.virustotal.com/vtapi/v2/url/scan'; const url = 'https://www.virustotal.com/vtapi/v2/url/scan';
const params = { const params = {
apikey: apiKey, apikey: apiKey,
@@ -48,7 +48,7 @@ const processWithVirusTotal = async (data: string) => {
// Function to get VirusTotal scan results // Function to get VirusTotal scan results
const getVirusTotalResults = async (scanId: string) => { const getVirusTotalResults = async (scanId: string) => {
const apiKey = 'YOUR_VIRUSTOTAL_API_KEY'; const apiKey = '3566a17933bb36dd97cb35e84d0446e5ab8ad623e6de968d34b655c79485251e';
const url = 'https://www.virustotal.com/vtapi/v2/url/report'; const url = 'https://www.virustotal.com/vtapi/v2/url/report';
const params = { const params = {
apikey: apiKey, apikey: apiKey,