/ittf/site/starter.html.ittf (primary)

edit 
                                            
   1 html
   2     $
   3         var opt = {
   4             section: 'Starter',
   5         }
   6         var ca = 'm-s color-header font-x font-w-s';
   7     html/layouts/site( &opt )
   8         . flex-row space-between bg-color-header color-header
   9             . flex-row
  10                 a( Artifacts,  /productions/artifacts,  ${ca})
  11                 a( Packages,  /productions/packages,  ${ca})
  12                 a( Metas,  /productions/metas,  ${ca})
  13                 a( tFolders,  /productions/tfolders,  ${ca})

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

edit 
                                            
   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/a.html.ittf

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

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

edit 
                                            
   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/t/styles.html.ittf

edit 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   1 $group
   2     $params url
   3     link
   4         href ${url}
   5         rel stylesheet

/t/html/j.html.ittf

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

/ittf/css/main.css.ittf

edit 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   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 
                                            
   1 $group
   2     . octicon
   3         fill currentColor
   4         display inline-block
   5         overflow visible!important
   6         vertical-align text-bottom