modified: files to ios26 ui/ux
This commit is contained in:
Yordan Simeonov
289
app/legal.tsx
289
app/legal.tsx
@@ -1,154 +1,227 @@
|
||||
import { Colors } from "@/constants/colors";
|
||||
import Feather from "@expo/vector-icons/Feather";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { router } from "expo-router";
|
||||
import React from "react";
|
||||
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export default function LegalScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: "hsl(220, 15%, 10%)" }}>
|
||||
|
||||
|
||||
<View
|
||||
style={{
|
||||
paddingTop: 18,
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 6,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 20,
|
||||
fontWeight: "700",
|
||||
letterSpacing: 0.3,
|
||||
}}
|
||||
>
|
||||
Info
|
||||
</Text>
|
||||
|
||||
<View style={styles.container}>
|
||||
{/* Header */}
|
||||
<BlurView intensity={40} tint="dark" style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Info</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.back()}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Modal schließen"
|
||||
style={{
|
||||
height: 40,
|
||||
width: 40,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 10,
|
||||
backgroundColor: "rgba(255,255,255,0.08)",
|
||||
}}
|
||||
style={styles.closeButton}
|
||||
>
|
||||
<Feather name="x" size={22} color="#FFFFFF" />
|
||||
<Feather name="x" size={18} color="rgba(255,255,255,0.85)" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BlurView>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 28,
|
||||
}}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Impressum Card */}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "rgba(255,255,255,0.05)",
|
||||
borderRadius: 14,
|
||||
padding: 16,
|
||||
gap: 10,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "white", fontSize: 18, fontWeight: "700" }}>
|
||||
Impressum
|
||||
</Text>
|
||||
|
||||
<View style={{ gap: 4 }}>
|
||||
<Text style={styles.mono}>Berg Autosoft</Text>
|
||||
<Text style={styles.mono}>Joe Felipe Berg</Text>
|
||||
<Text style={styles.mono}>Stöckener Straße 35</Text>
|
||||
<Text style={styles.mono}>30419 Hannover</Text>
|
||||
{/* Impressum */}
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<View style={styles.cardIconCircle}>
|
||||
<Feather name="briefcase" size={16} color="#199edb" />
|
||||
</View>
|
||||
<Text style={styles.cardTitle}>Impressum</Text>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 8 }} />
|
||||
|
||||
<View style={{ gap: 4 }}>
|
||||
<Text style={styles.dim}>+49 1522 5642948</Text>
|
||||
<Text style={styles.dim}>kontakt@berg-autosoft.de</Text>
|
||||
<View style={styles.cardSection}>
|
||||
<Text style={styles.textPrimary}>Berg Autosoft</Text>
|
||||
<Text style={styles.textPrimary}>Joe Felipe Berg</Text>
|
||||
<Text style={styles.textPrimary}>Stöckener Straße 35</Text>
|
||||
<Text style={styles.textPrimary}>30419 Hannover</Text>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 8 }} />
|
||||
<View style={styles.divider} />
|
||||
|
||||
<View style={{ gap: 4 }}>
|
||||
<Text style={styles.dim}>Steuernummer: 25/103/17193</Text>
|
||||
<Text style={styles.dim}>USt-ID: DE361689728</Text>
|
||||
<View style={styles.cardSection}>
|
||||
<View style={styles.infoRow}>
|
||||
<Feather name="phone" size={14} color="rgba(255,255,255,0.4)" />
|
||||
<Text style={styles.textSecondary}>+49 1522 5642948</Text>
|
||||
</View>
|
||||
<View style={styles.infoRow}>
|
||||
<Feather name="mail" size={14} color="rgba(255,255,255,0.4)" />
|
||||
<Text style={styles.textSecondary}>kontakt@berg-autosoft.de</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.divider} />
|
||||
|
||||
<View style={styles.cardSection}>
|
||||
<Text style={styles.textDim}>Steuernummer: 25/103/17193</Text>
|
||||
<Text style={styles.textDim}>USt-ID: DE361689728</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Support Card */}
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "rgba(255,255,255,0.05)",
|
||||
borderRadius: 14,
|
||||
padding: 16,
|
||||
gap: 10,
|
||||
marginTop: 12,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: "white", fontSize: 18, fontWeight: "700" }}>
|
||||
Support
|
||||
</Text>
|
||||
{/* Support */}
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<View style={styles.cardIconCircle}>
|
||||
<Feather name="headphones" size={16} color="#199edb" />
|
||||
</View>
|
||||
<Text style={styles.cardTitle}>Support</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.body}>
|
||||
<Text style={styles.textBody}>
|
||||
Sollten Sie Probleme bei der Nutzung der iOS- oder Android-App FLTR
|
||||
haben, wenden Sie sich bitte direkt an den Support.
|
||||
</Text>
|
||||
|
||||
<View style={{ height: 6 }} />
|
||||
<View style={styles.divider} />
|
||||
|
||||
<Text style={styles.body}>Schreiben Sie eine E-Mail an:</Text>
|
||||
<Text style={[styles.mono, { fontSize: 15 }]}>
|
||||
developer@berg-autosoft.de
|
||||
</Text>
|
||||
<Text style={styles.textDim}>Schreiben Sie eine E-Mail an:</Text>
|
||||
<View style={styles.emailPill}>
|
||||
<Feather name="mail" size={14} color="#199edb" />
|
||||
<Text style={styles.emailText}>developer@berg-autosoft.de</Text>
|
||||
</View>
|
||||
|
||||
<Text style={[styles.dim, { marginTop: 10 }]}>
|
||||
<Text style={[styles.textDim, { marginTop: 12 }]}>
|
||||
Wir bemühen uns, Ihr Anliegen so schnell wie möglich zu bearbeiten.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Footer */}
|
||||
<View style={{ alignItems: "center", marginTop: 18 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: "rgba(255,255,255,0.6)",
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.2,
|
||||
}}
|
||||
>
|
||||
© 2025 Berg Autosoft
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.footer}>© 2025 Berg Autosoft</Text>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = {
|
||||
mono: {
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: Colors.background,
|
||||
},
|
||||
header: {
|
||||
paddingTop: 18,
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 14,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderBottomColor: "rgba(255,255,255,0.08)",
|
||||
overflow: "hidden",
|
||||
},
|
||||
headerTitle: {
|
||||
color: "white",
|
||||
fontSize: 20,
|
||||
fontWeight: "700",
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
closeButton: {
|
||||
height: 32,
|
||||
width: 32,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(255,255,255,0.12)",
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 16,
|
||||
paddingBottom: 40,
|
||||
paddingTop: 12,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "rgba(255,255,255,0.06)",
|
||||
borderRadius: 18,
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(255,255,255,0.08)",
|
||||
padding: 18,
|
||||
gap: 12,
|
||||
marginTop: 10,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
marginBottom: 2,
|
||||
},
|
||||
cardIconCircle: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
backgroundColor: "rgba(25,158,219,0.15)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(25,158,219,0.25)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
cardTitle: {
|
||||
color: "white",
|
||||
fontSize: 18,
|
||||
fontWeight: "700",
|
||||
},
|
||||
cardSection: {
|
||||
gap: 4,
|
||||
},
|
||||
divider: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
backgroundColor: "rgba(255,255,255,0.08)",
|
||||
},
|
||||
infoRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
paddingVertical: 2,
|
||||
},
|
||||
textPrimary: {
|
||||
color: "rgba(255,255,255,0.92)",
|
||||
fontSize: 16,
|
||||
} as const,
|
||||
dim: {
|
||||
fontSize: 15,
|
||||
},
|
||||
textSecondary: {
|
||||
color: "rgba(255,255,255,0.75)",
|
||||
fontSize: 14,
|
||||
} as const,
|
||||
body: {
|
||||
color: "rgba(255,255,255,0.88)",
|
||||
},
|
||||
textDim: {
|
||||
color: "rgba(255,255,255,0.5)",
|
||||
fontSize: 13,
|
||||
},
|
||||
textBody: {
|
||||
color: "rgba(255,255,255,0.8)",
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
} as const,
|
||||
};
|
||||
},
|
||||
emailPill: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "rgba(25,158,219,0.12)",
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: "rgba(25,158,219,0.25)",
|
||||
alignSelf: "flex-start",
|
||||
marginTop: 4,
|
||||
},
|
||||
emailText: {
|
||||
color: "#199edb",
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
footer: {
|
||||
color: "rgba(255,255,255,0.35)",
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.2,
|
||||
textAlign: "center",
|
||||
marginTop: 24,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user