cyber-dream/personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more work

Browse Source
This commit is contained in:
cyber-dream 2023-07-23 06:12:17 +03:00
parent b79b65868c
commit 3b5b00f5b0
30 changed files with 289 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/BlogWriter/blogwriter.go
View File

@ -1,14 +1,17 @@
package blogwriter
import (
"personalwebsite/apps"
"personalwebsite/webfilesystem"
"github.com/gin-gonic/gin"
)
type BlogWriterApplication struct {
fs *webfilesystem.WebFileSystem
appID string
fs *webfilesystem.WebFileSystem
appID string
path string
manifest apps.ApplicationManifest
}
func NewBlogWriterApp(webfs *webfilesystem.WebFileSystem) *BlogWriterApplication {
@ -17,11 +20,17 @@ func NewBlogWriterApp(webfs *webfilesystem.WebFileSystem) *BlogWriterApplication
appID: "BlogWriter",
}
}
func (bw *BlogWriterApplication) GetManifest() apps.ApplicationManifest {
return bw.manifest
}
func (bw *BlogWriterApplication) GetAppID() string {
return bw.appID
}
func (bw *BlogWriterApplication) GetPath() string {
return bw.path
}
func (bw *BlogWriterApplication) PublicRoutes(routes *gin.RouterGroup) {}
func (bw *BlogWriterApplication) PrivateRoutes(routes *gin.RouterGroup) {

17
apps/aboutme/personalprops.go
View File

@ -5,6 +5,7 @@ import (
"html/template"
"net/http"
"path"
"personalwebsite/apps"
"personalwebsite/apps/appCtx"
"personalwebsite/errormessage"
"personalwebsite/libs"
@ -20,20 +21,34 @@ type AboutMeApp struct {
appID string
mLib libs.MarkdownLib
titleBarConfig wde.TitleBarConfig //TODO to app manifest?
path string
manifest apps.ApplicationManifest
}
func NewAboutMeApp(webFs *webfilesystem.WebFileSystem) *AboutMeApp {
manifest := apps.ApplicationManifest{}
_, err := webFs.Read(path.Join("/Applications/AboutMe.app", ".appmanifest"), &manifest)
if err != nil {
panic(err)
}
newApp := AboutMeApp{
fs: webFs,
appID: "AboutMe",
path: "/Applications/AboutMe.app",
titleBarConfig: wde.TitleBarConfig{
Lable: "About Me",
CloseButton: true,
},
manifest: manifest,
}
return &newApp
}
func (p *AboutMeApp) GetPath() string {
return p.path
}
func (p *AboutMeApp) GetManifest() apps.ApplicationManifest {
return p.manifest
}
func (p *AboutMeApp) PublicRoutes(route *gin.RouterGroup) {
route.POST("render", func(ctx *gin.Context) {
filePath := ctx.Query("path")

17
apps/blogviewer/blogviewer.go
View File

@ -4,6 +4,7 @@ import (
"errors"
"net/http"
"path"
"personalwebsite/apps"
"personalwebsite/apps/appCtx"
"personalwebsite/errormessage"
"personalwebsite/libs"
@ -14,9 +15,11 @@ import (
)
type BlogViewerApplication struct {
fs *webfilesystem.WebFileSystem
appID string
mLib libs.MarkdownLib
fs *webfilesystem.WebFileSystem
appID string
mLib libs.MarkdownLib
path string
manifest apps.ApplicationManifest
}
func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication {
@ -26,10 +29,18 @@ func NewBlogViewerApp(webFs *webfilesystem.WebFileSystem) *BlogViewerApplication
mLib: libs.MarkdownLib{},
}
}
func (b *BlogViewerApplication) GetManifest() apps.ApplicationManifest {
return b.manifest
}
func (b *BlogViewerApplication) GetAppID() string {
return b.appID
}
func (b *BlogViewerApplication) GetPath() string {
return b.path
}
func (b *BlogViewerApplication) PrivateRoutes(route *gin.RouterGroup) {
b.PublicRoutes(route)

19
apps/finder/finder.go
View File

@ -1,6 +1,8 @@
package finder
import (
"path"
"personalwebsite/apps"
"personalwebsite/apps/appCtx"
"personalwebsite/wde"
"personalwebsite/webfilesystem"
@ -12,24 +14,39 @@ type FinderApplication struct {
fs *webfilesystem.WebFileSystem
appID string
titleBarConfig wde.TitleBarConfig
path string
manifest apps.ApplicationManifest
// manifest apps.ApplicationManifest
}
func NewFinderApplication(webFs *webfilesystem.WebFileSystem) *FinderApplication {
manifest := apps.ApplicationManifest{}
_, err := webFs.Read(path.Join("/Applications/Finder.app", ".appmanifest"), &manifest)
if err != nil {
panic(err)
}
return &FinderApplication{
fs: webFs,
path: "/Applications/Finder.app",
appID: "Finder",
titleBarConfig: wde.TitleBarConfig{
Lable: "Finder",
CloseButton: true,
},
manifest: manifest,
}
}
func (f *FinderApplication) GetManifest() apps.ApplicationManifest {
return f.manifest
}
func (f *FinderApplication) GetAppID() string {
return f.appID
}
func (f *FinderApplication) GetPath() string {
return f.path
}
func (f *FinderApplication) Render(appCtx appCtx.AppContext) gin.H {
return gin.H{
"TitleBarConfig": f.titleBarConfig,

14
apps/img-viewer/imgviewer.go
View File

@ -2,14 +2,17 @@ package imgviewer
import (
"net/http"
"personalwebsite/apps"
"personalwebsite/webfilesystem"
"github.com/gin-gonic/gin"
)
type ImgViewerApp struct {
fs *webfilesystem.WebFileSystem
appID string
fs *webfilesystem.WebFileSystem
appID string
path string
manifest apps.ApplicationManifest
}
func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) *ImgViewerApp {
@ -22,6 +25,9 @@ func NewImgViewerApp(webFs *webfilesystem.WebFileSystem) *ImgViewerApp {
func (p *ImgViewerApp) PrivateRoutes(route *gin.RouterGroup) {
p.PublicRoutes(route)
}
func (i *ImgViewerApp) GetManifest() apps.ApplicationManifest {
return i.manifest
}
func (p *ImgViewerApp) PublicRoutes(route *gin.RouterGroup) {
route.GET("render", func(ctx *gin.Context) {
isMobileParam := ctx.Query("isMobile")
@ -44,6 +50,10 @@ func (p *ImgViewerApp) PublicRoutes(route *gin.RouterGroup) {
})
}
func (p *ImgViewerApp) GetPath() string {
return p.path
}
func (p *ImgViewerApp) GetAppID() string {
return p.appID
}

34
apps/sunboard/sunboard.go
View File

@ -2,7 +2,9 @@ package sunboard
import (
"net/http"
"path"
"personalwebsite/apps"
"personalwebsite/wde"
"personalwebsite/webfilesystem"
"github.com/gin-gonic/gin"
@ -10,15 +12,26 @@ import (
type SunboardApp struct {
fs *webfilesystem.WebFileSystem
wde *wde.WDE
appID string
appStorage *apps.ApplicationsStorage
path string
manifest apps.ApplicationManifest
}
func NewSunboardApp(webFs *webfilesystem.WebFileSystem, appStorage *apps.ApplicationsStorage) *SunboardApp {
func NewSunboardApp(webFs *webfilesystem.WebFileSystem, wde *wde.WDE, appStorage *apps.ApplicationsStorage) *SunboardApp {
manifest := apps.ApplicationManifest{}
_, err := webFs.Read(path.Join("/Applications/Sunboard.app", ".appmanifest"), &manifest)
if err != nil {
panic(err)
}
newApp := SunboardApp{
fs: webFs,
wde: wde,
appID: "Sunboard",
appStorage: appStorage,
path: "/Applications/Sunboard.app",
manifest: manifest,
}
return &newApp
}
@ -30,21 +43,32 @@ func (a *SunboardApp) GetAppID() string {
func (a *SunboardApp) PublicRoutes(route *gin.RouterGroup) {
}
func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
func (a *SunboardApp) GetPath() string {
return a.path
}
func (a *SunboardApp) GetManifest() apps.ApplicationManifest {
return a.manifest
}
func (a *SunboardApp) PrivateRoutes(router *gin.RouterGroup) {
router.POST("render", func(ctx *gin.Context) {
appIcons := []appIcon{}
for _, app := range a.appStorage.Apps {
if app.GetAppID() == "Sunboard" {
if app.GetAppID() == "Sunboard" { //FIXME
continue
}
if app.GetManifest().Iconpath == "" {
continue
}
println(app.GetAppID() + " : " + app.GetPath())
// iconPath := path.Join(, "icon.icn")
appIcons = append(appIcons, appIcon{
Type: "Icon",
Icon: "",
Icon: "/system/libs/img/icon/get?path=" + app.GetManifest().Iconpath + "&size=32",
Lable: app.GetAppID(),
AppId: app.GetAppID(),
Path: "/Applications/" + app.GetAppID() + ".app", //FIXME
Path: app.GetPath(),
})
}
ctx.HTML(http.StatusOK, "sunboard/sunboard.html", gin.H{

10
apps/websiteapp.go
View File

@ -15,15 +15,17 @@ type WebDEApplication interface {
GetAppID() string
PublicRoutes(*gin.RouterGroup)
PrivateRoutes(*gin.RouterGroup)
// GetManifest() ApplicationManifest //TODO: Delete
GetPath() string
GetManifest() ApplicationManifest
// GEtHtml()
// GetId() string
}
type ApplicationManifest struct {
AppId string `bson:"appid" json:"appId"`
Js []string `bson:"js" json:"js"`
Css []string `bson:"css" json:"css"`
AppId string `bson:"appid" json:"appId"`
Js []string `bson:"js" json:"js"`
Css []string `bson:"css" json:"css"`
Iconpath string `bson:"iconpath" json:"iconpath"`
}
func NewApplicationsStorage(apps map[string]WebDEApplication, webfs *webfilesystem.WebFileSystem) *ApplicationsStorage {

67
front/src/apps/about-me/about-me.less
View File

@ -1,27 +1,5 @@
/* TODO Move this to body? */
/*.ScrollContent {
width: 100%;
height: 100%;
overflow: scroll;
overflow-x: hidden;
/* Firefox */
/* scrollbar-width: none; */
/* Internet Explorer 10+ */
/* -ms-overflow-style: none; */
@import "../../theme.less";
/* Auto layout */
/*display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding: 0px;
}*/
/* WebKit */
/* .ScrollContent::-webkit-scrollbar {
width: 0;
height: 0;
} */
.PersPropsContent{
width: 100%;
height: 100%;
@ -101,10 +79,9 @@
gap:1px;
}
.ShortBio .Name{
font-family: "Virtue";
/* FIXME */
letter-spacing: 0.35px;
.ShortBio > .Text > .Name{
&:extend(.large-system-font);
// background-color: aqua;
}
.PropertiesList .Links {
@ -115,12 +92,28 @@
height: auto;
width: auto;
// background-color: aqua;
/* Auto layout */
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
padding: 0px;
// gap:4px;
}
.Links > a{
/* Auto layout */
display: flex;
flex-direction: row;
align-items: left;
align-items: end;
justify-content: center;
padding: 0px;
gap:4px;
gap: 2px;
}
.Links > a > .link-lable{
// background-color: aqua;
// line-height: 60px;
// display:table
}
.PropertiesList .Links .Link {
@ -145,9 +138,8 @@
}
.Island .Title {
font-family: "Virtue";
/* FIXME */
letter-spacing: 0.35px;
//FIXME
&:extend(.large-system-font);
position:relative;
display: inline-block;
max-width: 100%;
@ -156,10 +148,6 @@
top: -9px;
}
.Focused .Island .Title{
background-color: #CCCCCC;
}
.Island .Content{
width: 100%;
/* top: 0px; */
@ -183,9 +171,10 @@
}
.Island .Key{
position: relative;
font-family: "Virtue";
font-size: 11px;
letter-spacing: 0.35px;
&:extend(.large-system-font);
// font-family: "Virtue";
// font-size: 11px;
// letter-spacing: 0.35px;
text-align: end;
width: 34%;
white-space: nowrap;

35
front/src/desktop.less
View File

@ -1,42 +1,27 @@
@import "./wde/primitives.less";
@import "./wde/widgets/file-view/file-view.less";
@import "./wde/widgets/scrollbar/scrollbar.less";
@import "./wde/widgets/button/button.less";
// @import "./wde/legacy-ui.less";
@import "./wde/widgets/basic-widgets.less";
@import "./theme.less";
@import "./wde/window-frame.less";
@import "./wde/widgets/title-bar/title-bar.less";
// @font-face{
// font-family: "Virtue";
// src:url("/res/dev-fs/fonts/virtue.ttf");
// }
/* @font-face{
font-family: "Virtue";
src:url("/res/dev-fs/fonts/virtue.ttf")
} */
/* @media screen and (max-device-width: 2048px) and (max-device-height: 2048px) {
html {
zoom: 3
}
} */
.NoClick {
pointer-events: none;
}
.Click {
pointer-events: all;
}
.DragArea
// .DragArea
*{
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-style: normal;
font-weight:initial;
}
// *{
// font-family: Verdana, Geneva, sans-serif;
// font-size: 11px;
// font-style: normal;
// font-weight:initial;
// }
*::-webkit-scrollbar { /* WebKit */
width: 0;
@ -44,6 +29,7 @@
}
body{
&:extend(.views-font);
// zoom: var(--zoom);
position: absolute;
width: 100%;
@ -52,6 +38,9 @@ body{
font-size: 11px;
// font-family: "Geneva";
src:url("./fonts/Geneva.woff2");
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */

BIN
front/src/fonts/Charcoal.woff2 Normal file
View File

Binary file not shown.

BIN
front/src/fonts/Geneva.woff2 Normal file
View File

Binary file not shown.

56
front/src/mobile.less
View File

@ -1,13 +1,23 @@
@import "./wde/sunboard/sunboard-mobile.less";
@import "./theme.less";
@import "./wde/effects.less";
@import "./wde/widgets/button/button.less";
@font-face{
font-family: "Geneva";
src:url("./fonts/Geneva.woff2");
}
body{
&:extend(.views-font);
// zoom: 2;
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
font-size: 16px;
font-size: 12px;
/* font: normal 14px Summer Pixel 22, "res/SummerPixel22Regular.ttf"; */
-webkit-touch-callout: none; /* iOS Safari */
@ -19,6 +29,7 @@ body{
supported by Chrome, Edge, Opera and Firefox */
touch-action: manipulation;
background-color: @col-argent;
// /* Auto layout */
// display: flex;
// flex-direction: column;
@ -26,11 +37,11 @@ body{
// justify-content: flex-start;
// margin: 32px;
background-image:
linear-gradient(45deg, @col-argent 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, @col-argent 75%),
linear-gradient(45deg, transparent 75%, @col-argent 75%),
linear-gradient(45deg, @col-argent 25%, #777777 25%);
// background-image:
// linear-gradient(45deg, @col-argent 25%, transparent 25%),
// linear-gradient(45deg, transparent 75%, @col-argent 75%),
// linear-gradient(45deg, transparent 75%, @col-argent 75%),
// linear-gradient(45deg, @col-argent 25%, #777777 25%);
background-size:10px 10px;
@ -41,11 +52,12 @@ body{
position: absolute;
// background-color: aqua;
inset: 16px;
bottom: 128px;
bottom: 100px;
border-radius: 15px;
border: 1px solid #000;
background: #99C;
border-radius: 5px;
border: @eff-border-black;
box-shadow: @eff-box-shadow-black;
background: @col-gainsboro;
overflow: hidden;
}
@ -71,4 +83,28 @@ body{
width: 100%;
height: 100%;
// position: absolute;
}
.wde-mobile-button{
&:extend(.wde-button);
&:active{
&:extend(.wde-button:active);
}
height: 35px;
width: 95px;
/* Auto layout */
display: flex;
// padding: 10px;
flex-direction: row;
justify-content: center;
align-items: center;
padding-right: 5px;
// gap: 53px;
// align-self: stretch;
}
.wde-mobile-button > .icon{
// width: 8rem;
// height: 8rem;
}

35
front/src/theme.less
View File

@ -1,10 +1,39 @@
@col-ceil: #9999CC;
@col-argent: #C0C0C0;
@col-chinese-silver: #CCCCCC;
@col-gainsboro: #DDDDDD;
@col-davys-grey: #555555;
@col-grey: #808080;
@col-bright-grey: #EEEEEE;
@col-davys-grey: #555555;
@col-granite-gray: #666666;
@col-grey: #808080;
@col-black: #000000;
@col-white: #FFFFFF;
@col-raisin-black: #222222;
@col-raisin-black: #222222;
@font-face{
font-family: "Geneva";
src:url("./fonts/Geneva.woff2");
}
@font-face {
font-family: "Charcoal";
src: url('./fonts/Charcoal.woff2');
}
.large-system-font{
font-family: "Charcoal";
// font-weight: bold;
letter-spacing: 0.35px;
font-size: 12px;
}
.small-system-font{
font-family: "Geneva";
}
.views-font{
font-family: "Geneva";
}

1
front/src/wde/effects.less
View File

@ -41,4 +41,5 @@
@eff-box-shadow-black: 1px 1px 0px @col-black;
@eff-box-shadow-convex: inset -1px -1px 0px rgba(0, 0, 0, 0.27),inset 1px 1px 0px @col-white;
@eff-box-shadow-convex-inverted: inset 1px 1px 0px rgba(0, 0, 0, 0.27),inset -1px -1px 0px @col-grey;
@eff-box-shadow-adjective: -1px -1px 0px rgba(0, 0, 0, 0.25), 1px 1px 0px #FFFFFF;

17
front/src/wde/sunboard/sunboard-mobile.less
View File

@ -15,7 +15,7 @@
#icons{
width: 100%;
height: 100%;
background-color: @col-ceil;
// background-color: @col-ceil;
}
// #down-bar{
@ -28,31 +28,32 @@
.apps-list{
/* Auto layout */
display: flex;
padding: 64px 32px;
padding: 64px 16px;
align-items: flex-start;
align-content: flex-start;
gap: 103px 18px;
gap: 64px 0px;
flex: 1 0 0;
align-self: stretch;
flex-wrap: wrap;
}
.app-icon{
// background-color: rgba(0, 255, 255, 0.133);
width: 100px;
height: 100px;
// height: 100px;
/* Auto layout */
display: flex;
padding: 4px 8px;
// padding: 4px 8px;
flex-direction: column;
align-items: center;
gap: 10px;
}
.app-icon .icon{
width: 64px;
height: 64px;
background-color: beige;
width: 32px;
height: 32px;
// background-color: beige;
}
.app-icon .lable{

4
front/src/wde/wde-desktop.js
View File

@ -36,8 +36,8 @@ export default class WebDesktopEnvironment extends AbstractWebDesktopEnvironment
async loadWDE(){
await this.Open("/Applications/Finder.app", ["/","--desktop", "desktop-layer"])
await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
// await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
// await this.Open("/Applications/Finder.app", ["/", "desktop-layer"])
await this.Open("/Applications/AboutMe.app", ["/", "desktop-layer"])
return
let autoStart = document.body.querySelector("wde-autostart")

2
front/src/wde/wde-mobile.js
View File

@ -17,6 +17,8 @@ export default class MobileWebDesktopEnvironment extends AbstractWebDesktopEnvir
this.FileView = WDEFileView
this.#sunBoard = new MobileSunboard(this)
// this.loadWDE()
document.addEventListener("touchstart", function(){}, true);//For working :active in css
}

2
front/src/wde/wde.js
View File

@ -33,7 +33,7 @@ export default class AbstractWebDesktopEnvironment{
* @returns {Object | undefined} //FIXME
*/
async _FetchAppManifest(path){
// console.log(location)
console.log(path)
// console.log(this.GetApiAddress())
const params = new URLSearchParams({path: path, mode: "json"})
const response = await fetch(`/system/loadApp?` + params)

27
front/src/wde/widgets/button/button.less Normal file
View File

@ -0,0 +1,27 @@
@import "../../effects.less";
@import "../../../theme.less";
.wde-button{
&:active{
background-color: @col-granite-gray;
box-shadow: @eff-box-shadow-convex-inverted;
// background-color: red;
}
background-color: @col-gainsboro;
box-shadow: @eff-box-shadow-convex;
border: @eff-border-black;
border-radius: 3px;
height: 20px;
width: auto;
}
// .wde-button:active{
// background-color: red;
// }
// .wde-button:hover{
// background-color: pink;
// }

6
front/src/wde/widgets/title-bar/title-bar.less
View File

@ -28,8 +28,10 @@
pointer-events: none;
white-space: nowrap;
font-family: "Virtue";
letter-spacing: 0.35px;
&:extend(.large-system-font);
// font-family: "Virtue";
// letter-spacing: 0.35px;
}
.window-frame.Focused .title-bar .lable{

BIN
icons/github/color/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
icons/github/color/github.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
icons/hand/color/8.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

BIN
icons/twitter/color/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
icons/twitter/color/twitter.png (Stored with Git LFS) Normal file
View File

Binary file not shown.

2
main.go
View File

@ -73,7 +73,7 @@ func main() {
imgViewerApp := imgviewer.NewImgViewerApp(webfs)
blogViewerApp := blogviewer.NewBlogViewerApp(webfs)
blogWriterApp := blogwriter.NewBlogWriterApp(webfs)
sunBoardApp := sunboard.NewSunboardApp(webfs, appsStorage)
sunBoardApp := sunboard.NewSunboardApp(webfs, webde, appsStorage)
appsStorage.Apps["personal-properties"] = persPropsApp
appsStorage.Apps["finder"] = finderApp

6
templates/base/mobile-desktop.html
View File

@ -17,10 +17,10 @@
</div> -->
<div id="mobile-app-views"></div>
<div id="controls-bar">
<div id="back" class="app-icon Click" >
<img class="icon NoClick" src="">
<button id="back" class="wde-mobile-button Click" >
<img class="icon NoClick" src="/system/libs/img/get?path=/Icons/Hand.icn/color/8.png">
<div class="lable NoClick">Back</div>
</div>
</button>
<!-- <div class="app-icon Click" >
<img class="icon NoClick" src="">
<div class="lable NoClick">Test</div>

3
templates/personal-properties/app.html
View File

@ -7,7 +7,8 @@
<div class="Links">
{{ range $link := .Links }}
<a href="{{$link.Url}}" target="_blank">
<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" alt="{{$link.Text}}">
<div class="link-lable">{{$link.Text}}</div>
<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" >
</a>
{{ end }}
</div>

3
templates/personal-properties/mobile-app.html
View File

@ -6,7 +6,8 @@
<div class="Links">
{{ range $link := .Links }}
<a href="{{$link.Url}}" target="_blank">
<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" alt="{{$link.Text}}">
<div class="link-lable">{{$link.Text}}</div>
<img class="Link" src="/system/libs/img/get?path={{$link.Icon}}" >
</a>
{{ end }}
</div>

2
templates/wde-widgets/window-title-bar.html
View File

@ -5,7 +5,7 @@
{{end}}
<div id="Drag" class="visual-drag-area"></div>
<!-- TODO:Disable dragging of icon -->
<img class="icon">
<img class="icon">
<div class="lable">
{{.Lable}}
</div>