├── README.md
└── samples
    ├── clock
        ├── analog-clock.tis
        ├── icon.svg
        └── index.htm
    ├── hello-window
        ├── bin
        │   ├── hello-window.dat
        │   ├── hello-window.ico
        │   └── windows
        │   │   └── x32
        │   │       └── hello-window.exe
        └── src
        │   ├── flat-theme-demo.htm
        │   ├── flat-theme-elements.htm
        │   ├── flat-theme.css
        │   ├── flat-theme.tis
        │   ├── icon.svg
        │   └── index.htm
    └── hello-world
        └── src
            ├── globe.svg
            └── index.htm


/README.md:
--------------------------------------------------------------------------------
 1 | # quark
 2 | 
 3 | Quark takes a folder with HTML/CSS/script/image resources and produces monolithic executable ready to run “as it is”:
 4 | 
 5 | ![](http://quark.sciter.com/wp-content/uploads/2020/05/schema.png)
 6 | 
 7 | [Quark is an application compiled by itself.](http://quark.sciter.com/wp-content/uploads/2020/05/quark-ui.png)
 8 | 
 9 | Application produced by the Quark is a bundle that contains Sciter Engine and custom resources that describe UI and logic of the application. Therefore minimal size of resulting binary is **5+ mb** (not compressed) that is comparable with minimal “hello world” applications using other popular UI libraries and frameworks:
10 | 
11 | * Qt – 5+ mb, but if your application needs to render HTML (QtWebKit) then the size will be around 30mb;
12 | * Electron – 50+ mb folder with a lot of stuff inside, 200+ mb (at least) of RAM and 2 processes (at least);
13 | * wxWidgets (linked statically) 3+ mb at least.
14 | 
15 | ## Sciter Engine Runtime
16 | 
17 | So what is inside of those 5mb? What functionality is available out of the box?
18 | 
19 | * 
20 |   * **Graphics**:  GPU Accelerated Graphic backends (DirectX, OpenGL) on all platforms. Supports as retained as immediate (a la ImGUI) rendering  modes.
21 |   * **HTML**: parser and DOM that supports as all HTML5 constructs as extended set of input elements including:
22 |     * `<include src="..." media="...">` – client side includes to allow assembling HTML from multiple files;
23 |     * `<htmlarea>` – native implementation of HTML WYSIWYG editor;
24 |     * `<plaintext>` – multiline plaintext editor with native support of syntax highlighting;
25 |     * `<frameset>` – can contain arbitrary content (not just <frame>s) – essentially that is so called split-view available out of the box.
26 |     * `<frame type=pager>` – customizable print preview and print modules;
27 |     * `<select type="tree">` and other practical variations of standard  HTML input elements;
28 |     * `<popup>`, `<menu.context>` and `<menu.popup>` – elements – out-of-canvas DOM element rendering;
29 |     * extra HTML attributes to support desktop UI cases including decoration of windows, dialog and message boxes.
30 |   * **CSS** – supports full implementation of CSS 2.1 plus some useful CSS3 modules:
31 |     * transitions and animations;
32 |     * [flexes and grids](https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm), with different syntax more suitable for UI though, but, still, functionality is there;
33 |     * CSS syntax extended by SaSS alike constructs `@const`, `@mixin`, `@set` and CSS variables.
34 |     * [CSS resident vector images](https://sciter.com/lightweight-inline-vector-images-in-sciter/) – no need for separate FontAwesome and similar icon fonts.
35 |   * **Script** –  Sciter uses its own JS derived script engine with syntax extended to better suit UI needs:
36 |     * extended set of types on top of 4 basic JS value types: Integer, Float, Duration, Length, Tuple and so on;
37 |     * real `class`es and `namespace`s, symbols;
38 |     * `generator`, `await`, `async` and `event` syntax constructs and promises;
39 |     * built-in data persistence – **NoSQL database** (a la MongoDB) integrated into the language;
40 |     * Sciter contains and uses **libUV** for asynchronous I/O so pretty much all functionality of NodeJS is available: file I/O, file and directory monitors, Process execution objects with stdio/stderr/stdin hooks.
41 |     * [Reactor and SSX](https://sciter.com/developers/sciter-docs/reactor-and-ssx/) – Sciter contains native implementation of ReactJS and JSX built-in into script compiler.
42 |   * [Desktop UI and **windowing**](https://sciter.com/html-window/):
43 |     * `view.window(html)`, `view.dialog(html)` and `view.msgbox(html)` functions – creation of native desktop windows and real modal dialogs.
44 |     * `view.trayIcon()` – built-in support of tray icons;
45 |     * `view.windowBlurbehind` – support of acrylic and behind-window blending on Windows and Macs;
46 |     * `view.windowFrame` – standard and custom windows frames including layered/non-rectangular windows;
47 | 
48 | ## Addons and native extensions
49 | 
50 | If the above functionality is not enough then Quark (Sciter’s runtime in fact) supports loading of custom modules from custom DLL’s (.dll,.dylib,.so). You can design and use:
51 | 
52 | * Native script classes  and namespaces, for example SQLite can be used from plug-in dll;
53 | * Native custom DOM elements and input elements (a.k.a. native behaviors): DLL-resident DOM element implementations can handle events and do native painting using  [sciter::graphics API](https://github.com/c-smile/sciter-sdk/blob/master/include/sciter-x-graphics.hpp#L332) ;
54 | * Native DOM elements wrapping of existing HWND, NSView, GtkWidget based components
55 | 
56 | ## More details
57 | 
58 | Go to [quark.sciter.com](https://quark.sciter.com) for mor details.
59 | 


--------------------------------------------------------------------------------
/samples/clock/analog-clock.tis:
--------------------------------------------------------------------------------
 1 | class Clock: Behavior 
 2 | {
 3 | 
 4 |   function attached() { 
 5 |     this.paintForeground = this.drawclock; // attaching draw handler to paintForeground layer
 6 |     this.timer(300,::this.refresh());
 7 |     
 8 |     this.borderWidth = this.style["border-width"] || 3;
 9 |     this.borderColor = this.style["border-color"] || color("brown");
10 |   }
11 | 
12 |   function drawclock(gfx)
13 |   {
14 |     var (x,y,w,h) = this.box(#rectw);
15 |     var scale = w < h? w / 300.0: h / 300.0;
16 |     var now = new Date();
17 |     gfx.save();
18 |     gfx.translate(w/2.0,h/2.0);
19 |     gfx.scale(scale,scale);    
20 |     gfx.rotate(-Math.PI/2);
21 |     gfx.lineColor(color(0,0,0));
22 |     gfx.lineWidth(8);
23 |     gfx.lineCap = Graphics.CAP_ROUND;
24 |        
25 |     // Hour marks
26 |     gfx.save();
27 |     gfx.lineColor(color(0x32,0x5F,0xA2));
28 |     for (var i in 12) {
29 |       gfx.rotate(Math.PI/6);
30 |       gfx.line(137,0,144,0);
31 |     }
32 |     gfx.restore();
33 | 
34 |     // Minute marks
35 |     gfx.save();
36 |     gfx.lineWidth(this.borderWidth);
37 |     gfx.lineColor(this.borderColor);
38 |     for (var i in 60) {
39 |       if ( i % 5 != 0)
40 |         gfx.line(143,0,146,0);
41 |       gfx.rotate(Math.PI/30);
42 |     }
43 |     gfx.restore();
44 | 
45 |     var sec = now.second;
46 |     var min = now.minute;
47 |     var hr  = now.hour;
48 |     hr = hr >= 12 ? hr-12 : hr;
49 |   
50 |     // write Hours
51 |     gfx.save();
52 |     gfx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
53 |     gfx.lineWidth(14);
54 |     gfx.line(-20,0,70,0);
55 |     gfx.restore();
56 | 
57 |     // write Minutes
58 |     gfx.save();
59 |     gfx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
60 |     gfx.lineWidth(10);
61 |     gfx.line(-28,0,100,0);
62 |     gfx.restore();
63 |       
64 |     // Write seconds
65 |     gfx.save();
66 |     gfx.rotate(sec * Math.PI/30);
67 |     gfx.lineColor(color(0xD4,0,0));
68 |     gfx.fillColor(color(0xD4,0,0));
69 |     gfx.lineWidth(6);
70 |     gfx.line(-30,0,83,0);
71 |     gfx.ellipse(0,0,10);
72 |     
73 |     gfx.noFill();
74 |     gfx.ellipse(95,0,10);
75 |     gfx.restore();
76 |     
77 |     gfx.restore();
78 |     
79 |   }    
80 | }
81 | 


--------------------------------------------------------------------------------
/samples/clock/icon.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    inkscape:version="1.0rc1 (09960d6f05, 2020-04-09)"
 11 |    sodipodi:docname="icon.svg"
 12 |    xml:space="preserve"
 13 |    viewBox="0 0 310.7175 375.40851"
 14 |    height="375.40851"
 15 |    width="310.7175"
 16 |    y="0px"
 17 |    x="0px"
 18 |    id="Layer_1"
 19 |    version="1.1"><metadata
 20 |    id="metadata73"><rdf:RDF><cc:Work
 21 |        rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
 22 |          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
 23 |    id="defs71" /><sodipodi:namedview
 24 |    inkscape:current-layer="Layer_1"
 25 |    inkscape:window-maximized="0"
 26 |    inkscape:window-y="0"
 27 |    inkscape:window-x="0"
 28 |    inkscape:cy="156.9085"
 29 |    inkscape:cx="155.35875"
 30 |    inkscape:zoom="0.46183953"
 31 |    fit-margin-bottom="0"
 32 |    fit-margin-right="0"
 33 |    fit-margin-left="0"
 34 |    fit-margin-top="0"
 35 |    showgrid="false"
 36 |    id="namedview69"
 37 |    inkscape:window-height="930"
 38 |    inkscape:window-width="1537"
 39 |    inkscape:pageshadow="2"
 40 |    inkscape:pageopacity="0"
 41 |    guidetolerance="10"
 42 |    gridtolerance="10"
 43 |    objecttolerance="10"
 44 |    borderopacity="1"
 45 |    bordercolor="#666666"
 46 |    pagecolor="#ffffff" />
 47 | 
 48 | 
 49 | 
 50 | <path
 51 |    inkscape:connector-curvature="0"
 52 |    id="path8"
 53 |    d="m 310.60975,198.8465 c 0,-51.195 -24.787,-96.596 -63.009,-124.874 10.107,-10.107 20.215,-20.215 30.322,-30.322 7.785,-7.786 -4.278,-19.848 -12.063,-12.064 -10.94,10.941 -21.881,21.882 -32.821,32.822 -22.845,-13.226 -49.371,-20.801 -77.667,-20.801 -28.303,0 -54.834,7.578 -77.683,20.81 -10.944,-10.943 -21.887,-21.887 -32.831,-32.831 -7.785,-7.784 -19.848,4.278 -12.063,12.064 8.164,8.164 21.269,21.269 30.332,30.332 -38.214,28.278 -62.995,73.674 -62.995,124.863 0,59.733 33.742,111.576 83.201,137.535 l -17.522,39.028 h 11.941 l 22.093,-31.561 c 17.243,6.607 35.959,10.238 55.527,10.238 19.567,0 38.284,-3.631 55.526,-10.238 l 22.093,31.561 h 11.941 l -17.522,-39.027 c 49.458,-25.959 83.2,-77.802 83.2,-137.535 z"
 54 |    style="fill:#2d3e50" />
 55 | 
 56 | 
 57 | 
 58 | <path
 59 |    inkscape:connector-curvature="0"
 60 |    id="path16"
 61 |    d="m 293.60475,99.7415 c 22.817,-22.818 22.817,-59.812 0,-82.628 -22.817,-22.818 -59.812,-22.818 -82.629,0 -0.101,0.1 -0.194,0.207 -0.294,0.309 l 82.614,82.613 c 0.101,-0.1 0.208,-0.192 0.309,-0.294 z"
 62 |    style="fill:#f3c40f" />
 63 | <path
 64 |    inkscape:connector-curvature="0"
 65 |    id="path18"
 66 |    d="m 298.42975,33.9995 c 5.05,5.051 8.978,10.799 11.793,16.931 -1.592,-12.365 -7.121,-24.32 -16.619,-33.817 -22.817,-22.818 -59.812,-22.818 -82.629,0 -0.101,0.1 -0.194,0.207 -0.294,0.309 l 11.253,11.252 c 22.895,-17.313 55.623,-15.546 76.496,5.325 z"
 67 |    style="fill:#ffd224" />
 68 | <path
 69 |    inkscape:connector-curvature="0"
 70 |    id="path20"
 71 |    d="m 17.11275,99.7415 c -22.817,-22.818 -22.817,-59.812 0,-82.628 22.818,-22.818 59.812,-22.818 82.629,0 0.101,0.1 0.194,0.207 0.294,0.309 l -82.614,82.613 c -0.101,-0.1 -0.208,-0.192 -0.309,-0.294 z"
 72 |    style="fill:#f3c40f" />
 73 | <path
 74 |    inkscape:connector-curvature="0"
 75 |    id="path22"
 76 |    d="m 34.17275,17.1135 c 9.233,-9.234 20.788,-14.728 32.785,-16.489 -17.651,-2.59 -36.26,2.904 -49.844,16.489 -22.817,22.816 -22.817,59.811 0,82.628 0.101,0.101 0.208,0.194 0.309,0.294 l 9.344,-9.344 c -15.061,-22.689 -12.594,-53.579 7.406,-73.578 z"
 77 |    style="fill:#ffd224" />
 78 | <path
 79 |    inkscape:connector-curvature="0"
 80 |    id="path24"
 81 |    d="m 8.66175,207.3765 c 0,-85.736 69.502,-155.239 155.239,-155.239 40.699,0 77.731,15.669 105.416,41.293 -28.356,-30.636 -68.908,-49.822 -113.945,-49.822 -85.736,0 -155.239,69.502 -155.239,155.238 0,45.039 19.187,85.589 49.823,113.946 -25.625,-27.685 -41.294,-64.718 -41.294,-105.416 z"
 82 |    style="fill:#496582" />
 83 | <path
 84 |    inkscape:connector-curvature="0"
 85 |    id="path26"
 86 |    d="m 155.37175,324.2695 c -69.158,0 -125.423,-56.265 -125.423,-125.423 0,-69.158 56.265,-125.422 125.423,-125.422 69.158,0 125.422,56.264 125.422,125.422 0,69.158 -56.265,125.423 -125.422,125.423 z"
 87 |    style="fill:#ffffff" />
 88 | <path
 89 |    inkscape:connector-curvature="0"
 90 |    id="path28"
 91 |    d="m 155.37175,324.2695 c -69.158,0 -125.423,-56.265 -125.423,-125.423 0,-69.158 56.265,-125.422 125.423,-125.422 69.158,0 125.422,56.264 125.422,125.422 0,69.158 -56.265,125.423 -125.422,125.423 z"
 92 |    style="fill:#ffc600;fill-opacity:1" />
 93 | <path
 94 |    inkscape:connector-curvature="0"
 95 |    id="path30"
 96 |    d="m 255.18575,274.6995 -34.563,-79.264 -17.778,7.148 -0.987,-3.175 h -38.999 l -10,-81 v 0 l 1,94.878 -5.105,-8.47 -47.895,33.266 v 6.7 l -21.576,8.75 38.662,64.992 c 11.861,3.729 24.413,5.745 37.49,5.745 40.674,0 76.82,-19.468 99.751,-49.57 z"
 97 |    style="opacity:0.2;fill:#5d5d5d" />
 98 | <path
 99 |    inkscape:connector-curvature="0"
100 |    id="path32"
101 |    d="m 153.00675,195.9595 c -24.005,18.338 -48.011,36.677 -72.016,55.017 -3.877,2.961 -0.061,9.634 3.875,6.627 24.005,-18.338 48.011,-36.677 72.017,-55.016 3.876,-2.962 0.06,-9.636 -3.876,-6.628 z"
102 |    style="fill:#e24c3f" />
103 | <path
104 |    inkscape:connector-curvature="0"
105 |    id="path34"
106 |    d="m 33.35975,209.0825 c 0,-69.158 56.265,-125.423 125.423,-125.423 53.474,0 99.23,33.642 117.238,80.869 -14.963,-52.529 -63.386,-91.104 -120.65,-91.104 -69.158,0 -125.423,56.264 -125.423,125.422 0,15.686 2.902,30.702 8.184,44.554 -3.106,-10.911 -4.772,-22.424 -4.772,-34.318 z"
107 |    style="fill:#8b8b8b;fill-opacity:1" />
108 | <path
109 |    inkscape:connector-curvature="0"
110 |    id="path36"
111 |    d="m 213.85875,191.4085 c -13,0 -25.417,0 -38.488,0 -2.251,-6 -7.512,-9.959 -12.512,-11.979 0,-19.527 0,-50.021 0,-68.021 0,-11 -17,-11 -17,0 0,23 0,46.195 0,69.291 -7,3.557 -11.134,10.546 -11.134,18.592 0,11.649 9.443,21.092 21.092,21.092 8.378,0 15.594,-4.975 18.998,-11.975 12.823,0 29.045,0 39.045,0 10.999,0 10.999,-17 -0.001,-17 z"
112 |    style="fill:#2d3e50" />
113 | <g
114 |    transform="translate(-100.14125,-98.5915)"
115 |    id="g38">
116 | </g>
117 | <g
118 |    transform="translate(-100.14125,-98.5915)"
119 |    id="g40">
120 | </g>
121 | <g
122 |    transform="translate(-100.14125,-98.5915)"
123 |    id="g42">
124 | </g>
125 | <g
126 |    transform="translate(-100.14125,-98.5915)"
127 |    id="g44">
128 | </g>
129 | <g
130 |    transform="translate(-100.14125,-98.5915)"
131 |    id="g46">
132 | </g>
133 | <g
134 |    transform="translate(-100.14125,-98.5915)"
135 |    id="g48">
136 | </g>
137 | <g
138 |    transform="translate(-100.14125,-98.5915)"
139 |    id="g50">
140 | </g>
141 | <g
142 |    transform="translate(-100.14125,-98.5915)"
143 |    id="g52">
144 | </g>
145 | <g
146 |    transform="translate(-100.14125,-98.5915)"
147 |    id="g54">
148 | </g>
149 | <g
150 |    transform="translate(-100.14125,-98.5915)"
151 |    id="g56">
152 | </g>
153 | <g
154 |    transform="translate(-100.14125,-98.5915)"
155 |    id="g58">
156 | </g>
157 | <g
158 |    transform="translate(-100.14125,-98.5915)"
159 |    id="g60">
160 | </g>
161 | <g
162 |    transform="translate(-100.14125,-98.5915)"
163 |    id="g62">
164 | </g>
165 | <g
166 |    transform="translate(-100.14125,-98.5915)"
167 |    id="g64">
168 | </g>
169 | <g
170 |    transform="translate(-100.14125,-98.5915)"
171 |    id="g66">
172 | </g>
173 | </svg>
174 | 


--------------------------------------------------------------------------------
/samples/clock/index.htm:
--------------------------------------------------------------------------------
 1 | <html window-frame="transparent">
 2 | <head>
 3 | <title>Sciter clock</title>
 4 | <style>
 5 |    html  { 
 6 |      background-color:transparent; 
 7 |      overflow:hidden;
 8 |    } 
 9 |    body  
10 |    { 
11 |      prototype: Clock url(analog-clock.tis); // will draw clock in between background and content layers
12 |      border-radius:50%; border:3dip solid brown; 
13 |      background:gold; 
14 |      margin:*; // flex margins will move the body in the mddle of the root
15 |      size:300dip; 
16 |      flow:vertical;
17 |      transform:scale(0.1); // initially it is collapsed to center
18 |      overflow:hidden;
19 |      font-size:10pt;
20 |      font-family: "Segoe UI", Tahoma, Helvetica, sans-serif;
21 |      transition: transform quad-out 600ms;     
22 |   }
23 |         
24 |   body.shown { transform:scale(1); }
25 |   body.hidden { transform:scale(0.1); }
26 |   
27 |   body > header { text-align:center; color:brown; margin-top:36dip; font-weight:bold; }
28 |    
29 |   body > footer { flow:vertical; margin-top:*; margin-bottom:20dip; }
30 |   body > footer > button { display:block; background:transparent; margin:8dip *; border: 1px solid brown; border-radius:4dip; font-rendering-mode:sub-pixel; /*for better font scaling*/ }
31 |   body > footer > button:hover { background-color:white; transition: background-color(linear,300ms);  }
32 |   body > footer > input { display:block; margin:8dip *; }
33 |   
34 | 
35 | </style>
36 | <script type="text/tiscript">
37 |   
38 |   const body = $(body);
39 |   
40 |   function self.ready() // html loaded - DOM ready
41 |   {
42 |     view.caption = "Sciter Clock";
43 |   
44 |     // positioning the window in the middle of the screen:
45 |     var (sx,sy,sw,sh) = view.screenBox(#workarea,#rectw); // gettting screen/monitor size
46 |     var (w,h) = self.$(body).box(#dimension, #border); 
47 |     view.move( sx + (sw - w) / 2, sy + (sh - h) / 2, w, h);
48 |     body.timer(40, function() { body.attributes.addClass("shown") });
49 |     $(span#platform).text = System.PLATFORM;
50 |   }
51 | 
52 |   // <button #close> click handler 
53 |   event click $(#close)
54 |   {
55 |     body << event animationend { view.close(); };
56 |     body.attributes.removeClass("shown");
57 |   }
58 | 
59 |   // <button #minimize> click handler
60 |   event click $(#minimize)
61 |   {
62 |     view.state = View.WINDOW_MINIMIZED;
63 |   }
64 | 
65 | </script>
66 | 
67 | </head>
68 | <body>
69 |   <header role="window-caption"><span #platform /></header>
70 |   <footer>
71 |     <button #minimize>Minimize Window</button>
72 |     <button #close>Close Window</button>
73 |   </footer>
74 | </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/samples/hello-window/bin/hello-window.dat:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sciter-sdk/quark/9eded99809f6c74abfd60476dd9b53060562c3a9/samples/hello-window/bin/hello-window.dat


--------------------------------------------------------------------------------
/samples/hello-window/bin/hello-window.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sciter-sdk/quark/9eded99809f6c74abfd60476dd9b53060562c3a9/samples/hello-window/bin/hello-window.ico


--------------------------------------------------------------------------------
/samples/hello-window/bin/windows/x32/hello-window.exe:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sciter-sdk/quark/9eded99809f6c74abfd60476dd9b53060562c3a9/samples/hello-window/bin/windows/x32/hello-window.exe


--------------------------------------------------------------------------------
/samples/hello-window/src/flat-theme-demo.htm:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>Test</title>
 4 |         <style>
 5 | 
 6 |           @import url(flat-theme.css);
 7 | 
 8 |           html { overflow: scroll-indicator; }
 9 | 
10 |           html[ui-size=compact] { font:system; }
11 | 
12 |           form.toggles { flow:row(label,toggle); border-spacing:0.5em; }
13 |           h2,label { width:max-content; }
14 | 
15 | 
16 |         </style>
17 |         <script type="text/tiscript">
18 | 
19 |           event click $(radio(size)) {
20 |             self.attributes["ui-size"] = $(radio(size).normal).state.checked ? "normal" : "compact";
21 |           }
22 | 
23 | 
24 |  
25 |         </script>
26 |     </head>
27 |     <body>
28 |     <form#config> 
29 | 
30 |       Sizing: <radio(size).normal #test checked>Normal</radio> <radio(size).compact>Compact</radio>
31 | 
32 |       <include src="flat-theme-elements.htm">
33 | 
34 |     </body>
35 | </html>


--------------------------------------------------------------------------------
/samples/hello-window/src/flat-theme-elements.htm:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   form.toggles { flow:row(label,toggle); border-spacing:0.5em; }
 3 |   h2,label { width:max-content; }
 4 | </style>
 5 | 
 6 | <h2>&lt;toggle> element demo</h2>
 7 | 
 8 | <form.toggles>
 9 |   <label>With options:</label>
10 |   <toggle(foo) checked>
11 |      <option>No</option>
12 |      <option>Yes</option>
13 |   </toggle>
14 |   <label>No options:</label>
15 |   <toggle(bar) />
16 | </form>
17 | 
18 | <h2>&lt;button> element</h2>
19 | 
20 | <button>Do it!</button>
21 | <button role="default-button">Default</button>
22 | <button disabled>Disabled</button>
23 | 
24 | <h2>&lt;radio> element</h2>
25 | 
26 | <radio(rgroup) checked value="true">Yes</radio>
27 | <radio(rgroup) value="false">No</radio>
28 | <radio(rgroup) value="null">Undefined</radio>
29 | 
30 | <radio(rgroupd) disabled checked value="a">Disabled(Checked)</radio>
31 | <radio(rgroupd) disabled value="b">Disabled</radio>
32 | 
33 | <h2>&lt;checkbox> element</h2>
34 | 
35 | <checkbox checked>Foo</checkbox>
36 | <checkbox>Bar</checkbox>
37 | <checkbox mixed>Mixed</checkbox>
38 | 
39 | <checkbox disabled checked value="a">Disabled(Checked)</checkbox>
40 | <checkbox disabled value="b">Disabled</checkbox>
41 | 
42 | 
43 | <h2>&lt;editbox> element</h2>
44 | 
45 | <div.hbox><editbox value="foo" />
46 |   <editbox novalue="input text here" />
47 |   <editbox nullable novalue="nullable" />
48 |   <editbox disabled value="disabled" />
49 | </div>
50 | 
51 | <h2>&lt;select|dropdown> element</h2>
52 | <div.hbox>
53 |   <select|dropdown novalue="dropdown"><option>Apple</option><option>Apricot</option><option>Currant</option><option>Grapefruit</option>
54 |           <option>Peach</option><option>Pomegranate</option><option>Tamarind</option></select>
55 | 
56 |   <select|dropdown editable><option>Apple</option><option>Apricot</option><option>Currant</option><option>Grapefruit</option>
57 |           <option>Peach</option><option>Pomegranate</option><option>Tamarind</option></select>
58 | 
59 |   <select|dropdown novalue="disabled" disabled><option>Apple</option><option>Apricot</option><option>Currant</option><option>Grapefruit</option>
60 |           <option>Peach</option><option>Pomegranate</option><option>Tamarind</option></select>
61 | </div>
62 | 
63 | <h2>&lt;slider&gt;</h2>
64 | 
65 | <div.hbox>
66 |   <slider min=0 max=100 value=50 />
67 |   <slider disabled min=0 max=100 value=50 />
68 | </div>
69 | 
70 | <h2>&lt;progress&gt;</h2>
71 | 
72 | <div.hbox>
73 |   0: <progress value=0 max=100 />
74 |   50: <progress value=50 max=100 />
75 |   100: <progress value=100 max=100 />
76 | <!--  undetermined: <progress />-->
77 | </div>
78 | 


--------------------------------------------------------------------------------
/samples/hello-window/src/flat-theme.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   Yet another <toggle> implementation.
  4 |   Based on ::marker  
  5 | 
  6 | */
  7 | 
  8 | html:theme(dark) {
  9 |   var(panel-back): #383838; //#3f3834;
 10 |   var(popup-panel-back): #555; 
 11 |   var(panel-text): #eee;
 12 |   var(back): #000;
 13 |   var(text): #fff;
 14 |   var(border): #aaa;
 15 |   var(button-back):  #555;
 16 |   var(button-pressed-back):#444;  
 17 |   var(hover-border): #eee;
 18 |   var(disabled-text): #888;
 19 |   var(disabled-back): #444;
 20 |   var(hover-option-cover): rgba(255,255,255,0.1);
 21 | }
 22 | 
 23 | //html:theme(light) 
 24 | html:not(:theme(dark))
 25 | {
 26 |   var(panel-back): #f8f8f8;
 27 |   var(popup-panel-back): #f7f7f7; 
 28 |   var(panel-text): #333;
 29 |   var(back): #fff;
 30 |   var(text): #000;
 31 |   var(border): #888;
 32 |   var(button-back):#d7d7d7;
 33 |   var(button-pressed-back):#bbb;
 34 |   var(hover-border): #000;
 35 |   var(disabled-text): #888;
 36 |   var(disabled-back): #eee;
 37 |   var(hover-option-cover): rgba(0,0,0,0.1);
 38 | }
 39 | 
 40 | html {
 41 | 
 42 |   font-family: "Segoe UI", Helvetica, sans-serif;
 43 |   font-size:11pt;
 44 | 
 45 |   var(accent): window-accent-color;  
 46 |   var(accent-text): #fff;  
 47 |   var(border-width): 0.14em;
 48 |   var(border-double-width): 0.28em;
 49 |   var(border-radius):0dip;
 50 |   var(icon-size): window-icon-size;
 51 | 
 52 |   background:color(panel-back);
 53 |   color: color(panel-text);
 54 | }
 55 | 
 56 | .hbox { flow:horizontal-wrap; border-spacing:0.5em; }
 57 | .vbox { flow:vertical; border-spacing:0.5em; }
 58 | 
 59 | @set std-toggle {
 60 |   
 61 |   :root {
 62 |     display:inline-block;
 63 |     behavior:check;
 64 |     flow:stack;
 65 |     border:none;
 66 |     background:none;
 67 |     width:max-content;
 68 |     height:1.4em;
 69 |     padding:0 0 0 42dip;
 70 |     border-radius:0.7em;
 71 |     cursor:pointer;
 72 |   }
 73 | 
 74 |   :root[type="radio"] { behavior:radio; }
 75 | 
 76 |   :root::marker {
 77 |     width:2.24em; 
 78 |     height:1.05em;
 79 |     background:var(back,threedlight);
 80 |     border:length(border-width) solid color(border);
 81 |     border-radius:0.7em;
 82 |     margin:* * * 0.21em;
 83 |     foreground-image:url(stock:disk);
 84 |     foreground-repeat:no-repeat;
 85 |     foreground-position:0.35em 50%;
 86 |     foreground-size:0.7em;
 87 |     fill:color(text);
 88 |     stroke:none;
 89 |   }
 90 |   :root:checked::marker {
 91 |     foreground-position:1.52em 50%;
 92 |     background: color(accent); 
 93 |     border:color(accent);
 94 |     fill:color(accent-text);
 95 |     transition:foreground-position(sine-in,120ms,sine-out,120ms) background-color(linear,120ms) fill(linear,120ms) border(linear,120ms);
 96 |   }
 97 | 
 98 |   :root > option:first-child { visibility:visible; }
 99 |   :root > option:last-child { visibility:hidden; }
100 |   :root:checked > option:first-child { visibility:hidden; }
101 |   :root:checked > option:last-child { visibility:visible; }
102 |   
103 |   :root:tab-focus {
104 |     outline:0.14em solid color(accent) 0.14em;
105 |   }
106 | 
107 |   :root:disabled {
108 |     background: color(accent); 
109 |     border:color(accent);
110 |     fill:color(accent-text);
111 |   }
112 | 
113 | } 
114 | 
115 | toggle {
116 |   style-set: std-toggle;
117 | }
118 | 
119 | @mixin STD-BUTTON-NORMAL 
120 | {
121 |   color:color(text);
122 |   background: color(button-back);
123 |   border: color(button-back);
124 |   border-width: length(border-width);
125 |   border-style: solid;
126 |   border-radius: length(border-radius);
127 |   vertical-align:middle;
128 | }
129 | 
130 | @mixin STD-BUTTON-HOVER 
131 | {
132 |   border-color:color(hover-border);
133 | }
134 | 
135 | @mixin STD-BUTTON-PRESSED {
136 |   background-color:color(button-pressed-back);
137 |   color:color(text);
138 |   padding-top:2px;
139 |   padding-bottom:0px;
140 | }
141 | 
142 | @mixin STD-BUTTON-FOCUS {
143 |   
144 | }  
145 | 
146 | @mixin STD-TAB-FOCUS {
147 |  outline:2dip solid color(accent) 2dip;
148 | }  
149 | 
150 | @mixin STD-BUTTON-DISABLED {
151 |   color:color(disabled-text);
152 |   background-color:color(disabled-back);
153 |   border:color(disabled-back);
154 | }
155 | 
156 | @set std-button < std-button-base
157 | {
158 |   :root
159 |   { 
160 |     //font:system;
161 |     flow:vertical;
162 |     padding:1px 1em; 
163 |     height:2em;
164 |     line-height:height(100%);
165 |     white-space: nowrap;
166 |     @STD-BUTTON-NORMAL;
167 |   }
168 | 
169 |   :root:active                  { @STD-BUTTON-PRESSED; }
170 | 
171 |   :root[role="default-button"] {
172 |     background: color(accent);
173 |     color: color(accent-text);
174 |     border: color(accent);
175 |   }
176 | 
177 |   :root:hover                   { @STD-BUTTON-HOVER; }
178 |   :root:focus                   { @STD-BUTTON-FOCUS; }
179 |   :root:disabled                { @STD-BUTTON-DISABLED; }
180 |   :root:tab-focus               { @STD-TAB-FOCUS; }
181 | }
182 | 
183 | /* radio button */
184 | @set std-radio < std-radio-base
185 | {
186 |     input:root
187 |     { 
188 |       padding:0px; 
189 |       size:1.12em;
190 |       vertical-align:middle;
191 |     }
192 | 
193 |     :root:not(input) 
194 |     {
195 |       white-space:nowrap;
196 |       line-height:1.4em;
197 |       height:1.4em;      
198 |       padding:0.25em 0.25em 0.25em 1.82em;
199 |       width:max-content;
200 |     }
201 | 
202 |     :root::marker {
203 |       size:1.12em;
204 |       margin:*;
205 |       background: color(back) no-repeat 50% 50%;
206 |       border:0.14em solid color(accent);
207 |       border-radius:50%;
208 |     }
209 | 
210 |     :root:not(input)::marker { margin:* * * 0.21em; }
211 |     :root:not(input)::marker:rtl { margin:* 0.21em * *; }
212 | 
213 |     //:root:active::marker { background-color: @HIGHLIGHT-HOVER; }
214 | 
215 |     :root:checked::marker {
216 |       background-image: url(stock:disk);
217 |       background-size:0.63em;
218 |       fill:color(panel-text);
219 |     }
220 | 
221 |     :root:hover::marker { fill:color(text); }
222 | 
223 |     :root:disabled {
224 |       color:color(disabled-text);
225 |     }
226 | 
227 |     :root:disabled::marker { 
228 |       background-color: color(disabled-back);
229 |       fill:color(disabled-text);
230 |       border: color(disabled-text);
231 |     }
232 |     :root:tab-focus { @STD-TAB-FOCUS; }    
233 | }
234 | 
235 | radio { display:inline-block; style-set: std-radio; }
236 | 
237 | /* checkbox button */
238 | @set std-checkbox < std-checkbox-base
239 | {
240 |     :root
241 |     {
242 |       height:@SMALL-ICON-SIZE; 
243 |       width:@SMALL-ICON-SIZE; 
244 |       vertical-align:middle;
245 |     }
246 | 
247 |     :root:not(input)
248 |     {
249 |       white-space:nowrap;
250 |       line-height:1.4em;
251 |       padding:0.25em 0.25em 0.25em 1.82em;
252 |       width:max-content;
253 |       height:1.4em;
254 |     }
255 | 
256 |     :root::marker {
257 |       size:1.05em;
258 |       margin:*;
259 |       background: color(back) no-repeat 60% 50%;
260 |       border:0.14em solid color(border);
261 |     }
262 | 
263 |     :root:not(input)::marker { margin:* * * 0.21em; }
264 |     :root:not(input)::marker:rtl { margin:* 0.21em * *; }
265 | 
266 |     :root:active::marker { background-color: @HIGHLIGHT-HOVER; }
267 | 
268 |     :root:checked::marker {
269 |       background-image: url(path:M 0 3 L 3 6 L 9 0);
270 |       background-size:0.93em;
271 |       stroke:color(accent-text);
272 |       stroke-width:0.14em; 
273 |       background-color: color(accent);
274 |       border: color(accent);
275 |     }
276 | 
277 |     :root[mixed]:empty::marker {
278 |       background-image: url(path:M 0 0 H 9 V 9 H 0 Z);
279 |       background-size:0.63em;
280 |       background-position:50% 50%;
281 |       fill: color(panel-text);
282 |       stroke:none;
283 |     }
284 | 
285 |     :root:hover::marker {
286 |       border-color:color(hover-border);
287 |     }          
288 | 
289 |     :root:disabled {
290 |       color:color(disabled-text);
291 |     }
292 | 
293 |     :root:disabled::marker { 
294 |       background-color: color(disabled-back);
295 |       stroke:color(disabled-text);
296 |       border: color(disabled-text);
297 |     }
298 | 
299 |     :root:tab-focus { @STD-TAB-FOCUS; }
300 | 
301 | }
302 | 
303 | checkbox { display:inline-block; style-set: std-checkbox; }
304 | 
305 | @mixin STD-BOX-NORMAL 
306 | {
307 |   color:color(text);
308 |   background: color(back);
309 |   border:0.14em solid color(border);
310 |   text-selection: color(text) transparent;
311 |   padding:0.2em 0.4em;
312 |   vertical-align:middle;
313 | }
314 | 
315 | @mixin STD-BOX-HOVER 
316 | {
317 |   border-color:color(hover-border);
318 | }
319 | 
320 | @mixin STD-BOX-FOCUS {
321 |   text-selection: color(accent-text) color(accent);
322 | }  
323 | 
324 | @mixin STD-BOX-DISABLED {
325 |   background-color: color(disabled-back);
326 |   color:color(disabled-text);
327 |   border-color: color(disabled-text);
328 | }
329 | 
330 | @mixin STD-BOX-EMPTY {
331 |   color:color(disabled-text);
332 |   font-style:italic;
333 | }
334 | 
335 | @set std-edit < std-edit-base
336 | {
337 |   :root {
338 |     @STD-BOX-NORMAL;
339 |     padding:0.2em 0.4em;
340 |   }
341 |   
342 |   :root:owns-popup,
343 |   :root:focus       { @STD-BOX-FOCUS; }
344 | 
345 |   :root:hover       { @STD-BOX-HOVER; }
346 | 
347 |   :root:disabled    { @STD-BOX-DISABLED; }     
348 | 
349 |   :root:empty       { @STD-BOX-EMPTY; }
350 | 
351 |   :root:tab-focus   { @STD-TAB-FOCUS; }
352 | 
353 |   :root[nullable] {
354 |     aspect: Flat.Nullable url(flat-theme.tis);
355 |     padding-right:1.2em;
356 |   }
357 | 
358 |   :root[nullable]:not(:empty) {
359 |     stroke-width:1.44dip;
360 |     stroke:color(border);
361 |     foreground-position-top: 50%;
362 |     foreground-position-right: 0.5em;
363 |     foreground-repeat: no-repeat;
364 |     foreground-size:0.7em;
365 |     foreground-image-cursor: pointer;
366 |     foreground-image: url(path:M0 0 L9 9 M9 0 L0 9);     
367 |   }
368 | 
369 | }
370 | 
371 | editbox { display:inline-block; style-set:std-edit; }
372 | 
373 | 
374 | /* dropdown combobox */
375 | @set std-select-dropdown < std-select-dropdown-base
376 | {
377 |   :root
378 |   { 
379 |     white-space: nowrap;
380 |     @STD-BOX-NORMAL;
381 |     padding:0;
382 |     width:auto; 
383 |     height:1.8em;
384 |   }
385 |       
386 |   :root:hover                   { @STD-BOX-HOVER; }
387 |   :root:focus                   { @STD-BOX-FOCUS; }
388 |   //:root:active                  { @STD-BOX-PRESSED; }
389 |   :root:disabled                { @STD-BOX-DISABLED; }
390 |   :root:tab-focus               { @STD-TAB-FOCUS; }  
391 | 
392 |   /* caption portion of combobox */
393 |   :root > caption
394 |   { 
395 |     padding:0 0.4em;
396 |     min-width:2em;
397 |     color:inherit; 
398 |     line-height:1.8em;
399 |   }
400 |   
401 |   /* popup select element */
402 |   :root > popup.list
403 |   { 
404 |     margin:0;
405 |     padding:0; 
406 |     border:none;
407 |     background: color(popup-panel-back);
408 |     border:0.14em solid color(border);
409 |     margin-top:-0.14em;
410 |     //box-shadow: 0.1em 0.1em 0.5em #000;
411 |   }
412 | 
413 |   :root:hover > popup.list {
414 |     border-color:color(hover-border);
415 |   }
416 |   
417 |   option { padding:0.2em 0.4em; color: color(text); background:transparent; fill:color(text); }
418 |   option:current
419 |   {
420 |     background-color:color(accent); color:color(accent-text); fill: color(accent-text);
421 |   }
422 | 
423 |   option:hover {
424 |     foreground-color: color(hover-option-cover);
425 |   }
426 |   
427 |   optgroup > caption 
428 |   { 
429 |     font-weight:bold; 
430 |   }
431 |   optgroup > option 
432 |   { 
433 |     padding-left:1em; 
434 |   }
435 |   optgroup > option:rtl
436 |   { 
437 |     padding-right:1em; 
438 |     padding-left:0; 
439 |   }
440 |   
441 |   /* dropdown button of the combobox */
442 |   :root > button
443 |   {
444 |     display :block; 
445 |     width   :1.4em;
446 |     height  :*;
447 |     padding :0; 
448 |     background:transparent; 
449 |     border:none;
450 |     foreground-image:url(path:M 0 0 L 5 5 L 10 0); /* that arrow */
451 |     fill:none;
452 |     stroke-width:1.44dip;
453 |     stroke:color(border);
454 |     foreground-position: 50% 50%;
455 |     foreground-repeat: no-repeat;
456 |     foreground-size:0.77em 0.38em;
457 |   }
458 |   
459 |   :root[editable] > caption {
460 |     background: color(back);
461 |     text-selection: color(text) transparent;
462 |   }
463 | 
464 |   :root:not([editable]):empty > caption { @STD-BOX-EMPTY; }
465 | 
466 |   :root:owns-popup[editable] > caption,
467 |   :root[editable] > caption:focus
468 |   {  
469 |     text-selection: color(accent-text) color(accent); 
470 |   } 
471 |   
472 |   :root[editable] > button
473 |   {
474 |     background: color(button-back);
475 |     stroke:color(panel-text);
476 |   }
477 | 
478 |   :root[multiple] > popup > option { padding-left:2em; }
479 |   :root:rtl[multiple] > popup > option { padding-right:2em; padding-left:0em;}
480 | 
481 |   :root[multiple] > span.count 
482 |   {
483 |     padding:0 0.14em;
484 |     margin:0.14em;
485 |     border-left:0.07em color(border) solid;
486 |     border-right:0.07em color(border) solid;
487 |   }
488 |  
489 | }
490 | 
491 | @set std-hslider < std-slider-base
492 | {
493 |   :root 
494 |   {
495 |     width:8em;
496 |     aspect: Flat.HSlider url(flat-theme.tis);
497 |     height:0.14em;
498 |     background: color(border);
499 |     background-clip: content-box;
500 |     padding:0.7em;
501 |     overflow:visible;
502 |   }
503 |       
504 |   :root > button.slider { 
505 |     width:0.56em; 
506 |     height:1.4em; 
507 |     foreground: none; 
508 |     background: color(accent); 
509 |     border:none;
510 |     border-radius:0.28em;
511 |   }
512 |   
513 |   :root:disabled { background: color(disabled-text); }
514 |   :root:disabled > button { background: color(disabled-text); }
515 | }
516 | 
517 | slider { display:inline-block; style-set:std-hslider; }
518 | 
519 | @set std-progress
520 | {
521 |   :root
522 |   {
523 |     @STD-BOX-NORMAL;
524 |     behavior:none; // not using default behavior
525 |     aspect: Flat.Progress url(flat-theme.tis);
526 |     width:8em;
527 |     height:0.28em;
528 |     color: color(accent);
529 |     //color: red;
530 |     border-style:none;
531 |     border-radius:0;
532 |     padding:0;
533 |   }
534 | }
535 | 
536 | progress { display:inline-block; style-set:std-progress; }


--------------------------------------------------------------------------------
/samples/hello-window/src/flat-theme.tis:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace Flat {
 3 | 
 4 |   function Nullable() 
 5 |   {
 6 |     this << event ~mousedown(evt) {
 7 |       if( evt.isOnIcon ) { 
 8 |         if(this.execCommand("edit:selectall")) // to make it undoable
 9 |           this.execCommand("edit:delete-next");
10 |         else 
11 |           this.value = undefined; 
12 |         return true;
13 |       }
14 |     }
15 |   }
16 | 
17 |   function HSlider() 
18 |   {
19 |     var button = this.$(button);
20 |     this.paintContent = function(gfx) // using paintContent here to draw on top of background
21 |     {
22 |       var (x1,y1,x2,y2) = button.box(#rect,#border,#parent);
23 |       var (w,h) = this.box(#dimension,#inner);
24 |       gfx.fillColor( button.style["background-color"] )
25 |          .rectangle(0,0,(x1+x2)/2,h);
26 |     }
27 |   }
28 | 
29 |   function Progress() 
30 |   {
31 |     var _max = (this.attributes["max"] || "100").toFloat();   
32 |     var _min = (this.attributes["min"] || "0").toFloat();   
33 |     
34 |     var _val;
35 |     
36 |     function paintValue(gfx) 
37 |     {
38 |       var (w,h) = this.box(#dimension,#inner);
39 |       var sw = _val / (_max - _min) * w;
40 |       gfx.fillColor( this.style#color )
41 |          .rectangle(0,0,sw,h);
42 |       return true;
43 |     }
44 | 
45 |     var pos = -0.25; // 
46 | 
47 |     function step() {
48 |       if( _val !== undefined ) { this.refresh(); return false; }
49 |       pos += 0.02;
50 |       if( pos > 1.25) 
51 |         pos = -0.25;
52 |       this.refresh();
53 |       return true;
54 |     }     
55 | 
56 |     function paintNoValue(gfx) 
57 |     {
58 |       var (w,h) = this.box(#dimension,#inner);
59 |       var x = pos * w;
60 |       w = w * 0.25;
61 |       gfx.fillColor( this.style#color )
62 |          .pushLayer(#inner-box)
63 |          .rectangle(x,0,w,h)
64 |          .popLayer();
65 |       return true;
66 |     }
67 | 
68 |     this[#value] = property(v) {
69 |       get return _val;
70 |       set {
71 |         if( v === undefined ) {
72 |           _val = undefined;
73 |           pos = -0.25;
74 |           this.paintContent = paintNoValue;
75 |           //this.timer(16ms,step);
76 |           this.animate(step);
77 |         }
78 |         else if(v !== _val)
79 |         {
80 |           this.paintContent = paintValue;
81 |           _val = Float.min(v,_max);
82 |           _val = Float.max(_val,_min);
83 |         }
84 |         this.refresh();
85 |       }
86 |     }
87 | 
88 |     this.value = parseData(this.attributes["value"] || "");
89 | 
90 |   }
91 | 
92 | 
93 | }


--------------------------------------------------------------------------------
/samples/hello-window/src/icon.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
  3 | <svg
  4 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  5 |    xmlns:cc="http://creativecommons.org/ns#"
  6 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  7 |    xmlns:svg="http://www.w3.org/2000/svg"
  8 |    xmlns="http://www.w3.org/2000/svg"
  9 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 10 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 11 |    width="128"
 12 |    height="128"
 13 |    id="svg2"
 14 |    sodipodi:version="0.32"
 15 |    inkscape:version="0.46"
 16 |    version="1.0"
 17 |    sodipodi:docbase="D:\Documents and Settings\Joanna\My Documents\My Pictures\graph_vector\fruits"
 18 |    sodipodi:docname="papapishu_window.svg"
 19 |    inkscape:export-filename="C:\joanna\Gfx\drawings_vector\nature_plants\fruits\papapishu_home.png"
 20 |    inkscape:export-xdpi="90"
 21 |    inkscape:export-ydpi="90"
 22 |    inkscape:output_extension="org.inkscape.output.svg.inkscape">
 23 |   <defs
 24 |      id="defs4">
 25 |     <inkscape:perspective
 26 |        sodipodi:type="inkscape:persp3d"
 27 |        inkscape:vp_x="0 : 186.64798 : 1"
 28 |        inkscape:vp_y="0 : 1000 : 0"
 29 |        inkscape:vp_z="559.62469 : 186.64798 : 1"
 30 |        inkscape:persp3d-origin="279.81235 : 124.43199 : 1"
 31 |        id="perspective4876" />
 32 |   </defs>
 33 |   <sodipodi:namedview
 34 |      id="base"
 35 |      pagecolor="#ffffff"
 36 |      bordercolor="#666666"
 37 |      borderopacity="1.0"
 38 |      gridtolerance="10"
 39 |      guidetolerance="10"
 40 |      objecttolerance="10000"
 41 |      inkscape:pageopacity="0.0"
 42 |      inkscape:pageshadow="2"
 43 |      inkscape:zoom="4.2109375"
 44 |      inkscape:cx="64"
 45 |      inkscape:cy="73.888856"
 46 |      inkscape:document-units="px"
 47 |      inkscape:current-layer="layer1"
 48 |      inkscape:window-width="1280"
 49 |      inkscape:window-height="744"
 50 |      inkscape:window-x="-4"
 51 |      inkscape:window-y="-4"
 52 |      showgrid="true"
 53 |      borderlayer="true"
 54 |      showguides="true"
 55 |      inkscape:guide-bbox="true"
 56 |      inkscape:snap-global="false">
 57 |     <inkscape:grid
 58 |        type="xygrid"
 59 |        id="grid7194"
 60 |        visible="true"
 61 |        enabled="true"
 62 |        spacingx="8px"
 63 |        spacingy="8px" />
 64 |   </sodipodi:namedview>
 65 |   <metadata
 66 |      id="metadata7">
 67 |     <rdf:RDF>
 68 |       <cc:Work
 69 |          rdf:about="">
 70 |         <dc:format>image/svg+xml</dc:format>
 71 |         <dc:type
 72 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 73 |       </cc:Work>
 74 |     </rdf:RDF>
 75 |   </metadata>
 76 |   <g
 77 |      inkscape:label="Layer 1"
 78 |      inkscape:groupmode="layer"
 79 |      id="layer1"
 80 |      transform="translate(-66.38047,-391.3222)">
 81 |     <path
 82 |        id="path7304"
 83 |        d="M 95.556318,434.65407 L 165.25811,434.65407 L 165.25811,490.10429 L 95.556318,490.10429 L 95.556318,434.65407 z"
 84 |        style="fill:#01afaf;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:5.24121141000000000;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
 85 |     <path
 86 |        style="fill:#06c706;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
 87 |        d="M 98.38047,463.79716 C 126.05837,466.8429 139.53586,475.91305 146.38047,487.79716 L 98.38047,487.79716 L 98.38047,463.79716 z"
 88 |        id="path7300"
 89 |        sodipodi:nodetypes="cccc" />
 90 |     <path
 91 |        sodipodi:nodetypes="cccc"
 92 |        id="path7302"
 93 |        d="M 165.46767,465.22201 C 137.78977,468.26775 124.31228,477.33791 117.46767,489.22201 L 165.46767,489.22201 L 165.46767,465.22201 z"
 94 |        style="fill:#06c706;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1" />
 95 |     <path
 96 |        style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:5.24121141;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
 97 |        d="M 96.506224,434.65407 L 166.20801,434.65407 L 166.20801,490.10429 L 96.506224,490.10429 L 96.506224,434.65407 z"
 98 |        id="rect7265" />
 99 |     <path
100 |        style="fill:#80ffff;fill-rule:evenodd;stroke:#000000;stroke-width:5.24121141000000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;opacity:1;fill-opacity:1"
101 |        d="M 95.532809,434.35736 L 74.567964,420.38079 L 74.567964,497.25189 L 95.532809,490.26361 L 95.532809,434.35736 z"
102 |        id="path7270"
103 |        sodipodi:nodetypes="ccccc" />
104 |     <path
105 |        style="fill:#00ffff;fill-rule:evenodd;stroke:#000000;stroke-width:5.24121141;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
106 |        d="M 74.567964,455.3222 L 95.532809,462.31048"
107 |        id="path7272"
108 |        sodipodi:nodetypes="cc" />
109 |     <g
110 |        style="fill:#80ffff;fill-opacity:1"
111 |        id="g7278"
112 |        transform="matrix(-0.8735352,0,0,0.8735352,244.36615,64.570513)">
113 |       <path
114 |          style="fill:#80ffff;fill-rule:evenodd;stroke:#000000;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
115 |          d="M 24,32 L 0,16 L 0,104 L 24,96 L 24,32 z"
116 |          id="path7280"
117 |          transform="translate(66.38047,391.3222)" />
118 |       <path
119 |          style="fill:#80ffff;fill-rule:evenodd;stroke:#000000;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1"
120 |          d="M 0,56 L 24,64"
121 |          id="path7282"
122 |          transform="translate(66.38047,391.3222)"
123 |          sodipodi:nodetypes="cc" />
124 |     </g>
125 |   </g>
126 | </svg>
127 | 


--------------------------------------------------------------------------------
/samples/hello-window/src/index.htm:
--------------------------------------------------------------------------------
  1 | <html window-frame="extended" window-blurbehind="dark" theme="light">
  2 |     <head>
  3 |         <title>Hello Window</title>
  4 |         <style>
  5 | 
  6 |           @import url(flat-theme.css);
  7 |           //@import url(unisex-theme.css);
  8 | 
  9 |           @const WINDOW-CAPTION-HEIGHT: window-caption-height;
 10 |           @const WINDOW-BUTTON-WIDTH: window-button-width;
 11 |           @const WINDOW-BUTTON-HEIGHT: window-button-height;
 12 | 
 13 |           html { 
 14 |             padding: window-frame-width;             
 15 |             background:transparent; /*border:2dip solid #aaa;*/; 
 16 |             overflow:hidden;
 17 |           }
 18 | 
 19 |           html > body { margin:0; }
 20 | 
 21 |           html > header { position:fixed; top:window-frame-width; left:window-frame-width; right:window-frame-width; height:window-caption-height; /*border:1px solid red;*/ }
 22 | 
 23 |           html > header { font:system; flow:horizontal; height:window-caption-height; margin:0;} 
 24 |           html > header > window-caption { color:#fff; display:block; line-height:window-caption-height; width:*; padding:0 1em; }
 25 |           html > header > window-buttons { display:block; flow:horizontal; width:max-content; height:2em; }
 26 |           html > header > window-buttons > window-button { 
 27 |             behavior:clickable; 
 28 |             display:block; 
 29 |             height:@WINDOW-BUTTON-HEIGHT; 
 30 |             width:@WINDOW-BUTTON-WIDTH; 
 31 |             foreground-size: 10dip;
 32 |             foreground-repeat: no-repeat;
 33 |             foreground-position:50% 50%;
 34 |             stroke:color(text);
 35 |             stroke-width:1dip;
 36 |           }
 37 |           html > header > window-buttons > window-button:hover { 
 38 |             background:rgba(128,128,128,0.5); 
 39 |             transition: background-color(linear,100ms);
 40 |           }
 41 |           html > header > window-buttons > window-button[role="window-close"] { foreground-image: url(path:M0 0 L9 10 M9 0 L0 9); }
 42 |           html > header > window-buttons > window-button[role="window-close"]:hover { background:rgb(232,17,35); stroke:#fff; }
 43 | 
 44 |           html > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 0 H9 V9 H0 Z); }
 45 | 
 46 |           html[state="maximized"] > header > window-buttons > window-button[role="window-maximize"] { foreground-image: url(path:M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2); }
 47 |           html > header > window-buttons > window-button[role="window-minimize"] { foreground-image: url(path:M0 0 M0 4.5 H9 M9 9); }
 48 | 
 49 |           @media platform == "OSX" {
 50 |             html > header > window-buttons { display:none; /*as sciter will show native OSX icons*/ }
 51 |             html > header > window-caption { margin-left:0.2*; width:0.8*; color:#000; }
 52 |           }
 53 | 
 54 |           body {
 55 |             flow:horizontal;
 56 |             font:system;
 57 |           }
 58 | 
 59 |           body > section { padding-top: @WINDOW-CAPTION-HEIGHT; height:*;}
 60 | 
 61 |           body > section.n1 {  width:0.2*; }
 62 |           body > section.n2 {  width:0.3*; background:morph(color(back),opacity:0.8);}
 63 |           body > section.n3 {  width:0.5*; background:color(panel-back); }
 64 | 
 65 | 
 66 |           icon {
 67 |             display:block;
 68 |             margin:*;
 69 |             size:64dip;
 70 |             background-color: var(accent,#00f);
 71 |             border-radius: 32dip;
 72 |             background-image: url(path:M1472 704v128q0 221-147.5 384.5t-364.5 187.5v132h256q26 0 45 19t19 45-19 45-45 19h-640q-26 0-45-19t-19-45 19-45 45-19h256v-132q-217-24-364.5-187.5t-147.5-384.5v-128q0-26 19-45t45-19 45 19 19 45v128q0 185 131.5 316.5t316.5 131.5 316.5-131.5 131.5-316.5v-128q0-26 19-45t45-19 45 19 19 45zm-256-384v512q0 132-94 226t-226 94-226-94-94-226v-512q0-132 94-226t226-94 226 94 94 226z);
 73 |             background-position:50% 50%;
 74 |             background-repeat:no-repeat;
 75 |             background-size: 18dip;
 76 |             fill:#fff;
 77 |           }
 78 | 
 79 |           .caption { color: var(accent,#00f); }
 80 | 
 81 |           section.n2 > header {
 82 |             margin:1em;
 83 |             line-height:2em;
 84 |             border-bottom: 1dip solid #aaa;
 85 |           }
 86 | 
 87 |           section.n2 li {
 88 |             display:block;
 89 |             behavior:radio;
 90 |             border-left: 0.3em solid transparent;
 91 |             padding:0.5em 0.5em 0.5em 0.7em;
 92 |           }
 93 | 
 94 |           section.n2 li:checked {
 95 |             border-color: var(accent,#00f);
 96 |             background-color: morph(color(back),opacity:0.4);
 97 |           }
 98 | 
 99 |           section.n2 li > caption { font-weight:bold; line-height:2em; }
100 |           section.n2 li:checked > caption { color: var(accent,#00f); }
101 | 
102 |           section.n2 li > div { flow:horizontal; border-spacing:0.5em; }
103 |           section.n2 li > div > span { margin-left:*; }
104 | 
105 |         </style>
106 |         <script type="text/tiscript">
107 | 
108 |         </script>
109 |     </head>
110 | <header>
111 |   <window-caption role=window-caption>Hello Window</window-caption>
112 |   <window-buttons>
113 |     <window-button role="window-minimize" />
114 |     <window-button role="window-maximize" />
115 |     <window-button role="window-close" />
116 |   </window-buttons>
117 | </header>
118 | <body>
119 | 
120 |    <section.n1><icon/></section>
121 |    <section.n2>
122 |       <header.caption>Today</header>
123 |       <li>
124 |         <caption.header>Remainder</caption>
125 |         <div>
126 |            <output|date value="2018-06-17" format="long" />
127 |            <output|time value="12:40" format="short" />
128 |            <span>007</span>
129 |         </div>
130 |       </li>
131 |       <li checked>
132 |         <caption.header>Server cutoff time</caption>
133 |         <div>
134 |            <output|date value="2018-06-16" format="long" />
135 |            <output|time value="8:00" format="short" />
136 |            <span>042</span>
137 |         </div>
138 |       </li>
139 |       <li>
140 |         <caption.header>Home inspection</caption>
141 |         <div>
142 |            <output|date value="2018-06-15" format="long" />
143 |            <output|time value="14:00" format="short" />
144 |            <span>044</span>
145 |         </div>
146 |       </li>
147 |    </section>
148 |    <section.n3>
149 |      <frame src="flat-theme-demo.htm" />
150 |    </section>
151 | </body>
152 | <!--<footer>Foo</footer>-->
153 | </html>


--------------------------------------------------------------------------------
/samples/hello-world/src/globe.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="iso-8859-1"?>
  2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 | 	 viewBox="0 0 511.266 511.266" style="enable-background:new 0 0 511.266 511.266;" xml:space="preserve">
  5 | <circle style="fill:#65B1EF;" cx="255.616" cy="255.633" r="255.616"/>
  6 | <g>
  7 | 	<path style="fill:#E9EFF4;" d="M131.392,470.129c-0.048,0.096-0.112,0.16-0.16,0.256c0.384,0.096,0.752,0.224,1.136,0.304
  8 | 		L131.392,470.129z"/>
  9 | 	<path style="fill:#E9EFF4;" d="M115.312,109.857l-0.512-1.04c4.272-0.64,4.56-3.648,7.808-4.752c3.696-1.216,2.432,0.112,6.064,0
 10 | 		c2.944-0.128,4.736,2.016,8.096,0.448c-0.816,1.44-2.144,2.432-3.472,3.408c-2.768,1.968-5.6,3.984-8.896,4.752
 11 | 		C121.104,113.425,117.232,112.625,115.312,109.857z"/>
 12 | 	<path style="fill:#E9EFF4;" d="M166.448,337.697c-0.064,2.256-1.392,4.224-2.544,6.128c-5.136,8.384-8.256,18.096-8.944,27.936
 13 | 		c-0.688,9.424-0.272,21.04-8.48,25.68c-4.688,2.608-11.28,2.144-14.4,6.544c-0.976,1.328-1.44,3.008-1.904,4.576
 14 | 		c-2.016,7.344-4.048,14.688-6.064,22.032c-2.608-0.224-5.264-0.512-7.856-0.8c3.072,0.976,5.2,5.136,3.36,7.984
 15 | 		c-2.944-1.552-6.816,0.288-8.448,3.248c-1.552,2.944-1.328,6.528-0.464,9.776c2.672,9.6,10.88,17.344,20.544,19.648
 16 | 		c-1.68,3.184-6.816,1.792-9.952-0.336c-22.384-15.136-39.28-38.192-46.992-64.096c-2.72-9.136-4.464-18.848-9.792-26.704
 17 | 		c-4.448-6.64-11.168-11.504-15.616-18.144c-6.24-9.536-7.408-21.904-14.64-30.624c-4.048-4.976-10.304-11.088-6.72-16.416
 18 | 		c1.44-2.192,4.512-4.272,3.296-6.592c-0.4-0.752-1.216-1.216-1.856-1.856c-2.432-2.608-0.752-6.704,0.464-10.064
 19 | 		c2.016-5.84,2.016-12.08,1.152-18.32c-6.08-5.44-10.88-12.192-13.888-19.776c-1.792-4.624-4.176-10.4-9.136-10.464
 20 | 		c-1.28-3.584-2.608-7.168-3.888-10.752c-0.464,1.28-1.728,2.08-3.12,2.256C4.4,179.985,28.016,126.833,64.768,85.649
 21 | 		c0.816-0.352,1.616-0.816,2.432-1.28c8.72-5.088,15.664-12.72,24.096-18.272c1.728-1.152,3.696-2.256,5.84-2.032
 22 | 		c2.08,0.176,4.048,2.304,3.296,4.272c-0.288,0.816-0.976,1.456-1.68,1.968c-9.872,8.4-20.688,15.744-32.192,21.824
 23 | 		c-1.376,0.688-2.832,1.504-3.456,2.896c-1.168,2.368,0.8,5.312,3.296,6.176c2.48,0.864,5.264,0.352,7.808-0.224
 24 | 		c-2.144,3.056-2.784,7.168-1.68,10.752c2.368,0.224,3.12-3.008,3.824-5.264c2.88-8.96,17.168-12.608,16.24-22.048
 25 | 		c3.872,2.016,7.808-2.496,10.176-6.192c2.368-3.76,7.632-7.456,10.528-4.16c0.16,1.84,0.384,3.696,0.56,5.552
 26 | 		c5.088-1.28,10.24-2.608,15.328-3.888c-2.896,2.032-3.872,6.368-2.208,9.488c1.68,3.12,5.84,4.688,9.136,3.408
 27 | 		c-0.048,2.72-2.48,4.8-4.688,6.416c-5.6,4.224-11.616,8.56-18.144,10.64l1.504,3.12c-0.16,0.064-0.336,0.128-0.512,0.128
 28 | 		c-4.16,0.4-8.56-2.592-13.008-2.016c-2.72,0.352-6.064,0.352-7.632,3.12c-0.224,0.352-1.2,5.2-0.512,4.8
 29 | 		c2.432-1.392,4.848-2.784,7.232-4.16c0.736,1.968,0.912,4.16,0.512,6.304c2.944-0.288,6.016,0.336,8.624,1.904
 30 | 		c-2.72,6.304-9.712,10.528-16.592,10c-0.064-2.08-0.176-4.16-0.24-6.24c-5.664-0.464-10.288,4.4-13.12,9.264
 31 | 		c-2.88,4.912-5.072,10.528-9.824,13.648c-2.88,1.968-6.416,2.72-9.536,4.336c-3.056,1.68-5.888,4.864-5.248,8.272
 32 | 		c0.288,1.616,1.328,3.12,1.28,4.8c-0.176,3.12-3.808,4.576-6.24,6.592c-4.16,3.472-5.2,9.84-9.648,12.896
 33 | 		c-3.232,2.256-7.52,2.208-11.28,3.36c-3.76,1.152-7.52,4.912-6,8.56c-1.856,0.64-4.112-0.752-4.288-2.72
 34 | 		c-6.64,13.072-11.024,27.296-12.816,41.872c3.296,2.304,6.64-2.96,7.28-6.944c0.688-3.984,4.16-9.2,7.392-6.832
 35 | 		c-0.752,5.728-1.504,11.392-2.24,17.12c-0.176,1.104-0.288,2.256,0.24,3.232c0.64,1.216,2.016,1.728,3.072,2.592
 36 | 		c2.944,2.544,2.544,7.056,2.72,10.928c0.176,4.736,1.744,9.36,4.224,13.408c-0.24-0.816-0.4-1.616-0.576-2.432
 37 | 		c4.512,0.576,9.2-0.88,12.608-3.888c1.792-1.616,3.296-3.696,5.552-4.512c2.32-0.864,4.864-0.24,7.232,0.4
 38 | 		c7.344,2.016,15.152,4.272,20.064,10.048c2.48,2.944,4.048,6.656,7.008,9.072c6.704,5.664,18.048,3.168,24.176,9.472
 39 | 		c4.912,5.088,4,13.296,2.672,20.288c-3.36-1.84-7.856,2.784-5.888,6.08c1.792-1.968,3.872-4.048,6.48-4.048
 40 | 		c2.656-0.064,4.976,3.584,3.008,5.264c4.624-5.904,15.952-3.472,17.744,3.872c6.48,0.464,13.008,0.912,19.488,1.44
 41 | 		C146.944,327.585,166.848,328.145,166.448,337.697z"/>
 42 | 	<path style="fill:#E9EFF4;" d="M127.04,70.193c-2.496,1.232-5.936-0.16-6.864-2.784c-0.944-2.624,0.832-5.872,3.552-6.496
 43 | 		c1.712-0.4,4.096-0.208,4.624-1.888c0.16-0.512,0.064-1.072,0.064-1.6c-0.064-3.168,2.768-5.792,5.824-6.592
 44 | 		c3.056-0.784,6.288-0.176,9.392,0.432c1.104,2.288,1.424,4.944,0.896,7.424c-2.128,0.096-4.256,0.176-6.384,0.272
 45 | 		c0.192,3.536-0.16,7.984-3.44,9.296c-2.944,1.168-6.784-1.008-9.232,0.976"/>
 46 | 	<path style="fill:#E9EFF4;" d="M160.176,34.881c5.808-2.784,10.72-7.168,16.448-10.112c9.856-5.056,21.36-5.504,32.432-5.856
 47 | 		c25.2-0.784,50.4-1.568,75.6-2.352c-5.84,3.2-11.68,6.416-17.536,9.616c-4.768,2.624-10.192,5.312-15.424,3.824
 48 | 		c-0.112,4.208,3.712,8.112,7.936,8.08c-10.352,6.4-24.72-0.144-35.648,5.232c-4.576,2.256-8.272,6.512-13.312,7.312
 49 | 		c-2.912,0.464-5.936-0.32-8.832,0.32c-4.848,1.056-7.904,5.648-11.488,9.072c-4.128,3.952-10.192,6.656-15.584,4.768
 50 | 		c-5.392-1.888-8.208-9.904-3.888-13.648c2.128-1.84,5.168-2.144,7.68-3.44c2.512-1.28,4.496-4.72,2.608-6.816
 51 | 		c-0.816-0.912-2.16-1.264-2.912-2.24c-0.816-1.056-0.736-2.56-1.408-3.712c-2.56-4.496-9.68,1.552-14.528-0.256"/>
 52 | 	<path style="fill:#E9EFF4;" d="M236.704,56.145c3.408-0.784,6.368-2.8,9.552-4.272s6.976-2.336,10.096-0.784
 53 | 		c0.928,2.32-1.744,4.432-4.096,5.264c-4.512,1.584-9.408,2.016-14.128,1.232"/>
 54 | 	<path style="fill:#E9EFF4;" d="M442.736,81.569c-0.928,0.112-1.904,0.064-2.896-0.176c-4.336-0.928-7.632-4.272-11.344-6.704
 55 | 		c-8.56-5.664-20.24-6.4-29.488-1.776c2.192-3.184,3.296-7.12,3.056-10.992l-1.328,0.464c-15.152-8.784-32.912-17.904-49.44-12
 56 | 		c-3.824,1.392-7.28,3.472-11.152,4.8c-4.112,1.44-8.672,2.032-12.192,4.576c-3.584,2.544-5.488,8.16-2.416,11.216
 57 | 		c2.608,2.608,6.768,1.904,10.416,2.256c3.584,0.352,7.696,3.92,5.728,6.992c-15.84,7.408-31.728,14.88-47.568,22.352
 58 | 		c7.28,2.368,12.096,10.624,10.528,18.144c-5.328,0.928-10.464-2.304-15.84-2.656c-7.808-0.4-15.264,6.48-15.424,14.288
 59 | 		c-0.224,7.808,6.944,15.024,14.752,14.912c5.84-0.064,11.568-3.584,17.232-2.096c0.224-5.328,3.872-9.84,7.616-13.648
 60 | 		c7.28-7.296,17.68-13.888,27.408-10.304c3.184,1.152,5.904,3.296,8.56,5.424c5.84,4.624,11.68,9.296,17.536,13.984
 61 | 		c1.856-1.904,3.696-3.824,5.552-5.664c3.184,3.36,6.368,6.704,9.6,10.112c1.616-1.104,3.296-2.144,4.912-3.248
 62 | 		c1.152,3.008,2.368,5.952,3.536,8.96c0.464-3.296,0.864-6.528,1.264-9.776c3.824,0.112,7.872,0.224,11.328-1.504
 63 | 		c3.472-1.68,6.016-5.84,4.56-9.424c-0.752-1.904-2.544-3.408-2.896-5.44c-0.752-4.048,5.024-6.816,8.784-4.976
 64 | 		c3.696,1.792,5.552,6.016,7.12,9.888c0.864-3.936,1.664-7.808,2.544-11.744c3.616,9.504,8.832,18.4,15.312,26.208
 65 | 		c-11.856-2.256-24.352-0.96-35.44,3.6c3.536,4.976,9.6,7.92,15.68,7.68c2.72-0.064,5.728-0.688,7.808,1.04
 66 | 		c1.568,1.328,1.968,3.472,2.256,5.44c0.928,5.552,1.856,11.04,2.72,16.528c-6.256-5.136-15.264-4.56-23.424-4.72
 67 | 		c-8.16-0.224-17.696-2.48-20.704-10.048c-3.232,3.648-4.672,8.848-3.744,13.712c-8.448-2.016-18.16-5.248-20.592-13.584
 68 | 		c-6.592,2.432-14.8-1.776-16.592-8.544c-0.64-2.368-0.816-5.264-2.896-6.528c-1.264-0.752-2.896-0.64-4.4-0.464
 69 | 		c-12.544,1.456-25.04,2.848-37.52,4.304c-6.816,0.816-13.872,1.632-19.888,4.976c-6.016,3.296-10.8,9.776-10.112,16.608
 70 | 		c-11.504,6.832-21.264,16.72-27.856,28.352c-2.08,3.584-3.872,7.696-3.056,11.744c0.576,3.12,2.656,5.776,3.296,8.848
 71 | 		c1.104,5.264-1.904,10.352-3.168,15.552c-3.584,14.8,7.648,28.736,18.064,39.936c4.912,5.2,10.592,10.864,17.76,11.152
 72 | 		c4.448,0.176,8.672-1.792,12.832-3.424c11.904-4.688,24.864-6.832,37.632-6.32c-2.896,2.256,0.112,7.168,3.712,7.92
 73 | 		c3.584,0.752,7.456-0.416,10.928,0.8c7.92,2.832,6.832,14.448,3.248,22.032c1.792-0.352,3.648-0.704,5.488-1.04
 74 | 		c-0.976,2.544-1.968,5.088-2.944,7.568c10.864,1.376,14.976,15.664,12.448,26.352c-2.48,10.704-8.832,20.528-9.008,31.52
 75 | 		c-0.048,6.016,1.792,11.856,3.648,17.568c4.64,14.512,9.264,29.024,13.904,43.584c12.96,1.552,20.4-14.928,32.432-20.08
 76 | 		c4.512-1.968,9.824-2.368,13.36-5.728c3.408-3.232,2.304-10.816-2.08-10.816c5.952-0.64,11.04-6.08,11.216-12.096
 77 | 		c0.064-1.68-0.176-3.36,0.048-5.024c0.4-2.368,1.904-4.448,3.344-6.48c9.184-13.184,15.136-28.288,21.088-43.2
 78 | 		c1.552-4,3.12-7.92,4.672-11.92c5.888-14.864,11.728-29.664,17.616-44.528c2.304-5.84,4.624-11.616,6.928-17.472
 79 | 		c-3.184,5.264-11.504,4.576-16.256,0.64c-4.8-3.92-7.296-9.888-11.056-14.8c-3.184-4.224-7.472-7.968-8.976-13.12
 80 | 		c-0.864-2.944-0.704-6.128-1.216-9.2c-1.168-6.656-5.552-12.192-8.56-18.208s-4.576-13.808-0.352-19.088
 81 | 		c12.16,21.216,23.216,43.056,33.216,65.44c1.104-3.472,3.648-6.48,6.88-8.16c2.368-1.28,5.024-1.792,7.52-2.832
 82 | 		c6.592-2.896,11.152-9.888,11.152-17.056c-0.064-7.168-4.624-14.16-11.28-16.992c-3.296-1.392-7.056-1.84-10.176-3.76
 83 | 		c-3.12-1.84-5.376-6.064-3.408-9.136c1.84-2.896,6.304-2.832,9.36-1.216c3.072,1.68,5.328,4.512,8.208,6.416
 84 | 		c2.08,1.392,4.512,2.304,6.768,3.584c12.208,6.992,15.216,22.896,17.776,36.768c1.392,7.456,2.96,14.864,4.816,22.144
 85 | 		c0.064-1.568,0.048-3.184,0.048-4.736C511.2,188.273,485.2,127.169,442.736,81.569z M466.144,165.569
 86 | 		c-1.68-0.112-3.232-1.216-4.576-2.256c-2.192-1.728-4.4-3.76-5.04-6.48c-0.752-3.232,0.8-6.944-0.928-9.824
 87 | 		c-0.816-1.392-2.256-2.256-3.472-3.232c-3.184-2.544-5.504-6.192-6.368-10.112c-0.752-3.472,0.336-8.096,3.872-8.672
 88 | 		c1.68-0.288,3.52,0.64,4.272,2.192l-2.368,1.28c3.984,0.464,5.84,6.48,2.784,9.072c-0.4,0.4-0.928,0.752-0.928,1.328
 89 | 		c0,0.352,0.224,0.688,0.528,0.928c2.48,2.72,6.192,3.696,9.424,5.424c3.232,1.68,6.416,4.8,5.904,8.384
 90 | 		c-1.04,0.4-2.016,0.752-3.056,1.152c-1.104,1.104-0.224,3.072,0.928,4.16s2.656,2.192,2.72,3.808
 91 | 		C469.84,164.465,467.872,165.681,466.144,165.569z"/>
 92 | 	<path style="fill:#E9EFF4;" d="M467.808,343.457l-4.176,2.96c1.456,5.12-1.456,11.12-6.4,13.12c-2.608,1.056-6.08,1.52-6.96,4.192
 93 | 		c-0.736,2.272,1.024,4.576,1.264,6.944c0.384,3.936-3.296,6.88-5.952,9.808s-4.064,8.432-0.528,10.192
 94 | 		c0.816,0.416,1.76,0.496,2.672,0.576c3.84,0.336,8.048,0.448,11.184-1.792c8.992-6.416,0.448-23.824,9.328-30.416
 95 | 		c1.264-0.928,2.848-1.6,3.536-3.008C473.872,351.889,466.144,347.777,467.808,343.457z"/>
 96 | </g>
 97 | <g>
 98 | </g>
 99 | <g>
100 | </g>
101 | <g>
102 | </g>
103 | <g>
104 | </g>
105 | <g>
106 | </g>
107 | <g>
108 | </g>
109 | <g>
110 | </g>
111 | <g>
112 | </g>
113 | <g>
114 | </g>
115 | <g>
116 | </g>
117 | <g>
118 | </g>
119 | <g>
120 | </g>
121 | <g>
122 | </g>
123 | <g>
124 | </g>
125 | <g>
126 | </g>
127 | </svg>
128 | 


--------------------------------------------------------------------------------
/samples/hello-world/src/index.htm:
--------------------------------------------------------------------------------
 1 | <html window-icon="globe.svg" window-resizable="false" >
 2 |     <head>
 3 |         <title>Hello World!</title>
 4 |         <style>
 5 | 
 6 |           html { background: linear-gradient(to bottom, #FFF, #CAF0FF) }
 7 | 
 8 |           #time 
 9 |           {
10 |             display:block;
11 |             margin:*; // flexes on margins - move it to the middle
12 |             font-size:24pt;
13 |             line-height:1.2em;
14 |           } 
15 | 
16 |         </style>
17 |         <script type="text/tiscript">
18 | 
19 |           // getting reference of output element:
20 |           const elTime = $(output#time); 
21 | 
22 |           function replaceWindow() {
23 |             // display dimensions
24 |             var (sx,sy,sw,sh) = view.screenBox(#workarea,#rectw);
25 |             // default window sizes: 
26 |             const w = self.toPixels(300dip); 
27 |             const h = self.toPixels(200dip); 
28 |             // move window in the middle of primary display:
29 |             view.move(sx + (sw - w)/2, sy + (sh - h)/2, w, h);
30 |           }
31 | 
32 |           // UI's main:
33 |           function self.ready()
34 |           {
35 |             // start 1 second timer 
36 |             elTime.timer(1s, function() {
37 |               elTime.value = new Date(); // show current time
38 |               return true;               // to keep the timer running
39 |             });
40 | 
41 |             elTime.value = new Date(); // initial value
42 | 
43 |             // position the window 
44 |             replaceWindow();
45 |           }
46 | 
47 |         </script>
48 |     </head>
49 |     <body>
50 | 
51 |         <output id="time" type="time-local" format="long" />
52 | 
53 |     </body>
54 | </html>


--------------------------------------------------------------------------------