balint14/student-legacy
balint14/student-legacy
1
Fork 0
forked from firka/student-legacy
Code Pull Requests Activity

new refilcplus page tier cards

Browse Source
This commit is contained in:
Kima 2024-03-13 22:59:26 +01:00
parent dc250e449f
commit 9d2bd1b37a
5 changed files with 222 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
refilc/assets/images/plus_tier_cap.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
refilc/assets/images/plus_tier_ink.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

354
refilc_mobile_ui/lib/premium/components/plan_card.dart
View File

@ -12,6 +12,7 @@ class PlusPlanCard extends StatelessWidget {
required this.title, required this.title,
required this.description, required this.description,
required this.color, required this.color,
required this.gradient,
this.price = 0, this.price = 0,
required this.id, required this.id,
this.active = false, this.active = false,
@ -23,6 +24,7 @@ class PlusPlanCard extends StatelessWidget {
final String title; final String title;
final String description; final String description;
final Color color; final Color color;
final LinearGradient gradient;
final double price; final double price;
final String id; final String id;
final bool active; final bool active;
@ -49,190 +51,200 @@ class PlusPlanCard extends StatelessWidget {
return PremiumActivationView(product: id); return PremiumActivationView(product: id);
})); }));
}, },
child: Card( child: Container(
margin: EdgeInsets.zero, decoration: BoxDecoration(
shape: RoundedRectangleBorder( gradient: gradient,
borderRadius: borderRadius!, borderRadius: borderRadius!.add(BorderRadius.circular(1.5)),
), ),
shadowColor: Colors.transparent, padding: const EdgeInsets.all(1.5),
surfaceTintColor: Colors.white, child: Card(
color: Colors.white, margin: EdgeInsets.zero,
child: Padding( shape: RoundedRectangleBorder(
padding: const EdgeInsets.only( borderRadius: borderRadius!,
top: 18.0, bottom: 16.0, left: 22.0, right: 18.0), ),
child: Column( shadowColor: Colors.transparent,
children: [ surfaceTintColor: Colors.white,
Row( color: Colors.white.withOpacity(0.9),
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: Padding(
children: [ padding: const EdgeInsets.only(
Row( top: 18.0, bottom: 16.0, left: 22.0, right: 18.0),
children: [ child: Column(
Image.asset( children: [
iconPath, Row(
width: 25.0, mainAxisAlignment: MainAxisAlignment.spaceBetween,
height: 25.0, children: [
), Row(
const SizedBox( children: [
width: 16.0, Image.asset(
), iconPath,
Text( width: iconPath.endsWith('ink.png') ? 29.0 : 25.0,
title, height: 25.0,
style: TextStyle(
fontSize: 22.0,
color: color,
fontWeight: FontWeight.w600,
height: 1.2,
), ),
), const SizedBox(
], width: 12.0,
), ),
Container( Text(
decoration: BoxDecoration( title,
borderRadius: BorderRadius.circular(20.0), style: const TextStyle(
gradient: active fontSize: 22.0,
? const LinearGradient( color: Color(0xFF0B0B0B),
begin: Alignment.topLeft, fontWeight: FontWeight.w600,
end: Alignment.bottomRight, height: 1.2,
colors: [ ),
Color.fromARGB(255, 196, 213, 253), ),
Color.fromARGB(255, 227, 235, 250), ],
Color.fromARGB(255, 214, 226, 250),
],
)
: const LinearGradient(
colors: [
Color(0xFFEFF4FE),
Color(0xFFEFF4FE),
],
),
), ),
padding: const EdgeInsets.all(4.0), Container(
child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0), borderRadius: BorderRadius.circular(20.0),
color: const Color(0xFFEFF4FE), gradient: active
? const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color.fromARGB(255, 196, 213, 253),
Color.fromARGB(255, 227, 235, 250),
Color.fromARGB(255, 214, 226, 250),
],
)
: const LinearGradient(
colors: [
Color(0xFFEFF4FE),
Color(0xFFEFF4FE),
],
),
), ),
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.all(2.0),
horizontal: 8.0, vertical: 0.0), child: Container(
child: Text( decoration: BoxDecoration(
active borderRadius: BorderRadius.circular(20.0),
? 'active'.i18n color: const Color(0xFFEFF4FE),
: '${price.toStringAsFixed(2).replaceAll('.', ',')} €', ),
style: const TextStyle( padding: const EdgeInsets.symmetric(
fontSize: 16.6, horizontal: 10.0, vertical: 2.0),
color: Color(0xFF243F76), child: Text(
fontWeight: FontWeight.w600, active
? 'active'.i18n
: '${price.toStringAsFixed(2).replaceAll('.', ',')} €',
style: const TextStyle(
fontSize: 16.6,
color: Color(0xFF243F76),
fontWeight: FontWeight.w600,
),
), ),
), ),
), ),
), ],
],
),
const SizedBox(
height: 12.0,
),
Text(
description,
style: TextStyle(
color: const Color(0xFF011234).withOpacity(0.6),
fontSize: 13.69,
fontWeight: FontWeight.w500,
), ),
), const SizedBox(
const SizedBox( height: 12.0,
height: 14.20, ),
), Text(
Column( description,
crossAxisAlignment: CrossAxisAlignment.start, style: TextStyle(
children: features color: const Color(0xFF011234).withOpacity(0.6),
.map((e) => Column( fontSize: 13.69,
children: [ fontWeight: FontWeight.w500,
const SizedBox( ),
height: 10.0, ),
), const SizedBox(
Row( height: 14.20,
children: [ ),
SizedBox( Column(
width: 22.22, crossAxisAlignment: CrossAxisAlignment.start,
child: Text( children: features
e[0], .map((e) => Column(
style: const TextStyle(fontSize: 18.0), children: [
const SizedBox(
height: 10.0,
),
Row(
children: [
SizedBox(
width: 22.22,
child: Text(
e[0],
style: const TextStyle(fontSize: 18.0),
),
), ),
), const SizedBox(
const SizedBox( width: 14.0,
width: 14.0, ),
), Expanded(
Expanded( child: e[1].endsWith('tier_benefits')
child: e[1].endsWith('tier_benefits') ? Text.rich(
? Text.rich( style: const TextStyle(
style: const TextStyle( height: 1.2,
height: 1.2, fontWeight: FontWeight.w500,
fontWeight: FontWeight.w500, color: Color(0xFF011234),
color: Color(0xFF011234), fontSize: 13.69,
fontSize: 13.69, ),
), TextSpan(
TextSpan( children: [
children: [ TextSpan(
TextSpan( text: 'every'.i18n,
text: 'every'.i18n, ),
), e[1].startsWith('cap')
e[1].startsWith('cap') ? const TextSpan(
? const TextSpan( text: 'reFilc+',
text: 'reFilc+', style: TextStyle(
style: TextStyle( color:
color: Color(0xFF7C3EFF),
Color(0xFF47BB00), fontWeight:
fontWeight: FontWeight.w600,
FontWeight.w600, ),
)
: TextSpan(
children: [
const TextSpan(
text: 'reFilc+',
style: TextStyle(
color: Color(
0xFF7C3EFF),
fontWeight:
FontWeight
.w600,
),
),
TextSpan(
text: 'and'.i18n,
),
const TextSpan(
text:
'reFilc+ Gold',
style: TextStyle(
color: Color(
0xFF0061BB),
fontWeight:
FontWeight
.w600,
),
),
],
), ),
) TextSpan(text: 'benefit'.i18n),
: TextSpan( ],
children: [ ),
const TextSpan( )
text: 'reFilc+', : Text(
style: TextStyle( e[1],
color: Color( maxLines: 2,
0xFF47BB00), style: const TextStyle(
fontWeight: height: 1.2,
FontWeight.w600, color: Color(0xFF011234),
), fontWeight: FontWeight.w500,
), fontSize: 13.69,
TextSpan( ),
text: 'and'.i18n,
),
const TextSpan(
text: 'reFilc+ Gold',
style: TextStyle(
color: Color(
0xFF0061BB),
fontWeight:
FontWeight.w600,
),
),
],
),
TextSpan(text: 'benefit'.i18n),
],
), ),
) ),
: Text( ],
e[1], ),
maxLines: 2, ],
style: const TextStyle( ))
height: 1.2, .toList(),
color: Color(0xFF011234), ),
fontWeight: FontWeight.w500, ],
fontSize: 13.69, ),
),
),
),
],
),
],
))
.toList(),
),
],
), ),
), ),
), ),

43
refilc_mobile_ui/lib/premium/plus_screen.dart
View File

@ -19,6 +19,37 @@ class PlusScreen extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
LinearGradient plusGradient = const LinearGradient(
colors: [
Color(0xFF7087FF),
Color(0xFF9069FF),
Color(0xFFE4D7FF),
Color(0xFFDBC5FF),
Color(0xFFE57DFF),
Color(0xFFDBB7FF),
Color(0xFF6850FF),
Color(0xFF2144FF),
],
stops: [0.0, 0.16, 0.32, 0.49, 0.69, 0.8, 0.92, 1.0],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
LinearGradient goldGradient = const LinearGradient(
colors: [
Color(0xFFFFBD70),
Color(0xFFFFDE69),
Color(0xFFFFECD7),
Color(0xFFFFE4C5),
Color(0xFFFFDB7D),
Color(0xFFFFDEB7),
Color(0xFFFFAE50),
Color(0xFFFF9921),
],
stops: [0.0, 0.16, 0.32, 0.49, 0.69, 0.8, 0.92, 1.0],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
return Scaffold( return Scaffold(
backgroundColor: const Color(0xffF4F9FF), backgroundColor: const Color(0xffF4F9FF),
body: Container( body: Container(
@ -168,12 +199,13 @@ class PlusScreen extends StatelessWidget {
iconPath: 'assets/images/plus_tier_cap.png', iconPath: 'assets/images/plus_tier_cap.png',
title: 'reFilc+', title: 'reFilc+',
description: 'tier_rfp'.i18n, description: 'tier_rfp'.i18n,
color: const Color.fromARGB(255, 97, 0, 187), color: const Color(0xFF7C3EFF),
gradient: plusGradient,
id: 'refilcplus', id: 'refilcplus',
price: 0.99, price: 0.99,
borderRadius: const BorderRadius.vertical( borderRadius: const BorderRadius.vertical(
top: Radius.circular(16.0), top: Radius.circular(16.0),
bottom: Radius.circular(8.0)), bottom: Radius.circular(16.0)),
features: [ features: [
['✨', 'rfp_1'.i18n], ['✨', 'rfp_1'.i18n],
['1️⃣', 'rfp_5'.i18n], ['1️⃣', 'rfp_5'.i18n],
@ -184,7 +216,7 @@ class PlusScreen extends StatelessWidget {
], ],
), ),
const SizedBox( const SizedBox(
height: 8.0, height: 12.0,
), ),
PlusPlanCard( PlusPlanCard(
active: ActiveSponsorCard.estimateLevel( active: ActiveSponsorCard.estimateLevel(
@ -193,11 +225,12 @@ class PlusScreen extends StatelessWidget {
iconPath: 'assets/images/plus_tier_ink.png', iconPath: 'assets/images/plus_tier_ink.png',
title: 'reFilc+ Gold', title: 'reFilc+ Gold',
description: 'tier_rfpgold'.i18n, description: 'tier_rfpgold'.i18n,
color: const Color.fromARGB(255, 187, 137, 0), color: const Color(0xFFFFBD3E),
gradient: goldGradient,
id: 'refilcplusgold', id: 'refilcplusgold',
price: 2.99, price: 2.99,
borderRadius: const BorderRadius.vertical( borderRadius: const BorderRadius.vertical(
top: Radius.circular(8.0), top: Radius.circular(16.0),
bottom: Radius.circular(16.0)), bottom: Radius.circular(16.0)),
features: [ features: [
['🕑', 'rfp_7'.i18n], ['🕑', 'rfp_7'.i18n],

2
refilc_plus

@ -1 +1 @@
Subproject commit a4d569db8d8cffa5342fabacd7d1f3ee4fe43061 Subproject commit a1e434f0204d7131bee009b786dadb2184f4822c