Added Window Support

im so flippin happy rn
AzuSystem · Jun 26, 2024 · 5d9dff3 · 5d9dff3
1 parent ba87ad3
commit 5d9dff3
Show file tree

Hide file tree

Showing 14 changed files with 315 additions and 1,104 deletions.
diff --git a/desktop/apps/AZMLTest/index.html b/desktop/apps/AZMLTest/index.html
@@ -0,0 +1 @@
+<h1>hi</h1>
diff --git a/desktop/apps/clock/index.css b/desktop/apps/clock/index.css
@@ -0,0 +1,35 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../../../assets/fonts/inter/Inter-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'InterThin';
+  src: url('../../../assets/fonts/inter/Inter-Thin.ttf');
+}
+
+p, h1 {
+  font-family: 'Inter';
+  color: white;
+  margin: 0;
+}
+
+p {
+  font-size: 16px;
+  font-family: 'InterThin';
+}
+
+div {
+  position: fixed;
+  width: 40%;
+  height: 10%;
+  padding: 0px;
+  margin: auto;
+  inset: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  scale: 2;
+}
diff --git a/desktop/apps/clock/index.html b/desktop/apps/clock/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>AzuOS</title>
+		<link rel="stylesheet" href="index.css">
+		<script src=../../scripts/datetime.js></script>
+	</head>
+	<body>
+		<div>
+			<h1 id=time>00:00</h1>
+			<p id=date>January 1, 2000</p>
+		</div>
+	</body>
+</html>
diff --git a/desktop/apps/notepad/index.azml b/desktop/apps/notepad/index.azml
@@ -0,0 +1,17 @@
+title=Notepad
+
+navbar {
+	dropdown: File, New:new, Open:open, Save:save, Save As:saveas, Exit:exit;
+	dropdown: Edit, Time & Date:timedate, Font:font;
+	dropdown: View, Zoom In:zoomin, Zoom Out:zoomout, Toggle Word Wrap:wordwrap;
+	dropdown: About:about;
+}
+
+// sec means section
+sec {
+	input: hint:Enter Something;
+}
+
+new {
+	print: new;
+}
diff --git a/desktop/apps/settings/index.html b/desktop/apps/settings/index.html
@@ -50,5 +50,27 @@
 		<div class=settings>
 			<div id=system class=content>
 				<h1>System</h1>
+				<div class=systemsection>
+					<img width=45 src="../../../assets/logo.svg">
+					<div class=h-layout>
+						<div>AzuOS</div>
+						<div class=label><i>Azurite</i></div>
+					</div>
+				</div>
+				<h2>Your Device</h2>
+				<div class=section>
+					<p>CPU: </p>
+					<p>GPU: </p>
+					<p>Memory: </p>
+					<p>Host: </p>
+					<p>Resolution: </p>
+				</div>
+				<h2>AzuOS Information</h2>
+				<div class=section>
+					<p>System Storage: </p>
+					<p>OS Version: </p>
+					<p>AZML Version: </p>
+				</div>
+			</div>
 	</body>
 </html>
diff --git a/desktop/apps/settings/styles.css b/desktop/apps/settings/styles.css
@@ -1,7 +1,29 @@
 body {
 /*  background-image: url('assets/wallpapers/blackGrid.jpg'); 
   background-repeat: no-repeat; */
-  background-color: #110b17;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Customize scrollbar for WebKit browsers */
+body::-webkit-scrollbar {
+  width: 5px; /* Specify the width of the scrollbar */
+}
+
+/* Customize scrollbar thumb for WebKit browsers */
+body::-webkit-scrollbar-thumb {
+  background-color: #36204d; /* Specify the color of the scrollbar thumb */
+  border-radius: 4px; /* Specify the border radius of the scrollbar thumb */
+}
+
+/* Hide the scrollbar track and button */
+body::-webkit-scrollbar-track {
+  background-color: transparent; /* Set background color of track to transparent */
+  border: none; /* Remove border */
+}
+
+body::-webkit-scrollbar-button {
+  display: none; /* Hide the scrollbar button */
 }
 
 @font-face {
@@ -14,13 +36,13 @@ body {
   src: url('../../assets/fonts/inter/Inter-Thin.ttf');
 }
 
-p, h1, h2, h3 {
+p, h1, h2, h3, h4, h5, h6, div {
 	font-family: inter;
 	color: white;
 }
 
 p {
-	margin-top: -10px;
+  margin: 0;
 }
 
 .sidebar {
@@ -31,15 +53,15 @@ p {
 }
 
 .sidebar-button {
-  background-color: #110b17;
+  background-color: #00000000;
   border-radius: 15px;
   border: 0;
   padding: 5px;
   padding-top: 7px;
   padding-left: 20px;
   margin: 2px;
   margin-top: 10px;
-  width: 10%;
+  width: 155px;
   height: 40px;
   display: flex;
   box-shadow: 0px 0px 0px #00000030;
@@ -59,7 +81,7 @@ p {
 
 .sidebar-button:hover {
   scale: 1.02;
-  background-color: #1c1226;
+  background-color: #ffffff10;
   box-shadow: 0px 0px 20px #00000030;
 }
 
@@ -91,4 +113,54 @@ hr {
   position: flex;
   flex-direction: column;
   margin: 0;
+}
+
+.content {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 200px;
+}
+
+.section {
+  border: 2px solid #ffffff10;
+  border-radius: 10px;
+  padding: 12px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: center;
+  box-shadow: 0px 0px 20px #00000070;
+}
+
+.label {
+  font-size: 12px;
+  color: #ffffff70;
+}
+
+.systemsection {
+  border: 2px solid #ffffff10;
+  border-radius: 10px;
+  padding: 12px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  width: 200px;
+  box-shadow: 0px 0px 20px #00000070;
+}
+
+.h-layout {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.v-layout {
+  display: inline-flex;
+  flex-direction: row;
+}
+
+iframe {
+  background-color: transparent;
 }
diff --git a/desktop/apps/windowTest/index.html b/desktop/apps/windowTest/index.html
@@ -8,7 +8,7 @@
 		<div>
 			<h1>Window Test</h1>
 			<p>I just wanna test if the window works, i really hope that they do...</p>
-			<p>btw i took the windowsystem.js from pluto-app.zeon.dev</p>
+			<p>Window System is powered by winbox.js</p>
 		</div>
 	</body>
 </html>
diff --git a/desktop/apps/windowTest/styles.css b/desktop/apps/windowTest/styles.css
@@ -1,9 +1,3 @@
-body {
-/*  background-image: url('assets/wallpapers/blackGrid.jpg'); 
-  background-repeat: no-repeat; */
-  background-color: #110b17;
-}
-
 @font-face {
   font-family: 'Inter';
   src: url('../../assets/fonts/inter/Inter-Regular.ttf');

diff --git a/desktop/index.css b/desktop/index.css
@@ -82,6 +82,7 @@ h1 {
   margin-right: auto;
   box-shadow: 0 0 28px 2px rgba(0, 0, 0, .41);
   display: flex;
+  z-index: 420; /* very funny numbr */
 }
 
 .window {

diff --git a/desktop/index.html b/desktop/index.html
@@ -6,26 +6,43 @@
 	</head>
 	<body>
 		<div id=desktop class=desktop>
+			<link rel="stylesheet" href="scripts/winbox.min.css">
+			<link rel="stylesheet" href="window.css">
+			<script src=scripts/winbox.min.js></script>
+			<script src=scripts/window.js></script>
 			<div class=desktopIcons>
-				<script src=scripts/window.js></script>
 				<div class=deskIcon>
 					<img width=40px src=assets/icons/folderopen.svg>
 					<p>File Explorer</p>
 				</div>
-				<div class=deskIcon>
-					<img width=40px src=assets/icons/settings.svg>
-					<p>Settings</p>
-				</div>
+				<a onclick='newWindow("Settings", false, "apps/settings/index.html")'>
+					<div class=deskIcon>
+						<img width=40px src=assets/icons/settings.svg>
+						<p>Settings</p>
+					</div>
+				</a>
 				<div class=deskIcon>
 					<img width=40px src=assets/icons/terminal.svg>
 					<p>Terminal</p>
 				</div>
-				<a onclick="newWindow('windowTest')">
+				<a onclick='newWindow("Window Test", false, "apps/windowTest/index.html")'>
 					<div class=deskIcon>
 						<img width=40px src=assets/icons/questionmark.svg>
 						<p>Window Test</p>
 					</div>
 				</a>
+				<a onclick='newWindowAZML("AZML Test", false, "apps/AZMLTest/index.html")'>
+					<div class=deskIcon>
+						<img width=40px src=assets/icons/questionmark.svg>
+						<p>AZML Test</p>
+					</div>
+				</a>
+				<a onclick='newWindow("Clock", false, "apps/clock/index.html")'>
+					<div class=deskIcon>
+						<img width=40px src=assets/icons/questionmark.svg>
+						<p>Clock</p>
+					</div>
+				</a>
 			</div>
 			<p>Test ISO</p>
 			<div id=daToast class=implementationToast>
@@ -52,7 +69,7 @@
 						</div>
 					</div>
 				</a>
-				<a>
+				<a onclick='newWindow("Settings", false, "apps/settings/index.html")'>
 					<div id=install class="listOption">
 						<img width=30 src=assets/icons/settings.svg>
 						<div class=listOptionText>
@@ -76,7 +93,7 @@
 						</div>
 					</div>
 				</a>
-				<a>
+				<a onclick='newWindow("Window Test", false, "apps/windowTest/index.html")'>
 					<div id=install class="listOption">
 						<img width=30 src=assets/icons/questionmark.svg>
 						<div class=listOptionText>

diff --git a/desktop/scripts/winbox.min.css b/desktop/scripts/winbox.min.css