added score box and weather box starter

main.qml

@@ -0,0 +1,110 @@
+// main.qml
+import QtQuick
+import QtQuick.Controls
+
+ApplicationWindow {
+    visible: true
+    width: 800
+    height: 480
+    title: "Clockz"
+    property string currTime: "00:00:00"
+    property string onTouchPressed: "Left area not pressed"
+
+    Rectangle {
+        anchors.fill: parent
+
+        Image {
+            anchors.fill: parent
+            source: "/home/death916/code/python/pyside/images/background.png"
+            fillMode: Image.PreserveAspectCrop
+        }
+
+        // Left touch area
+        MouseArea {
+            anchors.left: parent.left
+            width: 70
+            height: parent.height // Full height
+
+            // Header text inside the MouseArea
+            Text {
+                anchors.top: parent.top
+                width: parent.width
+                height: 30
+                text: "Scores"
+                font.pixelSize: 20
+                color: "white"
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            onClicked: {
+                console.log("Left area pressed!")
+                onTouchPressed = "Left area pressed"
+            }
+        }
+
+        // Colored rectangle to indicate the active area
+        Rectangle {
+            anchors.left: parent.left
+            width: 70
+            height: parent.height
+            color: Qt.rgba(0, 0, 1, 0.3) // Slightly opaque blue
+        }
+
+        // Display the message on the screen
+        Text {
+            anchors.centerIn: parent
+            text: onTouchPressed
+            font.pixelSize: 20
+            color: "white"
+        }
+
+        // Weather box
+        Rectangle {
+            width: parent.width * 1 / 3 // 1/3 of the parent width
+            height: parent.height * 1 / 3 // 1/3 of the parent height
+            color: Qt.rgba(0, 0, 1, 0.5) // Semi-transparent blue
+            anchors.centerIn: parent
+
+            // Text "Weather" at the top
+            Text {
+                anchors.top: parent.top
+                width: parent.width * 1 / 3
+                height: 30
+                text: "Weather"
+                font.pixelSize: 20
+                color: "white"
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            Image {
+                anchors.fill: parent
+                source: "https://weather.com/weather/radar/interactive/l/458d58193d53af8f2c66d80539989f3acde8455d72b09aaac1ba404dbd35227537bec73d6a4d1261b1978b774d987f45"
+            fillMode: Image.PreserveAspectCrop
+            }
+
+            // Additional weather content can be added here
+        }
+
+        // Clock container
+        Rectangle {
+            x: 300
+            y: 1
+            width: time.implicitWidth + 20 // Adjusted width based on the text size
+            height: time.implicitHeight + 20 // Adjusted height based on the text size
+            border.color: "gray"
+            color: "transparent"
+
+            Text {
+                id: time
+                text: currTime
+                font.pixelSize: 20
+                color: "black"
+                horizontalAlignment: Text.AlignHCenter
+            }
+        }
+
+        // ... Additional UI elements as needed ...
+    }
+}