personal props html

resources/base.css

@@ -10,5 +10,115 @@ body{
 
 .Application{
     position: absolute;
+    /* background-color: antiquewhite; */
+        stroke: #000000;
+    stroke-width: 1px;
+    stroke-linecap: butt;
+    stroke-dasharray: 0;
+}
+
+.Frame{
+    width: 100%;
+    min-height: 200px;
+    height: auto;
+    background-color: #CCCCCC;
+    border: 1px solid #000000;
+    box-shadow: 1px 1px 0px #000,inset -1px -1px 0px rgba(0, 0, 0, 0.27), inset 1px 1px 0px #FFFFFF;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 4px;
+    gap:4px;
+}
+
+.WindowFrameTopBar{
+    /* background-color: aqua; */
+    width: 100%;
+    height: 13px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+    padding: 0px;
+}
+
+.WindowFrameTopBarButton
+{
+    /* box-sizing: border-box; */
+    
+    width: 11px;
+    height: 11px;
+
+    background: #D9D9D9;
+    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(0, 0, 0, 0.25), inset -1px -1px 0px #FFFFFF;
+
+    /* Inside auto layout */
+
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.WindowDragArea{
     background-color: antiquewhite;
+    width: 100%;
+    height: 100%;
+    /* background: repeating-linear-gradient(
+        to bottom,
+        rgb(255, 255, 255) 0px,
+        rgb(255, 255, 255) 1px,
+        #ffffff00 2px,
+        #ffffff00 3px
+    ); */
+    /* box-shadow: 1px 1px ; */
+}
+.ContentFrame{
+    box-sizing: border-box;
+
+    /* Auto layout */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px;
+    gap:10px;
+
+    width: 100%;
+    height: 100%;
+
+    background: #DDDDDD;
+    border: 1px solid #000000;
+   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 #FFFFFF;
+    
+
+    /* Inside auto layout */
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 1;
+}
+
+.Personal-properties-prop{
+    width: 100%;
+    height: auto;
+    border: 1px solid #888888;
+    box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF;
+}
+
+
+.Personal-properties-prop-header{
+    /* width: 50px; */
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    background-color: #DDDDDD;
+    left: 12px;
+    top: -10px;
+    margin-left: 2px;
+    
+    /* padding: 10px; */
+    /* border: 1px solid #888888; */
+    /* box-shadow: 1px 1px 0px #FFFFFF, inset 2px 2px 0px #FFFFFF; */
 }

resources/mockapp.html

@@ -1,5 +0,0 @@
-<div id="Pizda" class="Application" style="width: 200px;height: 150px;">
-    <div id="TestWindowHeader" class="WindowDragArea" style="width: 100%;height: 22px; background-color: cornflowerblue;">
-    <button>Close</button>
-    </div>
-</div>

resources/personal-properties-prop.html

@@ -0,0 +1,7 @@
+<div id="prop" class="personal-properties-prop">
+    {{ range $book := .books }}
+    <h1>{{ .Title }}</h1>
+    <h3>{{ .Author }}</h3>
+    <hr/>
+    {{ end }}
+</div>

resources/personal-properties.html

@@ -0,0 +1,17 @@
+<div id="RootWidget" class="Application" style="width: 200px;height: 200px;">
+    <div id="WindowBorder" class="Frame">
+        <div id="TestWindowHeader" class="WindowFrameTopBar">
+            <button class="WindowFrameTopBarButton"></button>
+            <div id="Drag" class="WindowDragArea"></div>
+            <button class="WindowFrameTopBarButton" ></button>
+        </div>
+        <div id="ContentFrame" class="ContentFrame">
+                {{ range $book := .books }}
+                    <div id="prop" class="Personal-properties-prop">
+                        <div class="Personal-properties-prop-header">{{ .Title }}</div>
+                        <div>{{ .Author }}</div>
+                    </div>
+                {{ end }}
+        </div>
+    </div>
+</div>

resources/personal-properties.js

@@ -0,0 +1,5 @@
+class PersonalProperties {
+    constructor(){
+        console.log("pprops")
+    }
+}