adjust legs length

Cargo.lock

@@ -2752,7 +2752,7 @@ dependencies = [
 
 [[package]]
 name = "my-clock"
-version = "0.1.1"
+version = "0.1.2"
 dependencies = [
  "chrono",
  "embed-resource",

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "my-clock"
-version = "0.1.1"
+version = "0.1.2"
 edition = "2021"
 
 [dependencies]

src/main.rs

@@ -3,7 +3,7 @@ use chrono::{Local, Timelike};
 
 slint::slint! {
     export component AppWindow inherits Window {
-        title: "Modern Clock";
+        title: "时钟";
         icon: @image-url("../assets/icon.png");
         no-frame: true;
         background: transparent;
@@ -15,6 +15,7 @@ slint::slint! {
         in-out property <float> minute: 0.0;
         in-out property <float> second: 0.0;
         in-out property <bool> is_on_top: true;
+        in-out property <bool> is_dark_mode: false;
         in-out property <float> dial_opacity: 0.92;
         in-out property <length> clock_size: 300px;
 
@@ -29,7 +30,7 @@ slint::slint! {
             x: touch_area.mouse-x;
             y: touch_area.mouse-y;
             width: 160px;
-            height: 200px;
+            height: 240px;
 
             Rectangle {
                 background: #1e1e1e;
@@ -52,6 +53,14 @@ slint::slint! {
                         t1 := TouchArea { clicked => { root.toggle_always_on_top(); menu_popup.close(); } }
                     }
 
+                    Rectangle {
+                        height: 30px;
+                        background: t_theme.has-hover ? #333 : transparent;
+                        border-radius: 4px;
+                        Text { text: root.is_dark_mode ? "亮色主题" : "暗色主题"; color: #ddd; font-size: 14px; }
+                        t_theme := TouchArea { clicked => { root.is_dark_mode = !root.is_dark_mode; menu_popup.close(); } }
+                    }
+
                     Rectangle {
                         height: 30px;
                         background: t2.has-hover ? #333 : transparent;
@@ -102,7 +111,9 @@ slint::slint! {
                 // 背景渐变层
                 Rectangle {
                     width: 100%; height: 100%;
-                    background: @radial-gradient(circle, #fff9a0 0%, #ffcc33 100%);
+                    background: root.is_dark_mode ? 
+                        @radial-gradient(circle, #3a5dbd 0%, #1a2a6c 70%, #000055 100%) : 
+                        @radial-gradient(circle, #fff9a0 0%, #ffcc33 100%);
                     opacity: root.dial_opacity;
                     border-radius: self.width / 2;
                 }
@@ -111,14 +122,14 @@ slint::slint! {
                 Rectangle {
                     width: 100%; height: 100%;
                     border-radius: self.width / 2;
-                    border-width: 2.5px;
-                    border-color: rgba(255, 255, 255, 0.4);
+                    border-width: root.clock_size * 0.008;
+                    border-color: root.is_dark_mode ? rgba(100, 150, 255, 0.3) : rgba(255, 255, 255, 0.4);
 
                     Rectangle {
                         width: 97%; height: 97%;
                         border-radius: self.width / 2;
-                        border-width: 1.2px;
-                        border-color: rgba(255, 255, 255, 0.2);
+                        border-width: root.clock_size * 0.004;
+                        border-color: root.is_dark_mode ? rgba(100, 150, 255, 0.15) : rgba(255, 255, 255, 0.2);
                     }
                 }
 
@@ -126,18 +137,24 @@ slint::slint! {
                 Rectangle {
                     width: 100%; height: 100%;
                     border-radius: self.width / 2;
-                    background: @radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
+                    background: root.is_dark_mode ?
+                        @radial-gradient(circle, rgba(100, 150, 255, 0.1) 0%, transparent 80%) :
+                        @radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
                 }
 
-                for i in 12 : Path {
+                for i in 60 : Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: rgba(0, 0, 0, 0.5);
-                    stroke-width: 2px;
-                    property <float> angle: i * 30;
+                    property <bool> is_hour: (Math.mod(i, 5) == 0);
+                    stroke: root.is_dark_mode ? 
+                        (is_hour ? rgba(200, 220, 255, 0.5) : rgba(200, 220, 255, 0.25)) : 
+                        (is_hour ? rgba(0, 0, 0, 0.5) : rgba(0, 0, 0, 0.25));
+                    stroke-width: is_hour ? root.clock_size * 0.007 : root.clock_size * 0.0035;
+                    property <float> angle: i * 6;
+                    property <float> start_r: is_hour ? 42 : 45;
                     MoveTo { 
-                        x: 50 + Math.sin(parent.angle * 1deg) * 42; 
-                        y: 50 - Math.cos(parent.angle * 1deg) * 42; 
+                        x: 50 + Math.sin(parent.angle * 1deg) * parent.start_r; 
+                        y: 50 - Math.cos(parent.angle * 1deg) * parent.start_r; 
                     }
                     LineTo { 
                         x: 50 + Math.sin(parent.angle * 1deg) * 47; 
@@ -151,36 +168,36 @@ slint::slint! {
                     {t: "8", a: 240}, {t: "9", a: 270}, {t: "10", a: 300}, {t: "11", a: 330} 
                 ] : Text {
                     property <float> rad: entry.a * 3.14159 / 180;
-                    property <length> r: parent.width / 2 - 35px;
+                    property <length> r: parent.width * 0.38;
                     x: parent.width / 2 + Math.sin(rad * 1rad) * r - self.width / 2;
                     y: parent.height / 2 - Math.cos(rad * 1rad) * r - self.height / 2;
                     text: entry.t;
-                    color: rgba(0, 0, 0, 0.7);
-                    font-size: 16px;
+                    color: root.is_dark_mode ? rgba(255, 255, 255, 0.8) : rgba(0, 0, 0, 0.7);
+                    font-size: parent.width * 0.06;
                     font-weight: 500;
                 }
 
                 Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: #1a1a1a;
-                    stroke-width: 5px;
+                    stroke: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
+                    stroke-width: root.clock_size * 0.017;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
-                        x: 50 + Math.sin(root.hour * 1deg) * 25; 
-                        y: 50 - Math.cos(root.hour * 1deg) * 25; 
+                        x: 50 + Math.sin(root.hour * 1deg) * 22; 
+                        y: 50 - Math.cos(root.hour * 1deg) * 22; 
                     }
                 }
 
                 Path {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
-                    stroke: #333333;
-                    stroke-width: 3.5px;
+                    stroke: root.is_dark_mode ? #bdbdbd : #333333;
+                    stroke-width: root.clock_size * 0.012;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
-                        x: 50 + Math.sin(root.minute * 1deg) * 38; 
-                        y: 50 - Math.cos(root.minute * 1deg) * 38; 
+                        x: 50 + Math.sin(root.minute * 1deg) * 32; 
+                        y: 50 - Math.cos(root.minute * 1deg) * 32; 
                     }
                 }
 
@@ -188,7 +205,7 @@ slint::slint! {
                     viewbox-width: 100; viewbox-height: 100;
                     width: 100%; height: 100%;
                     stroke: #ff3b30;
-                    stroke-width: 1.5px;
+                    stroke-width: root.clock_size * 0.005;
                     MoveTo { x: 50; y: 50; }
                     LineTo { 
                         x: 50 + Math.sin(root.second * 1deg) * 44; 
@@ -199,11 +216,11 @@ slint::slint! {
                 Rectangle {
                     x: (parent.width - self.width) / 2;
                     y: (parent.height - self.height) / 2;
-                    width: 8px; height: 8px;
-                    background: #1a1a1a;
-                    border-radius: 4px;
-                    border-width: 1.5px;
-                    border-color: #ffcc33;
+                    width: root.clock_size * 0.03; height: self.width;
+                    background: root.is_dark_mode ? #e0e0e0 : #1a1a1a;
+                    border-radius: self.width / 2;
+                    border-width: self.width * 0.2;
+                    border-color: root.is_dark_mode ? #1a2a6c : #ffcc33;
                 }
             }
         }