Merge branch 'feature/font' into develop

TIPS

@@ -8,3 +8,20 @@ expo build:android --type app-bundle
 
 expo fetch:android:keystore
 
+
+
+
+
+export ANDROID_HOME=${HOME}/Android/Sdk
+export PATH=${ANDROID_HOME}/tools:${PATH}
+export PATH=${ANDROID_HOME}/emulator:${PATH}
+export PATH=${ANDROID_HOME}/platform-tools:${PATH}
+
+
+
+
+
+export ANDROID_HOME=/home/dslak/Android/Sdk
+export PATH=${ANDROID_HOME}/tools:${PATH}
+export PATH=${ANDROID_HOME}/emulator:${PATH}
+export PATH=${ANDROID_HOME}/platform-tools:${PATH}

pc-api-4795705822739370527-653-b2b562e71c18.json

@@ -0,0 +1,12 @@
+{
+  "type": "service_account",
+  "project_id": "pc-api-4795705822739370527-653",
+  "private_key_id": "b2b562e71c18dbcc4b9a50ed64eed9d89e3441cf",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCf8JY4cGdRQZR4\n4xS9O3VkzSVu+1ONpOFDGRn65DJ/laU7HVkKSlkpgcpRsJ61YM4QS9+xa/nQAkxz\niySk08H7/TMmhOUdRMgt3WH/gswk68LdWGpsYZ2/aEkE46Um8dmDUXEyVwrt3oPS\ndDR73Yc7mU4voQbI9Ks2cOr+0vHv7vvqj/fVeOJFeF9VyUzTFIwCI3bV/3cQ2mXg\nrML3Oejw8p1pLfd6fXgC7HLwRa7FZ1d6lLkVpqUVGqqBr1AhLhdkqtISJuHdynJ/\nNRjzoR3Pq7n4bxBx6NXs5h3AYdzhC8JH3vDRKnYNqbPIVCQjD1VzTy+VV4eW9ylq\nP8/2X9fdAgMBAAECggEAOefhg2KSzXT4W8IfXpm52Xp6nJFKwWQaGHBsmwzmiZG0\n5k+sTpD3chMnHGddNp7rTDQkM3i708cZRdXxOOnf+CtGSyJfTzb5YL2fvuHspktj\nXD8oHMBE3ClWEnqW7yAt16DzYj3oW5Gt2VKwM85TKU1KZO0gZz5KBKZiNktKQ8sI\njYy2ZnNtx3nqmf2IcP6EIUOReTmCREpFecgLsqvISsBLhfIcRC4bErz4BWGFQwbO\n/JBDbNJz23deYiq5PDfFufB3hFJdWUXwAmczBbtGQ7UUAYP5g8buQghmKfDAlYw4\nQyFQ7TpsNvv+OiPyNkEbU3eF8kIZy/tpjOuseNN+8wKBgQDKZMQA81QXA2k0BGZ9\nyh0MQ0wwyjuhEYLs9LdK2pP+I3yiHXo3DOAo4OupqmTUi63pAJtMJLknfLId4LLL\nAm5NJOkZgA3A+zlGJXZZH/y1yUhpHvaHwPNhhiD+1I3xgRYZOIVBDGOGVZK3nl2b\nl5sElJWDOGBrNFrBIAP7P5ZH1wKBgQDKTUDT61fk9tnrHjNhWh+Vtu+Kkfi9nxi0\nGCasZNVQfXlz6R69fCjgBFDzzNLK6OWCs79kB0HYAmuaspJUI065vUU7Cn7qwnod\nHjPtB1iaCG8nldbR9pI0aqso8NA1K2Wa/3ZimqLfzPmyDpxQ4Zo5B9Kmsh+pT/sw\nm994rVCXawKBgFw6HrbwKtlxzHbPqoSXnTUBVa7F+PYkrKydtwh9IgMk2J5nIFIF\no//8vmbKJrhUDiOnCx1ffp/nyqKiydaIfQraTv43xAy0bhzw5UUntliAKGb+nQiv\nfDhsjoyQ/z2VvSQxBUfnBVMpm3ngyHcmVpV3v8nT3tv7N3/Zvva2uxxxAoGAKtxV\nONDqzVLTdrHuVtjeSjz44VXt6lbTyAw53Vp7q1L6MWmZnrG4g0XG1PB3VJAlWBy3\nFv1GoPpaS+s7f2H/ovCLw2eE3j4X2yV0AOsGhZP14OApJFDmRv62hrUGl806+KzZ\nKyjyCxKFcIkR6zzxDNYwdirU9G1CndjYbtvhcEMCgYEAmx1aMHdkul59PjeGYdAc\nCWL8NlicQEsOjrA6SfzbXIV93+Z6dOLZUeUSQli59GF2/zTdc0pXbpNOs3JGItZd\nllYNKO1Wa0BDRkhHzfVY6MImgvnfvjprvmtMdSBIKjV4gRsDFG0/rxQ6qtsx3ISk\nP64Ii9YKpD/ZLRk+pYhw0ak=\n-----END PRIVATE KEY-----\n",
+  "client_email": "vds-quiz@pc-api-4795705822739370527-653.iam.gserviceaccount.com",
+  "client_id": "105950494487991691616",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/vds-quiz%40pc-api-4795705822739370527-653.iam.gserviceaccount.com"
+}

vds-app/App/components/Banner.js

@@ -0,0 +1,36 @@
+import React from "react"
+import { View, StyleSheet, StatusBar, Text, Dimensions } from "react-native"
+import { colors, texts, credentials } from "./Variables"
+
+import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads'
+const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-4145771316565790/1848957462'
+
+const screen = Dimensions.get("window")
+
+const styles = StyleSheet.create({
+  container: {
+    //backgroundColor: colors.yellow,
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+    height: 100,
+    width: "100%"
+  }
+})
+
+export const Banner = () => {
+
+  let banner
+
+  if(__DEV__) {
+    banner = <Text>DEV BANNER</Text>
+  } else {
+    banner = <BannerAd size={BannerAdSize.LARGE_BANNER} unitId={adUnitId} />
+  }
+  return (
+    <View style={styles.container}>
+      {banner}
+    </View>
+  )
+}

vds-app/App/components/Button.js

@@ -9,7 +9,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white_alpha,
     borderWidth: 4,
     borderColor: 'transparent',
-    borderRadius: 10,
+    borderRadius: 5,
     //paddingHorizontal: 20,
     paddingVertical: 15,
     alignItems: "center",
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
     justifyContent: "space-between",
     overflow: "hidden",
-    borderRadius: 10
+    borderRadius: 5
   },
   buttonBg: {
     flex: 1,

vds-app/App/components/ExamQuestions.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { AsyncStorage } from "react-native"
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import aerodynamicsQuestions from "../data/aerodynamics"
 import firstAidQuestions from "../data/firstAid"
@@ -51,7 +51,7 @@ const generateQuestions = () => {
       }
     })
 
-  }).done()
+  })/*.then( (res) => {})*/
 
 }
 

vds-app/App/index.js

@@ -1,8 +1,8 @@
 import 'react-native-gesture-handler'
-import { createStackNavigator, createAppContainer } from "react-navigation"
+import { createAppContainer } from "react-navigation"
+import { createStackNavigator } from "react-navigation-stack"
 
 import Splash from "./screens/Splash"
-import Banner from "./screens/Banner"
 import QuizIndex from "./screens/QuizIndex"
 import Quiz from "./screens/Quiz"
 import TrueFalse from "./screens/TrueFalse"
@@ -20,85 +20,73 @@ const MainStack = createStackNavigator({
   Splash: {
     screen: Splash,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   RecapTrueFalse: {
     screen: RecapTrueFalse,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   Recap: {
     screen: Recap,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   Results: {
     screen: Results,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   ResultsTrueFalse: {
     screen: ResultsTrueFalse,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   Info: {
     screen: Info,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   Dictionary: {
     screen: Dictionary,
     navigationOptions: ({ navigation }) => ({
-      header: null
-    })
-  },
-  Banner: {
-    screen: Banner,
-    navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   QuizIndex: {
     screen: QuizIndex,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   Quiz: {
     screen: Quiz,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   TrueFalse: {
     screen: TrueFalse,
     navigationOptions: ({ navigation }) => ({
-      header: null
-//       headerTitle: navigation.getParam("title"),
-//       headerTintColor: colors.white,
-//       headerStyle: {
-//         backgroundColor: navigation.getParam("color"),
-//         borderBottomColor: navigation.getParam("color")
-//       }
+      headerShown: false
     })
   },
   Exam: {
     screen: Exam,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   },
   Setup: {
     screen: Setup,
     navigationOptions: ({ navigation }) => ({
-      header: null
+      headerShown: false
     })
   }
 })

vds-app/App/screens/Banner.js

@@ -1,59 +0,0 @@
-import React from "react"
-import { View, StyleSheet, StatusBar, Text, Dimensions } from "react-native"
-import { AdMobBanner, AdMobInterstitial, PublisherBanner, AdMobRewarded } from "expo-ads-admob"
-
-import { colors, texts, credentials } from "../components/Variables"
-
-const screen = Dimensions.get("window")
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: colors.yellow,
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  title: {
-    color: colors.white,
-    fontSize: 25,
-    textAlign: "center",
-    fontWeight: "600",
-    paddingVertical: 20
-  },
-  banner: {
-    width: "100%",
-    height: "100%",
-    marginVertical: 20
-  },
-})
-
-class Banner extends React.Component {
-
-  state = {
-    results: false
-  }
-
-  bannerError = (e) => {
-    //console.log("Banner error: ", e)
-  }
-
-  render() {
-
-    return (
-      <View style={styles.container} >
-        <AdMobBanner
-          style={styles.banner}
-          bannerSize="mediumRectangle"
-          adUnitID={credentials.adMobUnitID}
-          onDidFailToReceiveAdWithError={this.bannerError} />
-
-      </View>
-    )
-  }
-}
-
-export default Banner

vds-app/App/screens/Dictionary.js

@@ -1,8 +1,9 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler, Linking} from "react-native"
-import { AdMobBanner } from "expo-ads-admob"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, ImageBackground, BackHandler, Linking} from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
 
 import { Button, ButtonContainer } from "../components/Button"
+import { Banner } from "../components/Banner"
 import { colors, texts, credentials} from "../components/Variables"
 import { abbreviations, alphabeth, numbers} from "../data/dictionary"
 
@@ -19,12 +20,10 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 20
   },
-
   buttonContainer: {
     marginHorizontal: 0,
     marginBottom: 20
   },
-
   text: {
     color: colors.black,
     fontSize: 16,
@@ -98,22 +97,18 @@ const styles = StyleSheet.create({
     fontSize: 26,
     fontWeight: "600"
   },
-
-
   box: {
     width: screen.width-40,
     paddingHorizontal: 20,
     paddingVertical: 10,
     backgroundColor: colors.white,
-    borderRadius: 10,
+    borderRadius: 5,
     overflow: "hidden"
   },
-
   scrollView: {
     margin: 10,
     height: screen.height-400
   },
-
   bg: {
     width: "100%",
     height: "100%"
@@ -121,15 +116,7 @@ const styles = StyleSheet.create({
   bannerContainer: {
     flex: 1,
     alignItems: "center",
-    justifyContent: "center",
-    height: 60
-  },
-  banner: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 320,
-    height: 60
+    justifyContent: "center"
   }
 })
 
@@ -231,13 +218,8 @@ class Dictionary extends React.Component {
               </ScrollView>
             </View>
           </View>
-
           <View style={styles.bannerContainer}>
-            <AdMobBanner
-              style={styles.banner}
-              bannerSize="largeBanner"
-              adUnitID={credentials.adMobUnitIDFooter}
-              onDidFailToReceiveAdWithError={this.bannerError} />
+            <Banner />
           </View>
         </SafeAreaView>
       </View>

vds-app/App/screens/Exam.js

@@ -1,5 +1,7 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, ImageBackground, BackHandler, AsyncStorage } from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, ImageBackground, BackHandler } from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, examScheme } from "../components/Variables"
@@ -56,7 +58,7 @@ const styles = StyleSheet.create({
     paddingVertical: 10,
     marginTop: 30,
     backgroundColor: colors.white_alpha,
-    borderRadius: 25,
+    borderRadius: 10,
     textShadowColor: 'rgba(0, 0, 0, 0.45)',
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 2
@@ -109,8 +111,6 @@ class Exam extends React.Component {
 
     AsyncStorage.getItem('setupData').then((value) => {
       let setupData = JSON.parse(value)
-
-      //console.log('handleBackButton setupData',setupData)
       examScheme.forEach( (elem) => {
         let currentSection = setupData.excludeDelta ? allQuestions[elem.section].filter(item => !item.delta) : allQuestions[elem.section]
         for(let i=0; i<elem.questions; i++) {
@@ -126,7 +126,7 @@ class Exam extends React.Component {
 
       return true
 
-    }).done()
+    })
   }
 
   showResults = () => {
@@ -241,6 +241,7 @@ class Exam extends React.Component {
                 <Button
                   key={answer.id}
                   text={answer.text}
+                  noBorder={true}
                   colorize={{id: answer.id, clicked: this.state.clickedId, answered: this.state.answered, isCorrect: answer.correct}}
                   onPress={() => this.answer(answer.correct, answer.id, question)}
                 />

vds-app/App/screens/Info.js

@@ -1,5 +1,6 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler, Linking} from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, BackHandler, Linking} from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, examScheme, resultsScheme} from "../components/Variables"
@@ -65,10 +66,10 @@ const styles = StyleSheet.create({
   textSmall: {
     lineHeight: 23,
     marginTop: 15,
-    borderRadius: 20,
-    backgroundColor: colors.white_alpha,
-    borderWidth: 0,
-    borderColor: colors.white_alpha,
+    borderRadius: 5,
+    backgroundColor: colors.black_alpha2,
+    borderWidth: 1,
+    borderColor: colors.white_alpha2,
     fontSize: 16,
     color: colors.white,
     fontWeight: "400",
@@ -103,6 +104,7 @@ const styles = StyleSheet.create({
     paddingVertical: 0,
   },
   textLabel: {
+    fontSize: 20,
     paddingHorizontal: 20,
     paddingVertical: 20
   },
@@ -148,19 +150,10 @@ class Info extends React.Component {
         <SafeAreaView style={styles.safearea}>
           <ScrollView>
             <View  style={styles.box}>
-              {/*
-              <Text style={styles.text}>
-                <Text style={[styles.textLabel, styles.bold]}>{`${pkg.expo.name}`}</Text>
-              </Text>
-              */}
               <Text style={styles.text}>
                 <Text style={styles.textLabel}>{`${texts.version}: ${pkg.expo.version}`}</Text>
               </Text>
-              {/*
-              <Text style={styles.text}>
-                <Text style={styles.textLabel}>{`${texts.author}: Dslak`}</Text>
-              </Text>
-              */}
+
               <Text style={styles.textSmall}>
                 {texts.description}
               </Text>
@@ -198,6 +191,7 @@ class Info extends React.Component {
                 subtitle={texts.pdfLinkText}
                 isBig={false}
                 hasBg={true}
+                noBorder={true}
                 onPress={() => this.openURL(texts.pdfLink)}
               />
               <Text></Text>

vds-app/App/screens/Quiz.js

@@ -1,8 +1,11 @@
 import React from "react"
-import { View, ScrollView, Picker, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler, AsyncStorage } from "react-native"
-import { AdMobBanner } from "expo-ads-admob"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, ImageBackground, BackHandler } from "react-native"
+import { Picker } from '@react-native-picker/picker'
+import SafeAreaView from 'react-native-safe-area-view'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import { Button, ButtonContainer } from "../components/Button"
+import { Banner } from "../components/Banner"
 import { texts, colors, credentials } from "../components/Variables"
 
 const bgImage = require("../assets/bg.jpg")
@@ -41,7 +44,7 @@ const styles = StyleSheet.create({
   },
   scrollView: {
     //margin: 10,
-    height: screen.height-150
+    height: screen.height-20
   },
   bg: {
     width: "100%",
@@ -49,13 +52,13 @@ const styles = StyleSheet.create({
   },
   dropdownContainer: {
     marginTop: 20,
-    borderRadius: 10,
+    borderRadius: 5,
     width: "100%",
     textAlign: "center",
-    backgroundColor: colors.blue
+    backgroundColor: colors.white_alpha2
   },
   dropdown: {
-    color: colors.white,
+    color: colors.black,
     fontSize: 16,
     width: "100%",
     textAlign: "center",
@@ -74,12 +77,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center"
-  },
-  banner: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 320
   }
 })
 
@@ -121,12 +118,6 @@ class Quiz extends React.Component {
     })
   }
 
-  /*
-  componentWillUnmount() {
-    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
-  }
-  */
-
   handleBackButton = () => {
     this.props.navigation.navigate("Splash")
     return true
@@ -231,6 +222,7 @@ class Quiz extends React.Component {
                       <Button
                         key={answer.id}
                         text={answer.text}
+                        noBorder={true}
                         colorize={{id: answer.id, clicked: this.state.clickedId, answered: this.state.answered, isCorrect: answer.correct}}
                         onPress={() => this.answer(answer.correct, answer.id, question)}
                       />
@@ -260,18 +252,14 @@ class Quiz extends React.Component {
               </SafeAreaView>
               : <SafeAreaView></SafeAreaView>}
 
+              <View style={styles.bannerContainer}>
+                <Banner />
+              </View>
             </ScrollView>
           </View>
 
 
         </View>
-        <View style={styles.bannerContainer}>
-          <AdMobBanner
-            style={styles.banner}
-            bannerSize="largeBanner"
-            adUnitID={credentials.adMobUnitIDFooter}
-            onDidFailToReceiveAdWithError={this.bannerError} />
-        </View>
       </ImageBackground>
     )
   }

vds-app/App/screens/QuizIndex.js

@@ -1,5 +1,6 @@
 import React from "react"
-import { View, ScrollView, StatusBar, BackHandler, StyleSheet, Dimensions, ImageBackground, AsyncStorage } from "react-native"
+import { View, ScrollView, StatusBar, BackHandler, StyleSheet, Dimensions, ImageBackground } from "react-native"
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import aerodynamicsQuestions from "../data/aerodynamics"
 import firstAidQuestions from "../data/firstAid"
@@ -53,7 +54,7 @@ class QuizIndex extends React.Component {
           storeWrongAnswers: JSON.parse(value)
         }
       })
-    }).done()
+    })
 
     AsyncStorage.getItem('setupData').then((value) => {
       this.setState( (state) => {
@@ -62,7 +63,7 @@ class QuizIndex extends React.Component {
           excludeDelta: JSON.parse(value).excludeDelta
         }
       })
-    }).done()
+    })
   }
 
   componentWillUnmount() {

vds-app/App/screens/Recap.js

@@ -1,8 +1,10 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, ImageBackground, BackHandler, AsyncStorage} from "react-native"
-import { AdMobBanner } from "expo-ads-admob"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, ImageBackground, BackHandler} from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import { Button, ButtonContainer } from "../components/Button"
+import { Banner } from "../components/Banner"
 import { colors, texts, examScheme, credentials } from "../components/Variables"
 
 import aerodynamicsQuestions from "../data/aerodynamics"
@@ -95,11 +97,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center"
-  },
-  banner: {
-    width: 320,
-    height: 100,
-    marginVertical: 20
   }
 })
 
@@ -118,7 +115,7 @@ class Recap extends React.Component {
           storeWrongAnswers: JSON.parse(value)
         }
       })
-    }).done()
+    })
   }
 
   componentWillUnmount() {
@@ -148,7 +145,7 @@ class Recap extends React.Component {
 
       return true
 
-    }).done()
+    })
   }
 
   render() {
@@ -195,11 +192,7 @@ class Recap extends React.Component {
           </SafeAreaView>
 
           <View style={styles.bannerContainer}>
-            <AdMobBanner
-              style={styles.banner}
-              bannerSize="largeBanner"
-              adUnitID={credentials.adMobUnitIDFooter}
-              onDidFailToReceiveAdWithError={this.bannerError} />
+            <Banner />
           </View>
         </ScrollView>
 

vds-app/App/screens/RecapTrueFalse.js

@@ -1,8 +1,10 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, ImageBackground, BackHandler, AsyncStorage} from "react-native"
-import { AdMobBanner } from "expo-ads-admob"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, ImageBackground, BackHandler } from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import { Button, ButtonContainer } from "../components/Button"
+import { Banner } from "../components/Banner"
 import { colors, texts, examScheme, credentials } from "../components/Variables"
 
 import aerodynamicsQuestions from "../data/aerodynamics"
@@ -95,11 +97,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center"
-  },
-  banner: {
-    width: 320,
-    height: 100,
-    marginVertical: 20
   }
 })
 
@@ -109,7 +106,7 @@ class RecapTrueFalse extends React.Component {
     BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
     AsyncStorage.getItem('storeWrongAnswers').then((value) => {
       //console.log(value)
-    }).done()
+    })
   }
 
   componentWillUnmount() {
@@ -189,11 +186,7 @@ class RecapTrueFalse extends React.Component {
           </SafeAreaView>
 
           <View style={styles.bannerContainer}>
-            <AdMobBanner
-              style={styles.banner}
-              bannerSize="largeBanner"
-              adUnitID={credentials.adMobUnitIDFooter}
-              onDidFailToReceiveAdWithError={this.bannerError} />
+            <Banner />
           </View>
         </ScrollView>
 

vds-app/App/screens/Results.js

@@ -1,5 +1,7 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler, AsyncStorage} from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, BackHandler} from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, examScheme } from "../components/Variables"
@@ -58,7 +60,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     marginHorizontal: 20,
     width: screen.width-80,
-    borderRadius: 20,
+    borderRadius: 10,
     borderBottomEndRadius: 80,
     borderTopStartRadius: 100,
     backgroundColor: colors.white_alpha,
@@ -139,7 +141,7 @@ class Results extends React.Component {
         }
       })
 
-    }).done()
+    })
   }
 
   componentWillUnmount() {
@@ -168,7 +170,7 @@ class Results extends React.Component {
 
       return true
 
-    }).done()
+    })
   }
 
 

vds-app/App/screens/ResultsTrueFalse.js

@@ -1,5 +1,6 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, BackHandler} from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, BackHandler} from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, examScheme } from "../components/Variables"
@@ -58,7 +59,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     marginHorizontal: 20,
     width: screen.width-80,
-    borderRadius: 20,
+    borderRadius: 10,
     borderBottomEndRadius: 80,
     borderTopStartRadius: 100,
     backgroundColor: colors.white_alpha,

vds-app/App/screens/Setup.js

@@ -1,5 +1,7 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, CheckBox, Switch, SafeAreaView, Dimensions, Image, ImageBackground, BackHandler, AsyncStorage} from "react-native"
+import { View, ScrollView, StyleSheet, StatusBar, Text, CheckBox, Switch, Dimensions, Image, ImageBackground, BackHandler } from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import { Button, ButtonContainer } from "../components/Button"
 import { colors, texts, examScheme, resultsScheme} from "../components/Variables"
@@ -73,61 +75,39 @@ const styles = StyleSheet.create({
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 5
   },
-  textSmall: {
+  switchesBox: {
     lineHeight: 23,
-    marginTop: 15,
-    borderRadius: 10,
-    backgroundColor: colors.white,
-    borderWidth: 0,
-    borderColor: colors.white_alpha,
-    fontSize: 16,
+    //marginTop: 15,
+    borderRadius: 5,
+    backgroundColor: colors.black_alpha2,
+    borderColor: colors.white,
+    borderWidth: 2,
+    fontSize: 18,
     color: colors.white,
     fontWeight: "400",
     textAlign: "center",
     paddingHorizontal: 20,
-    paddingVertical: 20,
+    paddingVertical: 5,
     textShadowColor: 'rgba(0, 0, 0, 0.75)',
     textShadowOffset: {width: -1, height: 1},
     textShadowRadius: 5
   },
-  textItems: {
-    fontSize: 16,
-    fontWeight: "400",
-    lineHeight: 23,
-    color: colors.white,
-    textAlign: "center",
-    paddingBottom: 10,
-    marginBottom: 10,
-    borderBottomColor: colors.white_alpha,
-    borderBottomWidth: 1,
-    textShadowColor: 'rgba(0, 0, 0, 0.55)',
-    textShadowOffset: {width: -1, height: 1},
-    textShadowRadius: 2
-  },
   noBorder: {
     borderBottomWidth: 0
   },
-  item: {
-    width: "100%"
-  },
   noPadding: {
     paddingVertical: 0,
   },
-  textLabel: {
-    paddingHorizontal: 20,
-    paddingVertical: 20
-  },
   bold: {
     lineHeight: 30,
     fontSize: 26,
     fontWeight: "600"
   },
-
   switchContainer: {
     flexDirection: "row",
-    paddingBottom: 10,
-    marginBottom: 10,
-    borderBottomColor: colors.black_alpha,
+    paddingVertical: 15,
+    //marginVertical: 10,
+    borderBottomColor: colors.white,
     borderBottomWidth: 1,
   },
   switch: {
@@ -137,10 +117,10 @@ const styles = StyleSheet.create({
     marginLeft: "auto"
   },
   switchLabel: {
-    fontSize: 16,
+    fontSize: 18,
     fontWeight: "600",
-    marginLeft: 8,
-    marginRight: 8,
+    marginHorizontal: 8,
+    color: colors.white,
     width: "75%"
   },
   button: {
@@ -176,7 +156,7 @@ class Setup extends React.Component {
           setupData: setupData
         }
       })
-    }).done()
+    })
   }
 
 
@@ -205,7 +185,7 @@ class Setup extends React.Component {
 
       return true
 
-    }).done()
+    })
 
   }
 
@@ -236,7 +216,7 @@ class Setup extends React.Component {
                   {texts.setupScheme}
                 </Text>
 
-                <View style={styles.textSmall}>
+                <View style={styles.switchesBox}>
 
                   <View style={styles.switchContainer}>
                     <Text style={styles.switchLabel}>{texts.setupRandomCheck}</Text>
@@ -263,6 +243,7 @@ class Setup extends React.Component {
                     color={colors.white_alpha2}
                     hasShadow={true}
                     hasBg={true}
+                    noBorder={true}
                     text={texts.save}
                     onPress={() => {this.handleBackButton()}
                     }

vds-app/App/screens/Splash.js

@@ -1,8 +1,10 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image, Alert, BackHandler, AsyncStorage } from "react-native"
-import { AdMobBanner } from "expo-ads-admob"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, Image, Alert, BackHandler } from "react-native"
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import SafeAreaView from 'react-native-safe-area-view'
 
 import { Button, ButtonContainer } from "../components/Button"
+import { Banner } from "../components/Banner"
 import { colors, texts, credentials } from "../components/Variables"
 import { examQuestions } from "../components/ExamQuestions"
 import { trueFalseQuestions } from "../components/TrueFalseQuestions"
@@ -18,25 +20,6 @@ const styles = StyleSheet.create({
     backgroundColor: colors.dark_blue,
     flex: 1
   },
-  bannerContainer: {
-    backgroundColor: colors.dark_blue,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  bannerExpanded: {
-    backgroundColor: colors.dark_blue,
-    height: screen.height-230
-  },
-  bannerCollapsed: {
-    backgroundColor: colors.dark_blue,
-    height: 300
-  },
-  banner: {
-    width: 300,
-    height: 250,
-    marginVertical: 20
-  },
   title: {
     color: colors.white,
     fontSize: 25,
@@ -75,6 +58,11 @@ const styles = StyleSheet.create({
   },
   header: {
     width: "100%"
+  },
+  bannerContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
   }
 })
 
@@ -108,8 +96,8 @@ class Splash extends React.Component {
             setupData: setup ? JSON.parse(setup) : {}
           }
         })
-      }).done()
-    }).done()
+      })
+    })
 
 
   }
@@ -135,8 +123,6 @@ class Splash extends React.Component {
 
     const storeWrongAnswers = this.props.navigation.getParam("storeWrongAnswers") || this.state.storeWrongAnswers
 
-    //console.log(storeWrongAnswers.length)
-
     if(this.state.timer==maxTime) {
       interval = setInterval( () => {
         this.setState( (state) => {
@@ -166,14 +152,15 @@ class Splash extends React.Component {
 
         <SafeAreaView style={styles.safearea}>
           <View>
-            <ButtonContainer isBoxed={true}>
+            <ButtonContainer isBoxed={false}>
               <Button
                 text={texts.section_quizzes}
                 subtitle={`(${texts.section_quizzes_subtitle})`}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
+                noBorder={true}
                 color={colors.white_alpha}
                 onPress={() =>
                   this.props.navigation.navigate("QuizIndex", {
@@ -187,8 +174,9 @@ class Splash extends React.Component {
                 subtitle={`(${texts.exam_simulation})`}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
+                noBorder={true}
                 color={colors.white_alpha}
                 onPress={() =>
                   this.props.navigation.navigate("Exam", {
@@ -205,8 +193,9 @@ class Splash extends React.Component {
                     subtitle={`(${storeWrongAnswers.length} ${texts.wrong_title})`}
                     isBig={false}
                     hasBg={true}
-                    noPadding={true}
+                    noPadding={false}
                     hasShadow={true}
+                    noBorder={true}
                     color={colors.white_alpha}
                     onPress={() =>
                       this.props.navigation.navigate("Quiz", {
@@ -224,8 +213,9 @@ class Splash extends React.Component {
                 subtitle={`(${texts.trueFalseSubtitle})`}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
+                noBorder={true}
                 color={colors.white_alpha}
                 onPress={() =>
                   this.props.navigation.navigate("TrueFalse", {
@@ -239,8 +229,9 @@ class Splash extends React.Component {
                 subtitle={`(${texts.dictionarySubtitle})`}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
+                noBorder={true}
                 color={colors.white_alpha}
                 onPress={() => this.props.navigation.navigate("Dictionary", {})}
               />
@@ -249,8 +240,9 @@ class Splash extends React.Component {
                 subtitle={`(${texts.setupSubtitle})`}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
+                noBorder={true}
                 color={colors.white_alpha}
                 onPress={() => this.props.navigation.navigate("Setup", {})}
               />
@@ -258,8 +250,9 @@ class Splash extends React.Component {
                 text={texts.infoTitle}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
+                noBorder={true}
                 color={colors.white_alpha}
                 onPress={() => this.props.navigation.navigate("Info", {})}
               />
@@ -267,7 +260,7 @@ class Splash extends React.Component {
                 text={texts.exit}
                 isBig={false}
                 hasBg={true}
-                noPadding={true}
+                noPadding={false}
                 hasShadow={true}
                 noBorder={true}
                 color={colors.white_alpha2}
@@ -278,19 +271,10 @@ class Splash extends React.Component {
           </View>
 
         </SafeAreaView>
-        <View style={[styles.bannerContainer, !this.state.bannerExpanded ? styles.bannerCollapsed  : {}]}>
-          <AdMobBanner
-            style={styles.banner}
-            bannerSize="mediumRectangle"
-            adUnitID={credentials.adMobUnitID}
-            onDidFailToReceiveAdWithError={this.bannerError} />
-
-          {
-            this.state.bannerExpanded ? (
-              <Text style={styles.timer}>{this.state.timer}</Text>
-            ) : null
-          }
+        <View style={styles.bannerContainer}>
+          <Banner />
         </View>
+
       </ScrollView>
     )
   }

vds-app/App/screens/TrueFalse.js

@@ -1,8 +1,9 @@
 import React from "react"
-import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, ImageBackground, BackHandler } from "react-native"
-import { AdMobBanner } from "expo-ads-admob"
+import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, ImageBackground, BackHandler } from "react-native"
+import SafeAreaView from 'react-native-safe-area-view'
 
 import { Button, ButtonContainer } from "../components/Button"
+import { Banner } from "../components/Banner"
 import { texts, colors, examScheme, credentials } from "../components/Variables"
 
 import aerodynamicsQuestions from "../data/aerodynamics"
@@ -51,8 +52,10 @@ const styles = StyleSheet.create({
     paddingBottom: 0
   },
   textAnswer: {
-    color: colors.black,
-    backgroundColor: colors.white,
+    color: colors.white,
+    backgroundColor: colors.black_alpha,
+        borderColor: colors.white,
+    borderWidth: 2,
     fontSize: 18,
     textAlign: "center",
     fontWeight: "400",
@@ -85,12 +88,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center"
-  },
-  banner: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    width: 320
   }
 })
 
@@ -232,6 +229,7 @@ class Quiz extends React.Component {
                     <Button
                       halfSize={true}
                       text={texts.true}
+                      noBorder={true}
                       colorize={{id: randomAnswer.id, clicked: this.state.clickedAnswer ? randomAnswer.id : false, answered: this.state.answered, isCorrect: randomAnswer.correct || false}}
                       onPress={() => this.answer(true, randomAnswer.correct || false, randomAnswer.id, question)}
                     />
@@ -239,6 +237,7 @@ class Quiz extends React.Component {
                     <Button
                       halfSize={true}
                       text={texts.false}
+                      noBorder={true}
                       colorize={{id: randomAnswer.id, clicked: !this.state.clickedAnswer ? randomAnswer.id : false, answered: this.state.answered, isCorrect: !randomAnswer.correct}}
                       onPress={() => this.answer(false, randomAnswer.correct || false, randomAnswer.id, question)}
                     />
@@ -256,11 +255,7 @@ class Quiz extends React.Component {
           </View>
         </View>
         <View style={styles.bannerContainer}>
-          <AdMobBanner
-            style={styles.banner}
-            bannerSize="largeBanner"
-            adUnitID={credentials.adMobUnitIDFooter}
-            onDidFailToReceiveAdWithError={this.bannerError} />
+          <Banner />
         </View>
       </ImageBackground>
     )

vds-app/app.json

@@ -1,13 +1,16 @@
 {
+ "displayName": "VDS Quiz",
+  "name": "VDS Quiz",
   "expo": {
     "name": "VDS Quiz",
     "slug": "VDS-Quiz",
     "privacy": "public",
     "platforms": [
       "ios",
-      "android"
+      "android",
+      "web"
     ],
-    "version": "3.6.4",
+    "version": "3.8.2",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -16,7 +19,8 @@
       "backgroundColor": "#8c0072"
     },
     "updates": {
-      "fallbackToCacheTimeout": 10
+      "fallbackToCacheTimeout": 10,
+      "url": "https://u.expo.dev/7a0112f0-f4a6-11e9-b7eb-0ba61596acb6"
     },
     "assetBundlePatterns": [
       "**/*"
@@ -25,18 +29,44 @@
       "icon": "./assets/icon.png",
       "package": "com.dslak.vdsquiz",
       "permissions": [],
-      "versionCode": 21,
-      "config": {
-        "googleMobileAdsAppId": "ca-app-pub-4145771316565790~1876877627"
-      }
+      "versionCode": 29
     },
     "ios": {
       "icon": "./assets/iconIOS.png",
       "bundleIdentifier": "com.dslak.vdsquiz",
       "supportsTablet": true
     },
-    "entryPoint": "node_modules/expo/AppEntry.js"
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "7a0112f0-f4a6-11e9-b7eb-0ba61596acb6"
+      }
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "compileSdkVersion": 33,
+            "targetSdkVersion": 33,
+            "buildToolsVersion": "33.0.0"
+          },
+          "ios": {
+            "deploymentTarget": "13.0"
+          }
+        }
+      ]
+    ]
   },
-  "displayName": "VDS Quiz",
-  "name": "VDS Quiz"
+  "react-native-google-mobile-ads": {
+    "android_app_id": "ca-app-pub-3940256099942544~3347511713",
+    "ios_app_id": "ca-app-pub-3940256099942544~1458002511",
+    "delay_app_measurement_init": false,
+    "optimize_initialization": true,
+    "optimize_ad_loading": true,
+    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
+  }
+
 }

vds-app/babel.config.js

@@ -1,6 +1,7 @@
 module.exports = function(api) {
   api.cache(true)
   return {
+    plugins: ['react-native-reanimated/plugin'],
     presets: ['babel-preset-expo']
   }
 }

vds-app/dist/assetmap.json

@@ -0,0 +1 @@
+{"c90fb4585dd852a3d67af39baf923f67":{"__packager_asset":true,"fileSystemLocation":"/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets","httpServerLocation":"/assets/node_modules/react-navigation-stack/lib/module/vendor/views/assets","width":12,"height":21,"scales":[1,1.5,2,3,4],"files":["/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@1x.ios.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@1.5x.ios.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@2x.ios.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@3x.ios.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@4x.ios.png"],"hash":"c90fb4585dd852a3d67af39baf923f67","name":"back-icon","type":"png","fileHashes":["7d40544b395c5949f4646f5e150fe020","cdd04e13d4ec83ff0cd13ec8dabdc341","a132ecc4ba5c1517ff83c0fb321bc7fc","0ea69b5077e7c4696db85dbcba75b0e1","f5b790e2ac193b3d41015edb3551f9b8"]},"5223c8d9b0d08b82a5670fb5f71faf78":{"__packager_asset":true,"fileSystemLocation":"/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets","httpServerLocation":"/assets/node_modules/react-navigation-stack/lib/module/vendor/views/assets","width":50,"height":85,"scales":[1],"files":["/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon-mask.png"],"hash":"5223c8d9b0d08b82a5670fb5f71faf78","name":"back-icon-mask","type":"png","fileHashes":["5223c8d9b0d08b82a5670fb5f71faf78"]},"319b7d9681027a1ef8d3fb9520d73a17":{"__packager_asset":true,"fileSystemLocation":"/home/dslak/Desktop/vds_quiz/vds-app/App/assets","httpServerLocation":"/assets/App/assets","width":1553,"height":500,"scales":[1],"files":["/home/dslak/Desktop/vds_quiz/vds-app/App/assets/buttonBg.png"],"hash":"319b7d9681027a1ef8d3fb9520d73a17","name":"buttonBg","type":"png","fileHashes":["319b7d9681027a1ef8d3fb9520d73a17"]},"e6b3e73c7c9600ce768eba302c6ad054":{"__packager_asset":true,"fileSystemLocation":"/home/dslak/Desktop/vds_quiz/vds-app/App/assets","httpServerLocation":"/assets/App/assets","width":1553,"height":938,"scales":[1],"files":["/home/dslak/Desktop/vds_quiz/vds-app/App/assets/header.png"],"hash":"e6b3e73c7c9600ce768eba302c6ad054","name":"header","type":"png","fileHashes":["e6b3e73c7c9600ce768eba302c6ad054"]},"4ade0cd9affb7de397ece858c4ef9212":{"__packager_asset":true,"fileSystemLocation":"/home/dslak/Desktop/vds_quiz/vds-app/App/assets","httpServerLocation":"/assets/App/assets","width":800,"height":1400,"scales":[1],"files":["/home/dslak/Desktop/vds_quiz/vds-app/App/assets/bg.jpg"],"hash":"4ade0cd9affb7de397ece858c4ef9212","name":"bg","type":"jpg","fileHashes":["4ade0cd9affb7de397ece858c4ef9212"]},"a364dc7a784101f7c8f6791c7b4514ce":{"__packager_asset":true,"fileSystemLocation":"/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets","httpServerLocation":"/assets/node_modules/react-navigation-stack/lib/module/vendor/views/assets","width":24,"height":24,"scales":[1,1.5,2,3,4],"files":["/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@1x.android.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@1.5x.android.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@2x.android.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@3x.android.png","/home/dslak/Desktop/vds_quiz/vds-app/node_modules/react-navigation-stack/lib/module/vendor/views/assets/back-icon@4x.android.png"],"hash":"a364dc7a784101f7c8f6791c7b4514ce","name":"back-icon","type":"png","fileHashes":["778ffc9fe8773a878e9c30a6304784de","376d6a4c7f622917c39feb23671ef71d","c79c3606a1cf168006ad3979763c7e0c","02bc1fa7c0313217bde2d65ccbff40c9","35ba0eaec5a4f5ed12ca16fabeae451d"]}}

vds-app/dist/debug.html

@@ -0,0 +1,6 @@
+
+      <script src="bundles/ios-62b68d2e0eb54df3fa8210b6752aa722.js"></script>
+      <script src="bundles/android-21da78b5401f0954d05cf90eba32fc85.js"></script>
+      Open up this file in Chrome. In the JavaScript developer console, navigate to the Source tab.
+      You can see a red colored folder containing the original source code from your bundle.
+      

vds-app/dist/metadata.json

@@ -0,0 +1 @@
+{"version":0,"bundler":"metro","fileMetadata":{"ios":{"bundle":"bundles/ios-62b68d2e0eb54df3fa8210b6752aa722.js","assets":[{"path":"assets/7d40544b395c5949f4646f5e150fe020","ext":"png"},{"path":"assets/cdd04e13d4ec83ff0cd13ec8dabdc341","ext":"png"},{"path":"assets/a132ecc4ba5c1517ff83c0fb321bc7fc","ext":"png"},{"path":"assets/0ea69b5077e7c4696db85dbcba75b0e1","ext":"png"},{"path":"assets/f5b790e2ac193b3d41015edb3551f9b8","ext":"png"},{"path":"assets/5223c8d9b0d08b82a5670fb5f71faf78","ext":"png"},{"path":"assets/319b7d9681027a1ef8d3fb9520d73a17","ext":"png"},{"path":"assets/e6b3e73c7c9600ce768eba302c6ad054","ext":"png"},{"path":"assets/4ade0cd9affb7de397ece858c4ef9212","ext":"jpg"}]},"android":{"bundle":"bundles/android-21da78b5401f0954d05cf90eba32fc85.js","assets":[{"path":"assets/778ffc9fe8773a878e9c30a6304784de","ext":"png"},{"path":"assets/376d6a4c7f622917c39feb23671ef71d","ext":"png"},{"path":"assets/c79c3606a1cf168006ad3979763c7e0c","ext":"png"},{"path":"assets/02bc1fa7c0313217bde2d65ccbff40c9","ext":"png"},{"path":"assets/35ba0eaec5a4f5ed12ca16fabeae451d","ext":"png"},{"path":"assets/5223c8d9b0d08b82a5670fb5f71faf78","ext":"png"},{"path":"assets/319b7d9681027a1ef8d3fb9520d73a17","ext":"png"},{"path":"assets/e6b3e73c7c9600ce768eba302c6ad054","ext":"png"},{"path":"assets/4ade0cd9affb7de397ece858c4ef9212","ext":"jpg"}]}}}

vds-app/eas.json

@@ -0,0 +1,28 @@
+{
+  "cli": {
+    "version": ">= 3.8.2"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    },
+    "production": {
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

vds-app/package.json

@@ -1,32 +1,58 @@
 {
+  "name": "vds-quiz",
+  "version": "3.8.2",
+  "license": "MIT",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
-    "build-android": "expo build:android -t app-bundle",
+    "web": "expo start --web",
+    "build-android-old": "expo build:android -t app-bundle",
+    "build-android": "eas build -p android",
+    "build-android-local": "eas build -p android --profile preview",
     "build-ios": "expo build:ios",
     "ios": "expo start --ios",
     "eject": "expo eject",
     "lint": "eslint ."
   },
   "dependencies": {
-    "expo": "^38.0.0",
-    "expo-ads-admob": "~8.2.1",
-    "expo-permissions": "~9.0.1",
-    "react": "16.11.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
-    "react-native-admob": "^1.3.2",
-    "react-native-gesture-handler": "~1.6.0",
-    "react-native-reanimated": "~1.9.0",
-    "react-native-screens": "~2.9.0",
-    "react-navigation": "^3.6.1",
+    "@expo/config-plugins": "^6.0.1",
+    "@react-native-admob/admob": "^2.0.1",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-masked-view/masked-view": "^0.2.8",
+    "@react-native-picker/picker": "2.4.8",
+    "expo": "^48.0.8",
+    "expo-build-properties": "~0.5.1",
+    "expo-dev-client": "~2.1.6",
+    "expo-permissions": "^14.1.1",
+    "expo-updates": "~0.16.3",
+    "react": "^18.2.0",
+    "react-native": "0.71.4",
+    "react-native-gesture-handler": "^2.9.0",
+    "react-native-google-mobile-ads": "^10.0.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "^4.5.0",
+    "react-native-safe-area-view": "^1.1.1",
+    "react-native-screens": "^3.20.0",
+    "react-navigation": "^4.4.4",
+    "react-navigation-stack": "^2.10.4",
     "remove-console-logs": "^0.1.0"
   },
   "devDependencies": {
-    "babel-preset-expo": "^8.2.3",
-    "eslint": "^5.16.0",
-    "eslint-config-handlebarlabs": "^0.0.3",
-    "prettier": "^1.16.4"
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.2",
+    "babel-preset-expo": "^9.3.0",
+    "eslint": "^8.36.0",
+    "eslint-config-handlebarlabs": "^0.0.6",
+    "prettier": "^2.8.6"
+  },
+  "peerDependencies": {
+    "expo-modules-autolinking": "^1.1.2"
+  },
+  "rnpm": {
+    "assets": [
+      "./assets/fonts/"
+    ]
   },
   "private": true
 }

vds-app/react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {}, // grouped into "project"
+  },
+  assets: ["./assets/fonts/"], // stays the same
+};

web/css/owl.carousel.css

@@ -0,0 +1,186 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+/*
+ *  Owl Carousel - Core
+ */
+.owl-carousel {
+  display: none;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  /* position relative and z-index fix webkit rendering fonts issue */
+  position: relative;
+  z-index: 1; }
+  .owl-carousel .owl-stage {
+    position: relative;
+    -ms-touch-action: pan-Y;
+    touch-action: manipulation;
+    -moz-backface-visibility: hidden;
+    /* fix firefox animation glitch */ }
+  .owl-carousel .owl-stage:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0; }
+  .owl-carousel .owl-stage-outer {
+    position: relative;
+    overflow: hidden;
+    /* fix for flashing background */
+    -webkit-transform: translate3d(0px, 0px, 0px); }
+  .owl-carousel .owl-wrapper,
+  .owl-carousel .owl-item {
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0); }
+  .owl-carousel .owl-item {
+    position: relative;
+    min-height: 1px;
+    float: left;
+    -webkit-backface-visibility: hidden;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none; }
+  .owl-carousel .owl-item img {
+    display: block;
+    width: 100%; }
+  .owl-carousel .owl-nav.disabled,
+  .owl-carousel .owl-dots.disabled {
+    display: none; }
+  .owl-carousel .owl-nav .owl-prev,
+  .owl-carousel .owl-nav .owl-next,
+  .owl-carousel .owl-dot {
+    cursor: pointer;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .owl-carousel .owl-nav button.owl-prev,
+  .owl-carousel .owl-nav button.owl-next,
+  .owl-carousel button.owl-dot {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0 !important;
+    font: inherit; }
+  .owl-carousel.owl-loaded {
+    display: block; }
+  .owl-carousel.owl-loading {
+    opacity: 0;
+    display: block; }
+  .owl-carousel.owl-hidden {
+    opacity: 0; }
+  .owl-carousel.owl-refresh .owl-item {
+    visibility: hidden; }
+  .owl-carousel.owl-drag .owl-item {
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .owl-carousel.owl-grab {
+    cursor: move;
+    cursor: grab; }
+  .owl-carousel.owl-rtl {
+    direction: rtl; }
+  .owl-carousel.owl-rtl .owl-item {
+    float: right; }
+
+/* No Js */
+.no-js .owl-carousel {
+  display: block; }
+
+/*
+ *  Owl Carousel - Animate Plugin
+ */
+.owl-carousel .animated {
+  animation-duration: 1000ms;
+  animation-fill-mode: both; }
+
+.owl-carousel .owl-animated-in {
+  z-index: 0; }
+
+.owl-carousel .owl-animated-out {
+  z-index: 1; }
+
+.owl-carousel .fadeOut {
+  animation-name: fadeOut; }
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+/*
+ * 	Owl Carousel - Auto Height Plugin
+ */
+.owl-height {
+  transition: height 500ms ease-in-out; }
+
+/*
+ * 	Owl Carousel - Lazy Load Plugin
+ */
+.owl-carousel .owl-item {
+  /**
+			This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
+			calculation of the height of the owl-item that breaks page layouts
+		 */ }
+  .owl-carousel .owl-item .owl-lazy {
+    opacity: 0;
+    transition: opacity 400ms ease; }
+  .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
+    max-height: 0; }
+  .owl-carousel .owl-item img.owl-lazy {
+    transform-style: preserve-3d; }
+
+/*
+ * 	Owl Carousel - Video Plugin
+ */
+.owl-carousel .owl-video-wrapper {
+  position: relative;
+  height: 100%;
+  background: #000; }
+
+.owl-carousel .owl-video-play-icon {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  left: 50%;
+  top: 50%;
+  margin-left: -40px;
+  margin-top: -40px;
+  background: url("owl.video.play.png") no-repeat;
+  cursor: pointer;
+  z-index: 1;
+  -webkit-backface-visibility: hidden;
+  transition: transform 100ms ease; }
+
+.owl-carousel .owl-video-play-icon:hover {
+  -ms-transform: scale(1.3, 1.3);
+      transform: scale(1.3, 1.3); }
+
+.owl-carousel .owl-video-playing .owl-video-tn,
+.owl-carousel .owl-video-playing .owl-video-play-icon {
+  display: none; }
+
+.owl-carousel .owl-video-tn {
+  opacity: 0;
+  height: 100%;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  transition: opacity 400ms ease; }
+
+.owl-carousel .owl-video-frame {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  width: 100%; }

web/css/owl.theme.default.min.css

@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.3.4
+ * Copyright 2013-2018 David Deutsch
+ * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}

web/css/style.css

@@ -0,0 +1,995 @@
+/*
+	App by FreeHTML5.co
+	Twitter: http://twitter.com/fh5co
+	URL: http://freehtml5.co
+*/
+@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800");
+* {
+  margin: 0px;
+  padding: 0px;
+  font-family: "Montserrat", "sans-serif";
+}
+
+html {
+  overflow-x: hidden;
+}
+
+.download-btn-first {
+  background: #f7f7f7;
+}
+
+.download-btn-first:hover {
+  background: #234197;
+  color: #fff !important;
+}
+
+.features-btn-first {
+  font-weight: 700;
+}
+
+.features-btn-first:hover {
+  background: #f7f7f7 !important;
+  color: #234197 !important;
+}
+
+#fh5co-hero-wrapper {
+  height: 800px;
+  width: 100%;
+  background: url("/img/banner-bg.png") no-repeat center;
+  border-radius: 0 0 50% 50% / 4%;
+}
+
+.main-navbar-nav .navbar-brand {
+  font-size: 38px;
+  letter-spacing: 4px;
+  position: relative;
+  top: -5px;
+  font-weight: 500;
+  color: #FFF;
+}
+
+.main-navbar-nav {
+  color: #fff !important;
+}
+.main-navbar-nav li {
+  color: #fff;
+  opacity: .7;
+}
+.main-navbar-nav .navbar-nav .nav-item a:hover {
+  color: #234197 !important;
+  -webkit-transition: all .33s ease;
+  -moz-transition: all .33s ease;
+  -o-transition: all .33s ease;
+  -ms-transition: all .33s ease;
+  transition: all .33s ease;
+}
+.main-navbar-nav .active {
+  color: #fff !important;
+  opacity: 1 !important;
+}
+.main-navbar-nav a {
+  color: #fff !important;
+}
+.main-navbar-nav .nav-link {
+  opacity: 1 !important;
+  margin: 0 35px;
+  font-size: 14.5px;
+  font-weight: 500;
+}
+
+.social-icons-header i {
+  margin: 15px;
+  font-size: 20px;
+}
+
+.social-icons-header a:hover i {
+  opacity: .6;
+  -webkit-transition: all .2s ease;
+  -moz-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  -ms-transition: all .2s ease;
+  transition: all .2s ease;
+}
+
+.fh5co-hero-inner {
+  margin-top: 110px;
+  position: relative;
+}
+.fh5co-hero-inner > h1 {
+  color: #fff;
+  font-weight: 300;
+  font-size: 55px;
+  letter-spacing: 2px;
+}
+.fh5co-hero-inner > p {
+  width: 400px;
+  font-size: 14px;
+  color: #fff;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  line-height: 2em;
+}
+.fh5co-hero-inner .download-btn-first {
+  font-size: 15px;
+  padding: 10px 15px;
+  font-weight: 700;
+  color: #234197;
+}
+.fh5co-hero-inner .features-btn-first {
+  font-size: 15px;
+  padding: 8px 13px;
+  font-weight: 400;
+  background: #234197;
+  color: #fff;
+  margin-left: 10px;
+}
+.fh5co-hero-inner .fh5co-hero-smartphone {
+  position: absolute;
+  right: 0px;
+  top: 120px;
+  height: 650px;
+}
+
+/* ==========================================================================================================
+										ADVANTAGES
+   ========================================================================================================== */
+.fh5co-advantages-outer {
+  padding: 70px;
+  height: auto;
+  width: 100%;
+  overflow: hidden;
+}
+.fh5co-advantages-outer .span-perfect {
+  color: #648cff;
+  text-transform: uppercase;
+  font-size: 27px;
+  letter-spacing: 1px;
+}
+.fh5co-advantages-outer .span-features {
+  text-transform: uppercase;
+  font-size: 42px;
+}
+.fh5co-advantages-outer .second-title {
+  text-align: center;
+  display: block;
+}
+.fh5co-advantages-outer small {
+  display: block;
+  text-align: center;
+}
+.fh5co-advantages-outer .fh5co-advantages-grid-columns {
+  margin-top: 120px;
+}
+.fh5co-advantages-outer .fh5co-advantages-grid-columns .col-sm-4 .grid-image {
+  width: 30%;
+  float: left;
+  padding-right: 30px;
+  position: relative;
+  top: 1px;
+  color: #648cff;
+}
+.fh5co-advantages-outer .fh5co-advantages-grid-columns .col-sm-4 .grid-title {
+  float: left;
+  font-size: 20px;
+  font-weight: 600;
+}
+.fh5co-advantages-outer .fh5co-advantages-grid-columns .col-sm-4 .grid-desc {
+  float: right;
+  font-size: 13px;
+  padding-right: 7%;
+  width: 70%;
+  color: #c7c7c7;
+  margin-top: 10px;
+  line-height: 1.87em;
+}
+
+.fh5co-slider-inner {
+  margin-top: 50px;
+  margin-bottom: 30px;
+}
+
+/* ==========================================================================================================
+										SLIDER
+   ========================================================================================================== */
+.fh5co-slider-outer {
+  width: 100%;
+  height: auto;
+  padding: 70px;
+}
+.fh5co-slider-outer h1 {
+  color: #648cff;
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.fh5co-slider-outer > h1, .fh5co-slider-outer small {
+  text-align: center;
+  display: block;
+}
+.fh5co-slider-outer .fh5co-slider-outer {
+  margin-top: 50px;
+}
+.fh5co-slider-outer .carousel-left-arrow {
+  position: absolute;
+  left: -100px;
+  bottom: 250px;
+  font-size: 60px;
+  color: #ececec;
+}
+.fh5co-slider-outer .carousel-right-arrow {
+  position: absolute;
+  right: -100px;
+  bottom: 250px;
+  font-size: 60px;
+  color: #ececec;
+}
+.fh5co-slider-outer .item img {
+  height: 400px;
+  width: 200px;
+  object-fit: contain;
+}
+
+/* ==========================================================================================================
+										FEATURES
+   ========================================================================================================== */
+.curved-bg-div {
+  background: url("/img/curved-bg.png") no-repeat;
+  background-position: 0px -140px;
+  background-size: cover;
+  width: 100%;
+  height: 300px;
+}
+
+.fh5co-features-outer {
+  width: 100%;
+  height: auto;
+  margin-top: -180px;
+}
+.fh5co-features-outer .col-sm-6 {
+  margin-top: 80px;
+}
+.fh5co-features-outer .col-sm-6 img {
+  height: 550px;
+}
+.fh5co-features-outer .sm-6-content {
+  margin-top: 250px;
+  position: relative;
+}
+.fh5co-features-outer .sm-6-content h1 {
+  color: #648cff;
+  text-transform: uppercase;
+  font-size: 25px;
+  font-weight: 600;
+  margin-bottom: 20px;
+}
+.fh5co-features-outer .sm-6-content p {
+  color: #111;
+  font-weight: 500;
+  font-size: 14.5px;
+  line-height: 1.8em;
+  width: 450px;
+}
+.fh5co-features-outer .col-sm-6 .col-sm-image-container {
+  position: relative;
+  width: 300px;
+}
+.fh5co-features-outer .col-sm-6 .span-new {
+  color: #fff;
+  background: #fcec64;
+  padding: 18px;
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  font-weight: 700;
+  right: 0;
+  top: 140px;
+}
+.fh5co-features-outer .col-sm-6 .span-free {
+  color: #fff;
+  background: #6ca3ff;
+  padding: 18px;
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  left: -35px;
+  bottom: -430px;
+  font-weight: 700;
+}
+.fh5co-features-outer .col-sm-6 .span-data {
+  color: #7e8c91;
+  background: #b8faee;
+  padding: 20px;
+  width: 40px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  letter-spacing: 1px;
+  box-sizing: initial;
+  position: absolute;
+  top: 140px;
+  right: -2px;
+  font-weight: 700;
+}
+.fh5co-features-outer .col-sm-6 .span-percent {
+  color: #fff;
+  background: #6ca3ff;
+  padding: 18px;
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  left: -35px;
+  bottom: -430px;
+  font-weight: 700;
+}
+.fh5co-features-outer .col-sm-6 .circle {
+  color: #c3cfe5;
+  border: 1px solid #ededed;
+  background: #fff;
+  padding: 10px;
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  font-weight: 600;
+  box-shadow: 0 0 0 5px #f9f9f9;
+}
+.fh5co-features-outer .col-sm-6 .circle-first {
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  margin-left: 0px;
+  font-weight: 600;
+}
+.fh5co-features-outer .col-sm-6 .circle-middle {
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  margin-left: 50px;
+  font-weight: 600;
+}
+.fh5co-features-outer .col-sm-6 .circle-last {
+  width: 35px;
+  display: inline-block;
+  line-height: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 14px;
+  box-sizing: initial;
+  position: absolute;
+  margin-left: 100px;
+  font-weight: 600;
+}
+
+/* ==========================================================================================================
+										REVIEWS
+   ========================================================================================================== */
+.fh5co-reviews-outer {
+  width: 100%;
+  height: 400px;
+  padding: 70px;
+  margin-top: 100px;
+}
+.fh5co-reviews-outer .fh5co-reviews-inner {
+  margin-top: 100px;
+}
+.fh5co-reviews-outer > h1 {
+  color: #648cff;
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.fh5co-reviews-outer > small {
+  text-align: center;
+  display: block;
+}
+.fh5co-reviews-outer .testimonial-desc {
+  clear: both;
+  padding-top: 30px;
+  font-weight: 500;
+}
+.fh5co-reviews-outer .testimonial-2 {
+  margin-left: 50px;
+}
+
+/* ==========================================================================================================
+										BOTTOM
+   ========================================================================================================== */
+.fh5co-bottom-outer {
+  width: 100%;
+  height: 572px;
+  background: url("/img/download-section-bg.png") no-repeat center;
+  margin-top: 120px;
+  overflow-x: hidden;
+}
+.fh5co-bottom-outer .fh5co-bottom-inner {
+  margin-top: 270px;
+}
+.fh5co-bottom-outer .fh5co-bottom-inner .col-sm-6 h1 {
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 30px;
+  margin-bottom: 30px;
+}
+.fh5co-bottom-outer .fh5co-bottom-inner .col-sm-6 p {
+  width: 350px;
+  color: #fff;
+  font-size: 14.5px;
+  line-height: 1.85em;
+}
+.fh5co-bottom-outer .fh5co-bottom-inner .col-sm-6 img {
+  margin-top: 25px;
+}
+
+   /* ==========================================================================================================
+										SUB FOOTER
+   ========================================================================================================== */
+.img-float-left {
+  float: left;
+}
+
+.img-float-right {
+  float: right;
+}
+
+.footer-outer {
+  width: 100%;
+  padding: 50px;
+  background: #97104e;
+  overflow: hidden;
+}
+.footer-outer .footer-inner {
+  width: 100%;
+  height: inherit;
+}
+.footer-outer .social-icons-footer i {
+  margin: 15px;
+  font-size: 20px;
+}
+.footer-outer .social-icons-footer a:hover i {
+  opacity: .6;
+  -webkit-transition: all .2s ease;
+  -moz-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  -ms-transition: all .2s ease;
+  transition: all .2s ease;
+}
+.footer-outer .footer-three-grid {
+  width: 1140px;
+  margin: 0 auto;
+  height: 50px;
+  text-align: center;
+}
+.footer-outer .column-1-3 {
+  width: 20%;
+  float: left;
+  height: 50px;
+}
+.footer-outer .column-1-3 h1 {
+  font-size: 38px;
+  letter-spacing: 3px;
+  position: relative;
+  top: -5px;
+  font-weight: 600;
+  color: #fff;
+}
+.footer-outer .column-2-3 {
+  width: 60%;
+  float: left;
+  height: 50px;
+}
+.footer-outer .column-3-3 {
+  width: 20%;
+  float: left;
+  height: 50px;
+}
+.footer-outer .column-3-3 a {
+  color: #b5b5c8;
+}
+.footer-outer .column-3-3 .social-icons-header a:hover {
+  color: #fff;
+  opacity: 1;
+  -webkit-transition: color .2s ease;
+  -o-transition: color .2s ease;
+  transition: color .2s ease;
+}
+.footer-outer .footer-nav ul {
+  list-style: none;
+  text-align: center;
+}
+.footer-outer .footer-nav ul li {
+  display: inline-block;
+  line-height: 50px;
+  color: #b5b5c8;
+  margin: 0 30px;
+  font-size: 14px;
+}
+.footer-outer .footer-nav ul li:hover {
+  color: #fff;
+  -webkit-transition: color .2s ease-in-out;
+  -o-transition: color .2s ease-in-out;
+  transition: color .2s ease-in-out;
+}
+.footer-outer .footer-nav ul .active {
+  color: #fff;
+}
+.footer-outer .footer-nav ul li a {
+  color: #fff;
+  text-decoration: none;
+}
+.footer-outer .border-bottom-footer {
+  height: 1px;
+  width: 60%;
+  margin: 0 auto;
+  border: 1px solid #FFF;
+  display: block;
+  margin-top: 50px;
+}
+.footer-outer .copyright {
+  color: #FFF !important;
+  text-align: center;
+  font-size: 13px;
+  padding: 40px 0;
+}
+
+.google-play-btn {
+  margin-left: 10px;
+}
+
+/* ==========================================================================================================
+                                       RESPONSIVE STYLING
+  ========================================================================================================== */
+@media screen and (max-width: 1400px) {
+  body {
+    overflow-x: hidden;
+  }
+
+  .fh5co-hero-inner .fh5co-hero-smartphone {
+    position: absolute;
+    right: 50px;
+    top: 200px;
+    height: 550px;
+  }
+
+  .curved-bg-div {
+    background-position: 100% -20px;
+  }
+
+  .footer-outer .footer-three-grid {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1200px) {
+  body {
+    overflow-x: hidden;
+  }
+
+  .fh5co-hero-inner .fh5co-hero-smartphone {
+    position: absolute;
+    right: -15px;
+    top: 200px;
+    height: 550px;
+  }
+}
+@media screen and (max-width: 993px) {
+  body {
+    overflow-x: hidden;
+  }
+
+  #fh5co-hero-wrapper {
+    height: 95vh;
+  }
+
+  .fh5co-hero-inner {
+    margin-top: 30px;
+  }
+
+  .fh5co-hero-inner .fh5co-hero-smartphone {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    top: 270px;
+    height: 460px;
+    margin-top: 110px;
+  }
+
+  .fh5co-advantages-outer {
+    margin-top: 50px;
+    padding-bottom: 0;
+  }
+
+  .fh5co-advantages-outer .fh5co-advantages-grid-columns .col-sm-4 .grid-image {
+    width: 60px;
+    float: none;
+    display: block;
+    margin: 0 auto;
+    padding-right: 0px;
+    margin-bottom: 20px;
+    position: relative;
+    top: 1px;
+  }
+
+  .fh5co-advantages-outer .fh5co-advantages-grid-columns .col-sm-4 .grid-title {
+    float: none;
+    text-align: center;
+  }
+
+  .fh5co-advantages-outer .fh5co-advantages-grid-columns .col-sm-4 .grid-desc {
+    float: none;
+    width: 100%;
+    text-align: center;
+  }
+
+  .fh5co-slider-outer .fh5co-slider-outer {
+    margin-top: 0px;
+  }
+
+  .fh5co-features-outer {
+    margin-top: -100px;
+  }
+
+  .fh5co-features-outer .sm-6-content p {
+    width: 100%;
+  }
+
+  .footer-outer .footer-nav ul li {
+    margin: 0 10px;
+  }
+
+  .footer-outer .social-icons-footer i {
+    margin: 15px 10px;
+    font-size: 20px;
+  }
+}
+@media screen and (max-width: 993px) {
+  .fh5co-features-grid-columns .col-sm-6 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 100%;
+    width: 100%;
+    max-width: 100%;
+    margin: 30px auto;
+    text-align: center;
+  }
+
+  .fh5co-features-outer .col-sm-6 .col-sm-image-container {
+    position: relative;
+    width: 295px !important;
+    text-align: center;
+    margin: 15px auto 0;
+  }
+
+  .no-float {
+    float: none !important;
+  }
+
+  .fh5co-slider-outer .carousel-right-arrow {
+    position: absolute;
+    right: -70px;
+    bottom: 250px;
+    font-size: 60px;
+    color: #ececec;
+  }
+
+  .fh5co-slider-outer .carousel-left-arrow {
+    position: absolute;
+    left: -70px;
+    bottom: 250px;
+    font-size: 60px;
+    color: #ececec;
+  }
+
+  .img-float-right {
+    float: none;
+  }
+
+  .img-float-left {
+    float: none;
+  }
+
+  .fh5co-features-outer .col-sm-6 .span-percent, .fh5co-features-outer .col-sm-6 .span-free {
+    left: -15px;
+    bottom: 140px;
+  }
+
+  .fh5co-features-outer .col-sm-6 .span-new {
+    right: -10px;
+  }
+
+  .fh5co-features-outer .col-sm-6 .span-data {
+    right: -15px;
+  }
+
+  .fh5co-features-outer .col-sm-6 .circle {
+    position: static;
+    display: inline-block;
+    margin: 25px 5px;
+  }
+
+  .fh5co-advantages-outer .second-title {
+    margin-top: 60px;
+  }
+
+  .fh5co-features-grid-columns {
+    display: flex;
+    flex-direction: column;
+  }
+  .fh5co-features-grid-columns .in-order-4 {
+    order: 1;
+  }
+  .fh5co-features-grid-columns .in-order-3 {
+    order: 2;
+  }
+
+  .fh5co-reviews-outer {
+    padding: 0;
+  }
+
+  .navbar-light .navbar-toggler {
+    color: #fff !important;
+    border-color: #c7c7c7 !important;
+  }
+
+  .navbar-light .navbar-nav .nav-link {
+    margin: 0;
+    width: 100%;
+  }
+
+  .social-icons-header i:first-of-type {
+    margin-right: 10px !important;
+    margin-left: 0 !important;
+    font-size: 30px;
+  }
+}
+@media screen and (max-width: 800px) {
+  .fh5co-hero-inner > h1 {
+    color: #fff;
+    font-weight: 300;
+    font-size: 45px;
+    letter-spacing: 2px;
+  }
+
+  #fh5co-hero-wrapper {
+    height: 800px;
+  }
+
+  .fh5co-advantages-outer .fh5co-advantages-grid-columns {
+    margin-top: 40px;
+  }
+
+  .fh5co-advantages-grid-columns .col-sm-4 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    width: 100%;
+    max-width: 100%;
+    margin: 30px auto;
+    text-align: center;
+  }
+
+  .fh5co-hero-inner .fh5co-hero-smartphone {
+    height: 420px;
+    top: 310px;
+  }
+
+  .fh5co-advantages-outer .second-title {
+    margin-top: 60px;
+  }
+
+  .fh5co-bottom-outer {
+    margin-top: 40px;
+    overflow: hidden;
+  }
+
+  .fh5co-bottom-outer .fh5co-bottom-inner {
+    margin-top: 50px;
+  }
+
+  .fh5co-slider-outer {
+    padding: 0;
+  }
+
+  .fh5co-slider-outer .carousel-left-arrow {
+    left: 50px;
+    font-size: 50px;
+    bottom: 190px;
+  }
+
+  .fh5co-slider-outer .carousel-right-arrow {
+    right: 50px;
+    font-size: 50px;
+    bottom: 190px;
+  }
+
+  .fh5co-reviews-inner .col-sm-5 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    width: 75%;
+    max-width: 75%;
+    margin: 30px auto;
+    text-align: center;
+  }
+
+  .fh5co-slider-outer .item img {
+    height: 300px;
+  }
+
+  .fh5co-reviews-outer {
+    height: auto;
+  }
+
+  .fh5co-reviews-outer .fh5co-reviews-inner {
+    margin-top: 50px;
+  }
+
+  .fh5co-bottom-outer {
+    background-position: center bottom;
+    overflow: hidden;
+    height: auto;
+  }
+
+  .fh5co-bottom-inner {
+    overflow: hidden;
+    padding-bottom: 50px;
+    text-align: center;
+  }
+
+  .overlay {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    overflow-x: hidden;
+  }
+
+  .fh5co-bottom-outer .fh5co-bottom-inner .col-sm-6 p {
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  .footer-outer {
+    height: auto;
+    padding: 20px;
+  }
+
+  .footer-outer .column-1-3 {
+    width: 100%;
+    float: none;
+    height: auto;
+    padding-top: 30px;
+  }
+
+  .footer-outer .column-2-3 {
+    width: 100%;
+    float: none;
+    height: auto;
+  }
+
+  .footer-outer .column-3-3 {
+    width: 100%;
+    float: left;
+    height: auto;
+    margin: 15px 0;
+  }
+
+  .footer-outer .copyright {
+    margin-top: 30px;
+    padding: 10px 0;
+    color: #FFF !important;
+  }
+
+  .footer-outer .border-bottom-footer {
+    height: 1px;
+    width: 100%;
+    margin: 0 auto;
+    border: 1px solid #434769;
+    display: block;
+    margin-top: 100px;
+  }
+}
+@media screen and (max-width: 520px) {
+  #fh5co-hero-wrapper {
+    height: 900px;
+  }
+
+  .fh5co-hero-inner > h1 {
+    font-size: 40px;
+  }
+
+  .fh5co-hero-inner > p {
+    width: 100%;
+  }
+
+  .fh5co-hero-inner {
+    text-align: center;
+  }
+
+  .fh5co-hero-inner .fh5co-hero-smartphone {
+    height: 450px;
+    top: 420px;
+    margin-top: 70px;
+  }
+
+  .social-icons-header i:first-of-type {
+    font-size: 22px;
+  }
+
+  .fh5co-slider-outer .carousel-left-arrow {
+    left: 0;
+  }
+
+  .fh5co-slider-outer .carousel-right-arrow {
+    right: 0;
+  }
+
+  .fh5co-slider-inner {
+    margin-top: 50px;
+    margin-bottom: 30px;
+  }
+
+  .fh5co-reviews-inner .col-sm-5 {
+    -ms-flex: 0 0 90%;
+    flex: 0 0 90%;
+    width: 90%;
+    max-width: 90%;
+    margin: 30px auto;
+    text-align: center;
+  }
+
+  .fh5co-advantages-outer .span-perfect {
+    margin-top: 80px;
+    font-size: 18px;
+    margin-bottom: 15px;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  .fh5co-advantages-outer .span-features {
+    font-size: 24px;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+}

web/img/curved-bg.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2845"
+   width="1920"
+   height="444"
+   viewBox="0 0 1920 444"
+   sodipodi:docname="curved-bg.svg"
+   inkscape:export-filename="curved-bg.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2849" />
+  <sodipodi:namedview
+     id="namedview2847"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.39084403"
+     inkscape:cx="825.13733"
+     inkscape:cy="349.24417"
+     inkscape:window-width="1366"
+     inkscape:window-height="707"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g2851" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g2851">
+    <path
+       id="path8039"
+       style="fill:#970f4d;fill-opacity:0.968627;stroke-width:7.55906;stroke-linecap:round;stroke-linejoin:round"
+       d="m -465.82157,606.40493 c -274.08141,0 -445.44053,130.07827 -514.11719,195.27149 A 2515.9783,525.85889 0 0 0 -75.72001,836.98111 2515.9783,525.85889 0 0 0 679.8288,811.70767 C 381.097,739.03453 -199.77269,606.40493 -465.82157,606.40493 Z" />
+    <path
+       style="fill:#97104e;stroke-width:7.55906;stroke-linecap:round;stroke-linejoin:round"
+       d="m -236.51599,379.72119 c 0,0 222.662722,90.9447 465.60888,-36.94018 242.94617,-127.88488 464.01822,-127.01756 735.54629,-41.76097 271.52802,85.25658 257.23712,63.94244 414.43762,14.20943 157.2004,-49.73301 128.6185,-21.31415 393.0011,14.20943 264.3826,35.52358 621.6564,-56.83772 721.693,-106.57073 100.0367,-49.733 -177.0462,-243.865936 -863.0118,-279.389513 -685.96568,-35.523576 -1719.686128,-73.331077 -1926.90492,19.030223 -207.21879,92.361308 23.90245,403.00288 59.62983,417.21231 z"
+       id="path3828"
+       sodipodi:nodetypes="csssssssc" />
+  </g>
+</svg>