diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index 1a25a6d..2873efb 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -1,27 +1,24 @@ -import { LinearGradient } from 'expo-linear-gradient'; -import { StatusBar } from 'expo-status-bar'; -import { useState, useTransition } from 'react'; -import FavoritePage from './screens/favoritePage'; -import { cards as cardArray } from './data/data' import Navigation from './navigation/Navigation'; -import { NavigationContainer } from '@react-navigation/native'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { Animated, Dimensions, ImageBackground, StyleSheet, Text, View } from 'react-native'; -import Card from './components/Card'; -import Login from './pages/login'; -import Spot from './pages/spot'; - - +import { StyleSheet,SafeAreaView } from 'react-native'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import StartNavigation from './navigation/StartNavigation'; export default function App() { -const Stack = createBottomTabNavigator(); - return ( - - + + + + // + // {/* */} + // ); } - +const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: "#141414", + } +}); \ No newline at end of file diff --git a/src/FLAD/assets/icons/Check.png b/src/FLAD/assets/icons/Check.png new file mode 100644 index 0000000..e2aadff Binary files /dev/null and b/src/FLAD/assets/icons/Check.png differ diff --git a/src/FLAD/assets/icons/Logo_White_Flad.png b/src/FLAD/assets/icons/Logo_White_Flad.png new file mode 100644 index 0000000..69e55ab Binary files /dev/null and b/src/FLAD/assets/icons/Logo_White_Flad.png differ diff --git a/src/FLAD/assets/icons/icons/Spotify.png b/src/FLAD/assets/icons/icons/Spotify.png new file mode 100644 index 0000000..011863b Binary files /dev/null and b/src/FLAD/assets/icons/icons/Spotify.png differ diff --git a/src/FLAD/assets/icons/icons/User.png b/src/FLAD/assets/icons/icons/User.png new file mode 100644 index 0000000..48d70b0 Binary files /dev/null and b/src/FLAD/assets/icons/icons/User.png differ diff --git a/src/FLAD/assets/icons/icons/croix.png b/src/FLAD/assets/icons/icons/croix.png new file mode 100644 index 0000000..a178fcf Binary files /dev/null and b/src/FLAD/assets/icons/icons/croix.png differ diff --git a/src/FLAD/assets/icons/icons/lock.png b/src/FLAD/assets/icons/icons/lock.png new file mode 100644 index 0000000..2da16e3 Binary files /dev/null and b/src/FLAD/assets/icons/icons/lock.png differ diff --git a/src/FLAD/assets/icons/icons/next.png b/src/FLAD/assets/icons/icons/next.png new file mode 100644 index 0000000..2583f38 Binary files /dev/null and b/src/FLAD/assets/icons/icons/next.png differ diff --git a/src/FLAD/assets/images/Background.png b/src/FLAD/assets/images/Background.png new file mode 100644 index 0000000..af7021a Binary files /dev/null and b/src/FLAD/assets/images/Background.png differ diff --git a/src/FLAD/assets/images/Background_Start_Page.png b/src/FLAD/assets/images/Background_Start_Page.png new file mode 100644 index 0000000..5d3dd22 Binary files /dev/null and b/src/FLAD/assets/images/Background_Start_Page.png differ diff --git a/src/FLAD/assets/images/Board_Image.png b/src/FLAD/assets/images/Board_Image.png new file mode 100644 index 0000000..de93bdd Binary files /dev/null and b/src/FLAD/assets/images/Board_Image.png differ diff --git a/src/FLAD/assets/images/Board_Image2.png b/src/FLAD/assets/images/Board_Image2.png new file mode 100644 index 0000000..cc56b34 Binary files /dev/null and b/src/FLAD/assets/images/Board_Image2.png differ diff --git a/src/FLAD/assets/images/Board_Image3.png b/src/FLAD/assets/images/Board_Image3.png new file mode 100644 index 0000000..f7db356 Binary files /dev/null and b/src/FLAD/assets/images/Board_Image3.png differ diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 833cd28..3563a05 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -8,53 +8,54 @@ type CustomCardMusic = { //Props } export default function CardMusic(CBP: CustomCardMusic) { - const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image; - return ( - - - - - - {CBP.title} - {CBP.description} - - - ); - } - - const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - margin: 20 - }, - imageContainer: { - width: 80, - height: 80, - alignItems: 'center', - justifyContent: 'center', - marginRight: 20 - }, - image: { - width: '100%', - height: '100%', - borderRadius: 10 + const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image; + return ( + + + + + + {CBP.title} + {CBP.description} + + + ); +} - }, - textContainer: { - flex: 1, - alignItems: 'flex-start', - justifyContent: 'center', - }, - title: { - fontWeight: 'bold', - color: 'white', - fontSize: 20, - marginBottom: 10 - }, - description: { - color: 'white', - fontSize: 16 - } - }); \ No newline at end of file +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: 15 + }, + imageContainer: { + width: 80, + height: 80, + alignItems: 'center', + justifyContent: 'center', + marginRight: 20, + marginLeft: 20 + }, + image: { + width: '100%', + height: '100%', + borderRadius: 10 + + }, + textContainer: { + flex: 1, + alignItems: 'flex-start', + justifyContent: 'center', + }, + title: { + fontWeight: 'bold', + color: 'white', + fontSize: 20, + marginBottom: 10 + }, + description: { + color: 'white', + fontSize: 16 + } +}); \ No newline at end of file diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx new file mode 100644 index 0000000..49507d7 --- /dev/null +++ b/src/FLAD/components/NextButton.tsx @@ -0,0 +1,89 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native'; +import Svg, { G, Circle } from 'react-native-svg'; +import { AntDesign } from '@expo/vector-icons'; + +// @ts-ignore +export default function NextButton({ percentage, scrollTo }) { + const size = 128; + const strokeWidth = 2; + const center = size / 2; + const radius = size / 2 - strokeWidth / 2; + const circumFerence = 2 * Math.PI * radius; + + const progressAnimation = useRef(new Animated.Value(0)).current; + const progressRef = useRef(null); + // @ts-ignore + const animation = (toValue) => { + return Animated.timing(progressAnimation, { + toValue, + duration: 250, + useNativeDriver: true + }).start() + } + + useEffect(() => { + animation(percentage); + }, [percentage]); + + useEffect(() => { + progressAnimation.addListener( + (value) => { + const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100; + + if (progressRef?.current) { + // @ts-ignore + progressRef.current.setNativeProps({ + strokeDashoffset, + }); + } + + }, + // @ts-ignore + [percentage] + + ); + + return () => { + progressAnimation.removeAllListeners(); + }; + + }, []); + + return ( + + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + }, + button: { + position: 'absolute', + backgroundColor: '#b50909', + borderRadius: 100, + padding: 20 + } +}) diff --git a/src/FLAD/components/Normalize.tsx b/src/FLAD/components/Normalize.tsx new file mode 100644 index 0000000..7ba5a9f --- /dev/null +++ b/src/FLAD/components/Normalize.tsx @@ -0,0 +1,18 @@ +import { Dimensions, Platform, PixelRatio } from 'react-native'; + +const { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, +} = Dimensions.get('window'); + +const scale = SCREEN_WIDTH / 480; + +// @ts-ignore +export default function normalize(size) { + const newSize = size * scale + if (Platform.OS === 'ios') { + return Math.round(PixelRatio.roundToNearestPixel(newSize)) + } else { + return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 3 + } +} \ No newline at end of file diff --git a/src/FLAD/components/Onboarding.tsx b/src/FLAD/components/Onboarding.tsx new file mode 100644 index 0000000..7dd4388 --- /dev/null +++ b/src/FLAD/components/Onboarding.tsx @@ -0,0 +1,193 @@ +import React, { useState, useRef } from 'react'; +import { View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBackground, Image } from 'react-native'; +import Modal from "react-native-modal"; +import {useNavigation} from "@react-navigation/native"; + +import normalize from '../components/Normalize'; +import OnboardingItem from './OnboardingItem'; +import Paginator from './Paginator'; +import NextButton from './NextButton'; +import slides from '../data/slides'; + +export default function Onboarding() { + const [currentIndex, setCurrentIndex] = useState(0); + const scrollX = useRef(new Animated.Value(0)).current; + const slidesRef = useRef(null); + const navigation = useNavigation(); + + const [isModalVisible, setIsModalVisible] = React.useState(false); + + const handleModal = () => setIsModalVisible(() => !isModalVisible); + // @ts-ignore + const viewableItemsChanged = useRef(({ viewableItems }) => { + setCurrentIndex(viewableItems[0].index); + }).current; + + const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current; + + const scrollTo = () => { + if(currentIndex < slides.length - 1) { + // @ts-ignore + slidesRef.current.scrollToIndex({ index: currentIndex + 1 }); + } else { + setIsModalVisible(() => !isModalVisible); + } + }; + + return ( + // @ts-ignore + + + } + horizontal + showsHorizontalScrollIndicator={false} + pagingEnabled + bounces={false} + keyExtractor={(item) => item.id} + onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { + useNativeDriver: false, + })} + scrollEventThrottle={32} + onViewableItemsChanged={viewableItemsChanged} + viewabilityConfig={viewConfig} + ref={slidesRef} + /> + + + + + + + + + v2.0 + + + + + + + + {handleModal(); + // @ts-ignore + navigation.navigate('Login'); + }}> + CONTINUER AVEC SPOTIFY + + {handleModal(); navigation.navigate('Inscription');}}> + S’INSCRIRE MAINTENANT + + + {handleModal(); navigation.navigate('Login');}}> + SE CONNECTER + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#141414' + }, + imageLogo: { + width: normalize(324), + height: normalize(162), + marginBottom: '25%' + }, + balise: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + marginBottom: 50 + }, + closeButtonCircle: { + backgroundColor: 'gray', + opacity: 0.4, + width: 40, + height: 40, + borderRadius: 20, + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + top: 10, + right: 10 + }, + modalContent: { + position: 'absolute', + top: '7%', + left: '-5%', + right: '-5%', + height: '100%', + }, + modalView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + }, + backgroundImage: { + flex: 1, + width: '100%', + height: '100%', + }, + imageButton: { + width: 20, + height: 20 + }, + versionText: { + position: 'absolute', + top: 50, + right: 10, + color: 'gray', + fontWeight: 'bold', + fontSize: normalize(17) + }, + buttonConnection: { + width: 262, + height: 57, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#24CF5F', + borderRadius: 11, + borderColor: '#68F097', + borderWidth: 1, + marginBottom: 12 + }, + buttonInscription: { + width: 262, + height: 57, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#951DDE', + borderRadius: 11, + borderColor: '#C656ED', + borderWidth: 1, + marginBottom: 220 + }, + text: { + fontWeight: 'bold', + color: 'white', + fontSize: normalize(18) + }, + button2Connection: { + width: '100%', + height: 80, + backgroundColor: '#232123', + borderTopColor: '#3C3C3C', + borderTopWidth: 1, + justifyContent: 'center', + alignItems: 'center', + position: 'absolute', + bottom: 40 + } +}) diff --git a/src/FLAD/components/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx new file mode 100644 index 0000000..4038cb7 --- /dev/null +++ b/src/FLAD/components/OnboardingItem.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native'; +import normalize from '../components/Normalize'; + +import slides from '../data/slides'; + +// @ts-ignore +export default function Onboarding({ item }) { + const { width } = useWindowDimensions(); + + return ( + + + {item.title} + {item.description} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: -60 + }, + image: { + justifyContent: 'center' + }, + title: { + fontWeight: '800', + fontSize: normalize(32), + marginBottom: 10, + color: 'white', + textAlign: 'left', + paddingRight: 30, + paddingLeft: 20, + marginTop: -80 + }, + description: { + fontWeight: '300', + color: 'white', + fontSize: normalize(16), + textAlign: 'left', + paddingRight: 30, + paddingLeft: 20 + } +}) diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx new file mode 100644 index 0000000..d7846ab --- /dev/null +++ b/src/FLAD/components/Paginator.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native'; + + +export default function Paginator({ data, scrollX }) { + const { width } = useWindowDimensions(); + + return ( + + {data.map((_, i) => { + const inputRange = [(i - 1) * width, i * width, (i + 1) * width]; + + const dotWidth = scrollX.interpolate({ + inputRange, + outputRange: [10, 20, 10], + extrapolate: 'clamp', + }) + + const opacity = scrollX.interpolate({ + inputRange, + outputRange: [0.3, 1, 0.3], + extrapolate: 'clamp' + }) + + return + })} + + ); +} + +const styles = StyleSheet.create({ + dot: { + height: 10, + borderRadius: 5, + backgroundColor: "#fff", + marginHorizontal: 8 + } +}) diff --git a/src/FLAD/data/slides.tsx b/src/FLAD/data/slides.tsx new file mode 100644 index 0000000..1659da4 --- /dev/null +++ b/src/FLAD/data/slides.tsx @@ -0,0 +1,20 @@ +export default [ + { + id: '1', + title: 'Bienvenue sur Flad', + description: 'L\'application pour découvrir de nouvelles musiques et vous faire de nouveaux amis', + image: require('../assets/images/Board_Image.png') + }, + { + id: '2', + title: 'Tous les jours de nouvelles musiques qui peuvent vous plaire', + description: 'L\'application apprends de vous et de vos amis pour vous suggérer des albums et des musics', + image: require('../assets/images/Board_Image2.png') + }, + { + id: '3', + title: 'La musique ça se partage', + description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques', + image: require('../assets/images/Board_Image3.png') + } +] \ No newline at end of file diff --git a/src/FLAD/navigation/FavoriteNavigation.tsx b/src/FLAD/navigation/FavoriteNavigation.tsx new file mode 100644 index 0000000..40fc83b --- /dev/null +++ b/src/FLAD/navigation/FavoriteNavigation.tsx @@ -0,0 +1,16 @@ +import React, {Component} from 'react'; +import FavoritePage from '../screens/favoritePage'; +import { createStackNavigator } from '@react-navigation/stack'; + +export default function MusicNavigation() { + const Stack = createStackNavigator(); + return ( + + + + ) + } \ No newline at end of file diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index b53d1bc..9243d9f 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -1,35 +1,60 @@ import React, {Component} from 'react'; -import { NavigationContainer } from '@react-navigation/native'; -import Home from '../screens/spot'; -import FavoritePage from '../screens/favoritePage'; -import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { NavigationContainer } from '@react-navigation/native'; +import FavoriteNavigation from './FavoriteNavigation'; +// @ts-ignore +import FontAwesome from 'react-native-vector-icons/FontAwesome'; + +export default function Navigation() { + const BottomTabNavigator = createBottomTabNavigator(); + const MyTheme = { + dark: false, + colors: { + primary: 'rgb(255, 45, 85)', + card: 'rgb(35, 33, 35)', + border: 'rgb(35, 33, 35)', + text: 'rgb(138, 138, 138)', + } + }; + return ( + // @ts-ignore + + - - - - - + }}> + , + }}/> + , + }}/> + , + }}/> + , + }}/> + - ) - } + ) +} +function TabBarIcon(props: { + name: React.ComponentProps['name']; + color: string; +}) { + return ; +} \ No newline at end of file diff --git a/src/FLAD/navigation/StartNavigation.tsx b/src/FLAD/navigation/StartNavigation.tsx new file mode 100644 index 0000000..ee07e8c --- /dev/null +++ b/src/FLAD/navigation/StartNavigation.tsx @@ -0,0 +1,32 @@ +import React, {Component} from 'react'; +import LoginPage from '../screens/loginPage'; +import InscriptionPage from '../screens/InscriptionPage'; +import Onboarding from '../components/Onboarding'; +import { createStackNavigator } from '@react-navigation/stack'; +import { NavigationContainer } from '@react-navigation/native'; + +export default function StartNavigation() { + const Stack = createStackNavigator(); + return ( + + + + + + + + + ) + } \ No newline at end of file diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 335e0b3..b5cad2f 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -10,13 +10,13 @@ }, "dependencies": { "@react-navigation/bottom-tabs": "^6.5.4", - "@react-navigation/native": "^6.1.3", + "@react-navigation/native": "^6.1.4", "@react-navigation/native-stack": "^6.9.8", "@react-navigation/stack": "^6.3.12", - "expo": "~47.0.12", - "expo-cli": "^6.2.1", "axios": "^1.2.6", + "expo": "~47.0.12", "expo-auth-session": "~3.8.0", + "expo-cli": "^6.3.0", "expo-haptics": "~12.0.1", "expo-linear-gradient": "~12.0.1", "expo-location": "~15.0.1", @@ -27,10 +27,15 @@ "react-dom": "18.1.0", "react-native": "0.70.5", "react-native-gesture-handler": "~2.8.0", + "react-native-modal": "^13.0.1", "react-native-reanimated": "~2.12.0", - "react-native-safe-area-context": "4.4.1", + "react-native-safe-area-context": "^4.4.1", "react-native-screens": "~3.18.0", + "react-native-svg": "13.4.0", + "react-native-vector-icons": "^9.2.0", "react-native-web": "~0.18.9", + "react-redux": "^8.0.5", + "redux": "^4.2.1", "rive-react-native": "^3.0.41" }, "devDependencies": { diff --git a/src/FLAD/screens/InscriptionPage.tsx b/src/FLAD/screens/InscriptionPage.tsx new file mode 100644 index 0000000..d466459 --- /dev/null +++ b/src/FLAD/screens/InscriptionPage.tsx @@ -0,0 +1,164 @@ +import React, {Component, useState } from 'react'; +import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; +import {useNavigation} from "@react-navigation/native"; +import normalize from '../components/Normalize'; + +// @ts-ignore +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + +export default function InscriptionPage() { + const [rememberMe, setRememberMe] = useState(false); + const navigation = useNavigation(); + + const toggleRememberMe = () => { + setRememberMe(!rememberMe); + } + + return ( + + + + + v2.0 + + + S'INSCRIRE + + + + + + + + + + + + + + Lier compte + + + console.log("Oui")}> + + + + Tu as déjà un compte? + navigation.navigate('Login')} + > + Se connecter + + + + + + ) +} + +const styles = StyleSheet.create ({ + container: { + flex: 1 + }, + image: { + flex: 1, + justifyContent: 'center', + }, + imageLogo: { + width: normalize(324), + height: normalize(162), + alignSelf: 'center', + marginBottom: 50, + marginTop: -20 + }, + button: { + marginTop: '10%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + backgroundColor: 'white', + width: normalize(100), + height: normalize(100), + borderRadius: 21 + }, + buttonImage: { + width: normalize(46), + height: normalize(46), + }, + versionText: { + position: 'absolute', + top: 40, + right: 20, + color: 'gray', + fontWeight: 'bold', + fontSize: normalize(17) + }, + text: { + fontWeight: 'bold', + fontSize: normalize(29), + alignSelf: 'center', + color: 'white', + marginBottom: 15 + }, + textIntoButton: { + fontWeight: 'bold', + fontSize: 15, + color: 'white', + marginRight: 10 + }, + shadow: { + shadowColor: '#000', + shadowOffset: { + width: 2, + height: 3, + }, + shadowOpacity: 0.50, + shadowRadius: 3.84, + }, + input: { + width: normalize(350), + height: normalize(50), + borderRadius: 30, + color: 'black', + backgroundColor: 'white', + alignSelf: 'center', + marginBottom: 20, + paddingLeft: 50, + paddingRight: 20 + }, + iconUser : { + position: 'absolute', + width: 20, + height: 20, + left: normalize(80), + bottom: '50%' + }, + iconLock : { + position: 'absolute', + width: 20, + height: 20, + left: normalize(80), + bottom: '50%' + }, + connectionText: { + flexDirection: 'row', + alignSelf: 'center', + bottom: '-20%' + }, + buttonSpotify: { + width: normalize(350), + height: normalize(50), + backgroundColor: '#24CF5F', + justifyContent: 'center', + alignItems: 'center', + alignSelf: 'center', + borderRadius: 30, + flexDirection: 'row' + } +}) \ No newline at end of file diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx index 35b2a88..74cd16e 100644 --- a/src/FLAD/screens/favoritePage.tsx +++ b/src/FLAD/screens/favoritePage.tsx @@ -1,17 +1,18 @@ import React, {Component} from 'react'; -import { Animated, StyleSheet, Text, View, FlatList, ScrollView, TouchableHighlight } from 'react-native'; -import Card from '../components/Card'; +import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native'; import CardMusic from '../components/CardMusic'; -import Music from '../model/Music' +import Music from '../Model/Music' export default function favoritePage() { const MUSIC_LIST : Music[] = [ new Music("La pharmacie", "Jul",require("../assets/images/jul.png")), new Music("Deux frères", "PNL", require("../assets/images/pnl.png")), + new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"), new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"), new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"), new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"), new Music("Blanka", "PNL", require("../assets/images/pnl.png")), + new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"), ] return ( @@ -19,9 +20,9 @@ export default function favoritePage() { Favoris Retrouvez ici vos musiques favorites - + - ( // navigation.navigate("")}> @@ -38,11 +39,13 @@ export default function favoritePage() { const styles = StyleSheet.create({ body: { - backgroundColor: "#141414" + flex: 1, + justifyContent: 'center', + backgroundColor: "#141414", }, titleContainer: { + marginTop: 20, marginLeft: 20, - marginVertical: 50, }, title: { fontSize: 24, @@ -53,8 +56,6 @@ const styles = StyleSheet.create({ marginTop: 10, fontSize: 18, color: '#787878', - }, - scroll: { - marginBottom: 120, + marginBottom: 20 } }); diff --git a/src/FLAD/screens/loginPage.tsx b/src/FLAD/screens/loginPage.tsx new file mode 100644 index 0000000..0d792c1 --- /dev/null +++ b/src/FLAD/screens/loginPage.tsx @@ -0,0 +1,168 @@ +import React, {Component, useState } from 'react'; +import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; +import {useNavigation} from "@react-navigation/native"; +import normalize from '../components/Normalize'; + +// @ts-ignore +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + +export default function loginPage() { + const [rememberMe, setRememberMe] = useState(false); + const navigation = useNavigation(); + + const toggleRememberMe = () => { + setRememberMe(!rememberMe); + } + + return ( + + + + + v2.0 + + + SE CONNECTER + + + + + + + + + + + SE SOUVENIR DE MOI + + console.log("Oui")}> + + + + Tu n'as pas de compte? + navigation.navigate('Inscription')} + > + S'inscrire + + + + + + ) +} + + + +const styles = StyleSheet.create ({ + container: { + flex: 1, + }, + image: { + flex: 1, + justifyContent: 'center', + }, + imageLogo: { + width: normalize(324), + height: normalize(162), + alignSelf: 'center', + marginBottom: '25%' + }, + button: { + marginTop: '10%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + backgroundColor: 'white', + width: normalize(100), + height: normalize(100), + borderRadius: 21 + }, + buttonImage: { + width: normalize(46), + height: normalize(46), + }, + iconUser : { + position: 'absolute', + width: 20, + height: 20, + left: normalize(80), + bottom: '50%' + }, + iconLock : { + position: 'absolute', + width: 20, + height: 20, + left: normalize(80), + bottom: '50%' + }, + input: { + width: normalize(350), + height: normalize(50), + borderRadius: 30, + color: 'black', + backgroundColor: 'white', + alignSelf: 'center', + marginBottom: 20, + paddingLeft: 50, + paddingRight: 20 + }, + text: { + fontWeight: 'bold', + fontSize: normalize(29), + alignSelf: 'center', + color: 'white', + marginBottom: 15 + }, + shadow: { + shadowColor: '#000', + shadowOffset: { + width: 2, + height: 3, + }, + shadowOpacity: 0.50, + shadowRadius: 3.84, + }, + versionText: { + position: 'absolute', + top: 40, + right: 20, + color: 'gray', + fontWeight: 'bold', + fontSize: normalize(17) + }, + rememberMeContainer: { + flexDirection: 'row', + alignItems: 'center', + alignSelf: 'center', + marginBottom: '5%', + marginTop: normalize(10) + }, + checkbox: { + width: 20, + height: 20, + borderRadius: 5, + borderWidth: 1, + borderColor: 'gray', + marginRight: 10 + }, + rememberMeText: { + fontWeight: 'bold', + fontSize: normalize(19), + color: 'white' + }, + checkboxChecked: { + backgroundColor: 'white' + }, + inscriptionText: { + flexDirection: 'row', + alignSelf: 'center', + bottom: '-20%' + } +}) \ No newline at end of file