Home Explore Help
Sign In
TC
/
arozos
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Updated many smaller pages from tocasv2 to segmentic

Toby Chui 3 years ago
parent
a689653a57
commit
0aaf1582e5
10 changed files with 170 additions and 97 deletions
Unified View Show Diff Stats
  1. 1 1
      module.util.go
  2. 25 21
      web/Manga Cafe/viewComic.html
  3. 6 6
      web/SystemAO/file_system/defaultOpener.html
  4. 7 2
      web/SystemAO/file_system/file_selector.html
  5. 4 4
      web/SystemAO/file_system/zip_extractor.html
  6. 20 3
      web/SystemAO/users/editgroup.html
  7. 20 3
      web/SystemAO/users/newgroup.html
  8. 35 25
      web/SystemAO/utilities/audio.html
  9. 24 22
      web/Timer/timer.html
  10. 28 10
      web/user.system

+ 1 - 1
module.util.go
View File 

@@ -48,7 +48,7 @@ func util_init() {
 
 		SupportFW:    false,
 
 		SupportFW:    false,
 
 		SupportEmb:   true,
 
 		SupportEmb:   true,
 
 		LaunchEmb:    "SystemAO/utilities/audio.html",
 
 		LaunchEmb:    "SystemAO/utilities/audio.html",
 
-		InitEmbSize:  []int{600, 175},
 
+		InitEmbSize:  []int{533, 144},
 
 		SupportedExt: []string{".mp3", ".wav", ".ogg", ".flac"},
 
 		SupportedExt: []string{".mp3", ".wav", ".ogg", ".flac"},
 
 	})
 
 	})

+ 25 - 21
web/Manga Cafe/viewComic.html
View File 

@@ -5,8 +5,8 @@
 
 <head>
 
 <head>
 
 	<meta charset="UTF-8">
 
 	<meta charset="UTF-8">
 
 	<script src="../script/jquery.min.js"></script>
 
 	<script src="../script/jquery.min.js"></script>
 
-	<link rel="stylesheet" href="../script/tocas/tocas.css">
 
-	<script type='text/javascript' src="../script/tocas/tocas.js"></script>
 
+	<link rel="stylesheet" href="../script/semantic/semantic.min.css">
 
+	<script type='text/javascript' src="../script/semantic/semantic.min.js"></script>
 
 	<script type='text/javascript' src="../script/ao_module.js"></script>
 
 	<script type='text/javascript' src="../script/ao_module.js"></script>
 
 	<style>
 
 	<style>
 
 	body, html {
 
 	body, html {
 
@@ -14,6 +14,10 @@
 
 		margin: 0;
 
 		margin: 0;
 
 		background-color:#2b2b2b;
 
 		background-color:#2b2b2b;
 
 	}
 
 	}
 
+
 
+	#settingMenu .ui.toggle.checkbox input:checked ~ .box,#settingMenu  .ui.toggle.checkbox input:checked ~ label{
 
+		color: rgb(189, 189, 189) !important;
 
+	}
 
 	</style>
 
 	</style>
 
 	<script>
 
 	<script>
 
 		//Scrolling Controller
 
 		//Scrolling Controller
 
@@ -55,16 +59,16 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <div id="loading" style="position: fixed;top: 0;left: 0;background:rgba(0,0,0,0.5);color:white;width:100%;height:100%;z-index:100">
 
 <div id="loading" style="position: fixed;top: 0;left: 0;background:rgba(0,0,0,0.5);color:white;width:100%;height:100%;z-index:100">
 
-	<div class="ts active dimmer">
 
-        <div class="ts text loader">Loading</div>
 
+	<div class="ui active dimmer">
 
+        <div class="ui text loader">Loading</div>
 
     </div>
 
     </div>
 
 </div>
 
 </div>
 
-<div class="ts attached inverted message" onClick="ToggleChapters();">
 
+<div class="ui attached inverted message" style="margin-top: 0em;" onClick="ToggleChapters();">
 
     <div class="header"><i class="bookmark icon"></i>You are already reached the top of this manga.</div>
 
     <div class="header"><i class="bookmark icon"></i>You are already reached the top of this manga.</div>
 
     <p>Click here to select more chapters.</p>
 
     <p>Click here to select more chapters.</p>
 
 </div>
 
 </div>
 
 
 
-<div id="MangaList" class="ts list">
 
+<div id="MangaList" class="ui list">
 
 	<div class="item" style="width: 100%;display: flex;align-items: flex-start;"><img src="" style="width: 100%;height: auto;"></img></div>
 
 	<div class="item" style="width: 100%;display: flex;align-items: flex-start;"><img src="" style="width: 100%;height: auto;"></img></div>
 
 </div>
 
 </div>
 
 
 
@@ -89,19 +93,19 @@
 
     display:block;
 
     display:block;
 
     z-index:1501;
 
     z-index:1501;
 
 	display:none;" onClick="">
 
 	display:none;" onClick="">
 
-	<div id="settingMenu" class="ts very narrow container" style="top:15%;z-index:1502;">
 
-		<div class="ts container" style="color:white;">
 
-		<div class="ts inverted segment" style="background:rgba(61,61,61,0.8);">
 
+	<div id="settingMenu" class="ui very narrow container" style="top:15%;z-index:1502;">
 
+		<div class="ui container" style="color:white;">
 
+		<div class="ui inverted segment" style="background:rgba(61,61,61,0.8);">
 
 			<p style="font-size:120%;"><i class='setting icon'></i>Settings</p>
 
 			<p style="font-size:120%;"><i class='setting icon'></i>Settings</p>
 
-			<div class="ts toggle checkbox">
 
+			<div class="ui toggle checkbox">
 
 				<input type="checkbox" id="lefthand">
 
 				<input type="checkbox" id="lefthand">
 
 				<label for="lefthand" style="color:white;"><i class="hand paper icon" style="transform: scaleX(-1);-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-ms-transform: scaleX(-1);"></i>Left hand mode <br> Click the left section of the view for downward auto scrolling instead of right section.</label>
 
 				<label for="lefthand" style="color:white;"><i class="hand paper icon" style="transform: scaleX(-1);-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-ms-transform: scaleX(-1);"></i>Left hand mode <br> Click the left section of the view for downward auto scrolling instead of right section.</label>
 
 			</div><br><br>
 
 			</div><br><br>
 
-			<div class="ts toggle checkbox">
 
+			<div class="ui toggle checkbox">
 
 				<input type="checkbox" id="progress">
 
 				<input type="checkbox" id="progress">
 
 				<label for="progress" style="color:white;"><i class="save icon"></i>Save progress <br> Save the current progress and return to that page automatically in the future.</label>
 
 				<label for="progress" style="color:white;"><i class="save icon"></i>Save progress <br> Save the current progress and return to that page automatically in the future.</label>
 
 			</div><br><br>
 
 			</div><br><br>
 
-			<div class="ts toggle checkbox">
 
+			<div class="ui toggle checkbox">
 
 				<input type="checkbox" id="pcm">
 
 				<input type="checkbox" id="pcm">
 
 				<label for="pcm" style="color:white;"><i class="save icon"></i>PC Mode <br> Scale down the manga a bit to make you feel better on a big PC screen.</label>
 
 				<label for="pcm" style="color:white;"><i class="save icon"></i>PC Mode <br> Scale down the manga a bit to make you feel better on a big PC screen.</label>
 
 			</div>
 
 			</div>
 
@@ -112,27 +116,27 @@
 
 
 
 <!-- Page Info DIV-->
 
 <!-- Page Info DIV-->
 
 <div align="right" style="position: fixed;bottom: 0;right: 0;background:rgba(0,0,0,0.5);color:white;z-index:1000;">
 
 <div align="right" style="position: fixed;bottom: 0;right: 0;background:rgba(0,0,0,0.5);color:white;z-index:1000;">
 
-<div id="PageInfo" class="ts fluid text container">
 
+<div id="PageInfo" class="ui fluid text container">
 
 Loading Page Data...
 
 Loading Page Data...
 
 </div>
 
 </div>
 
 </div>
 
 </div>
 
 <!-- Next Chapter Message-->
 
 <!-- Next Chapter Message-->
 
-<div class="ts inverted message" onclick="NextChapter();" style="cursor: pointer;">
 
+<div class="ui inverted message" onclick="NextChapter();" style="cursor: pointer;">
 
     <div class="header"><i class="bookmark icon"></i>You have finished this chapter.</div>
 
     <div class="header"><i class="bookmark icon"></i>You have finished this chapter.</div>
 
     <p id="reminder">Click this box to proceed to next chapter.</p>
 
     <p id="reminder">Click this box to proceed to next chapter.</p>
 
 </div>
 
 </div>
 
 
 
 <!-- Start of Chapter Selector-->
 
 <!-- Start of Chapter Selector-->
 
-<div id="ChapterSelector" class="ts inverted message" style="color:white;display:none;">
 
-<div class="ts grid" id="chapterlist">
 
+<div id="ChapterSelector" class="ui inverted message" style="color:white;display:none;">
 
+<div class="ui stackable grid" id="chapterlist">
 
     
     
 </div>
 
 </div>
 
 </div>
 
 </div>
 
 <!-- END of Chapter Selector-->
 
 <!-- END of Chapter Selector-->
 
 <div align="center" style="width:100%">
 
 <div align="center" style="width:100%">
 
-<div class="ts buttons" >
 
-    <button class="ts basic button" onClick="window.location.href='index.html'" style="color:white;"><i class="chevron left icon"></i>Back</button>
 
-    <button class="ts basic button" onClick="ToggleChapters();" style="color:white;"><i class="book icon"></i>Chapters</button>
 
+<div class="ui buttons" >
 
+    <button class="ui inverted basic button" onClick="window.location.href='index.html'" style="color:white !important;"><i class="chevron left icon"></i>Back</button>
 
+    <button class="ui inverted basic button" onClick="ToggleChapters();" style="color:white !important;"><i class="book icon"></i>Chapters</button>
 
 </div>
 
 </div>
 
 </div>
 
 </div>
 
 
 
@@ -202,7 +206,7 @@ Loading Page Data...
 
 				chapterWide = "sixteen";
 
 				chapterWide = "sixteen";
 
 			}
 
 			}
 
 			if (chapterName == data.title[1]){
 
 			if (chapterName == data.title[1]){
 
-				$("#chapterlist").append(`<div class="${chapterWide} wide column" style="color:white;"><a class="ts fluid basic disabled button" style="color:white;">${chapterName}</a></div>`);
 
+				$("#chapterlist").append(`<div class="${chapterWide} wide column compact" style="color:white; padding: 0.3em !important;"><a class="ui fluid inverted basic disabled button" style="color:white;">${chapterName}</a></div>`);
 
 				nextChapterID = counter;
 
 				nextChapterID = counter;
 
 				nextOneIsPreRender = true;
 
 				nextOneIsPreRender = true;
 
 			}else{
 
 			}else{
 
@@ -210,7 +214,7 @@ Loading Page Data...
 
 					nextOneIsPreRender = false;
 
 					nextOneIsPreRender = false;
 
 					prerender = chapter;
 
 					prerender = chapter;
 
 				}
 
 				}
 
-				$("#chapterlist").append(`<div class="${chapterWide} wide column" style="color:white;"><a class="ts fluid basic button" style="color:white;" onClick="ChapterRedirect('${chapter}');">${chapterName}</a></div>`);
 
+				$("#chapterlist").append(`<div class="${chapterWide} wide column compact" style="color:white; padding: 0.3em !important;"><a class="ui fluid inverted basic button" style="color:white;" onClick="ChapterRedirect('${chapter}');">${chapterName}</a></div>`);
 
 			}
 
 			}
 
 			counter++;
 
 			counter++;
 
 		});
 
 		});

+ 6 - 6
web/SystemAO/file_system/defaultOpener.html
View File 

@@ -3,9 +3,9 @@
 
         <title>Select Default Opening WebApp</title>
 
         <title>Select Default Opening WebApp</title>
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
-        <link rel="stylesheet" href="../../script/tocas/tocas.css">
 
+        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
 
         <link rel="stylesheet" href="../../script/ao.css">
 
         <link rel="stylesheet" href="../../script/ao.css">
 
-        <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
 
+        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
         <script type="text/javascript" src="../../script/ao_module.js"></script>
 
         <script type="text/javascript" src="../../script/ao_module.js"></script>
 
         <script type="text/javascript" src="../../script/applocale.js"></script>
 
         <script type="text/javascript" src="../../script/applocale.js"></script>
 
@@ -59,16 +59,16 @@
 
         </style>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div class="ts container" style="padding-top:12px;">
 
+        <div class="ui container" style="padding-top:12px;">
 
             <p><span locale="message/select">Select a default WebApp to open</span> <span id="fext"></span> <span locale="message/files">files.</span></p>
 
             <p><span locale="message/select">Select a default WebApp to open</span> <span id="fext"></span> <span locale="message/files">files.</span></p>
 
             <div id="moduleList" class="moduleSelector">
 
             <div id="moduleList" class="moduleSelector">
 
                 
                 
             </div>
 
             </div>
 
-            <button id="showallbtn" class="ts fluid tiny button" onclick="showAllModules();" locale="button/showAll">Show All</button>
 
+            <button id="showallbtn" class="ui fluid tiny button" onclick="showAllModules();" locale="button/showAll">Show All</button>
 
         </div>
 
         </div>
 
         <div class="bottomControls" align="right">
 
         <div class="bottomControls" align="right">
 
-            <button class="ts small button" onclick="cancel();" locale="button/cancel">Cancel</button>
 
-            <button id="confirmBtn" class="ts small primary disabled button" onclick="confirmSelection()" locale="button/confirm">Confirm</button>
 
+            <button class="ui small button" onclick="cancel();" locale="button/cancel">Cancel</button>
 
+            <button id="confirmBtn" class="ui small primary disabled button" onclick="confirmSelection()" locale="button/confirm">Confirm</button>
 
         </div>
 
         </div>
 
         <script>
 
         <script>
 
             var targetFiles = "";
 
             var targetFiles = "";

+ 7 - 2
web/SystemAO/file_system/file_selector.html
View File 

@@ -292,11 +292,16 @@
 
             }
 
             }
 
 
 
             function newFolder(){
 
             function newFolder(){
 
+                var newFileOffset = 0;
 
+                if ($("#newfilenameInput").is(":visible")){
 
+                    newFileOffset += 40;
 
+                }
 
+
 
                 $("#newFolderInput").toggle();
 
                 $("#newFolderInput").toggle();
 
                 if($("#newFolderInput").is(":visible")){
 
                 if($("#newFolderInput").is(":visible")){
 
-                    $("#sidebarPadder").css("height", "90px");
 
+                    $("#sidebarPadder").css("height", 90 + newFileOffset + "px");
 
                 }else{
 
                 }else{
 
-                    $("#sidebarPadder").css("height", "46px");
 
+                    $("#sidebarPadder").css("height", 46 + newFileOffset + "px");
 
                 }
 
                 }
 
                 updateFileListTopLocation();
 
                 updateFileListTopLocation();
 
             }
 
             }

+ 4 - 4
web/SystemAO/file_system/zip_extractor.html
View File 

@@ -3,9 +3,9 @@
 
         <title>Zip Extractor</title>
 
         <title>Zip Extractor</title>
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
-        <link rel="stylesheet" href="../../script/tocas/tocas.css">
 
-        <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
 
+        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
+        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
 
         <script type="text/javascript" src="../../script/ao_module.js"></script>
 
         <script type="text/javascript" src="../../script/ao_module.js"></script>
 
         <style>
 
         <style>
 
             body{
 
             body{
 
@@ -15,8 +15,8 @@
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
         <br>
 
         <br>
 
-        <div class="ts active inverted dimmer">
 
-            <div class="ts text loader">Loading Archives</div>
 
+        <div class="ui active inverted dimmer">
 
+            <div class="ui text loader">Loading Archives</div>
 
         </div>
 
         </div>
 
         <script>
 
         <script>
 
             ao_module_setFixedWindowSize();
 
             ao_module_setFixedWindowSize();

+ 20 - 3
web/SystemAO/users/editgroup.html
View File 

@@ -3,7 +3,6 @@
 
         <title>Edit Group</title>
 
         <title>Edit Group</title>
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
-        <link rel="stylesheet" href="../../script/tocas/tocas.css">
 
         <link rel="stylesheet" href="../../script/semantic/semantic.css">
 
         <link rel="stylesheet" href="../../script/semantic/semantic.css">
 
         <link rel="stylesheet" href="../../script/ao.css">
 
         <link rel="stylesheet" href="../../script/ao.css">
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
@@ -20,6 +19,24 @@
 
                 background-repeat: no-repeat !important;
 
                 background-repeat: no-repeat !important;
 
                 background-attachment: fixed !important;
 
                 background-attachment: fixed !important;
 
             }
 
             }
 
+            .ui.padded.slate{
 
+                width: 100%;
 
+                display: flex;
 
+                flex-direction: column;
 
+                padding: 4em;
 
+            }
 
+
 
+            .ui.heading.slate{
 
+                align-items: flex-start;
 
+            }
 
+
 
+            .ui.slate .header:not(.ui):not(.sub):not(.item){
 
+                font-size: 1.6em;
 
+                line-height: 1.42857em;
 
+                font-weight: 500;
 
+                display: block;
 
+            }
 
+
 
             .required{
 
             .required{
 
                 color:red;
 
                 color:red;
 
             }
 
             }
 
@@ -29,7 +46,7 @@
 
         </style>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div class="ts heading fluid padded slate themebackground" >
 
+        <div class="ui heading fluid padded slate themebackground" >
 
             <span class="header">
 
             <span class="header">
 
             <i class="users icon"></i> Edit Users Group</span>
 
             <i class="users icon"></i> Edit Users Group</span>
 
             <span class="description">Fill in the following group information to proceed.</span>
 
             <span class="description">Fill in the following group information to proceed.</span>
 
@@ -87,7 +104,7 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="ui divider"></div>
 
                 <div class="ui divider"></div>
 
-                <table class="ts celled striped table">
 
+                <table class="ui celled striped unstackable table">
 
                     <thead>
 
                     <thead>
 
                         <tr>
 
                         <tr>
 
                             <th >#</th>
 
                             <th >#</th>

+ 20 - 3
web/SystemAO/users/newgroup.html
View File 

@@ -3,7 +3,6 @@
 
         <title>Create Group</title>
 
         <title>Create Group</title>
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
 
-        <link rel="stylesheet" href="../../script/tocas/tocas.css">
 
         <link rel="stylesheet" href="../../script/semantic/semantic.css">
 
         <link rel="stylesheet" href="../../script/semantic/semantic.css">
 
         <link rel="stylesheet" href="../../script/ao.css">
 
         <link rel="stylesheet" href="../../script/ao.css">
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
         <script type="text/javascript" src="../../script/jquery.min.js"></script>
 
@@ -20,6 +19,24 @@
 
                 background-repeat: no-repeat !important;
 
                 background-repeat: no-repeat !important;
 
                 background-attachment: fixed !important;
 
                 background-attachment: fixed !important;
 
             }
 
             }
 
+            .ui.padded.slate{
 
+                width: 100%;
 
+                display: flex;
 
+                flex-direction: column;
 
+                padding: 4em;
 
+            }
 
+
 
+            .ui.heading.slate{
 
+                align-items: flex-start;
 
+            }
 
+
 
+            .ui.slate .header:not(.ui):not(.sub):not(.item){
 
+                font-size: 1.6em;
 
+                line-height: 1.42857em;
 
+                font-weight: 500;
 
+                display: block;
 
+            }
 
+
 
             .required{
 
             .required{
 
                 color:red;
 
                 color:red;
 
             }
 
             }
 
@@ -29,7 +46,7 @@
 
         </style>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div class="ts heading fluid padded slate themebackground" >
 
+        <div class="ui heading fluid padded slate themebackground" >
 
             <span class="header">
 
             <span class="header">
 
             <i class="users icon"></i> Create Users Group</span>
 
             <i class="users icon"></i> Create Users Group</span>
 
             <span class="description">Fill in the following group information to proceed.</span>
 
             <span class="description">Fill in the following group information to proceed.</span>
 
@@ -84,7 +101,7 @@
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="ui divider"></div>
 
                 <div class="ui divider"></div>
 
-                <table class="ts celled striped table">
 
+                <table class="ui celled striped compact unstackable table">
 
                     <thead>
 
                     <thead>
 
                         <tr>
 
                         <tr>
 
                             <th >#</th>
 
                             <th >#</th>

+ 35 - 25
web/SystemAO/utilities/audio.html
View File 

@@ -7,8 +7,8 @@
 
 <script type='text/javascript' charset='utf-8'>
 
 <script type='text/javascript' charset='utf-8'>
 
 </script>
 
 </script>
 
 <title>ArOZ Onlineβ</title>
 
 <title>ArOZ Onlineβ</title>
 
-<link rel="stylesheet" href="../../script/tocas/tocas.css">
 
-<script src="../../script/tocas/tocas.js"></script>
 
+<link rel="stylesheet" href="../../script/semantic/semantic.min.css">
 
+<script src="../../script/semantic/semantic.min.js"></script>
 
 <script src="../../script/jquery.min.js"></script>
 
 <script src="../../script/jquery.min.js"></script>
 
 <script src="../../script/ao_module.js"></script>
 
 <script src="../../script/ao_module.js"></script>
 
 <style>
 
 <style>
 
@@ -22,16 +22,16 @@
 
 	border:1px solid transparent;
 
 	border:1px solid transparent;
 
 }
 
 }
 
 body {
 
 body {
 
-	background: rgba(255,255,255,0.7);
 
+	background: rgba(255,255,255,1);
 
 }
 
 }
 
 
 
 </style>
 
 </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 
 
-    <div class="ts small attached segmented single line selection items" style="top:0;">
 
+    <div >
 
 		<!-- Audio Control System with no HTML5 Audio Attribute-->
 
 		<!-- Audio Control System with no HTML5 Audio Attribute-->
 
-		<div class="ts fluid container transparent" style="cursor: pointer;">
 
+		<div>
 
 			<div id="audio_attr"style="display:none;">
 
 			<div id="audio_attr"style="display:none;">
 
 			<audio id="player" controls autoplay>
 
 			<audio id="player" controls autoplay>
 
 			  <source src="" type="audio/mpeg">
 
 			  <source src="" type="audio/mpeg">
 
@@ -39,27 +39,37 @@ body {
 
 			</audio>
 
 			</audio>
 
 			</div>
 
 			</div>
 
 			<div id="YamiPlayer" class="content transparent" style="top:0;">
 
 			<div id="YamiPlayer" class="content transparent" style="top:0;">
 
-			<div id="songname" class="ts top attached segment transparent">
 
-			NOW PLAYING ||
 
+			<div id="songname" class="ui top attached segment" style="border: 1px solid transparent;">
 
+				<i class="music icon"></i> 
 			</div>
 
 			</div>
 
-			<div id="progressbardiv" class="ts attached progress">
 
-				<div id="audioprogress" class="bar" style="width: 0%"></div>
 
+			<div id="progressbardiv" class="ui attached progress" style="height: 1em; background-color: #eeeeee;">
 
+				<div id="audioprogress" class="bar" style="min-width: 0px; width: 0%; height: 1em;"></div>
 
 			</div>
 
 			</div>
 
-			<div class="ts bottom attached segment seventytransparent">
 
-				<div class="ts icon buttons">
 
-					<button class="ts disabled button" onclick="PreviousSong()"><i class="step backward icon"></i></button>
 
-					<button class="ts button" onclick="playbtn()"><i id='playbtn' class="pause icon"></i></button>
 
-					<button class="ts disabled button" onclick="NextSong()"><i class="step forward icon"></i></button>
 
-					<button class="ts button" onclick="stopbtn()"><i class="stop icon"></i></button>
 
-					<button class="ts button" onclick="volDown()"><i class="volume down icon"></i></button>
 
-					<button class="ts button" onclick="volUp()"><i class="volume up icon"></i></button>
 
-					<button class="ts button" onclick="repeatmode()"><i class="repeat icon"></i></button>
 
+			<div style="background-color: white; margin-top: 5px;">
 
+				<div style="display: flex; flex-wrap: nowrap;">
 
+					<div class="ui icon buttons" style="margin-left: 12px;">
 
+						<!-- <button class="ui disabled button" onclick="PreviousSong()"><i class="step backward icon"></i></button> -->
 
+						<button class="ui basic black button" onclick="playbtn()"><i id='playbtn' class="pause icon"></i></button>
 
+						<!-- <button class="ui disabled button" onclick="NextSong()"><i class="step forward icon"></i></button> -->
 
+						<button class="ui basic black button" onclick="stopbtn()"><i class="stop icon"></i></button>
 
+						<button class="ui basic black button" onclick="volDown()"><i class="volume down icon"></i></button>
 
+						<button class="ui basic black button" onclick="volUp()"><i class="volume up icon"></i></button>
 
+						<button class="ui basic black button" onclick="repeatmode()"><i class="repeat icon"></i></button>
 
+					</div>
 
+					<div style="display: flex; flex-wrap: nowrap; margin-left: 1em; padding-top: 8px;">
 
+						<div>
 
+							<i class="volume off icon"></i><span id="voldis">100%</span> 
+						</div>
 
+						<div style="margin-left: 0.5em;">
 
+							<i class="time icon"></i><span id="timecode">0:00/0:00</span>
 
+						</div>
 
+						<div style="margin-left: 0.5em;">
 
+							<i class="repeat icon"></i><span id="repmode">Single</span>
 
+						</div>
 
+					</div>
 
 				</div>
 
 				</div>
 
-				<span>
 
-				<i id="voldis" class="volume off icon"> 100%</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
-				<i id="timecode" class="time icon"> 0:00/0:00</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
-				<i id="repmode" class="repeat icon"> Single</i>
 
-				</span>
 
+				
+
 
 			</div>
 
 			</div>
 
 			
 			
 			<!-- <button class="ts button" onclick="Show_Audio_Attrubute()">Show HTML5 Attrubute</button> -->
 
 			<!-- <button class="ts button" onclick="Show_Audio_Attrubute()">Show HTML5 Attrubute</button> -->
 
@@ -70,7 +80,7 @@ body {
 
 	/*
 
 	/*
 
 		ArOZ Online Beta Audio Module Embedded Player
 
 		ArOZ Online Beta Audio Module Embedded Player
 
 		Migrated to arozos 1.105 by tobychui
 
 		Migrated to arozos 1.105 by tobychui
 
-
 
+		Updated UI design in arozos v1.121 by tobychui
 
 	*/
 
 	*/
 
 //ArOZ Online BETA control system
 
 //ArOZ Online BETA control system
 
 var pwa = false;
 
 var pwa = false;
 
@@ -256,7 +266,7 @@ $( document ).ready(function() {
 
   function PlaySong(name,displayname,id){
 
   function PlaySong(name,displayname,id){
 
 	  if (downloadmode == false){
 
 	  if (downloadmode == false){
 
 		  //This operation is for choosing song
 
 		  //This operation is for choosing song
 
-		  $('#songname').html('NOW PLAYING || '+ decodeURIComponent(displayname));
 
+		  $('#songname').html(`<i class="music icon"></i> `+ decodeURIComponent(displayname));
 
 		  change(name);
 
 		  change(name);
 
 		  playingSong = [name,displayname,id];
 
 		  playingSong = [name,displayname,id];
 
 		  //console.log(playingSong);
 
 		  //console.log(playingSong);

+ 24 - 22
web/Timer/timer.html
View File 

@@ -1,61 +1,63 @@
 
 <html>
 
 <html>
 
     <head>
 
     <head>
 
         <title>Timer</title>
 
         <title>Timer</title>
 
-        <link rel="stylesheet" href="../script/tocas/tocas.css">
 
+        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
 
         <script src="../script/jquery.min.js"></script>
 
         <script src="../script/jquery.min.js"></script>
 
         <script src="../script/ao_module.js"></script>
 
         <script src="../script/ao_module.js"></script>
 
         <style>
 
         <style>
 
             body{
 
             body{
 
                 padding-top:40px;
 
                 padding-top:40px;
 
                 padding-bottom:50px;
 
                 padding-bottom:50px;
 
-                background-color:rgba(242, 242, 242, 0.8);
 
+                background-color:rgba(242, 242, 242, 0.85);
 
+                backdrop-filter: blur(4px) !important;
 
+                overflow: hidden;
 
             }
 
             }
 
         </style>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div class="ts container" style="position:absolute;left:0;right:0;width:100%;" align="center">
 
-            <div class="ts grid">
 
+        <div class="ui container" style="position:absolute;left:0;right:0;width:100%;" align="center">
 
+            <div class="ui grid" style="margin-top: -30px;">
 
                 <div class="five wide column">
 
                 <div class="five wide column">
 
-                    <div class="ts statistic">
 
+                    <div class="ui statistic">
 
                         <div id="hour" class="value">00</div>
 
                         <div id="hour" class="value">00</div>
 
                         <div class="label">Hours</div>
 
                         <div class="label">Hours</div>
 
                     </div><br>
 
                     </div><br>
 
-                    <div class="ts icon tiny buttons">
 
-                        <button class="ts button" onClick="adjustValue('hour',-1);"><i class="minus icon"></i></button>
 
-                        <button class="ts button" onClick="resetTimer('hour');"><i class="undo icon"></i></button>
 
-                        <button class="ts button"onClick="adjustValue('hour',1);"><i class="plus icon"></i></button>
 
+                    <div class="ui icon tiny buttons">
 
+                        <button class="ui button" onClick="adjustValue('hour',-1);"><i class="minus icon"></i></button>
 
+                        <button class="ui button" onClick="resetTimer('hour');"><i class="undo icon"></i></button>
 
+                        <button class="ui button"onClick="adjustValue('hour',1);"><i class="plus icon"></i></button>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="five wide column">
 
                 <div class="five wide column">
 
-                    <div class="ts statistic">
 
+                    <div class="ui statistic">
 
                         <div id="min" class="value">00</div>
 
                         <div id="min" class="value">00</div>
 
                         <div class="label">Minutes</div>
 
                         <div class="label">Minutes</div>
 
                     </div><br>
 
                     </div><br>
 
-                     <div class="ts icon tiny buttons">
 
-                        <button class="ts button" onClick="adjustValue('min',-1);"><i class="minus icon"></i></button>
 
-                        <button class="ts button" onClick="resetTimer('min');"><i class="undo icon"></i></button>
 
-                        <button class="ts button"onClick="adjustValue('min',1);"><i class="plus icon"></i></button>
 
+                     <div class="ui icon tiny buttons">
 
+                        <button class="ui button" onClick="adjustValue('min',-1);"><i class="minus icon"></i></button>
 
+                        <button class="ui button" onClick="resetTimer('min');"><i class="undo icon"></i></button>
 
+                        <button class="ui button"onClick="adjustValue('min',1);"><i class="plus icon"></i></button>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="five wide column">
 
                 <div class="five wide column">
 
-                    <div class="ts statistic">
 
+                    <div class="ui statistic">
 
                         <div id="sec" class="value">00</div>
 
                         <div id="sec" class="value">00</div>
 
                         <div class="label">Seconds</div>
 
                         <div class="label">Seconds</div>
 
                     </div><br>
 
                     </div><br>
 
-                     <div class="ts icon tiny buttons">
 
-                        <button class="ts button" onClick="adjustValue('sec',-1);"><i class="minus icon"></i></button>
 
-                        <button class="ts button" onClick="resetTimer('sec');"><i class="undo icon"></i></button>
 
-                        <button class="ts button"onClick="adjustValue('sec',1);"><i class="plus icon"></i></button>
 
+                     <div class="ui icon tiny buttons">
 
+                        <button class="ui button" onClick="adjustValue('sec',-1);"><i class="minus icon"></i></button>
 
+                        <button class="ui button" onClick="resetTimer('sec');"><i class="undo icon"></i></button>
 
+                        <button class="ui button"onClick="adjustValue('sec',1);"><i class="plus icon"></i></button>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="one wide column">
 
                 <div class="one wide column">
 
-                    <button id="startbtn" class="ts positive tiny icon button" onClick="startCountDown();" style="position:fixed;top:3px;right:3px;">
 
+                    <button id="startbtn" class="ui positive tiny icon button" onClick="startCountDown();" style="position:fixed;top:3px;right:3px;">
 
                         <i class="play icon"></i>
 
                         <i class="play icon"></i>
 
                     </button>
 
                     </button>
 
-                    <button id="pausebtn" class="ts basic tiny icon button disabled" onClick="pauseCountDown();" style="position:fixed;top:40px;right:3px;">
 
+                    <button id="pausebtn" class="ui basic tiny icon button disabled" onClick="pauseCountDown();" style="position:fixed;top:40px;right:3px;">
 
                         <i class="pause icon"></i>
 
                         <i class="pause icon"></i>
 
                     </button>
 
                     </button>
 
-                    <button id="stopalarm" class="ts negative tiny icon button disabled" onClick="stopAlarm();" style="position:fixed;top:80px;right:3px;">
 
+                    <button id="stopalarm" class="ui negative tiny icon button disabled" onClick="stopAlarm();" style="position:fixed;top:80px;right:3px;">
 
                         <i class="alarm mute icon"></i>
 
                         <i class="alarm mute icon"></i>
 
                     </button>
 
                     </button>
 
                 </div>
 
                 </div>

+ 28 - 10
web/user.system
View File 

@@ -4,9 +4,9 @@
 
         <meta charset="UTF-8">
 
         <meta charset="UTF-8">
 
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
         <title>ArozOS - Users</title>
 
         <title>ArozOS - Users</title>
 
-        <link rel="stylesheet" href="script/tocas/tocas.css">
 
+        <link rel="stylesheet" href="script/semantic/semantic.min.css">
 
         <link rel="stylesheet" href="script/ao.css">
 
         <link rel="stylesheet" href="script/ao.css">
 
-        <script type="application/javascript" src="script/tocas/tocas.js"></script>
 
+        <script type="application/javascript" src="script/semantic/semantic.min.js"></script>
 
         <script type="application/javascript" src="script/jquery.min.js"></script>
 
         <script type="application/javascript" src="script/jquery.min.js"></script>
 
         <script type="application/javascript" src="script/ao_module.js"></script>
 
         <script type="application/javascript" src="script/ao_module.js"></script>
 
         <style>
 
         <style>
 
@@ -20,6 +20,24 @@
 
                 background-repeat: no-repeat !important;
 
                 background-repeat: no-repeat !important;
 
                 background-attachment: fixed !important;
 
                 background-attachment: fixed !important;
 
             }
 
             }
 
+
 
+            .ui.padded.slate{
 
+                width: 100%;
 
+                display: flex;
 
+                flex-direction: column;
 
+                padding: 4em;
 
+            }
 
+
 
+            .ui.heading.slate{
 
+                align-items: flex-start;
 
+            }
 
+
 
+            .ts.slate .header:not(.ts):not(.sub):not(.item){
 
+                line-height: 1.42857em;
 
+                font-weight: 500;
 
+                display: block;
 
+            }
 
+
 
             .required{
 
             .required{
 
                 color:red;
 
                 color:red;
 
             }
 
             }
 
@@ -29,13 +47,13 @@
 
         </style>
 
         </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
 
-        <div class="ts heading fluid padded slate themebackground" >
 
-            <span class="header"><i class="add icon"></i> New User</span>
 
+        <div class="ui heading fluid padded slate themebackground" >
 
+            <span class="header" style="font-size: 1.6em;"><i class="add icon"></i> New User</span>
 
             <span class="description">Fill in the following user information to proceed.</span>
 
             <span class="description">Fill in the following user information to proceed.</span>
 
         </div>
 
         </div>
 
         <br><br>
 
         <br><br>
 
-        <div class="ts container">
 
-            <div class="ts horizontal form">
 
+        <div class="ui container">
 
+            <div class="ui horizontal form">
 
                 <div class="field">
 
                 <div class="field">
 
                     <label>Username <span class="required">*</span></label>
 
                     <label>Username <span class="required">*</span></label>
 
                     <input id="username" type="text">
 
                     <input id="username" type="text">
 
@@ -63,13 +81,13 @@
 
             </div>
 
             </div>
 
             <br>
 
             <br>
 
             <p><span class="required">*</span> This field is required.</p>
 
             <p><span class="required">*</span> This field is required.</p>
 
-            <div class="ts negative segment" id="err" style="display:none;">
 
+            <div class="ui negative segment" id="err" style="display:none;">
 
                 <p><i class="remove icon"></i> <span id="errmsg"></span></p>
 
                 <p><i class="remove icon"></i> <span id="errmsg"></span></p>
 
             </div>
 
             </div>
 
-            <div class="ts section divider"></div>
 
+            <div class="ui section divider"></div>
 
             <div id="actionbtns" align="right">
 
             <div id="actionbtns" align="right">
 
-                <button class="ts primary button" onclick="createUser();">Create</button>
 
-                <button id="cancelbtn" class="ts button" onclick="cancel();">Cancel</button>
 
+                <button class="ui primary button" onclick="createUser();">Create</button>
 
+                <button id="cancelbtn" class="ui button" onclick="cancel();">Cancel</button>
 
             </div>
 
             </div>
 
            
            
         </div>
 
         </div>