ITTF explorer

/ittf/meta/folder/index.html.ittf (primary)
                                            edit
                                            html
    $
        var opt = {
            title: 'ITTF explorer',
        }
        var ca = 'm-s color-header font-x font-w-s';
        var ca2 = 'color-header font-x font-w-s';
        var folderUri = ""

    $include models/docs/site.wzctx
    html/layouts/site( &opt )
        $append head-styles-2
            css /ittf/meta/folder/styles.css.ittf
        nav
            class tn-bar
            nav
                class tn-breadcrumbs
                . breadcrumb
                    $foreach bc in fs.breadCrumbs
                        a ${bc.name}
                            $if bc.isLast
                                class active
                                href #
                                $ folderUri = "/~local~" + bc.uri
                            $else
                                href ${bc.uri}
                    a
                        + Edit
                        href ${folderUri}
        # mc-wrapper
            class mc-wrapper-layout
            . mc-frame
                . mc-sidebar-left
                    ul
                        $foreach f in fs.fsitems
                            $if f.isFolder
                                li
                                    class fsitem
                                    img
                                        src /ittf/images/folder.svg.ittf
                                    a ${f.name}
                                        href ${f.uri}
                                        class mc-item-link
                        $foreach f in fs.fsitems
                            $if !f.isFolder
                                li
                                    class fsitem
                                    img
                                        src /ittf/images/file.svg.ittf
                                    a ${f.basename}
                                        href ${f.uri}
                                        class mc-item-link
                                    a edit
                                        href ${f.uri}?meta=html
                                        class mc-item-link

                                        
   1 html
   2     $
   3         var opt = {
   4             title: 'ITTF explorer',
   5         }
   6         var ca = 'm-s color-header font-x font-w-s';
   7         var ca2 = 'color-header font-x font-w-s';
   8         var folderUri = ""
   9     $include models/docs/site.wzctx
  10     html/layouts/site( &opt )
  11         $append head-styles-2
  12             css /ittf/meta/folder/styles.css.ittf
  13         nav
  14             class tn-bar
  15             nav
  16                 class tn-breadcrumbs
  17                 . breadcrumb
  18                     $foreach bc in fs.breadCrumbs
  19                         a ${bc.name}
  20                             $if bc.isLast
  21                                 class active
  22                                 href #
  23                                 $ folderUri = "/~local~" + bc.uri
  24                             $else
  25                                 href ${bc.uri}
  26                     a
  27                         + Edit
  28                         href ${folderUri}
  29         # mc-wrapper
  30             class mc-wrapper-layout
  31             . mc-frame
  32                 . mc-sidebar-left
  33                     ul
  34                         $foreach f in fs.fsitems
  35                             $if f.isFolder
  36                                 li
  37                                     class fsitem
  38                                     img
  39                                         src /ittf/images/folder.svg.ittf
  40                                     a ${f.name}
  41                                         href ${f.uri}
  42                                         class mc-item-link
  43                         $foreach f in fs.fsitems
  44                             $if !f.isFolder
  45                                 li
  46                                     class fsitem
  47                                     img
  48                                         src /ittf/images/file.svg.ittf
  49                                     a ${f.basename}
  50                                         href ${f.uri}
  51                                         class mc-item-link
  52                                     a edit
  53                                         href ${f.uri}?meta=html
  54                                         class mc-item-link

/t/models/docs/site.wzctx.ittf
                                            edit
                                            $group
    $global
        var wzCtx = {
            name: "stfnbssl.github.io/wizzi",
            version: "0.7.1",
            description: "Wizzi github page",
            author: "Stefano Bassoli",
            license: "MIT",
            Params: {
                title: "Wizzi",
                baseUrl: "https://stfnbssl.github.io/wizzi"
            },
            Section: {
                items: [
                    {
                        title: "Concepts",
                        url: "/ittf/site/docs/concepts/overview.html.ittf"
                    },
                    {
                        title: "Howtos",
                        url: "/ittf/site/docs/howtos/getstarted.html.ittf"
                    },
                    /*
                    {
                        title: "Sample code",
                        url: "/ittf/site/docs/samplecode/overview.html.ittf"
                    },
                    {
                        title: "Geeky",
                        url: "/ittf/site/docs/geeky/overview.html.ittf"
                    },
                    */
                    {
                        title: "Cheatsheets",
                        url: "/wizzi/docs/cheatsheet/html"
                    },
                    {
                        title: "Play",
                        url: "/ittf/site/docs/play/index.html.ittf"
                    }
                ]
            },
            Concepts: {
                items: [
                    {
                        title: "Overview",
                        url: "./overview.html.ittf"
                    },
                    {
                        title: "Ittf Documents",
                        url: "./ittfdocuments.html.ittf"
                    },
                    {
                        title: "Template Engine",
                        url: "./templateengine.html.ittf"
                    },
                    {
                        title: "JsWizzi",
                        url: "./jswizzi.html.ittf"
                    },
                    {
                        title: "mTrees",
                        url: "./mtrees.html.ittf"
                    },
                    {
                        title: "Wizzi Schemas",
                        url: "./wizzischemas.html.ittf"
                    },
                    {
                        title: "Wizzi Model DOMs",
                        url: "./wizzimodeldoms.html.ittf"
                    },
                    {
                        title: "Wizzi Model Instances",
                        url: "./wizzimodelinstances.html.ittf"
                    },
                    {
                        title: "Model Transformers",
                        url: "./modeltransformers.html.ittf"
                    },
                    {
                        title: "Artifact Generators",
                        url: "./artifactgenerators.html.ittf"
                    },
                    {
                        title: "Wizzi Jobs",
                        url: "./wizzijobs.html.ittf"
                    },
                    {
                        title: "Wizzi Meta Productions",
                        url: "./wizzimetaproductions.html.ittf"
                    },
                    {
                        title: "Wizzi Plugins",
                        url: "./wizziplugins.html.ittf"
                    },
                    {
                        title: "Wizzi Meta Plugins",
                        url: "./wizzimetaplugins.html.ittf"
                    },
                    {
                        title: "Wizzi API",
                        url: "./wizziapi.html.ittf"
                    },
                    {
                        title: "Wizzi CLI",
                        url: "./wizzicli.html.ittf"
                    },
                    {
                        title: "Virtual Store System",
                        url: "./virtualstoresystem.html.ittf"
                    },
                    {
                        title: "Glossary",
                        url: "./glossary.html.ittf"
                    }
                ]
            },
            Howtos: {
                items: [
                    {
                        title: "Get started",
                        url: "./getstarted.html.ittf"
                    },
                    {
                        title: "Wizzi API",
                        url: "./wizziapi.html.ittf"
                    }
                ]
            },
            SampleCode: {
                items: [
                    {
                        title: "Overview",
                        url: "./overview.html.ittf"
                    },
                    {
                        title: "Template Engine",
                        url: "./templateengine.html.ittf"
                    },
                    {
                        title: "JsWizzi",
                        url: "./jswizzi.html.ittf"
                    },
                    {
                        title: "mTrees",
                        url: "./mtrees.html.ittf"
                    },
                    {
                        title: "Wizzi Schemas",
                        url: "./wizzischemas.html.ittf"
                    },
                    {
                        title: "Wizzi Model DOMs",
                        url: "./wizzimodeldoms.html.ittf"
                    },
                    {
                        title: "Model Transformers",
                        url: "./modeltransformers.html.ittf"
                    },
                    {
                        title: "Artifact Generators",
                        url: "./artifactgenerators.html.ittf"
                    },
                    {
                        title: "Wizzi Jobs",
                        url: "./wizzijobs.html.ittf"
                    },
                    {
                        title: "Wizzi Plugins",
                        url: "./wizziplugins.html.ittf"
                    },
                    {
                        title: "Wizzi API",
                        url: "./wizziapi.html.ittf"
                    },
                    {
                        title: "Virtual Store System",
                        url: "./virtualstoresystem.html.ittf"
                    },
                    {
                        title: "Glossary",
                        url: "./glossary.html.ittf"
                    }
                ]
            },
            Geeky: {
                items: [
                    {
                        title: "Overview",
                        url: "./overview.html.ittf"
                    },
                    {
                        title: "Template Engine",
                        url: "./templateengine.html.ittf"
                    },
                    {
                        title: "JsWizzi",
                        url: "./jswizzi.html.ittf"
                    },
                    {
                        title: "mTrees",
                        url: "./mtrees.html.ittf"
                    },
                    {
                        title: "Wizzi Schemas",
                        url: "./wizzischemas.html.ittf"
                    },
                    {
                        title: "Wizzi Model DOMs",
                        url: "./wizzimodeldoms.html.ittf"
                    },
                    {
                        title: "Model Transformers",
                        url: "./modeltransformers.html.ittf"
                    },
                    {
                        title: "Artifact Generators",
                        url: "./artifactgenerators.html.ittf"
                    },
                    {
                        title: "Wizzi Jobs",
                        url: "./wizzijobs.html.ittf"
                    },
                    {
                        title: "Wizzi Plugins",
                        url: "./wizziplugins.html.ittf"
                    },
                    {
                        title: "Wizzi API",
                        url: "./wizziapi.html.ittf"
                    },
                    {
                        title: "Wizzi CLI",
                        url: "./wizzicli.html.ittf"
                    },
                    {
                        title: "Virtual Store System",
                        url: "./virtualstoresystem.html.ittf"
                    },
                    {
                        title: "Glossary",
                        url: "./glossary.html.ittf"
                    }
                ]
            },
            Starter: {
                "items": [
                    {
                        title: "wizzi-starter-wizzi-plugin",
                        url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-wizzi-plugin"
                    },
                    {
                        title: "wizzi-starter-webpack-react",
                        url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-webpack-react"
                    },
                    {
                        title: "wizzi-starter-mern",
                        url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-mern"
                    },
                    {
                        title: "wizzi-starter-nextjs",
                        url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-nextjs"
                    },
                    {
                        title: "wizzi-starter-gatsby",
                        url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-gatsby"
                    }
                ]
            },
            "Plugin": {
                items: [
                    {
                        title: "wizzi-js",
                        url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-js/dist"
                    },
                    {
                        title: "wizzi-web",
                        url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-web/dist"
                    },
                    {
                        title: "wizzi-lab",
                        url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-lab/dist"
                    }
                ]
            },
            Colors: {
                "bg_0": "#333",
                "bg_f_0": "#000",
                "c_0": "#fff",
                "bg_dark": "#333",
                "bg_dark_medium": "#444",
                "c_dark": "#ddd",
                "c_dark_medium": "#bbb",
                "h3_c_dark": "#fc0"
            },
            Fonts: {
                "useMaterialIcons": true,
                "materialIcons": {
                    "baseUrl": "https://stfnbssl.github.io/wizzi/fonts",
                    "fontWeight": "400",
                    "size": "24px"
                }
            },
            Styles: {
                shellColors: {
                    mainHeaderBg: "#0D0D0D",
                    mainHeader: "#dedede",
                    mainContentBg: "#2D2D2D",
                    mainContent: "#dedede",
                    mainContentLeftBarBg: "#1D1D1D",
                    mainContentLeftBar: "#dedede",
                    mainFooterBg: "#0D0D0D",
                    mainFooter: "#dedede",
                }
            }
        }
        var mpage = {
            Colors: {
                background: "#ffffff",
                scheme1Fade90: "whiteFade-90,rgba(255,255,255,0.9)",
                themeBack: "#ffffff",
                primary: "#BDF3EE",
                primaryDark: "#122944",
                primary30: "#BDF3EE",
                gray70: "grey-70,#222B31",
                grad1: "#81B6CF",
                grad2: "#222B31"
            }
        }

                                        
   1 $group
   2     $global
   3         var wzCtx = {
   4             name: "stfnbssl.github.io/wizzi",
   5             version: "0.7.1",
   6             description: "Wizzi github page",
   7             author: "Stefano Bassoli",
   8             license: "MIT",
   9             Params: {
  10                 title: "Wizzi",
  11                 baseUrl: "https://stfnbssl.github.io/wizzi"
  12             },
  13             Section: {
  14                 items: [
  15                     {
  16                         title: "Concepts",
  17                         url: "/ittf/site/docs/concepts/overview.html.ittf"
  18                     },
  19                     {
  20                         title: "Howtos",
  21                         url: "/ittf/site/docs/howtos/getstarted.html.ittf"
  22                     },
  23                     /*
  24                     {
  25                         title: "Sample code",
  26                         url: "/ittf/site/docs/samplecode/overview.html.ittf"
  27                     },
  28                     {
  29                         title: "Geeky",
  30                         url: "/ittf/site/docs/geeky/overview.html.ittf"
  31                     },
  32                     */
  33                     {
  34                         title: "Cheatsheets",
  35                         url: "/wizzi/docs/cheatsheet/html"
  36                     },
  37                     {
  38                         title: "Play",
  39                         url: "/ittf/site/docs/play/index.html.ittf"
  40                     }
  41                 ]
  42             },
  43             Concepts: {
  44                 items: [
  45                     {
  46                         title: "Overview",
  47                         url: "./overview.html.ittf"
  48                     },
  49                     {
  50                         title: "Ittf Documents",
  51                         url: "./ittfdocuments.html.ittf"
  52                     },
  53                     {
  54                         title: "Template Engine",
  55                         url: "./templateengine.html.ittf"
  56                     },
  57                     {
  58                         title: "JsWizzi",
  59                         url: "./jswizzi.html.ittf"
  60                     },
  61                     {
  62                         title: "mTrees",
  63                         url: "./mtrees.html.ittf"
  64                     },
  65                     {
  66                         title: "Wizzi Schemas",
  67                         url: "./wizzischemas.html.ittf"
  68                     },
  69                     {
  70                         title: "Wizzi Model DOMs",
  71                         url: "./wizzimodeldoms.html.ittf"
  72                     },
  73                     {
  74                         title: "Wizzi Model Instances",
  75                         url: "./wizzimodelinstances.html.ittf"
  76                     },
  77                     {
  78                         title: "Model Transformers",
  79                         url: "./modeltransformers.html.ittf"
  80                     },
  81                     {
  82                         title: "Artifact Generators",
  83                         url: "./artifactgenerators.html.ittf"
  84                     },
  85                     {
  86                         title: "Wizzi Jobs",
  87                         url: "./wizzijobs.html.ittf"
  88                     },
  89                     {
  90                         title: "Wizzi Meta Productions",
  91                         url: "./wizzimetaproductions.html.ittf"
  92                     },
  93                     {
  94                         title: "Wizzi Plugins",
  95                         url: "./wizziplugins.html.ittf"
  96                     },
  97                     {
  98                         title: "Wizzi Meta Plugins",
  99                         url: "./wizzimetaplugins.html.ittf"
 100                     },
 101                     {
 102                         title: "Wizzi API",
 103                         url: "./wizziapi.html.ittf"
 104                     },
 105                     {
 106                         title: "Wizzi CLI",
 107                         url: "./wizzicli.html.ittf"
 108                     },
 109                     {
 110                         title: "Virtual Store System",
 111                         url: "./virtualstoresystem.html.ittf"
 112                     },
 113                     {
 114                         title: "Glossary",
 115                         url: "./glossary.html.ittf"
 116                     }
 117                 ]
 118             },
 119             Howtos: {
 120                 items: [
 121                     {
 122                         title: "Get started",
 123                         url: "./getstarted.html.ittf"
 124                     },
 125                     {
 126                         title: "Wizzi API",
 127                         url: "./wizziapi.html.ittf"
 128                     }
 129                 ]
 130             },
 131             SampleCode: {
 132                 items: [
 133                     {
 134                         title: "Overview",
 135                         url: "./overview.html.ittf"
 136                     },
 137                     {
 138                         title: "Template Engine",
 139                         url: "./templateengine.html.ittf"
 140                     },
 141                     {
 142                         title: "JsWizzi",
 143                         url: "./jswizzi.html.ittf"
 144                     },
 145                     {
 146                         title: "mTrees",
 147                         url: "./mtrees.html.ittf"
 148                     },
 149                     {
 150                         title: "Wizzi Schemas",
 151                         url: "./wizzischemas.html.ittf"
 152                     },
 153                     {
 154                         title: "Wizzi Model DOMs",
 155                         url: "./wizzimodeldoms.html.ittf"
 156                     },
 157                     {
 158                         title: "Model Transformers",
 159                         url: "./modeltransformers.html.ittf"
 160                     },
 161                     {
 162                         title: "Artifact Generators",
 163                         url: "./artifactgenerators.html.ittf"
 164                     },
 165                     {
 166                         title: "Wizzi Jobs",
 167                         url: "./wizzijobs.html.ittf"
 168                     },
 169                     {
 170                         title: "Wizzi Plugins",
 171                         url: "./wizziplugins.html.ittf"
 172                     },
 173                     {
 174                         title: "Wizzi API",
 175                         url: "./wizziapi.html.ittf"
 176                     },
 177                     {
 178                         title: "Virtual Store System",
 179                         url: "./virtualstoresystem.html.ittf"
 180                     },
 181                     {
 182                         title: "Glossary",
 183                         url: "./glossary.html.ittf"
 184                     }
 185                 ]
 186             },
 187             Geeky: {
 188                 items: [
 189                     {
 190                         title: "Overview",
 191                         url: "./overview.html.ittf"
 192                     },
 193                     {
 194                         title: "Template Engine",
 195                         url: "./templateengine.html.ittf"
 196                     },
 197                     {
 198                         title: "JsWizzi",
 199                         url: "./jswizzi.html.ittf"
 200                     },
 201                     {
 202                         title: "mTrees",
 203                         url: "./mtrees.html.ittf"
 204                     },
 205                     {
 206                         title: "Wizzi Schemas",
 207                         url: "./wizzischemas.html.ittf"
 208                     },
 209                     {
 210                         title: "Wizzi Model DOMs",
 211                         url: "./wizzimodeldoms.html.ittf"
 212                     },
 213                     {
 214                         title: "Model Transformers",
 215                         url: "./modeltransformers.html.ittf"
 216                     },
 217                     {
 218                         title: "Artifact Generators",
 219                         url: "./artifactgenerators.html.ittf"
 220                     },
 221                     {
 222                         title: "Wizzi Jobs",
 223                         url: "./wizzijobs.html.ittf"
 224                     },
 225                     {
 226                         title: "Wizzi Plugins",
 227                         url: "./wizziplugins.html.ittf"
 228                     },
 229                     {
 230                         title: "Wizzi API",
 231                         url: "./wizziapi.html.ittf"
 232                     },
 233                     {
 234                         title: "Wizzi CLI",
 235                         url: "./wizzicli.html.ittf"
 236                     },
 237                     {
 238                         title: "Virtual Store System",
 239                         url: "./virtualstoresystem.html.ittf"
 240                     },
 241                     {
 242                         title: "Glossary",
 243                         url: "./glossary.html.ittf"
 244                     }
 245                 ]
 246             },
 247             Starter: {
 248                 "items": [
 249                     {
 250                         title: "wizzi-starter-wizzi-plugin",
 251                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-wizzi-plugin"
 252                     },
 253                     {
 254                         title: "wizzi-starter-webpack-react",
 255                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-webpack-react"
 256                     },
 257                     {
 258                         title: "wizzi-starter-mern",
 259                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-mern"
 260                     },
 261                     {
 262                         title: "wizzi-starter-nextjs",
 263                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-nextjs"
 264                     },
 265                     {
 266                         title: "wizzi-starter-gatsby",
 267                         url: "https://github.com/wizzifactory/wizzi-examples/tree/master/packages/wizzi-starter-gatsby"
 268                     }
 269                 ]
 270             },
 271             "Plugin": {
 272                 items: [
 273                     {
 274                         title: "wizzi-js",
 275                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-js/dist"
 276                     },
 277                     {
 278                         title: "wizzi-web",
 279                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-web/dist"
 280                     },
 281                     {
 282                         title: "wizzi-lab",
 283                         url: "https://github.com/wizzifactory/wizzi/tree/master/packages/wizzi-lab/dist"
 284                     }
 285                 ]
 286             },
 287             Colors: {
 288                 "bg_0": "#333",
 289                 "bg_f_0": "#000",
 290                 "c_0": "#fff",
 291                 "bg_dark": "#333",
 292                 "bg_dark_medium": "#444",
 293                 "c_dark": "#ddd",
 294                 "c_dark_medium": "#bbb",
 295                 "h3_c_dark": "#fc0"
 296             },
 297             Fonts: {
 298                 "useMaterialIcons": true,
 299                 "materialIcons": {
 300                     "baseUrl": "https://stfnbssl.github.io/wizzi/fonts",
 301                     "fontWeight": "400",
 302                     "size": "24px"
 303                 }
 304             },
 305             Styles: {
 306                 shellColors: {
 307                     mainHeaderBg: "#0D0D0D",
 308                     mainHeader: "#dedede",
 309                     mainContentBg: "#2D2D2D",
 310                     mainContent: "#dedede",
 311                     mainContentLeftBarBg: "#1D1D1D",
 312                     mainContentLeftBar: "#dedede",
 313                     mainFooterBg: "#0D0D0D",
 314                     mainFooter: "#dedede",
 315                 }
 316             }
 317         }
 318         var mpage = {
 319             Colors: {
 320                 background: "#ffffff",
 321                 scheme1Fade90: "whiteFade-90,rgba(255,255,255,0.9)",
 322                 themeBack: "#ffffff",
 323                 primary: "#BDF3EE",
 324                 primaryDark: "#122944",
 325                 primary30: "#BDF3EE",
 326                 gray70: "grey-70,#222B31",
 327                 grad1: "#81B6CF",
 328                 grad2: "#222B31"
 329             }
 330         }

/t/html/layouts/site.html.ittf

edit

$group
    $params &opt
    $include models/docs/site.wzctx
    $
        var ca = 'm-s p-s color-header font-l font-w-xxl';
        var ca_inverse = 'm-s p-s color-header-inverse bg-color-header-inverse font-l font-w-xxl';
        var ca2 = 'color-header font-x font-w-s';
    head
        $if opt.title
            @title ${opt.title}
        meta
            charset utf-8
        meta
            name viewport
            content width=device-width, initial-scale=1
        link
            rel preconnect
            href https://fonts.googleapis.com
        link
            rel preconnect
            href https://fonts.gstatic.com
            crossorigin
        link
            @ rel "stylesheet"
            @ href "https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"
        css /ittf/css/main.css.ittf
        script
            module
                set window.__filename = 'browser'
                $if opt.isWizziStudio && !opt.useFirebase
                    var WizziBrowser
                        {
                            @ log
                                function
                                    var line
                                        _ Array.prototype.slice.call(arguments).map
                                            function
                                                param argument
                                                return
                                                    iif typeof argument === 'string'
                                                        then argument
                                                        else JSON.stringify(argument)
                                            ._ join
                                                @ '\n '
                                    if arguments.length > 1 && arguments[arguments.length-1] === '-'
                                        set line += new Array(50).join('-')
                                    set document.querySelector('#wizzi-browser-log').textContent += line + '\n'
                            @ clearLog
                                function
                                    set document.querySelector('#wizzi-browser-log').textContent = ''
                            @ setStatus
                                function
                                    param status
                                    set document.querySelector('#wizzi-browser-status').textContent = status
                            @ setContent
                                function
                                    param newContent
                                    var content = document.querySelector('#wizzi-browser-content')
                                    while content.hasChildNodes()
                                        _ content.removeChild(content.lastChild)
                                    _ content.appendChild(newContent)
        $hook head-styles-0
        $if opt.isWizziStudio && !opt.useFirebase
            @style
                css
                    # wizzi-browser-status
                        margin .5em 0
                        font-style italic
                    # wizzi-browser-log
                        margin .5em 0
                        white-space pre-wrap
                    # wizzi-browser-content
                        margin .5em 0
                    # status:empty, #log:empty, #content:empty
                        display none
        $include ./styles                        
        ./site-styles( &opt )
        $if opt.stickyNav
            style
                # ${opt.stickyNav}.sticky
                    position fixed
                    top 0
                . ${opt.stickyNav}OffsetMargin
                    padding-top ${opt.stickyNavOffset}px
                $if opt.stickyNavLogo
                    # ${opt.stickyNavLogo}.visible
                        display block
                    # ${opt.stickyNavLogo}.hidden
                        display none
        $hook head-styles
        $hook head-styles-2
        $hook head-styles-3
        $hook head-scripts
    body
        . full-page
            . main-header
                . flex-row space-between align-items-center width-100
                    id __main_navbar
                    . flex-row
                        html/a( , /, ${ca2}
                            div
                                style width: 80px; margin-top: 5px; margin-left: 20px;
                                html/images/logo(${colors.mainHeader}, ${colors.mainHeaderBg})
                    . flex-row
                        $if true
                            $if locals.user
                                $if opt.section != 'Starter'
                                    html/a( Starter, /ittf/site/starter.html.ittf, ${ca}
                                $else
                                    . ${ca_inverse}
                                        + Starter
                                $if opt.section != 'Lab'
                                    html/a( Lab, /ittf/site/lab.html.ittf, ${ca}
                                $else
                                    . ${ca_inverse}
                                        + Lab
                                $if opt.section != 'Productions'
                                    html/a( Productions, /ittf/site/productions.html.ittf, ${ca}
                                $else
                                    . ${ca_inverse}
                                        + Productions
                                $if opt.section != 'Play'
                                    html/a( Play, /public/play, ${ca}
                                $else
                                    . ${ca_inverse}
                                        + Play
                    . flex-row
                        $if opt.section != 'Project'
                            html/a( Project, /ittf/site/project.html.ittf, ${ca}
                        $else
                            . ${ca_inverse}
                                + Project
                        $if opt.section != 'Docs'
                            html/a( Docs, /ittf/site/docs/concepts/overview.html.ittf, ${ca}
                        $else
                            . ${ca_inverse}
                                + Docs
                        html/a( Github, https://github.com/stfnbssl/wizzi, ${ca}
                    . flex-row m-r-x
                        $if false
                            $if locals.user
                                html/a( Profile, /account/profile, ${ca}
                                html/a( Log Out, /auth/logout, ${ca}
                            $else
                                html/a( Log In, /auth/login, ${ca}
                        $else
                            . ${ca}
                                + Log in
                                title "Not implemented yet"

. main-content
                . main-content-left-bar
                    $hook main-content-left-bar
                . main-content-work-area
                    $hook main-content-work-area
                    $hook 
            . main-footer
                $hook main-footer
        $hook body-scripts-0
        $if opt.isWizziStudio && !opt.useFirebase
            div
                # wizzi-browser-status
                # wizzi-browser-log
                # wizzi-browser-content
        ./site-scripts( &opt )
        $if opt.stickyNav
            script
                let header = document.getElementById("__main_navbar")
                let stickyBar = document.getElementById("${opt.stickyNav}")
                $if opt.stickyNavLogo
                    let stickyLogo = document.getElementById("${opt.stickyNavLogo}")
                let stickyPos = ${opt.stickyNavOffset}
                _ window.addEventListener
                    @ "scroll"
                    =>
                        param e
                        let scrollPos = window.scrollY
                        if scrollPos > stickyPos
                            _ stickyBar.classList.add('sticky')
                            _ header.classList.add('${opt.stickyNav}OffsetMargin')
                            $if opt.stickyNavLogo
                                _ stickyLogo.classList.add('visible')
                                _ stickyLogo.classList.remove('hidden')
                        else
                            _ stickyBar.classList.remove('sticky')
                            _ header.classList.remove('${opt.stickyNav}OffsetMargin')
                            $if opt.stickyNavLogo
                                _ stickyLogo.classList.remove('visible')
                                _ stickyLogo.classList.add('hidden')
        $hook body-scripts
        $hook body-scripts-2
        $hook body-scripts-3
        $if opt.useHighlight
            script
                _ document.addEventListener
                    @ 'DOMContentLoaded'
                    =>
                        param event
                        _ document.querySelectorAll
                            @ 'pre .hljs'
                            ._ forEach
                                =>
                                    param block
                                    _ hljs.highlightBlock(block)

                                               1 $group
   2     $params &opt
   3     $include models/docs/site.wzctx
   4     $
   5         var ca = 'm-s p-s color-header font-l font-w-xxl';
   6         var ca_inverse = 'm-s p-s color-header-inverse bg-color-header-inverse font-l font-w-xxl';
   7         var ca2 = 'color-header font-x font-w-s';
   8     head
   9         $if opt.title
  10             @title ${opt.title}
  11         meta
  12             charset utf-8
  13         meta
  14             name viewport
  15             content width=device-width, initial-scale=1
  16         link
  17             rel preconnect
  18             href https://fonts.googleapis.com
  19         link
  20             rel preconnect
  21             href https://fonts.gstatic.com
  22             crossorigin
  23         link
  24             @ rel "stylesheet"
  25             @ href "https://cdn.jsdelivr.net/npm/[email protected]/normalize.min.css"
  26         css /ittf/css/main.css.ittf
  27         script
  28             module
  29                 set window.__filename = 'browser'
  30                 $if opt.isWizziStudio && !opt.useFirebase
  31                     var WizziBrowser
  32                         {
  33                             @ log
  34                                 function
  35                                     var line
  36                                         _ Array.prototype.slice.call(arguments).map
  37                                             function
  38                                                 param argument
  39                                                 return
  40                                                     iif typeof argument === 'string'
  41                                                         then argument
  42                                                         else JSON.stringify(argument)
  43                                             ._ join
  44                                                 @ '\n '
  45                                     if arguments.length > 1 && arguments[arguments.length-1] === '-'
  46                                         set line += new Array(50).join('-')
  47                                     set document.querySelector('#wizzi-browser-log').textContent += line + '\n'
  48                             @ clearLog
  49                                 function
  50                                     set document.querySelector('#wizzi-browser-log').textContent = ''
  51                             @ setStatus
  52                                 function
  53                                     param status
  54                                     set document.querySelector('#wizzi-browser-status').textContent = status
  55                             @ setContent
  56                                 function
  57                                     param newContent
  58                                     var content = document.querySelector('#wizzi-browser-content')
  59                                     while content.hasChildNodes()
  60                                         _ content.removeChild(content.lastChild)
  61                                     _ content.appendChild(newContent)
  62         $hook head-styles-0
  63         $if opt.isWizziStudio && !opt.useFirebase
  64             @style
  65                 css
  66                     # wizzi-browser-status
  67                         margin .5em 0
  68                         font-style italic
  69                     # wizzi-browser-log
  70                         margin .5em 0
  71                         white-space pre-wrap
  72                     # wizzi-browser-content
  73                         margin .5em 0
  74                     # status:empty, #log:empty, #content:empty
  75                         display none
  76         $include ./styles
  77         ./site-styles( &opt )
  78         $if opt.stickyNav
  79             style
  80                 # ${opt.stickyNav}.sticky
  81                     position fixed
  82                     top 0
  83                 . ${opt.stickyNav}OffsetMargin
  84                     padding-top ${opt.stickyNavOffset}px
  85                 $if opt.stickyNavLogo
  86                     # ${opt.stickyNavLogo}.visible
  87                         display block
  88                     # ${opt.stickyNavLogo}.hidden
  89                         display none
  90         $hook head-styles
  91         $hook head-styles-2
  92         $hook head-styles-3
  93         $hook head-scripts
  94     body
  95         . full-page
  96             . main-header
  97                 . flex-row space-between align-items-center width-100
  98                     id __main_navbar
  99                     . flex-row
 100                         html/a(  /,  ${ca2})
 101                             div
 102                                 style width: 80px; margin-top: 5px; margin-left: 20px;
 103                                 html/images/logo( ${colors.mainHeader},  ${colors.mainHeaderBg})
 104                     . flex-row
 105                         $if true
 106                             $if locals.user
 107                                 $if opt.section != 'Starter'
 108                                     html/a( Starter,  /ittf/site/starter.html.ittf,  ${ca})
 109                                 $else
 110                                     . ${ca_inverse}
 111                                         + Starter
 112                                 $if opt.section != 'Lab'
 113                                     html/a( Lab,  /ittf/site/lab.html.ittf,  ${ca})
 114                                 $else
 115                                     . ${ca_inverse}
 116                                         + Lab
 117                                 $if opt.section != 'Productions'
 118                                     html/a( Productions,  /ittf/site/productions.html.ittf,  ${ca})
 119                                 $else
 120                                     . ${ca_inverse}
 121                                         + Productions
 122                                 $if opt.section != 'Play'
 123                                     html/a( Play,  /public/play,  ${ca})
 124                                 $else
 125                                     . ${ca_inverse}
 126                                         + Play
 127                     . flex-row
 128                         $if opt.section != 'Project'
 129                             html/a( Project,  /ittf/site/project.html.ittf,  ${ca})
 130                         $else
 131                             . ${ca_inverse}
 132                                 + Project
 133                         $if opt.section != 'Docs'
 134                             html/a( Docs,  /ittf/site/docs/concepts/overview.html.ittf,  ${ca})
 135                         $else
 136                             . ${ca_inverse}
 137                                 + Docs
 138                         html/a( Github,  https://github.com/stfnbssl/wizzi,  ${ca})
 139                     . flex-row m-r-x
 140                         $if false
 141                             $if locals.user
 142                                 html/a( Profile,  /account/profile,  ${ca})
 143                                 html/a( Log Out,  /auth/logout,  ${ca})
 144                             $else
 145                                 html/a( Log In,  /auth/login,  ${ca})
 146                         $else
 147                             . ${ca}
 148                                 + Log in
 149                                 title "Not implemented yet"
 150             . main-content
 151                 . main-content-left-bar
 152                     $hook main-content-left-bar
 153                 . main-content-work-area
 154                     $hook main-content-work-area
 155                     $hook
 156             . main-footer
 157                 $hook main-footer
 158         $hook body-scripts-0
 159         $if opt.isWizziStudio && !opt.useFirebase
 160             div
 161                 # wizzi-browser-status
 162                 # wizzi-browser-log
 163                 # wizzi-browser-content
 164         ./site-scripts( &opt )
 165         $if opt.stickyNav
 166             script
 167                 let header = document.getElementById("__main_navbar")
 168                 let stickyBar = document.getElementById("${opt.stickyNav}")
 169                 $if opt.stickyNavLogo
 170                     let stickyLogo = document.getElementById("${opt.stickyNavLogo}")
 171                 let stickyPos = ${opt.stickyNavOffset}
 172                 _ window.addEventListener
 173                     @ "scroll"
 174                     =>
 175                         param e
 176                         let scrollPos = window.scrollY
 177                         if scrollPos > stickyPos
 178                             _ stickyBar.classList.add('sticky')
 179                             _ header.classList.add('${opt.stickyNav}OffsetMargin')
 180                             $if opt.stickyNavLogo
 181                                 _ stickyLogo.classList.add('visible')
 182                                 _ stickyLogo.classList.remove('hidden')
 183                         else
 184                             _ stickyBar.classList.remove('sticky')
 185                             _ header.classList.remove('${opt.stickyNav}OffsetMargin')
 186                             $if opt.stickyNavLogo
 187                                 _ stickyLogo.classList.remove('visible')
 188                                 _ stickyLogo.classList.add('hidden')
 189         $hook body-scripts
 190         $hook body-scripts-2
 191         $hook body-scripts-3
 192         $if opt.useHighlight
 193             script
 194                 _ document.addEventListener
 195                     @ 'DOMContentLoaded'
 196                     =>
 197                         param event
 198                         _ document.querySelectorAll
 199                             @ 'pre .hljs'
 200                             ._ forEach
 201                                 =>
 202                                     param block
 203                                     _ hljs.highlightBlock(block)

/t/html/layouts/t/styles.html.ittf
                                            edit
                                            $group
    style
        css
            $
                var colors = wzCtx.Styles.shellColors;

            . main-header
                background-color ${colors.mainHeaderBg}
                color ${colors.mainHeader}
                height 5vh
                overflow auto
                display flex
                flex-direction row
                justify-content space-between
            . main-content
                display flex
                flex-direction row
                height 92vh
                overflow auto
                background-color ${colors.mainContentBg}
                color ${colors.mainContent}
            . main-content-left-bar
                height 100%
                width 3%
                background-color ${colors.mainContentLeftBarBg}
            . main-content-work-area
                height 100%
                width 97%
            . main-footer
                background-color ${colors.mainFooterBg}
                color ${colors.mainFooter}
                height 3vh
                overflow auto

                                        
   1 $group
   2     style
   3         css
   4             $
   5                 var colors = wzCtx.Styles.shellColors;
   6             . main-header
   7                 background-color ${colors.mainHeaderBg}
   8                 color ${colors.mainHeader}
   9                 height 5vh
  10                 overflow auto
  11                 display flex
  12                 flex-direction row
  13                 justify-content space-between
  14             . main-content
  15                 display flex
  16                 flex-direction row
  17                 height 92vh
  18                 overflow auto
  19                 background-color ${colors.mainContentBg}
  20                 color ${colors.mainContent}
  21             . main-content-left-bar
  22                 height 100%
  23                 width 3%
  24                 background-color ${colors.mainContentLeftBarBg}
  25             . main-content-work-area
  26                 height 100%
  27                 width 97%
  28             . main-footer
  29                 background-color ${colors.mainFooterBg}
  30                 color ${colors.mainFooter}
  31                 height 3vh
  32                 overflow auto

/t/html/layouts/site-styles.html.ittf

edit

$group
    $params &opt
    $if opt.useBootstrap
        css /public/lib/bootstrap/dist/css/bootstrap.min.css
    $if opt.useCodemirror
        html/s( /public/lib/codemirror/lib/codemirror.css
        html/s( /public/lib/codemirror/theme/monokai.css
        html/s( /public/lib/codemirror/theme/twilight.css
    $if typeof(wzCtx.aspect) !== 'undefined'
        $if wzCtx.aspect.AnimateCss
            $if wzCtx.aspect.production
                html/s( /public/lib/animatecss/animate.min.css
            $else
                html/s( /public/lib/animatecss/animate.css
    $if opt.useFontAwesome
        $
            var fontAwesomeKey = 'eab461efef';
        script
            src https://kit.fontawesome.com/${fontAwesomeKey}.js
            crossorigin anonymous
    $if opt.useFontRoboto
        html/s( https://fonts.googleapis.com/css?family=Roboto:300,400,500
    $if opt.useFontMaterialIcons
        html/s( https://fonts.googleapis.com/icon?family=Material+Icons
    $if opt.useGoogleFonts
        $foreach item in opt.googleFonts
            css https://fonts.googleapis.com/css?family=${item}
    $if opt.useHighlight
        $if opt.isWizziStudio
            html/s( /public/lib/highlight/styles/github.css
            html/s( /public/lib/highlightjs-master/dracula.css
        $else
            html/s( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css
    $if opt.useJarallax
        html/s( /public/lib/jarallax/jarallax.css
    $if opt.useJsonFormatter
        $if opt.isWizziStudio
            html/s( https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.7.0/json-formatter.min.css
        $else
            html/s( https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.7.0/json-formatter.min.css
    $if opt.useMaterialUI
        html/s( https://fonts.googleapis.com/icon?family=Material+Icons
    $if opt.usePopper
        html/s( /public/lib/popper/main.css
    $if opt.usePrism
        $if opt.isWizziStudio
            css /public/lib/prism/prism.css
        $else
            css https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css
    $if opt.useSocial
        html/s( /public/lib/social/social-icons.css
    $if opt.useSweetalert
        html/s( https://cdn.jsdelivr.net/npm/sweetalert2@7.31.1/dist/sweetalert2.min.css
    $if opt.mainCss && opt.mainCss.length > 0
        html/s( ${opt.mainCss}

                                               1 $group
   2     $params &opt
   3     $if opt.useBootstrap
   4         css /public/lib/bootstrap/dist/css/bootstrap.min.css
   5     $if opt.useCodemirror
   6         html/s( /public/lib/codemirror/lib/codemirror.css)
   7         html/s( /public/lib/codemirror/theme/monokai.css)
   8         html/s( /public/lib/codemirror/theme/twilight.css)
   9     $if typeof(wzCtx.aspect) !== 'undefined'
  10         $if wzCtx.aspect.AnimateCss
  11             $if wzCtx.aspect.production
  12                 html/s( /public/lib/animatecss/animate.min.css)
  13             $else
  14                 html/s( /public/lib/animatecss/animate.css)
  15     $if opt.useFontAwesome
  16         $
  17             var fontAwesomeKey = 'eab461efef';
  18         script
  19             src https://kit.fontawesome.com/${fontAwesomeKey}.js
  20             crossorigin anonymous
  21     $if opt.useFontRoboto
  22         html/s( https://fonts.googleapis.com/css?family=Roboto:300, 400, 500)
  23     $if opt.useFontMaterialIcons
  24         html/s( https://fonts.googleapis.com/icon?family=Material+Icons)
  25     $if opt.useGoogleFonts
  26         $foreach item in opt.googleFonts
  27             css https://fonts.googleapis.com/css?family=${item}
  28     $if opt.useHighlight
  29         $if opt.isWizziStudio
  30             html/s( /public/lib/highlight/styles/github.css)
  31             html/s( /public/lib/highlightjs-master/dracula.css)
  32         $else
  33             html/s( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css)
  34     $if opt.useJarallax
  35         html/s( /public/lib/jarallax/jarallax.css)
  36     $if opt.useJsonFormatter
  37         $if opt.isWizziStudio
  38             html/s( https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.7.0/json-formatter.min.css)
  39         $else
  40             html/s( https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.7.0/json-formatter.min.css)
  41     $if opt.useMaterialUI
  42         html/s( https://fonts.googleapis.com/icon?family=Material+Icons)
  43     $if opt.usePopper
  44         html/s( /public/lib/popper/main.css)
  45     $if opt.usePrism
  46         $if opt.isWizziStudio
  47             css /public/lib/prism/prism.css
  48         $else
  49             css https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css
  50     $if opt.useSocial
  51         html/s( /public/lib/social/social-icons.css)
  52     $if opt.useSweetalert
  53         html/s( https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css)
  54     $if opt.mainCss && opt.mainCss.length > 0
  55         html/s( ${opt.mainCss})

/t/html/a.html.ittf
                                            edit
                                            $group
    $params text, href|#, ca|@@null
    a ${text}
        href ${href}
        $if ca
            class ${ca}
        $hook

                                        
   1 $group
   2     $params text, href|#, ca|@@null
   3     a ${text}
   4         href ${href}
   5         $if ca
   6             class ${ca}
   7         $hook

/t/html/images/logo.html.ittf
                                            edit
                                            svg
    $params color|#000, bgcolor|#fff, viewBox|0 0 660 280
    $
        var opt = {};
        opt.y0 = 10;
        opt.y1 = 10;
        opt.y1a = 90;
        opt.y2 = 210;
        opt.ybottom = 250;
        opt.color = color;
    preserve-aspect-ratio xMidYMid meet
    viewBox ${viewBox}
    rect
        x 0
        y 0
        width 660
        height 280
        fill ${bgcolor}
        stroke none
    polyline
        stroke ${color}
        fill ${color}
        stroke-width 2
        points 10 ${opt.ybottom} 45 ${opt.y0} 60 ${opt.y0} 75 ${opt.y1a + 40} 120 ${opt.y2} 120 ${opt.y1a + 40} 175 ${opt.y2} 175 ${opt.y1a + 20} 230 ${opt.y2} 230 ${opt.ybottom}
    wizzi-logo-i( 250, &opt )
    wizzi-logo-z( 320, &opt )
    wizzi-logo-z( 450, &opt )
    wizzi-logo-i( 590, &opt )

                                        
   1 svg
   2     $params color|#000, bgcolor|#fff, viewBox|0 0 660 280
   3     $
   4         var opt = {};
   5         opt.y0 = 10;
   6         opt.y1 = 10;
   7         opt.y1a = 90;
   8         opt.y2 = 210;
   9         opt.ybottom = 250;
  10         opt.color = color;
  11     preserve-aspect-ratio xMidYMid meet
  12     viewBox ${viewBox}
  13     rect
  14         x 0
  15         y 0
  16         width 660
  17         height 280
  18         fill ${bgcolor}
  19         stroke none
  20     polyline
  21         stroke ${color}
  22         fill ${color}
  23         stroke-width 2
  24         points 10 ${opt.ybottom} 45 ${opt.y0} 60 ${opt.y0} 75 ${opt.y1a + 40} 120 ${opt.y2} 120 ${opt.y1a + 40} 175 ${opt.y2} 175 ${opt.y1a + 20} 230 ${opt.y2} 230 ${opt.ybottom}
  25     wizzi-logo-i( 250,  &opt )
  26     wizzi-logo-z( 320,  &opt )
  27     wizzi-logo-z( 450,  &opt )
  28     wizzi-logo-i( 590,  &opt )

/t/html/layouts/site-scripts.html.ittf

edit

$group
    $params &opt
    $
        var useReact = opt.useReact || opt.useMaterialUI;
        var useBabel = useReact || opt.useBabel;

$if opt.useAce
        $if opt.isWizziStudio
            $if opt.production
                html/j( /public/lib/ace/src-min-noconflict/ace.js
            $else
                html/j( /public/lib/ace/src-noconflict/ace.js
        $else
            html/j( https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js
    $if opt.useBootstrap
        html/j( /public/lib/bootstrap/dist/js/bootstrap.min.js
    $if opt.useEventEmitter
        $$ html/j( https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js
        html/j( https://cdn.jsdelivr.net/npm/eventemitter3@5.0.1/index.min.js
    $if opt.useCodemirror
        html/j( /public/lib/codemirror/lib/codemirror.js
        html/j( /public/lib/codemirror/mode/javascript/javascript.js
        html/j( /public/lib/codemirror/mode/xml/xml.js
        html/j( /public/lib/codemirror/theme/monokai.css
        html/j( /public/lib/codemirror/theme/twilight.css
    $if opt.useDeepDiff
        $if opt.isWizziStudio
            html/j( /public/lib/flitbit/deep-diff.min.js
        $else
            html/j( https://cdnjs.cloudflare.com/ajax/libs/deep-diff/0.3.3/deep-diff.min.js
    $if opt.useKeycode
        $if opt.isWizziStudio
            html/j( /public/lib/material-ui/keycode.min.2.2.0.js
        $else
            html/j( https://cdn.jsdelivr.net/npm/keycode.js
    $if opt.useHighlight
        $if opt.isWizziStudio
            html/j( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js
        $else
            html/j( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js
    $if opt.useInteractJs
        html/j( /public/lib/interactjs/interact.js
    $if opt.useJarallax
        html/j( /public/lib/object-fit-images/ofi.min.js
        $if opt.production
            html/j( /public/lib/jarallax/jarallax.min.js
            html/j( /public/lib/jarallax/jarallax-video.min.js
            html/j( /public/lib/jarallax/jarallax-element.min.js
        $else
            html/j( /public/lib/jarallax/jarallax.js
            html/j( /public/lib/jarallax/jarallax-video.js
            html/j( /public/lib/jarallax/jarallax-element.js
    $if opt.useJQuery || opt.useBootstrap
        $if opt.production
            html/j( /public/lib/jquery/jquery.min.js
        $else
            html/j( /public/lib/jquery/jquery.js
    $if opt.useJsonFormatter
        $if opt.isWizziStudio
            html/j( /public/lib/json-formatter/json-formatter.js
        $else
            html/j( https://cdn.jsdelivr.net/npm/json-formatter-js@2.2.1/dist/json-formatter.min.js
    $if opt.useJss
        js /public/lib/jss/jss.js
        js /public/lib/jss/jss-preset-default.js
    $if opt.useMarkdown
        html/j( https://cdn.jsdelivr.net/npm/marked/marked.min.js
    $if opt.useMathJax
        html/j( https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML
    $if opt.usePopper
        html/j( /public/lib/popper/popper.js
    $if opt.usePrism
        $if opt.isWizziStudio
            js /public/lib/prism/prism.js
        $else
            js https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js
    $if opt.usePubSub
        js /public/lib/pubsub/pubsub.js
    $if useReact
        $if opt.production
            html/j( https://unpkg.com/prop-types@15.8.1/prop-types.min.js
        $else
            html/j( https://unpkg.com/prop-types@15.8.1/prop-types.js
        $if opt.production
            html/j( https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js
            html/j( https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js
        $else
            html/j( https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.min.js
            html/j( https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.min.js
        $if opt.useClassNames
            html/j( /public/lib/react/classnames.js
        $if opt.useMaterialUI
            $if opt.materialUI.latest
                $if opt.production
                    html/j( https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js
                $else
                    html/j( https://unpkg.com/@mui/material@latest/umd/material-ui.development.js
            $else
                $if opt.production
                    $if opt.materialUI.v4
                        html/j( https://unpkg.com/@material-ui/core@4.12.4/umd/material-ui.development.min.js
                    $else
                        html/j( https://unpkg.com/@mui/material@5.8.7/umd/material-ui.production.min.js
                $else
                    $if opt.materialUI.v4
                        html/j( https://unpkg.com/@material-ui/core@4.12.4/umd/material-ui.development.js
                    $else
                        html/j( https://unpkg.com/@mui/material@5.8.7/umd/material-ui.development.js
        $if opt.useRouter
            html/j( https://cdn.jsdelivr.net/npm/@remix-run/router@1.7.1/dist/router.umd.min.js
            html/j( https://cdn.jsdelivr.net/npm/react-router@6.14.1/dist/umd/react-router.production.min.js
            html/j( https://cdn.jsdelivr.net/npm/react-router-dom@6.14.1/dist/umd/react-router-dom.production.min.js
        $if opt.useReactGrid
            html/j( /public/lib/react/react-grid-layout.min.js
        $if opt.useDownshift
            $if opt.local || opt.isWizziStudio
                html/j( https://unpkg.com/downshift@6.1.7/dist/downshift.umd.js
            $else
                html/j( https://cdn.jsdelivr.net/npm/downshift@2.0.10/dist/downshift.umd.min.js
        $if opt.useGridLayout
            $if opt.useGridLayoutLatest
                html/j( https://unpkg.com/react-grid-layout@latest/dist/react-grid-layout.min.js
            $else
                html/j( https://unpkg.com/react-grid-layout@1.3.4/dist/react-grid-layout.min.js
        $if opt.react.useStyledComponents
            js //unpkg.com/styled-components@4.0.1/dist/styled-components.min.js
        $if opt.react.useTransitionGroup
            js https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.4.1/react-transition-group.min.js
    $if opt.useRxJs
        html/j( /public/lib/rxjs/rxjs.umd.min.js
    $if opt.useScrollReveal
        html/j( /public/lib/scrollreveal/scrollreveal.js
    $if opt.useSplit
        js /public/lib/controls/split.js
    $if opt.useSweetalert
        html/j( https://cdn.jsdelivr.net/npm/sweetalert2@7.31.1/dist/sweetalert2.all.min.js
    $if opt.useUnderscore
        $if opt.production
            html/j( /public/lib/underscore/underscore.min.js
        $else
            html/j( /public/lib/underscore/underscore.js
    $if opt.useVue
        html/j( https://unpkg.com/vue
    $if opt.useWizzi
        $if opt.isWizziStudio
            html/j( /public/wizzi-play/scripts/wizzi.standalone.js
        $else
            html/j( /scripts/wizzi.standalone.js
    $if opt.useMathJax
        script
            #
                _ MathJax.Hub.Config
                    {
                        @ tex2jax
                            {
                                @ inlineMath [['$','$'], ['\$','\$']]
                                @ processEscapes true
    $if useBabel
        html/j( https://cdn.jsdelivr.net/npm/@babel/standalone@7.22.9/babel.min.js
    $if opt.useMonaco
        html/j( /public/lib/monaco-editor/min/vs/loader.js
    $if opt.mainJs && opt.mainJs.length > 0
        $if useBabel
            script
                src ${opt.mainJs}
                type text/babel
        $else
            js ${opt.mainJs}

                                               1 $group
   2     $params &opt
   3     $
   4         var useReact = opt.useReact || opt.useMaterialUI;
   5         var useBabel = useReact || opt.useBabel;
   6     $if opt.useAce
   7         $if opt.isWizziStudio
   8             $if opt.production
   9                 html/j( /public/lib/ace/src-min-noconflict/ace.js)
  10             $else
  11                 html/j( /public/lib/ace/src-noconflict/ace.js)
  12         $else
  13             html/j( https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js)
  14     $if opt.useBootstrap
  15         html/j( /public/lib/bootstrap/dist/js/bootstrap.min.js)
  16     $if opt.useEventEmitter
  17         $$ html/j( https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js
  18         html/j( https://cdn.jsdelivr.net/npm/[email protected]/index.min.js)
  19     $if opt.useCodemirror
  20         html/j( /public/lib/codemirror/lib/codemirror.js)
  21         html/j( /public/lib/codemirror/mode/javascript/javascript.js)
  22         html/j( /public/lib/codemirror/mode/xml/xml.js)
  23         html/j( /public/lib/codemirror/theme/monokai.css)
  24         html/j( /public/lib/codemirror/theme/twilight.css)
  25     $if opt.useDeepDiff
  26         $if opt.isWizziStudio
  27             html/j( /public/lib/flitbit/deep-diff.min.js)
  28         $else
  29             html/j( https://cdnjs.cloudflare.com/ajax/libs/deep-diff/0.3.3/deep-diff.min.js)
  30     $if opt.useKeycode
  31         $if opt.isWizziStudio
  32             html/j( /public/lib/material-ui/keycode.min.2.2.0.js)
  33         $else
  34             html/j( https://cdn.jsdelivr.net/npm/keycode.js)
  35     $if opt.useHighlight
  36         $if opt.isWizziStudio
  37             html/j( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js)
  38         $else
  39             html/j( https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js)
  40     $if opt.useInteractJs
  41         html/j( /public/lib/interactjs/interact.js)
  42     $if opt.useJarallax
  43         html/j( /public/lib/object-fit-images/ofi.min.js)
  44         $if opt.production
  45             html/j( /public/lib/jarallax/jarallax.min.js)
  46             html/j( /public/lib/jarallax/jarallax-video.min.js)
  47             html/j( /public/lib/jarallax/jarallax-element.min.js)
  48         $else
  49             html/j( /public/lib/jarallax/jarallax.js)
  50             html/j( /public/lib/jarallax/jarallax-video.js)
  51             html/j( /public/lib/jarallax/jarallax-element.js)
  52     $if opt.useJQuery || opt.useBootstrap
  53         $if opt.production
  54             html/j( /public/lib/jquery/jquery.min.js)
  55         $else
  56             html/j( /public/lib/jquery/jquery.js)
  57     $if opt.useJsonFormatter
  58         $if opt.isWizziStudio
  59             html/j( /public/lib/json-formatter/json-formatter.js)
  60         $else
  61             html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/json-formatter.min.js)
  62     $if opt.useJss
  63         js /public/lib/jss/jss.js
  64         js /public/lib/jss/jss-preset-default.js
  65     $if opt.useMarkdown
  66         html/j( https://cdn.jsdelivr.net/npm/marked/marked.min.js)
  67     $if opt.useMathJax
  68         html/j( https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML)
  69     $if opt.usePopper
  70         html/j( /public/lib/popper/popper.js)
  71     $if opt.usePrism
  72         $if opt.isWizziStudio
  73             js /public/lib/prism/prism.js
  74         $else
  75             js https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js
  76     $if opt.usePubSub
  77         js /public/lib/pubsub/pubsub.js
  78     $if useReact
  79         $if opt.production
  80             html/j( https://unpkg.com/[email protected]/prop-types.min.js)
  81         $else
  82             html/j( https://unpkg.com/[email protected]/prop-types.js)
  83         $if opt.production
  84             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js)
  85             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js)
  86         $else
  87             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.min.js)
  88             html/j( https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.min.js)
  89         $if opt.useClassNames
  90             html/j( /public/lib/react/classnames.js)
  91         $if opt.useMaterialUI
  92             $if opt.materialUI.latest
  93                 $if opt.production
  94                     html/j( https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js)
  95                 $else
  96                     html/j( https://unpkg.com/@mui/material@latest/umd/material-ui.development.js)
  97             $else
  98                 $if opt.production
  99                     $if opt.materialUI.v4
 100                         html/j( https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.min.js)
 101                     $else
 102                         html/j( https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js)
 103                 $else
 104                     $if opt.materialUI.v4
 105                         html/j( https://unpkg.com/@material-ui/[email protected]/umd/material-ui.development.js)
 106                     $else
 107                         html/j( https://unpkg.com/@mui/[email protected]/umd/material-ui.development.js)
 108         $if opt.useRouter
 109             html/j( https://cdn.jsdelivr.net/npm/@remix-run/[email protected]/dist/router.umd.min.js)
 110             html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/react-router.production.min.js)
 111             html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/react-router-dom.production.min.js)
 112         $if opt.useReactGrid
 113             html/j( /public/lib/react/react-grid-layout.min.js)
 114         $if opt.useDownshift
 115             $if opt.local || opt.isWizziStudio
 116                 html/j( https://unpkg.com/[email protected]/dist/downshift.umd.js)
 117             $else
 118                 html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/downshift.umd.min.js)
 119         $if opt.useGridLayout
 120             $if opt.useGridLayoutLatest
 121                 html/j( https://unpkg.com/react-grid-layout@latest/dist/react-grid-layout.min.js)
 122             $else
 123                 html/j( https://unpkg.com/[email protected]/dist/react-grid-layout.min.js)
 124         $if opt.react.useStyledComponents
 125             js //unpkg.com/[email protected]/dist/styled-components.min.js
 126         $if opt.react.useTransitionGroup
 127             js https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.4.1/react-transition-group.min.js
 128     $if opt.useRxJs
 129         html/j( /public/lib/rxjs/rxjs.umd.min.js)
 130     $if opt.useScrollReveal
 131         html/j( /public/lib/scrollreveal/scrollreveal.js)
 132     $if opt.useSplit
 133         js /public/lib/controls/split.js
 134     $if opt.useSweetalert
 135         html/j( https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js)
 136     $if opt.useUnderscore
 137         $if opt.production
 138             html/j( /public/lib/underscore/underscore.min.js)
 139         $else
 140             html/j( /public/lib/underscore/underscore.js)
 141     $if opt.useVue
 142         html/j( https://unpkg.com/vue)
 143     $if opt.useWizzi
 144         $if opt.isWizziStudio
 145             html/j( /public/wizzi-play/scripts/wizzi.standalone.js)
 146         $else
 147             html/j( /scripts/wizzi.standalone.js)
 148     $if opt.useMathJax
 149         script
 150             #
 151                 _ MathJax.Hub.Config
 152                     {
 153                         @ tex2jax
 154                             {
 155                                 @ inlineMath [['$','$'], ['\\(','\\)']]
 156                                 @ processEscapes true
 157     $if useBabel
 158         html/j( https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js)
 159     $if opt.useMonaco
 160         html/j( /public/lib/monaco-editor/min/vs/loader.js)
 161     $if opt.mainJs && opt.mainJs.length > 0
 162         $if useBabel
 163             script
 164                 src ${opt.mainJs}
 165                 type text/babel
 166         $else
 167             js ${opt.mainJs}

/t/html/images/t/wizzi-logo-i.html.ittf
                                            edit
                                            $group
    $params l:integer, &opt
    polyline
        stroke ${opt.color}
        fill ${opt.color}
        stroke-width 2
        points ${l} ${opt.ybottom} ${l+10} ${opt.y1+80} ${l+40} ${opt.y1+80} ${l+50} ${opt.ybottom}
    path
        stroke ${opt.color}
        fill ${opt.color}
        stroke-width 2
        d M${l+30}, ${opt.y1+20} C${l+60},${opt.y1+40} ${l+0},${opt.y1+60} ${l+30}, ${opt.y1+74}

                                        
   1 $group
   2     $params l:integer, &opt
   3     polyline
   4         stroke ${opt.color}
   5         fill ${opt.color}
   6         stroke-width 2
   7         points ${l} ${opt.ybottom} ${l+10} ${opt.y1+80} ${l+40} ${opt.y1+80} ${l+50} ${opt.ybottom}
   8     path
   9         stroke ${opt.color}
  10         fill ${opt.color}
  11         stroke-width 2
  12         d M${l+30}, ${opt.y1+20} C${l+60},${opt.y1+40} ${l+0},${opt.y1+60} ${l+30}, ${opt.y1+74}

/t/html/images/t/wizzi-logo-z.html.ittf
                                            edit
                                            $group
    $params l:integer, &opt
    polyline
        stroke ${opt.color}
        fill ${opt.color}
        stroke-width 2
        points ${l} ${opt.ybottom} ${l} ${opt.ybottom - 20} ${l+100} ${opt.y1a+40} ${l+80} ${opt.y1a+20} ${l+80} ${opt.y1a} ${l+130} ${opt.y1a} ${l+100} ${opt.ybottom - 20} ${l+120} ${opt.ybottom - 20} ${l+120} ${opt.ybottom}

                                        
   1 $group
   2     $params l:integer, &opt
   3     polyline
   4         stroke ${opt.color}
   5         fill ${opt.color}
   6         stroke-width 2
   7         points ${l} ${opt.ybottom} ${l} ${opt.ybottom - 20} ${l+100} ${opt.y1a+40} ${l+80} ${opt.y1a+20} ${l+80} ${opt.y1a} ${l+130} ${opt.y1a} ${l+100} ${opt.ybottom - 20} ${l+120} ${opt.ybottom - 20} ${l+120} ${opt.ybottom}

/t/html/s.html.ittf
                                            edit
                                            $group
    $params url
    link
        href ${url}
        rel stylesheet

                                        
   1 $group
   2     $params url
   3     link
   4         href ${url}
   5         rel stylesheet

/t/html/j.html.ittf
                                            edit
                                            $group
    $params url
    script
        src ${url}
        crossorigin anonymous

                                        
   1 $group
   2     $params url
   3     script
   4         src ${url}
   5         crossorigin anonymous

/ittf/meta/folder/styles.css.ittf
                                            edit
                                            css
    $include options-init
    $
        opt.prettyprint = true;
        opt.l_mc_top = 8;
        opt.c_bg_tn_bar = '#fafafa';
        opt.c_bg_tn_main = '#ededed';
    $include options-analize
    css/layouts/meta_main(&opt)
    < body
        background-color ${opt.c_bg_0}
        color ${opt.c_0}
        font-size 16px
        font-family roboto, verdana, tahoma, arial, sans-serif
        line-height 1.8em
    < h1
        font-size 2rem
        padding 1rem 0 0.5rem 0
    < h2
        font-size 1.5rem
        padding 0.6rem 0 0.3rem 0
    . clear
        clear both
    $include css/tn
    $include css/fsitems
    $include css/mc
    $include css/sidebar-left
    $include css/breadcrumbs

                                        
   1 css
   2     $include options-init
   3     $
   4         opt.prettyprint = true;
   5         opt.l_mc_top = 8;
   6         opt.c_bg_tn_bar = '#fafafa';
   7         opt.c_bg_tn_main = '#ededed';
   8     $include options-analize
   9     css/layouts/meta_main( &opt)
  10     < body
  11         background-color ${opt.c_bg_0}
  12         color ${opt.c_0}
  13         font-size 16px
  14         font-family roboto, verdana, tahoma, arial, sans-serif
  15         line-height 1.8em
  16     < h1
  17         font-size 2rem
  18         padding 1rem 0 0.5rem 0
  19     < h2
  20         font-size 1.5rem
  21         padding 0.6rem 0 0.3rem 0
  22     . clear
  23         clear both
  24     $include css/tn
  25     $include css/fsitems
  26     $include css/mc
  27     $include css/sidebar-left
  28     $include css/breadcrumbs

/ittf/meta/t/options-init.ittf
                                            edit
                                            $group
    $
        var opt = {
            resetMarginsPaddingsBorders: true,
            resetDisplayBlock: false,
            resetOlUl: true,
            resetBlockquote: false,
            resetTable: false,
            resetLinks: true,
            prettyprint: false,
            debug_css: false,
            c_0: '#000',
            c_bg_0: '#fff',
            fa_1: false,
            sidebar_1: false,
            sb_1_min_w: 0,
            logo_w: 70,
            logo_h: 35,
        };

                                        
   1 $group
   2     $
   3         var opt = {
   4             resetMarginsPaddingsBorders: true,
   5             resetDisplayBlock: false,
   6             resetOlUl: true,
   7             resetBlockquote: false,
   8             resetTable: false,
   9             resetLinks: true,
  10             prettyprint: false,
  11             debug_css: false,
  12             c_0: '#000',
  13             c_bg_0: '#fff',
  14             fa_1: false,
  15             sidebar_1: false,
  16             sb_1_min_w: 0,
  17             logo_w: 70,
  18             logo_h: 35,
  19         };

/ittf/meta/t/options-analize.ittf
                                            edit
                                            $group
    $
        if (opt.sidebar_1) {
            opt.fa_1 = true;
        }

                                        
   1 $group
   2     $
   3         if (opt.sidebar_1) {
   4             opt.fa_1 = true;
   5         }

/ittf/meta/folder/t/css/tn.css.ittf
                                            edit
                                            $group
    # tn-input-toggle
        display none
    . tn-bar
        - We ensure that the navigation stays at the top of the browser window by giving it a position: fixed property.
            - Setting its width to min-width: 100% will ensure that the navigation spans the full width of the browser window.
        background-color ${opt.c_bg_tn_bar}
        position fixed
        min-width 100%
        . tn-main
            - flex for logo and menu UL
            display flex
            align-items center
            - space-between evenly distributes the child elements within the parent flex container
            justify-content space-between
            padding 1rem 1rem
            . logo
                background-color ${opt.c_bg_tn_bar}
                < img
                    width 7rem
                    height 3rem
                    & :hover
                        background-color ${opt.c_tn_bg_logo_hover}
        . tn-breadcrumbs
            margin 5px
            background-color $opt.c_bg_tn_main}

                                        
   1 $group
   2     # tn-input-toggle
   3         display none
   4     . tn-bar
   5         - We ensure that the navigation stays at the top of the browser window by giving it a position: fixed property.
   6             - Setting its width to min-width: 100% will ensure that the navigation spans the full width of the browser window.
   7         background-color ${opt.c_bg_tn_bar}
   8         position fixed
   9         min-width 100%
  10         . tn-main
  11             - flex for logo and menu UL
  12             display flex
  13             align-items center
  14             - space-between evenly distributes the child elements within the parent flex container
  15             justify-content space-between
  16             padding 1rem 1rem
  17             . logo
  18                 background-color ${opt.c_bg_tn_bar}
  19                 < img
  20                     width 7rem
  21                     height 3rem
  22                     & :hover
  23                         background-color ${opt.c_tn_bg_logo_hover}
  24         . tn-breadcrumbs
  25             margin 5px
  26             background-color $opt.c_bg_tn_main}

/ittf/meta/folder/t/css/fsitems.css.ittf
                                            edit
                                            $group
    . breadcrumbs-panel
        display flex
        flex-direction row
        padding 0 0.5rem 0.5rem 0.5rem
    . breadcrumb-item
        padding 0.5rem 1rem
        font-size 1.5rem
    . fsitem
        < img
            position relative
            top 3px
        < a
            padding-left 0.5rem

                                        
   1 $group
   2     . breadcrumbs-panel
   3         display flex
   4         flex-direction row
   5         padding 0 0.5rem 0.5rem 0.5rem
   6     . breadcrumb-item
   7         padding 0.5rem 1rem
   8         font-size 1.5rem
   9     . fsitem
  10         < img
  11             position relative
  12             top 3px
  13         < a
  14             padding-left 0.5rem

/ittf/meta/folder/t/css/mc.css.ittf
                                            edit
                                            $group
    # mc-wrapper
        position fixed
        width 100%
        height 100%
        $if opt.debug_css
            border 1px solid blue
    . mc-wrapper-layout
        top ${opt.l_mc_top}rem
        height calc(100% - ${opt.l_mc_top + 10}rem)
    . mc-frame
        display flex
        flex-direction row
        height 100%
        $if opt.debug_css
            border 1px solid red
    . mc-content
        padding 20px 20px
        height calc(100% - 10rem)
        overflow auto

                                        
   1 $group
   2     # mc-wrapper
   3         position fixed
   4         width 100%
   5         height 100%
   6         $if opt.debug_css
   7             border 1px solid blue
   8     . mc-wrapper-layout
   9         top ${opt.l_mc_top}rem
  10         height calc(100% - ${opt.l_mc_top + 10}rem)
  11     . mc-frame
  12         display flex
  13         flex-direction row
  14         height 100%
  15         $if opt.debug_css
  16             border 1px solid red
  17     . mc-content
  18         padding 20px 20px
  19         height calc(100% - 10rem)
  20         overflow auto

/ittf/meta/t/css/sidebar-left.css.ittf
                                            edit
                                            $group
    . mc-sidebar-left
        padding 20px 30px
        $$ still i can't find why i need to subtract these
        height calc(100% - 10rem)
        min-width 20rem
        overflow auto
        < ul
            display flex
            justify-content space-between
            flex-direction column
            list-style-type none
            transition all 1s ease
            < li
                border-bottom 1px solid ${opt.c_0}
                color ${opt.c_0}
                display block
                font-size 0.8rem
                $$ padding 0.1rem 0 0.1rem 1rem
                padding 0
                < a
                    color ${opt.c_0}
            < li:last-child
                border-bottom 0
    . mc-sidebar-left-title
        display none

                                        
   1 $group
   2     . mc-sidebar-left
   3         padding 20px 30px
   4         $$ still i can't find why i need to subtract these
   5         height calc(100% - 10rem)
   6         min-width 20rem
   7         overflow auto
   8         < ul
   9             display flex
  10             justify-content space-between
  11             flex-direction column
  12             list-style-type none
  13             transition all 1s ease
  14             < li
  15                 border-bottom 1px solid ${opt.c_0}
  16                 color ${opt.c_0}
  17                 display block
  18                 font-size 0.8rem
  19                 $$ padding 0.1rem 0 0.1rem 1rem
  20                 padding 0
  21                 < a
  22                     color ${opt.c_0}
  23             < li:last-child
  24                 border-bottom 0
  25     . mc-sidebar-left-title
  26         display none

/ittf/css/main.css.ittf
                                            edit
                                            css
    $
        var count = [0,1,2,3,4,5];
        var sizes = ['s','m','l','x','xl','xxl'];
        var scale = ['0.4','0.6','1','1.3','1.6','3'];
        var scaleRad = ['3','6','12','18','30','48'];
        var scaleWidth = [15,25,35,65,75,85];
        var scale50 = [50,100,150,200];

    < html
        font-family -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
        font-size 16px
    < body
        margin 0
    < a
        text-decoration none
        color #ffffff
    $include colors
    $include layout
    . fixed
        position fixed
    . relative
        position relative
    . absolute
        position absolute
    . flex-row
        display flex
        flex-direction row
    . flex-column
        display flex
        flex-direction column
    . justify-content-start
        justify-content start
    . justify-content-center
        justify-content center
    . justify-content-space-between
        justify-content space-between
    . space-between
        justify-content space-between
    . align-items-start
        align-items start
    . align-items-center
        align-items center
    . width-full
        width 100%!important
    . width-half
        width 50%!important
    . text-align-center
        text-align center
    . text-align-left
        text-align left
    . text-align-right
        text-align right
    . text-align-justify
        text-align justify
    . m-0-auto
        margin 0 auto
    $foreach c in scale50
        . m-${c}
            margin ${c}px
        . m-l-${c}
            margin-left ${c}px
        . m-r-${c}
            margin-right ${c}px
        . m-t-${c}
            margin-top ${c}px
        . m-b-${c}
            margin-bottom ${c}px
    $foreach c in count
        . font-${sizes[c]}
            font-size ${scale[c]}em
        . m-${sizes[c]}
            margin ${scale[c]}em
        . m-t-${sizes[c]}
            margin-top ${scale[c]}em
        . m-b-${sizes[c]}
            margin-bottom ${scale[c]}em
        . m-l-${sizes[c]}
            margin-left ${scale[c]}em
        . m-r-${sizes[c]}
            margin-right ${scale[c]}em
        . m-w-${sizes[c]}
            margin-left ${scale[c]}em
            margin-right ${scale[c]}em
        . m-y-${sizes[c]}
            margin-top ${scale[c]}em
            margin-bottom ${scale[c]}em
        . p-${sizes[c]}
            padding ${scale[c]}em
        . p-t-${sizes[c]}
            padding-top ${scale[c]}em
        . p-b-${sizes[c]}
            padding-bottom ${scale[c]}em
        . p-l-${sizes[c]}
            padding-left ${scale[c]}em
        . p-r-${sizes[c]}
            padding-right ${scale[c]}em
        . p-w-${sizes[c]}
            padding-left ${scale[c]}em
            padding-right ${scale[c]}em
        . p-y-${sizes[c]}
            padding-top ${scale[c]}em
            padding-bottom ${scale[c]}em
        . border-${sizes[c]}
            border ${c+1}px solid #323232
        . border-t-${sizes[c]}
            border-top ${c+1}px solid #323232
        . border-b-${sizes[c]}
            border-bottom ${c+1}px solid #323232
        . border-l-${sizes[c]}
            border-left ${c+1}px solid #323232
        . border-r-${sizes[c]}
            border-right ${c+1}px solid #323232
        . radius-${sizes[c]}
            border-radius ${scaleRad[c]}px
        . width-${sizes[c]}
            width ${scaleWidth[c]}%!important
    . font-w-s
        font-weight 300
    . font-w-x
        font-weight 500
    . font-w-xxl
        font-weight 700
    $include form
    $include icons

                                        
   1 css
   2     $
   3         var count = [0,1,2,3,4,5];
   4         var sizes = ['s','m','l','x','xl','xxl'];
   5         var scale = ['0.4','0.6','1','1.3','1.6','3'];
   6         var scaleRad = ['3','6','12','18','30','48'];
   7         var scaleWidth = [15,25,35,65,75,85];
   8         var scale50 = [50,100,150,200];
   9     < html
  10         font-family -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  11         font-size 16px
  12     < body
  13         margin 0
  14     < a
  15         text-decoration none
  16         color #ffffff
  17     $include colors
  18     $include layout
  19     . fixed
  20         position fixed
  21     . relative
  22         position relative
  23     . absolute
  24         position absolute
  25     . flex-row
  26         display flex
  27         flex-direction row
  28     . flex-column
  29         display flex
  30         flex-direction column
  31     . justify-content-start
  32         justify-content start
  33     . justify-content-center
  34         justify-content center
  35     . justify-content-space-between
  36         justify-content space-between
  37     . space-between
  38         justify-content space-between
  39     . align-items-start
  40         align-items start
  41     . align-items-center
  42         align-items center
  43     . width-full
  44         width 100%!important
  45     . width-half
  46         width 50%!important
  47     . text-align-center
  48         text-align center
  49     . text-align-left
  50         text-align left
  51     . text-align-right
  52         text-align right
  53     . text-align-justify
  54         text-align justify
  55     . m-0-auto
  56         margin 0 auto
  57     $foreach c in scale50
  58         . m-${c}
  59             margin ${c}px
  60         . m-l-${c}
  61             margin-left ${c}px
  62         . m-r-${c}
  63             margin-right ${c}px
  64         . m-t-${c}
  65             margin-top ${c}px
  66         . m-b-${c}
  67             margin-bottom ${c}px
  68     $foreach c in count
  69         . font-${sizes[c]}
  70             font-size ${scale[c]}em
  71         . m-${sizes[c]}
  72             margin ${scale[c]}em
  73         . m-t-${sizes[c]}
  74             margin-top ${scale[c]}em
  75         . m-b-${sizes[c]}
  76             margin-bottom ${scale[c]}em
  77         . m-l-${sizes[c]}
  78             margin-left ${scale[c]}em
  79         . m-r-${sizes[c]}
  80             margin-right ${scale[c]}em
  81         . m-w-${sizes[c]}
  82             margin-left ${scale[c]}em
  83             margin-right ${scale[c]}em
  84         . m-y-${sizes[c]}
  85             margin-top ${scale[c]}em
  86             margin-bottom ${scale[c]}em
  87         . p-${sizes[c]}
  88             padding ${scale[c]}em
  89         . p-t-${sizes[c]}
  90             padding-top ${scale[c]}em
  91         . p-b-${sizes[c]}
  92             padding-bottom ${scale[c]}em
  93         . p-l-${sizes[c]}
  94             padding-left ${scale[c]}em
  95         . p-r-${sizes[c]}
  96             padding-right ${scale[c]}em
  97         . p-w-${sizes[c]}
  98             padding-left ${scale[c]}em
  99             padding-right ${scale[c]}em
 100         . p-y-${sizes[c]}
 101             padding-top ${scale[c]}em
 102             padding-bottom ${scale[c]}em
 103         . border-${sizes[c]}
 104             border ${c+1}px solid #323232
 105         . border-t-${sizes[c]}
 106             border-top ${c+1}px solid #323232
 107         . border-b-${sizes[c]}
 108             border-bottom ${c+1}px solid #323232
 109         . border-l-${sizes[c]}
 110             border-left ${c+1}px solid #323232
 111         . border-r-${sizes[c]}
 112             border-right ${c+1}px solid #323232
 113         . radius-${sizes[c]}
 114             border-radius ${scaleRad[c]}px
 115         . width-${sizes[c]}
 116             width ${scaleWidth[c]}%!important
 117     . font-w-s
 118         font-weight 300
 119     . font-w-x
 120         font-weight 500
 121     . font-w-xxl
 122         font-weight 700
 123     $include form
 124     $include icons

/ittf/css/t/colors.css.ittf
                                            edit
                                            $group
    - header
    - main
    - main-content
    - footer
    < :root
        --color-tn-bg #313131
        --color-input-bg #dedede
        --color-input-border #767676
        --color-shadow-inset #a0a0a0
        --color-text-primary #000000
        --color-success #2ea44f
        --color-error #ff0000
        --color-warning #dbab09
    . color-header
        color #efefef
    . bg-color-header
        background-color #434343
    . color-header-inverse
        color #ff4790
    . bg-color-header-inverse
        background-color #737373
    . color-main
        color #efefef
    . bg-color-main
        background-color #494949
    . color-main-content
        color #efefef
    . bg-color-main-content
        background-color #515151
    . color-black
        color #000000
    . bg-white
        background-color #000000
    . color-white
        color #ffffff
    . bg-black
        background-color #000000
    . color-success
        color var(--color-success)
    . bg-success
        background-color var(--color-success)
    . color-error
        color var(--color-error)
    . bg-error
        background-color var(--color-error)
    . color-warning
        color var(--color-warning)
    . bg-warning
        background-color var(--color-warning)
    . bg-filter
        background-color #eeeeff
    . bg-list
        background-color #eeffee

                                        
   1 $group
   2     - header
   3     - main
   4     - main-content
   5     - footer
   6     < :root
   7         --color-tn-bg #313131
   8         --color-input-bg #dedede
   9         --color-input-border #767676
  10         --color-shadow-inset #a0a0a0
  11         --color-text-primary #000000
  12         --color-success #2ea44f
  13         --color-error #ff0000
  14         --color-warning #dbab09
  15     . color-header
  16         color #efefef
  17     . bg-color-header
  18         background-color #434343
  19     . color-header-inverse
  20         color #ff4790
  21     . bg-color-header-inverse
  22         background-color #737373
  23     . color-main
  24         color #efefef
  25     . bg-color-main
  26         background-color #494949
  27     . color-main-content
  28         color #efefef
  29     . bg-color-main-content
  30         background-color #515151
  31     . color-black
  32         color #000000
  33     . bg-white
  34         background-color #000000
  35     . color-white
  36         color #ffffff
  37     . bg-black
  38         background-color #000000
  39     . color-success
  40         color var(--color-success)
  41     . bg-success
  42         background-color var(--color-success)
  43     . color-error
  44         color var(--color-error)
  45     . bg-error
  46         background-color var(--color-error)
  47     . color-warning
  48         color var(--color-warning)
  49     . bg-warning
  50         background-color var(--color-warning)
  51     . bg-filter
  52         background-color #eeeeff
  53     . bg-list
  54         background-color #eeffee

/ittf/css/t/layout.css.ittf
                                            edit
                                            $group
    . container-70
        width 70%
        margin 0 auto
    . container-80
        width 80%
        margin 0 auto
    . container-90
        width 90%
        margin 0 auto
    . flex-row
        display flex
        flex-direction row
    . flex-column
        display flex
        flex-direction column
    . justify-content-start
        justify-content start
    . justify-content-center
        justify-content center
    . justify-content-space-between
        justify-content space-between
    . space-between
        justify-content space-between
    . align-items-start
        align-items start
    . align-items-center
        align-items center
    . grid
        display grid
    . width-100
        width 100%
    . width-50
        width 50%
    . height-100
        height 100%
    . height-50
        height 50%

                                        
   1 $group
   2     . container-70
   3         width 70%
   4         margin 0 auto
   5     . container-80
   6         width 80%
   7         margin 0 auto
   8     . container-90
   9         width 90%
  10         margin 0 auto
  11     . flex-row
  12         display flex
  13         flex-direction row
  14     . flex-column
  15         display flex
  16         flex-direction column
  17     . justify-content-start
  18         justify-content start
  19     . justify-content-center
  20         justify-content center
  21     . justify-content-space-between
  22         justify-content space-between
  23     . space-between
  24         justify-content space-between
  25     . align-items-start
  26         align-items start
  27     . align-items-center
  28         align-items center
  29     . grid
  30         display grid
  31     . width-100
  32         width 100%
  33     . width-50
  34         width 50%
  35     . height-100
  36         height 100%
  37     . height-50
  38         height 50%

/ittf/css/t/form.css.ittf
                                            edit
                                            $group
    . form-control
        background-color var(--color-input-bg)
        background-position right 8px center
        background-repeat no-repeat
        border 1px solid var(--color-input-border)
        border-radius 6px
        box-shadow var(--color-shadow-inset)
        color var(--color-text-primary)
        font-size 14px
        line-height 20px
        outline none
        padding 5px 12px
        vertical-align middle
    # ==========================================================================
    # Form
    # ==========================================================================
    . form-card
        padding 30px
        border 1px solid #ebebeb
    . form-title
        font-size 30px
        font-weight 700
        margin-bottom 20px
    # ==========================================================================
    # Control
    # ==========================================================================
    . control-group
        width 100%
        padding 10px
        margin-bottom 5px
    . single-control
        width 100%
        margin-bottom 5px
    . control-label
        font-weight bold
        margin-bottom 7px
    . control-error
        font-size 12px
        color red
    # ==========================================================================
    # Label
    # ==========================================================================
    < label.required
        position relative
    < label.required:after
        content '*'
        margin-left 2px
        color #b90000
    # ==========================================================================
    # GRID
    # ==========================================================================
    . grid-row-2
        display grid
        grid-template-columns 1fr 1fr
    . grid-row-3
        display grid
        grid-template-columns 1fr 1fr 1fr
    . input-group
        position relative
        width 100%
        margin-bottom 1px
        padding-bottom 4px
    # ==========================================================================
    # BUTTON
    # ==========================================================================
    . btn
        line-height 40px
        display inline-block
        padding 0 25px
        cursor pointer
        color #fff
        font-family "Roboto", "Arial", "Helvetica Neue", sans-serif
        transition all 0.4s ease
        font-size 14px
        font-weight 700
    . btn--radius
        border-radius 3px
    . btn--green
        background #57b846
    . btn--green:hover
        background #4dae3c
    # ==========================================================================
    # Input
    # ==========================================================================
    < input
        box-sizing border-box
        border 1px solid #ebebeb
        padding 14px 20px
        border-radius 5px
        font-size 14px
        font-family inherit
    < input:focus
        border 1px solid #009e00
    < input.error
        border 1px solid #c70000
    . input-icon
        position absolute
        font-size 18px
        color #ccc
        right 8px
        top 50%
        transform translateY(-50%)
        cursor pointer
    . input--style-2
        color #666
        font-size 16px
        font-weight 500
    . input--style-2::-webkit-input-placeholder
        color #808080
        opacity .4
    . input--style-2:-moz-placeholder
        color #808080
        opacity .4
    . input--style-2::-moz-placeholder
        color #808080
        opacity .4
    . input--style-2:-ms-input-placeholder
        color #808080
        opacity .4
    . input--style-2:-ms-input-placeholder
        color #808080
        opacity .4
    # ==========================================================================
    # Object condition
    # ==========================================================================
    . object-condition
        border 1px solid #cbcbcb
        padding 5px
        background-color #efefef
    . object-condition-checkbox
        background-color #fff

                                        
   1 $group
   2     . form-control
   3         background-color var(--color-input-bg)
   4         background-position right 8px center
   5         background-repeat no-repeat
   6         border 1px solid var(--color-input-border)
   7         border-radius 6px
   8         box-shadow var(--color-shadow-inset)
   9         color var(--color-text-primary)
  10         font-size 14px
  11         line-height 20px
  12         outline none
  13         padding 5px 12px
  14         vertical-align middle
  15     # ==========================================================================
  16     # Form
  17     # ==========================================================================
  18     . form-card
  19         padding 30px
  20         border 1px solid #ebebeb
  21     . form-title
  22         font-size 30px
  23         font-weight 700
  24         margin-bottom 20px
  25     # ==========================================================================
  26     # Control
  27     # ==========================================================================
  28     . control-group
  29         width 100%
  30         padding 10px
  31         margin-bottom 5px
  32     . single-control
  33         width 100%
  34         margin-bottom 5px
  35     . control-label
  36         font-weight bold
  37         margin-bottom 7px
  38     . control-error
  39         font-size 12px
  40         color red
  41     # ==========================================================================
  42     # Label
  43     # ==========================================================================
  44     < label.required
  45         position relative
  46     < label.required:after
  47         content '*'
  48         margin-left 2px
  49         color #b90000
  50     # ==========================================================================
  51     # GRID
  52     # ==========================================================================
  53     . grid-row-2
  54         display grid
  55         grid-template-columns 1fr 1fr
  56     . grid-row-3
  57         display grid
  58         grid-template-columns 1fr 1fr 1fr
  59     . input-group
  60         position relative
  61         width 100%
  62         margin-bottom 1px
  63         padding-bottom 4px
  64     # ==========================================================================
  65     # BUTTON
  66     # ==========================================================================
  67     . btn
  68         line-height 40px
  69         display inline-block
  70         padding 0 25px
  71         cursor pointer
  72         color #fff
  73         font-family "Roboto", "Arial", "Helvetica Neue", sans-serif
  74         transition all 0.4s ease
  75         font-size 14px
  76         font-weight 700
  77     . btn--radius
  78         border-radius 3px
  79     . btn--green
  80         background #57b846
  81     . btn--green:hover
  82         background #4dae3c
  83     # ==========================================================================
  84     # Input
  85     # ==========================================================================
  86     < input
  87         box-sizing border-box
  88         border 1px solid #ebebeb
  89         padding 14px 20px
  90         border-radius 5px
  91         font-size 14px
  92         font-family inherit
  93     < input:focus
  94         border 1px solid #009e00
  95     < input.error
  96         border 1px solid #c70000
  97     . input-icon
  98         position absolute
  99         font-size 18px
 100         color #ccc
 101         right 8px
 102         top 50%
 103         transform translateY(-50%)
 104         cursor pointer
 105     . input--style-2
 106         color #666
 107         font-size 16px
 108         font-weight 500
 109     . input--style-2::-webkit-input-placeholder
 110         color #808080
 111         opacity .4
 112     . input--style-2:-moz-placeholder
 113         color #808080
 114         opacity .4
 115     . input--style-2::-moz-placeholder
 116         color #808080
 117         opacity .4
 118     . input--style-2:-ms-input-placeholder
 119         color #808080
 120         opacity .4
 121     . input--style-2:-ms-input-placeholder
 122         color #808080
 123         opacity .4
 124     # ==========================================================================
 125     # Object condition
 126     # ==========================================================================
 127     . object-condition
 128         border 1px solid #cbcbcb
 129         padding 5px
 130         background-color #efefef
 131     . object-condition-checkbox
 132         background-color #fff

/ittf/css/t/icons.css.ittf
                                            edit
                                            $group
    . octicon
        fill currentColor
        display inline-block
        overflow visible!important
        vertical-align text-bottom

                                        
   1 $group
   2     . octicon
   3         fill currentColor
   4         display inline-block
   5         overflow visible!important
   6         vertical-align text-bottom

/ittf/meta/folder/index.html.ittf (primary)

/t/models/docs/site.wzctx.ittf

/t/html/layouts/site.html.ittf

/t/html/layouts/t/styles.html.ittf

/t/html/layouts/site-styles.html.ittf

/t/html/a.html.ittf

/t/html/images/logo.html.ittf

/t/html/layouts/site-scripts.html.ittf

/t/html/images/t/wizzi-logo-i.html.ittf

/t/html/images/t/wizzi-logo-z.html.ittf

/t/html/s.html.ittf

/t/html/j.html.ittf

/ittf/meta/folder/styles.css.ittf

/ittf/meta/t/options-init.ittf

/ittf/meta/t/options-analize.ittf

/ittf/meta/folder/t/css/tn.css.ittf

/ittf/meta/folder/t/css/fsitems.css.ittf

/ittf/meta/folder/t/css/mc.css.ittf

/ittf/meta/t/css/sidebar-left.css.ittf

/ittf/meta/t/css/breadcrumbs.css.ittf

/ittf/css/main.css.ittf

/ittf/css/t/colors.css.ittf

/ittf/css/t/layout.css.ittf

/ittf/css/t/form.css.ittf

/ittf/css/t/icons.css.ittf