Create mobile mode

main.go

@@ -6,6 +6,7 @@ import (
 	"personalwebsite/routewde"
 	"personalwebsite/websiteapp"
 	"personalwebsite/websiteapp/finder"
+	imgviewer "personalwebsite/websiteapp/img-viewer"
 	"personalwebsite/websiteapp/personalprops"
 
 	"github.com/gin-gonic/gin"
@@ -39,11 +40,13 @@ func main() {
 
 	persPropsApp := personalprops.NewPersPropsApp()
 	finderApp := finder.FinerApplication{}
+	imgViewerApp := imgviewer.NewImgViewerApp()
 	appsStorage := websiteapp.ApplicationsStorage{
 		Apps: map[string]websiteapp.WebDEApplication{},
 	}
 	appsStorage.Apps["personal-properties"] = &persPropsApp
 	appsStorage.Apps["finder"] = &finderApp
+	appsStorage.Apps["img-viewer"] = &imgViewerApp
 	system := router.Group("system")
 	{
 
@@ -81,19 +84,48 @@ func main() {
 
 	app := router.Group("application")
 	{
-		app.GET("test", func(ctx *gin.Context) {
+		// app.GET("test", func(ctx *gin.Context) {
-			ctx.Status(http.StatusOK)
+		// 	ctx.Status(http.StatusOK)
-		})
+		// })
 		persPropApp := app.Group("personal-properties")
 		{
 			persPropApp.GET("render", func(ctx *gin.Context) {
+				isMobileParam := ctx.Query("isMobile")
+				isMobile := isMobileParam == "true"
+				if isMobile {
+					ctx.HTML(http.StatusOK, "personal-properties/mobile-app.tmpl", persPropsApp.Render())
+				} else {
 					ctx.HTML(http.StatusOK, "personal-properties/app.tmpl", persPropsApp.Render())
+				}
 			})
 		}
 		finderAppRoute := app.Group("finder")
 		{
 			finderAppRoute.GET("render", func(ctx *gin.Context) {
-				ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render())
+				isMobileParam := ctx.Query("isMobile")
+				isMobile := isMobileParam == "true"
+				if isMobile {
+					ctx.HTML(http.StatusOK, "finder/mobile-app.tmpl", finderApp.Render(isMobile))
+				} else {
+					ctx.HTML(http.StatusOK, "finder/app.tmpl", finderApp.Render(isMobile))
+				}
+
+			})
+			finderAppRoute.GET("renderMobileDesktop", func(ctx *gin.Context) {
+				ctx.HTML(http.StatusOK, "finder/mobile-desktop.tmpl", gin.H{})
+			})
+		}
+		imgViewerRoute := app.Group("img-viewer")
+		{
+			imgViewerRoute.GET("render", func(ctx *gin.Context) {
+				isMobileParam := ctx.Query("isMobile")
+				isMobile := isMobileParam == "true"
+				if isMobile {
+					ctx.HTML(http.StatusOK, "img-viewer/mobile-app.tmpl", imgViewerApp.Render(isMobile))
+				} else {
+					ctx.HTML(http.StatusOK, "img-viewer/app.tmpl", imgViewerApp.Render(isMobile))
+				}
+
 			})
 		}
 	}

resources/base.css

@@ -8,6 +8,12 @@
     src:url("./virtue.ttf")
 }
 
+/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
+    html {
+      zoom: 3
+    }
+  } */
+
 .NoClick {
     pointer-events: none;
  }
@@ -22,6 +28,7 @@
 }
 
 body{
+    zoom: var(--zoom);
     position: absolute;
     width: 100%;
     height: 100%;
@@ -34,6 +41,7 @@ body{
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
+    touch-action: manipulation;
 }
 
 /* @font-face {
@@ -46,7 +54,8 @@ body{
 #WindowsLayer {
     width: 100%;
     height: 100%;
-    position: fixed;
+    /* position: fixed; */
+    position: relative;
 }
 
 .Frame{

resources/mobile-wdeUI.css

@@ -0,0 +1,51 @@
+#mobile-desktop{
+    width: 100%;
+    height: 100%;
+
+    background: #CCCCCC;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0px; 
+}
+#mobile-desktop #toolbar{
+    width: 100%;
+    height: 50px;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    /* padding: 5px;  */
+    justify-content: space-around;
+
+    /* Inside auto layout */
+    flex: none;
+    order: 1;
+    align-self: stretch;
+    flex-grow: 0;
+}
+
+#mobile-desktop #border{
+    width: auto;
+    height: auto;
+    /* background-color: bisque; */
+    margin: 5px;
+    border: 1px;
+    /* margin: 5px; */
+
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 1;
+}
+
+.mobile-windows-layer{
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+    position: relative;
+}

resources/sys/finder/finder.js

@@ -8,36 +8,42 @@ class Finder{
     * @param {string} path
     */
     NewWindow(path){
-        // console.log("Init")
+        fetch(`${window.location.origin}/application/${this.appId}/render?` + new URLSearchParams({
-        fetch(`${window.location.origin}/application/${this.appId}/render`) //TODO Move to wde func. Or Not?
+            isMobile: WebDesktopEnvironment.isMobile,
+            // bar: true,
+        })) //TODO Move to wde func. Or Not?
         .then((response) => response.text())
         .then((html) => {
             let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 500, 350 )    
-            
             newWindow.innerHTML = html
-            // console.log(newWindow.children[1].children[0])
-            let fileView = new FileView("/kek", newWindow.children[1].children[0], this.click)
-            let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])
             
-            let closeButton = newWindow.children[0].children[0]
+            let fileView = new FileView("/kek", newWindow.querySelector(".FileTileView"), Finder.Click)
+            if (!WebDesktopEnvironment.isMobile){
+                let scrollBar = new WdeScrollBar(newWindow.children[1].children[1], newWindow.children[1].children[0])// TODO to querry selector
+                let closeButton = newWindow.children[0].children[0] //TODO to query selector
                 closeButton.addEventListener('click', function (params) {
                     WebDesktopEnvironment.CloseWindow(newWindow)
                 })
+            }
         })
         .catch((error) => {
             WebDesktopEnvironment.Alert(error);
         })
     }
+
     /**
     * @param {MouseEvent} event
     * @param {string} path
     */
-    click(event, path){
+    static Click(event, path){
-        let fileName = event.target.getAttribute("fileName")
+        let fileType = event.target.getAttribute("fileType")
-        let fileExtension = fileName.split(".")[fileName.split(".").length - 1]
+        switch (fileType) {
-        switch (fileExtension) {
+            case "app":
-            case "lol":
+                //TODO get real id
-                WebDesktopEnvironment.Open("finder", ["pizda"])
+                WebDesktopEnvironment.Open("personal-properties", [])
+                break;
+            case "img":
+                WebDesktopEnvironment.Open("img-viewer", ["pizda"])
                 break;
             default:
                 console.log("Unsupported file type")

resources/sys/img-viewer/img-viewer.css

@@ -0,0 +1,17 @@
+.Img-Viewer-Picture-Container{
+    width: 100%;
+    height: 100%;
+}
+.Img-Viewer-Picture{
+    width: 100%;
+    height: 100%;
+    background-image: url("./test-image.jpg");
+    background-size:     contain;
+    background-repeat:   no-repeat;
+    background-position: center center; 
+}
+
+.Img-Viewer-Picture-Toolbar{
+    width: 100%;
+    height: 35px;
+}

resources/sys/img-viewer/img-viewer.js

@@ -0,0 +1,31 @@
+class ImgViewer{
+    appId = "img-viewer"
+    /**
+    * @param {string} path
+    */
+    NewWindow(path){
+        fetch(`${window.location.origin}/application/${this.appId}/render?`+ new URLSearchParams({
+            isMobile: WebDesktopEnvironment.isMobile,
+        }))
+        .then((response) => response.text())
+        .then((html) => {
+            let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, 450,400  ) 
+            
+            newWindow.innerHTML = html
+
+            let closeButton = newWindow.children[0].children[0]
+
+            closeButton.addEventListener('click', function (params) {
+                WebDesktopEnvironment.CloseWindow(newWindow)
+            })
+        })
+        .catch((error) => {
+            WebDesktopEnvironment.Alert(error);
+        });
+    }
+}
+
+
+class test{
+        
+}

resources/sys/personal-properties/personal-properties.js

@@ -11,7 +11,9 @@ class PersonalProperties{
     * @param {string} path
     */
     NewWindow(path){
-        fetch(`${window.location.origin}/application/personal-properties/render`) //TODO Move to wde func. Or Not?
+        fetch(`${window.location.origin}/application/personal-properties/render?`+ new URLSearchParams({
+            isMobile: WebDesktopEnvironment.isMobile,
+        })) 
         .then((response) => response.text())
         .then((html) => {
             // console.log(document.body)
@@ -20,7 +22,7 @@ class PersonalProperties{
             
             newWindow.innerHTML = html
 
-            let closeButton = newWindow.children[0].children[0]
+            let closeButton = newWindow.querySelector("closeWindowButton")
             let scrollDiv = newWindow.children[1]
             let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
 
@@ -32,33 +34,4 @@ class PersonalProperties{
             WebDesktopEnvironment.Alert(error);
         });
     }
-
-    // Init(){
-    //     console.log("Init")
-    //     fetch(`${window.location.origin}/application/personal-properties/render`) //TODO Move to wde func. Or Not?
-    //     .then((response) => response.text())
-    //     .then((html) => {
-    //         // console.log(document.body)
-    //         // let heigth = Math.max(document.body.clientHeight*0.8, scrollDiv.children[0].scrollHeight) //TODO
-    //         let newWindow = WebDesktopEnvironment.CreateNewWindow(this.appId, "Personal Properties", 360, document.body.clientHeight*0.8 ) 
-            
-    //         newWindow.innerHTML = html
-
-    //         let closeButton = newWindow.children[0].children[0]
-    //         let scrollDiv = newWindow.children[1]
-    //         let scrollBar = new WdeScrollBar(scrollDiv.children[1].children[0], scrollDiv.children[0])
-
-    //         closeButton.addEventListener('click', function (params) {
-    //             WebDesktopEnvironment.CloseWindow(newWindow)
-    //         })
-    //     })
-    //     .catch((error) => {
-    //         WebDesktopEnvironment.Alert(error);
-    //     });
-    // }
-}
-
-
-class test{
-        
 }

resources/wde.js

@@ -1,24 +1,63 @@
 document.addEventListener('DOMContentLoaded', function() {
+    // console.log(window.screen.width)
     wde = new WebDesktopEnvironment
-    WebDesktopEnvironment.Open("finder")
+    if (!WebDesktopEnvironment.isMobile){
+        WebDesktopEnvironment.Open("finder", ["kek"])
+    }
+    
+    
     // WebDesktopEnvironment.Open("personal-properties")
 }, false);
 
 class WebDesktopEnvironment{
     static Applications = {};
+    static isMobile = false
     constructor(){
         this.wc = new WindowsCompositor
-        //Get basic window ready frame
+        WebDesktopEnvironment.isMobile = WebDesktopEnvironment.CheckMobile()
-        fetch(`${window.location.origin}/system/wde/getbasicwindow`) //TODO Move to wde func
+
+        let applications = document.createElement("div")
+        applications.setAttribute('id', 'applications')
+        document.body.appendChild(applications)
+
+        if( WebDesktopEnvironment.isMobile){
+            document.body.style.setProperty('--zoom', 3)            
+
+            let mobileDesktop = document.createElement("div")
+            mobileDesktop.setAttribute('id', 'mobile-desktop')
+            document.body.appendChild(mobileDesktop)
+            
+
+
+            // let windowsLayer = document.createElement("div")
+            // windowsLayer.setAttribute('id', 'windows-layer')
+            
+            // mobileDesktop.appendChild(windowsLayer)
+
+            fetch(`${window.location.origin}/system/wde/renderMobileDesktop` )
             .then((response) => response.text())
             .then((html) => {
-            WebDesktopEnvironment.SetBasicWindow(html)
+                mobileDesktop.innerHTML = html
+                WebDesktopEnvironment.LoadApp("finder", () =>{
+                    console.log("lel")
+                    new FileView("/kek", mobileDesktop.querySelector(".FileTileView"), Finder.Click)
+                })
+            }).then(()=>{
+                
             })
             .catch((error) => {
                 WebDesktopEnvironment.Alert(error);
-        });
+            })
+           
+        } else{
+            document.body.style.setProperty('--zoom', 1)
+
+            let windowsLayer = document.createElement("div")
+            windowsLayer.setAttribute('id', 'windows-layer')
+            document.body.appendChild(windowsLayer)
         }
 
+    }
     /**
     * @param {string} appId
     * @param {function} func callback after script loading
@@ -27,15 +66,16 @@ class WebDesktopEnvironment{
     static LoadApp(appId, func){
         console.log(`Load application ${appId}`)
 
-        let appDiv = document.createElement("application")
+        // let appDiv = document.createElement("application")
-        appDiv.setAttribute("id", `application-${appId}`)
+        // appDiv.setAttribute("id", `application-${appId}`)
-        document.getElementById("WindowsLayer").appendChild(appDiv)
+        // document.getElementById("applications").appendChild(appDiv)
 
         let script = document.createElement("script")
-        script.setAttribute("id", `application-script-${appId}`)
+        script.setAttribute("appId", appId)
         script.setAttribute("src", `${window.location.origin}/system/applications/${appId}/app.js`)
         script.setAttribute("async", "false")
-        let appElem = document.getElementById("Applications").appendChild(script)
+        document.getElementById("applications").appendChild(script)
+        // let appElem = document.getElementById("applications").appendChild(script)
 
         script.addEventListener('load', (event) =>{
             switch (appId) {
@@ -49,6 +89,11 @@ class WebDesktopEnvironment{
                     this.Applications[appId] = newPersonalPropertiesApp
                     func()
                     return newPersonalPropertiesApp
+                case "img-viewer":
+                    let newImgViewer = new ImgViewer()
+                    this.Applications[appId] = newImgViewer
+                    func()
+                    return newImgViewer
                 default:
                     break;
             }
@@ -65,14 +110,10 @@ class WebDesktopEnvironment{
             console.log(`Application ${appId} is not loaded yet`)
             WebDesktopEnvironment.LoadApp(appId, () =>{
                 this.Applications[appId].NewWindow(args)
-                // console.log(this.Applications)
             })
         } else {
             this.Applications[appId].NewWindow(args)
         }
-
-        
-
     }
 
     /**
@@ -82,15 +123,23 @@ class WebDesktopEnvironment{
     * @returns {HTMLElement}
     */
     static CreateNewWindow(appId, width, height) {    
-        let appElem = document.getElementById(`application-${appId}`)
+        // let appElem = document.getElementById(`application-${appId}`)
         let newWindow = document.createElement("div")
+        if (WebDesktopEnvironment.isMobile){
+            newWindow.setAttribute("class", "MobileApplicationWindow")
+            document.body.querySelector('#windows-layer').appendChild(newWindow)
+            return newWindow
+        } else {
             newWindow.setAttribute("class", "StandartApplicationWindow")
-        newWindow.style.position = "absolute"
+            newWindow.setAttribute("windowId", "SuperUniqUUID") //TODO:
+
             newWindow.style.width = width.toString() + "px"
             newWindow.style.height = height.toString() + "px"
-        return appElem.appendChild(newWindow)
-    }
 
+            document.body.querySelector('#windows-layer').appendChild(newWindow)
+            return newWindow
+        }
+    }
     /**
     * @param {HTMLElement} window
     */
@@ -125,6 +174,12 @@ class WebDesktopEnvironment{
     static Alert(alertText){
         console.log(alertText)
     }
+
+    static CheckMobile(){    
+        var check = false;
+        (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
+        return check;
+    }
 }
 
 var getJSON = function(url, callback) {

resources/wdeUI.css

@@ -8,7 +8,7 @@
     padding-right: 6px;
     gap: 4px;
 
-    position: relative;
+    position: absolute;
 
     background: #CCCCCC;
     border: 1px solid #000000;
@@ -21,6 +21,20 @@
     flex-grow: 1;
 }
 
+.MobileApplicationWindow{
+    width: 100%;
+    height: 100%;
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
 .ContentBorder {
     width: 100%;
     height: 100%;
@@ -43,6 +57,28 @@
     padding: 0px;
 }
 
+.MobileContentBorder {
+    width: 100%;
+    height: 100%;
+    background-color: #DDDDDD;
+    /* border: 1px solid #000000; */
+
+    /* box-shadow:   -1px -1px 0px rgba(0, 0, 0, 0.25),
+                1px 1px 0px #FFFFFF,
+                inset -1px -1px 0px rgba(0, 0, 0, 0.27),
+                inset 1px 1px 0px #FFFFFF; */
+
+    overflow: hidden;
+    overflow-x: hidden;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0px;
+}
+
 .WindowFrameTopBarButton{
     width: 11px;
     height: 11px;
@@ -82,6 +118,57 @@
     flex-grow: 0;
 }
 
+.MobileWindowFrameBottomBar{
+    width: 100%;
+    height: 20px;
+/* 
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 5px;
+    padding: 0px; */
+
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 0;
+}
+
+.MobileWindowFrameBottomBarButton{
+    min-width: 11px;
+    width: auto;
+    height: 15px;
+    padding: 0px 4px 0px 4px;
+    position: absolute;
+    right: 4px;
+
+    background: linear-gradient(135deg, #999999 18.18%, #FFFFFF 81.82%);
+    border: 1px solid #222222;
+    box-shadow: 0.5px 0.5px 0px 0.5px #FFFFFF,
+                -0.5px -0.5px 0px 0.5px rgba(0, 0, 0, 0.25),
+                inset 1px 1px 0px rgba(255, 255, 255, 0.5),
+                inset -1px -1px 0px rgba(0, 0, 0, 0.27);
+    
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.MobileWindowFrameBottomBar .MobileWindowFrameTitle{
+    position: absolute;
+    /* top:1px; */
+    /* font-size: 13px; */
+    left:50%;
+    pointer-events: none;
+    white-space: nowrap;
+
+    font-family: "Virtue";
+    letter-spacing: 0.35px;
+ 
+}
 .WindowFrameTopBar .WindowFrameTitle{
     position: relative;
     top:1px;
@@ -193,7 +280,8 @@
     justify-content: flex-start;
     gap: 50px;
     row-gap: 20px;
-    padding: 15px;
+    /* padding: 15px; Shit fix TODO: */ 
+    margin: 15px;
     flex-wrap: wrap;
     align-content: flex-start;
 

routewde/wde.go

@@ -12,6 +12,10 @@ func Route(route *gin.RouterGroup) {
 		ctx.HTML(http.StatusOK, "basic-window.html", nil)
 	})
 
+	route.GET("/renderMobileDesktop", func(ctx *gin.Context) {
+		ctx.HTML(http.StatusOK, "base/mobile-desktop.tmpl", nil)
+	})
+
 	widgets := route.Group("widgets")
 	{
 		widgets.GET("/file-tile-view", func(ctx *gin.Context) {

templates/base/index.tmpl

@@ -4,8 +4,10 @@
     <head>
         <link rel="stylesheet" type="text/css" href="res/base.css">
         <link rel="stylesheet" type="text/css" href="res/wdeUI.css">
+        <link rel="stylesheet" type="text/css" href="res/mobile-wdeUI.css">
         <link rel="stylesheet" href="/res/sys/wde/simple-scrollbar.css">
         <link rel="stylesheet" href="/res/sys/personal-properties/personal-properies.css">
+        <link rel="stylesheet" href="/res/sys/img-viewer/img-viewer.css">
         <script src="/res/sys/wde/wde-scrollbar.js"></script>
         <script src="/res/sys/wde/file-view.js"></script>
         <script src="res/wde.js"></script>
@@ -15,8 +17,8 @@
         <!-- <script src="res/personal-properties.js"></script>  -->
     </head>
     <body>
-        <div id="WindowsLayer"></div>
+        <!-- <div id="WindowsLayer"></div> -->
-        <div id="Applications"></div>
+        <!-- <div id="Applications"></div> -->
         <!-- <div id="TestWindow" style="width: 100px; height: 100px; background-color: darkkhaki; position: absolute;" >
             <div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 15px; background-color: cornflowerblue;">
         </div> -->

templates/base/mobile-desktop.tmpl

@@ -0,0 +1,17 @@
+{{ define "base/mobile-desktop.tmpl" }}
+
+    <div id="border" class="">
+        <div id="windows-layer" class="mobile-windows-layer ContentBorder">
+            <div class="FileTileView">
+            </div>
+        </div>
+    </div>
+    <div id="toolbar">
+        <button>Back</button>
+        <button>Home</button>
+        <button>Close</button>
+    </div>
+
+{{ end }}
+
+				

templates/finder/mobile-app.tmpl

@@ -0,0 +1,8 @@
+{{ define "finder/mobile-app.tmpl" }}
+    <div class="MobileContentBorder">
+        <div class="FileTileView">
+        </div>
+    </div>
+{{ end }}
+
+				

templates/finder/mobile-desktop.tmpl

@@ -0,0 +1,8 @@
+{{ define "finder/mobile-desktop.tmpl" }}
+    <div class="MobileContentBorder">
+        <div class="FileTileView">
+        </div>
+    </div>
+{{ end }}
+
+				

templates/img-viewer/app.tmpl

@@ -0,0 +1,20 @@
+{{ define "img-viewer/app.tmpl" }}
+    <div id="TestWindowHeader" class="WindowFrameTopBar">
+        <button id="closeWindowButton" class="WindowFrameTopBarButton" title="Close Window"></button>
+        <div id="Drag" class="WindowDragArea"></div>
+        <div class="WindowFrameTitle">
+            About me
+        </div>
+        <div id="Drag" class="WindowDragArea"></div>
+    </div>
+    <div class="ContentBorder">
+        <!-- <div class="Img-Viewer-Picture-Toolbar">
+            Toolbar
+        </div> -->
+        <div class="Img-Viewer-Picture-Container">
+            <div class="Img-Viewer-Picture">
+        </div>
+    </div>
+{{ end }}
+
+				

templates/img-viewer/mobile-app.tmpl

@@ -0,0 +1,9 @@
+{{ define "img-viewer/mobile-app.tmpl" }}
+    <div class="MobileContentBorder">
+        <div class="Img-Viewer-Picture-Container">
+            <div class="Img-Viewer-Picture">
+        </div>
+    </div>
+{{ end }}
+
+				

templates/personal-properties/mobile-app.tmpl

@@ -0,0 +1,45 @@
+{{ define "personal-properties/mobile-app.tmpl" }}
+	<div class="MobileContentBorder">
+		<div class="ScrollContent">
+			<div class="PropertiesList">
+				<div class="Personal-properties-bio">
+					<img src="res/img/default-avatar-photo-placeholder-profile-picture-vector.jpg" alt="My Photo" style="width: 48px;height: 48px;">
+					<div class="Personal-properties-textbio">
+						<div>{{ .Name }}</div>
+						<div>{{ .BasicBio }}</div>
+					</div>
+				</div> 
+				{{ range $propIsland := .allprops }}
+						<div id="prop" class="Personal-properties-prop">
+							<div class="Personal-properties-prop-title">
+								{{$propIsland.Header}}:
+							</div>
+							<div class="Personal-properties-prop-content">
+								{{range $prop := $propIsland.Props}}
+								<div class="Personal-properties-prop-row">
+									<div class="Personal-properties-prop-key">
+										{{$prop.Key}}:
+										{{ range $value := $prop.KeyComments }}
+										<div class="Personal-properties-prop-key-comments">    
+											{{ $value }} 
+										</div>
+										{{ end }}
+									</div>
+									<div class="Personal-properties-prop-values">
+										{{ range $value := $prop.Values }}
+										<div class="Personal-properties-prop-value">    
+											{{ $value }} 
+										</div>
+										{{ end }}
+									</div>
+								</div>
+							{{ end }}
+							</div>
+						</div>
+					{{ end }}
+			</div>
+		</div>
+	</div>
+{{ end }}
+
+				

templates/wde-widgets/file-tile-view.tmpl

@@ -1,6 +1,6 @@
 {{ define "wde-widgets/file-tile-view.tmpl" }}
         {{ range $fileTile := .Files }}
-            <div id="{{ $fileTile.Id }}" class="FileTile" fileName="{{$fileTile.FileName}}">
+            <div id="{{ $fileTile.Id }}" fileType="{{ $fileTile.Type }}" class="FileTile" fileName="{{$fileTile.FileName}}">
                 <div class="FileTileIcon NoClick"></div>
                 <div class="FileTileTitle NoClick">{{ $fileTile.FileName }}</div>
             </div>  

webfilesystem/webfilesystem.go

@@ -6,15 +6,48 @@ type WebFileSystem struct {
 	folders []*Folder
 }
 
-func (fs *WebFileSystem) List() []*File {
+func (fs *WebFileSystem) List() []*WebFSFile {
-	return []*File{{uuid.NewString(), "Kek.kek"}, {uuid.NewString(), "lel.lol"}}
+	// aboutMe := &Exec{
+	// 	WebFSFile: WebFSFile{
+	// 		Id:       uuid.NewString(),
+	// 		FileName: "Aboutme.app",
+	// 	},
+	// }
+	// testImg :=
+	// mockFolder := Folder{
+	// 	files: []File{aboutMe},
+	// }
+	// kek := []*WebFSFile{}
+	return []*WebFSFile{{uuid.NewString(), "Aboutme", "app", "personal-properties"}, {uuid.NewString(), "lel.lol", "lol", nil}, {uuid.NewString(), "lel.img", "img", nil}}
+	// return mockFolder.files
 }
 
 type Folder struct {
-	files []*File
+	files []File
 }
 
-type File struct {
+type WebFSFile struct {
 	Id       string
 	FileName string
+	Type     string
+	data     interface{}
+}
+type File interface {
+	GetUuid() string
+	GetFileName() string
+}
+
+type Image struct {
+}
+
+type Exec struct {
+	WebFSFile
+}
+
+func (e *Exec) GetUuid() string {
+	return e.Id
+}
+
+func (e *Exec) GetFileName() string {
+	return e.FileName
 }

websiteapp/finder/finder.go

@@ -17,6 +17,6 @@ func (f *FinerApplication) GetId() string {
 	return f.manifest.AppId
 }
 
-func (f *FinerApplication) Render() gin.H {
+func (f *FinerApplication) Render(isMobile bool) gin.H {
 	return gin.H{}
 }

websiteapp/img-viewer/imgviewer.go

@@ -0,0 +1,35 @@
+package imgviewer
+
+import (
+	"personalwebsite/websiteapp"
+
+	"github.com/gin-gonic/gin"
+)
+
+type ImgViewerApp struct {
+	manifest websiteapp.ApplicationManifest
+}
+
+func NewImgViewerApp() ImgViewerApp {
+	newApp := ImgViewerApp{
+		manifest: websiteapp.ApplicationManifest{
+			AppId:      "img-viewer",
+			WindowName: "About me", //TODO: delete
+		},
+	}
+	return newApp
+}
+
+func (p *ImgViewerApp) GetManifest() websiteapp.ApplicationManifest {
+	return p.manifest
+}
+func (p *ImgViewerApp) GetId() string {
+	return p.manifest.AppId
+}
+
+func (p *ImgViewerApp) Render(isMobile bool) gin.H {
+	return gin.H{
+		"Name":     "Greg Brzezinski",
+		"BasicBio": "Born 27.09.1998 at Saint-Petersburg",
+	}
+}