new live card things

refilc_mobile_ui/lib/pages/home/home_page.dart

@@ -195,6 +195,23 @@ class HomePageState extends State<HomePage> with TickerProviderStateMixin {
     // ];
     // String? selectedValue;
 
+    // DateTime now = DateTime.now();
+    DateTime now = DateTime(2024, 4, 22, 5, 55);
+    LiveCardState currentState = LiveCardState.empty;
+
+    if (now.isBefore(DateTime(now.year, DateTime.august, 31)) &&
+        now.isAfter(DateTime(now.year, DateTime.june, 14))) {
+      currentState = LiveCardState.summary;
+    } else if (now.hour >= 12 && now.hour < 20) {
+      currentState = LiveCardState.afternoon;
+    } else if (now.hour >= 20) {
+      currentState = LiveCardState.night;
+    } else if (now.hour >= 5 && now.hour <= 10) {
+      currentState = LiveCardState.morning;
+    } else {
+      currentState = LiveCardState.empty;
+    }
+
     return Scaffold(
       body: Stack(
         children: [
@@ -301,7 +318,11 @@ class HomePageState extends State<HomePage> with TickerProviderStateMixin {
                               ),
                             ],
 
-                            expandedHeight: _liveCardAnimation.value * 238.0,
+                            // expandedHeight: _liveCardAnimation.value * 238.0,
+                            expandedHeight: _liveCardAnimation.value *
+                                (currentState == LiveCardState.morning
+                                    ? 280.0
+                                    : 238.0),
 
                             // Live Card
                             flexibleSpace: FlexibleSpaceBar(
@@ -309,8 +330,10 @@ class HomePageState extends State<HomePage> with TickerProviderStateMixin {
                                 padding: EdgeInsets.only(
                                   left: 24.0,
                                   right: 24.0,
-                                  top:
+                                  top: (currentState == LiveCardState.morning
-                                      62.0 + MediaQuery.of(context).padding.top,
+                                          ? 0.0
+                                          : 62.0) +
+                                      MediaQuery.of(context).padding.top,
                                   bottom: 52.0,
                                 ),
                                 child: Transform.scale(

refilc_mobile_ui/lib/pages/home/live_card/live_card.dart

@@ -3,9 +3,9 @@ import 'package:refilc/api/providers/user_provider.dart';
 import 'package:refilc/helpers/subject.dart';
 import 'package:refilc/icons/filc_icons.dart';
 import 'package:refilc/models/settings.dart';
-import 'package:refilc_mobile_ui/common/round_border_icon.dart';
 import 'package:refilc_mobile_ui/common/splitted_panel/splitted_panel.dart';
 import 'package:refilc_mobile_ui/pages/home/live_card/heads_up_countdown.dart';
+import 'package:refilc_mobile_ui/pages/home/live_card/segmented_countdown.dart';
 import 'package:refilc_mobile_ui/screens/summary/summary_screen.dart';
 import 'package:flutter/material.dart';
 import 'package:refilc/utils/format.dart';
@@ -58,6 +58,8 @@ class LiveCardStateA extends State<LiveCard> {
     // test
     liveCard.currentState = LiveCardState.morning;
 
+    final dt = DateTime(2024, 3, 22, 17, 12, 1, 1, 1);
+
     switch (liveCard.currentState) {
       case LiveCardState.summary:
         child = LiveCardWidget(
@@ -170,8 +172,17 @@ class LiveCardStateA extends State<LiveCard> {
                       Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
-                          Text('Hamarosan kezdődik az első órád!'),
+                          Text(
-                          Text('1 óra 32 perc 26 másodperc'),
+                            'Hamarosan kezdődik az első órád!'.i18n,
+                            style: const TextStyle(
+                              fontWeight: FontWeight.w600,
+                              fontSize: 16.0,
+                            ),
+                          ),
+                          const SizedBox(
+                            height: 5.0,
+                          ),
+                          SegmentedCountdown(date: dt)
                         ],
                       ),
                       Row(

refilc_mobile_ui/lib/pages/home/live_card/live_card.i18n.dart

@@ -17,6 +17,10 @@ extension Localization on String {
           "first_lesson_2": " in room ",
           "first_lesson_3": ", at ",
           "first_lesson_4": ".",
+          // segmented countdown
+          "h": "hour(s)",
+          "m": "minute(s)",
+          "s": "sec(s)",
         },
         "hu_hu": {
           "next": "Következő",
@@ -32,6 +36,10 @@ extension Localization on String {
           "first_lesson_2": " lesz, a ",
           "first_lesson_3": " teremben, ",
           "first_lesson_4": "-kor.",
+          // segmented countdown
+          "h": "óra",
+          "m": "perc",
+          "s": "másodperc",
         },
         "de_de": {
           "next": "Nächste",
@@ -47,6 +55,10 @@ extension Localization on String {
           "first_lesson_2": ", in Raum ",
           "first_lesson_3": ", um ",
           "first_lesson_4": " Uhr.",
+          // segmented countdown
+          "h": "óra",
+          "m": "perc",
+          "s": "másodperc",
         },
       };
 

refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart

@@ -1,4 +1,3 @@
-import 'package:i18n_extension/i18n_extension.dart';
 import 'package:refilc/models/settings.dart';
 import 'package:refilc/theme/colors/colors.dart';
 import 'package:refilc_mobile_ui/common/progress_bar.dart';

refilc_mobile_ui/lib/pages/home/live_card/segmented_countdown.dart

@@ -0,0 +1,152 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:refilc/theme/colors/colors.dart';
+import 'live_card.i18n.dart';
+
+class SegmentedCountdown extends StatefulWidget {
+  const SegmentedCountdown({super.key, required this.date});
+
+  final DateTime date;
+
+  @override
+  SegmentedCountdownState createState() => SegmentedCountdownState();
+}
+
+class SegmentedCountdownState extends State<SegmentedCountdown> {
+  @override
+  Widget build(BuildContext context) {
+    Duration diffDate = widget.date.difference(DateTime.now());
+
+    String diffHours = (diffDate.inHours % 24).toString();
+    String diffMins = (diffDate.inMinutes % 60).toString();
+    String diffSecs = (diffDate.inSeconds % 60).toString();
+
+    return Row(
+      children: [
+        Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.secondary.withOpacity(0.05),
+            borderRadius: BorderRadius.circular(8.0),
+          ),
+          padding: const EdgeInsets.symmetric(vertical: 2.0),
+          width: 20.0,
+          alignment: Alignment.center,
+          child: Text(
+            diffHours,
+            style: const TextStyle(
+              fontSize: 16.0,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+        const SizedBox(
+          width: 7.0,
+        ),
+        Text(
+          'h'.i18n,
+          style: TextStyle(
+            fontSize: 16.0,
+            fontWeight: FontWeight.w500,
+            color: AppColors.of(context).text.withOpacity(0.6),
+          ),
+        ),
+        const SizedBox(
+          width: 7.0,
+        ),
+        Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.secondary.withOpacity(0.05),
+            borderRadius: BorderRadius.circular(8.0),
+          ),
+          padding: const EdgeInsets.symmetric(vertical: 2.0),
+          width: 20.0,
+          alignment: Alignment.center,
+          child: Text(
+            diffMins[0],
+            style: const TextStyle(
+              fontSize: 16.0,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+        if (diffMins.length == 2)
+          Container(
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.secondary.withOpacity(0.05),
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+            padding: const EdgeInsets.symmetric(vertical: 2.0),
+            margin: const EdgeInsets.only(left: 4.0),
+            width: 20.0,
+            alignment: Alignment.center,
+            child: Text(
+              diffMins[1],
+              style: const TextStyle(
+                fontSize: 16.0,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+        const SizedBox(
+          width: 7.0,
+        ),
+        Text(
+          'm'.i18n,
+          style: TextStyle(
+            fontSize: 16.0,
+            fontWeight: FontWeight.w500,
+            color: AppColors.of(context).text.withOpacity(0.6),
+          ),
+        ),
+        const SizedBox(
+          width: 7.0,
+        ),
+        Container(
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.secondary.withOpacity(0.05),
+            borderRadius: BorderRadius.circular(8.0),
+          ),
+          padding: const EdgeInsets.symmetric(vertical: 2.0),
+          width: 20.0,
+          alignment: Alignment.center,
+          child: Text(
+            diffSecs[0],
+            style: const TextStyle(
+              fontSize: 16.0,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+        if (diffSecs.length == 2)
+          Container(
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.secondary.withOpacity(0.05),
+              borderRadius: BorderRadius.circular(8.0),
+            ),
+            padding: const EdgeInsets.symmetric(vertical: 2.0),
+            margin: const EdgeInsets.only(left: 4.0),
+            width: 20.0,
+            alignment: Alignment.center,
+            child: Text(
+              diffSecs[1],
+              style: const TextStyle(
+                fontSize: 16.0,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+        const SizedBox(
+          width: 7.0,
+        ),
+        Text(
+          's'.i18n,
+          style: TextStyle(
+            fontSize: 16.0,
+            fontWeight: FontWeight.w500,
+            color: AppColors.of(context).text.withOpacity(0.6),
+          ),
+        ),
+      ],
+    );
+  }
+}