updated to view frame

traccar.kv

@@ -558,7 +558,7 @@
             on_press: app.root.current = "home"
 
 <CreateAnimationScreen>:
-    
+
     BoxLayout:
         orientation: "vertical"
         padding: 20
@@ -575,8 +575,9 @@
             font_size: 22
             color: 1, 1, 1, 1
             size_hint_y: None
-            height: 36
+            height: 20
 
+        # Rename frame (already present)
         BoxLayout:
             orientation: "horizontal"
             size_hint_y: None
@@ -591,10 +592,13 @@
                     size: self.size
 
             Label:
-                text: "Edit or change the name of the project"
+                text: "Edit or change\nthe name of the project"
                 font_size: 16
                 color: 1, 1, 1, 1
                 size_hint_x: 0.7
+                halign: "left"
+                valign: "middle"
+                text_size: self.size
 
             Button:
                 text: "Rename"
@@ -604,6 +608,101 @@
                 color: 1, 1, 1, 1
                 on_press: root.open_rename_popup()
 
+        # New optimize route frame
+        BoxLayout:
+            orientation: "horizontal"
+            size_hint_y: None
+            height: 60
+            padding: [10, 10, 10, 10]
+            spacing: 10
+            canvas.before:
+                Color:
+                    rgba: 0.15, 0.15, 0.18, 1
+                Rectangle:
+                    pos: self.pos
+                    size: self.size
+
+            Label:
+                id: route_entries_label
+                text: "Your route has [number of entries]"
+                font_size: 16
+                color: 1, 1, 1, 1
+                size_hint_x: 0.7
+                halign: "left"
+                valign: "middle"
+                text_size: self.size
+
+            Button:
+                text: "Optimize\ntrip"
+                size_hint_x: 0.3
+                font_size: 16
+                background_color: 0.008, 0.525, 0.290, 1
+                color: 1, 1, 1, 1
+                halign: "center"
+                valign: "middle"
+                text_size: self.size
+                on_press: root.optimize_route_entries()
+
+        # Preview frame
+        BoxLayout:
+            orientation: "horizontal"
+            size_hint_y: None
+            height: 60
+            padding: [10, 10, 10, 10]
+            spacing: 10
+            canvas.before:
+                Color:
+                    rgba: 0.15, 0.15, 0.18, 1
+                Rectangle:
+                    pos: self.pos
+                    size: self.size
+
+            Label:
+                text: "Preview your route"
+                font_size: 16
+                color: 1, 1, 1, 1
+                size_hint_x: 0.7
+                halign: "left"
+                valign: "middle"
+                text_size: self.size
+
+            Button:
+                text: "Preview"
+                size_hint_x: 0.3
+                font_size: 16
+                background_color: 0.341, 0.235, 0.980, 1
+                color: 1, 1, 1, 1
+                on_press: root.preview_route()
+
+        # HTML preview frame
+        BoxLayout:
+            orientation: "vertical"
+            size_hint_y: None
+            height: 220
+            padding: [10, 10, 10, 10]
+            spacing: 10
+            canvas.before:
+                Color:
+                    rgba: 0.13, 0.13, 0.15, 1
+                Rectangle:
+                    pos: self.pos
+                    size: self.size
+
+            # Use Kivy garden's WebView if available, else fallback to Image
+            WebView:
+                id: html_preview
+                url: root.preview_html_path if root.preview_html_path else ""
+                size_hint: 1, 1
+                # If WebView is not available, comment this and use Image below
+
+            # If you don't have WebView, use this as a fallback:
+            # Image:
+            #     id: html_preview_img
+            #     source: "resources/images/track.png"
+            #     allow_stretch: True
+            #     keep_ratio: True
+            #     size_hint: 1, 1
+
         Widget:
             size_hint_y: 1