Add Back-End

main.py

@@ -0,0 +1,34 @@
+from flask import Flask, render_template, jsonify
+import psutil
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/data')
+def data():
+    battery = psutil.sensors_battery()
+    charging = battery.power_plugged
+    time_left = battery.secsleft
+    hours = 0
+    minutes = 0
+    if time_left == psutil.POWER_TIME_UNLIMITED:
+        time_left_str = "Unlimited"
+    elif time_left == psutil.POWER_TIME_UNKNOWN:
+        time_left_str = "Unknown"
+    else:
+        hours, remainder = divmod(time_left, 3600)
+        minutes, seconds = divmod(remainder, 60)
+
+    return jsonify({
+        'battery': f'{battery.percent}%',
+        'charging': 'Yes' if charging else 'No',
+        'time_left': f"{hours} hours, {minutes} minutes" if hours > 0 else f"{minutes} minutes",
+        'wifi': 'Connected',
+        'bluetooth': 'Enabled'
+    })
+
+if __name__ == '__main__':
+    app.run(debug=True)

Css/style.css → static/Css/style.css

@@ -43,7 +43,7 @@ body {
   height: 100vh;
   user-select: none;
   font-family: "Lexend", sans-serif;
-  background: url("../background/iridescence.jpg") center/cover no-repeat;
+  background: url('/static/Images/background/iridescence.jpg') center/cover no-repeat;
   overflow: hidden;
 }
 
@@ -53,7 +53,7 @@ body {
   position: fixed;
   top: 0;
   left: 0;
-  background: url(../background/lock.gif) center/cover no-repeat;
+  background: url('/static/Images/background/iridescence.jpg') center/cover no-repeat;
   z-index: 9999;
 }
 
@@ -82,7 +82,7 @@ body {
   position: relative;
   font-size: 14px;
   margin: 0 4px;
-  cursor: url(../cursor/Link.cur), pointer;
+  cursor: url('/static/Images/cursor/Link.cur'), pointer;
   text-shadow: 0 3px 10px rgba(0, 0, 0, 0.288);
   transition: 0.2s;
   -webkit-tap-highlight-color: transparent;
@@ -325,7 +325,7 @@ li > ul > li > button {
   border-radius: 5px;
   transition: 80ms;
   font-size: 14px;
-  cursor: url(../cursor/Link.cur), pointer;
+  cursor: url('/static/Images/cursor/Link.cur'), pointer;
 }
 
 li > ul > li > button:hover {
@@ -411,7 +411,7 @@ li > .menu__container > .grid__controling .control_center--grid {
   font-size: 20px;
   transition: all 120ms ease-in-out;
   font-family: "Lexend", sans-serif;
-  cursor: url(../cursor/Link.cur), pointer;
+  cursor: url('/static/Images/cursor/Link.cur'), pointer;
 }
 .sound,
 .brightness {
@@ -836,7 +836,7 @@ li > .menu__container > .grid__controling .control_center--grid {
   border-radius: 9px;
   transition: 0.2s;
   padding: 5px;
-  cursor: url(../cursor/Link.cur), pointer;
+  cursor: url('/static/Images/cursor/Link.cur'), pointer;
 }
 
 .window__taskbar--right .containerSearch {
@@ -1027,7 +1027,7 @@ li > .menu__container > .grid__controling .control_center--grid {
   display: flex;
   place-items: center;
   flex-direction: column;
-  cursor: url(../cursor/Link.cur), pointer;
+  cursor: url('/static/Images/cursor/Link.cur'), pointer;
 }
 
 .launchpad .child-launchpad img {
@@ -1321,7 +1321,7 @@ li > .menu__container > .grid__controling .control_center--grid {
   margin: 0 0 4px 0;
   display: flex;
   flex-direction: row;
-  cursor: url(../cursor/Link.cur), pointer;
+  cursor: url(/static/Images/cursor/Link.cur), pointer;
 }
 .context-menu ul button:hover {
   background: var(--color-blue-800);

static/javascript/battery_status.js

@@ -0,0 +1,18 @@
+$(document).ready(function () {
+  function fetchData() {
+    $.ajax({
+      url: "/api/data",
+      method: "GET",
+      success: function (data) {
+        $('.battery__text').text(data.battery);
+        $('.wifi').text(data.wifi);
+        $('.bluetooth').text(data.bluetooth);
+        $('.charging-status').text(data.charging);
+        $('.time-left').text(data.time_left);
+      }
+    });
+  }
+
+  fetchData();
+  setInterval(fetchData, 15000);
+});

static/javascript/find_map.js

@@ -0,0 +1,31 @@
+function updateMap(latitude, longitude) {
+    const iframe = document.getElementById('map');
+    iframe.src = `https://maps.google.com/maps?q=${latitude},${longitude}&t=&z=13&ie=UTF8&iwloc=&output=embed`;
+}
+
+function showError(error) {
+    switch(error.code) {
+        case error.PERMISSION_DENIED:
+            alert("User denied the request for Geolocation.");
+            break;
+        case error.POSITION_UNAVAILABLE:
+            alert("Location information is unavailable.");
+            break;
+        case error.TIMEOUT:
+            alert("The request to get user location timed out.");
+            break;
+        case error.UNKNOWN_ERROR:
+            alert("An unknown error occurred.");
+            break;
+    }
+}
+
+if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition((position) => {
+        const latitude = position.coords.latitude;
+        const longitude = position.coords.longitude;
+        updateMap(latitude, longitude);
+    }, showError);
+} else {
+    alert("Geolocation is not supported by this browser.");
+}