View source for User:Max34/Sandbox

__NOTOC__<includeonly><onlyinclude><code style="padding:0">
* <nowiki>{{{1}}}</nowiki> → {{{1}}}
* <nowiki>{{{1|}}}</nowiki> → {{{1|}}}
* <nowiki>{{{1|test}}}</nowiki> → {{{1|test}}}
* <nowiki>{{#if:{{{1}}}|true|false}}</nowiki> → {{#if:{{{1}}}|true|false}}
* <nowiki>{{#if:{{{1|}}}|true|false}}</nowiki> → {{#if:{{{1|}}}|true|false}}
* <nowiki>{{#ifeq:{{{1|}}}||true|false}}</nowiki> → {{#ifeq:{{{1|}}}||true|false}}
* <nowiki>{{#ifeq:{{{1|}}}|{{{1}}}|true|false}}</nowiki> → {{#ifeq:{{{1|}}}|{{{1}}}|true|false}}
</code></onlyinclude></includeonly>
== An interesting optimization method that works ==
This {{Code|<nowiki>{{Text-dir|ltr=righ|rtl=lef}}t:0;</nowiki>}} is a little bit more optimized than this {{Code|<nowiki>{{Text-dir|ltr=right|rtl=left}}:0;</nowiki>}}



== ''Windows'' Windows ==
<div class="window" style="width:fit-content; -webkit-font-smoothing:none; font-family:MS Sans Serif,Arial; font-size:11px; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; padding:3px">
<div class="title-bar" style="align-items:center; background:linear-gradient(90deg,navy,#1084d0); display:flex; justify-content:space-between; padding:3px 2px 3px 3px">
<div class="title-bar-text" style="color:#FFF; font-weight:550; letter-spacing:0; margin-right:24px">My First Windows 98 Program</div>

<div class="title-bar-controls" style="display:flex">
<div aria-label="Minimize" style="border:none; border-radius:0; box-sizing:border-box; color:transparent; text-shadow:0 0 #222; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; display:block; min-height:14px; min-width:16px; padding:0;"></div>
<div aria-label="Maximize" style="border:none; border-radius:0; box-sizing:border-box; color:transparent; text-shadow:0 0 #222; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; display:block; min-height:14px; min-width:16px; padding:0;"></div>
<div aria-label="Close" style="border:none; border-radius:0; box-sizing:border-box; color:transparent; text-shadow:0 0 #222; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; display:block; min-height:14px; min-width:16px; padding:0; margin-left:2px;"></div>
</div>
</div>
<div class="window-body" style="margin:8px; color:#000">This is my Windows 98!</div>
</div>




<div class="window" style="width:fit-content; background-color:#E8E8D8; box-shadow:inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd; border-top-left-radius:8px; border-top-right-radius:8px; padding:0 0 3px; -webkit-font-smoothing:antialiased">
<div class="title-bar" style="display:flex; justify-content:space-between; align-items:center; font-family:Trebuchet MS; background:linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7); padding:3px 5px 3px 3px; border-top:1px solid #0831d9; border-left:1px solid #0831d9; border-right:1px solid #001ea0; border-top-left-radius:8px; border-top-right-radius:7px; font-size:13px; text-shadow:1px 1px #0f1089; height:21px">
<div class="title-bar-text" style="white-space:nowrap; padding-left:3px; font-weight:700; color:#FFF; letter-spacing:0; margin-right:24px">My First Windows XP Program</div>

<div class="title-bar-controls" style="display:flex"><!--Buttons should be here--></div>
</div>
<div class="window-body" style="margin:8px; color:#000">This is my Windows XP!</div>
</div>




<div class="window active" style="color:#000; width:fit-content; border:1px solid rgba(0,0,0,.7); border-radius:6px; box-shadow:2px 2px 10px 1px rgb(0 0 0 / 70%); font:9pt Segoe UI,sans-serif; position:relative; z-index:0"><div style="background:linear-gradient(transparent 20%,hsla(0,0%,100%,.7) 40%,transparent 41%),linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4; border-radius:6px; height:100%; position:absolute; width:100%; z-index:-1"></div>
<div class="title-bar" style="gap:6px; align-items:center; background:linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4; border-radius:6px 6px 0 0; display:flex; font:9pt Segoe UI,sans-serif; justify-content:space-between; padding:6px; box-shadow:inset 0 0.5px #FFF;">
<div class="title-bar-text" style="white-space:nowrap; color:#000; letter-spacing:0; line-height:15px; text-shadow:0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF">My First Windows 7 Program</div>

<div class="title-bar-controls" style="background:hsla(0,0%,100%,.2); border:1px solid rgba(0,0,0,.3); border-radius:0 0 5px 5px; border-top:0; box-shadow:0 0 2px #fff; display:flex; margin-top:-6px">
<div aria-label="Minimize" style="border:0; border-radius:0; border-right: 1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; border-bottom-left-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Maximize" style="border:0; border-radius:0; border-right:1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Close" style="border-radius:0; box-sizing:border-box; min-height:19px; padding:0; position:relative; min-width: 48px; border:0; border-bottom-right-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); background-color:#d04834; box-shadow: inset 0 0 0 1px #eee8;"></div>
</div>
</div>
<div class="window-body has-space" style="background:#f0f0f0; border:1px solid rgba(0,0,0,.7); box-shadow:0 0 1px 0.5px #fff; margin:0 6px 6px; padding:6px">This is my Windows 7!</div>
</div>





<div class="window active" style="color:#000; width:fit-content; border:1px solid rgba(0,0,0,.7); border-radius:6px; box-shadow:2px 2px 10px 1px rgb(0 0 0 / 70%); font:9pt Segoe UI,sans-serif; position:relative; z-index:0"><div style="background:linear-gradient(transparent 20%,hsla(0,0%,100%,.7) 40%,transparent 41%),linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4; border-radius:6px; height:100%; position:absolute; width:100%; z-index:-1; opacity:.75;"></div>
<div class="title-bar" style="gap:6px; align-items:center; background: linear-gradient(55deg,transparent 8%,hsla(0,0%,100%,.1) 10%,hsla(0,0%,100%,.3) 30%,rgba(0,0,0,.1) 32%,rgba(0,0,0,.3) 55%,transparent 57%,hsla(0,0%,100%,.3) 70%,transparent 72%); border-radius:6px 6px 0 0; display:flex; font:9pt Segoe UI,sans-serif; justify-content:space-between; padding:6px; box-shadow:inset 0 0.5px #FFF;">
<div class="title-bar-text" style="white-space:nowrap; color:#000; letter-spacing:0; line-height:15px; text-shadow:0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF">My First Windows 7 Aero Program</div>

<div class="title-bar-controls" style="background:hsla(0,0%,100%,.2); border:1px solid rgba(0,0,0,.3); border-radius:0 0 5px 5px; border-top:0; box-shadow:0 0 2px #fff; display:flex; margin-top:-6px">
<div aria-label="Minimize" style="border:0; border-radius:0; border-right: 1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; border-bottom-left-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Maximize" style="border:0; border-radius:0; border-right:1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Close" style="border-radius:0; box-sizing:border-box; min-height:19px; padding:0; position:relative; min-width: 48px; border:0; border-bottom-right-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); background-color:#d04834; box-shadow: inset 0 0 0 1px #eee8;"></div>
</div>
</div>
<div class="window-body has-space" style="background:#f0f0f0; border:1px solid rgba(0,0,0,.7); box-shadow:0 0 1px 0.5px #fff; margin:0 6px 6px; padding:6px">This<br>is<br>my<br>Windows<br>7<br>Aero<br>!</div>
</div>





== SVG imitation ==
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(-45deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(45deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(-135deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(135deg);"></div>


<div style="display:flex; flex-direction:column; align-items:center; width:min-content">
<div style="width:8px; height:6px; border:3px solid #818181; border-bottom:0; border-radius:10px 10px 0 0"></div>
<div style="background:#FFCD30; width:16px; height:12px; border-radius:0 0 2px 2px"></div>
</div>







<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;">Всякий текст ё-маё</span>
</div>

<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;">Всякий текст ё-маё</span>
</div>

<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;">Всякий текст ё-маё</span>
</div>

<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #0000008F, 0 1px 1px #0000008F, -1px 0 1px #0000008F, 0 -1px 1px #0000008F, 1px 1px 1px #0000008F, -1px 1px 1px #0000008F, 1px -1px 1px #0000008F, -1px -1px 1px #0000008F;">Всякий текст ё-маё</span>
</div>

<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;">Всякий текст ё-маё</span>
</div>

<div style=text-align:center;background:lightgrey>
<span style="-webkit-text-stroke:1px #000">Всякий текст ё-маё</span>
</div>



{{{1}}}

{{#time: i:s|now}}

<div id="ThisDivWillBeUsedByExternalForces" style="color:green">Hi, i’m Test!</div>

<div id="AnotherOne-en">Text Size:</div>

<div id="AnotherOne-ru">Размер текста:</div>


Translation Progress (Russian): {{#expr: (({{PAGESINCATEGORY:Tp-ru full}} + ({{PAGESINCATEGORY:Tp-ru high}} * 80 + {{PAGESINCATEGORY:Tp-ru average}} * 50 + {{PAGESINCATEGORY:Tp-ru low}} * 20) / 100) * 100) / ({{PAGESINCATEGORY:Tp-ru full}} + {{PAGESINCATEGORY:Tp-ru high}} + {{PAGESINCATEGORY:Tp-ru average}} + {{PAGESINCATEGORY:Tp-ru low}} + {{PAGESINCATEGORY:Tp-ru zero}}) }}%

== How to work with params ==

==== No Param 1 ({{T||Template}}) ====
{{:{{FULLPAGENAME}}}}

==== Empty Param 1 ({{T||Template{{P}}}}) ====
{{:{{FULLPAGENAME}}|}}

==== Param 1 with text ({{T||Template{{P|Some text}}}}) ====
{{:{{FULLPAGENAME}}|Some text}}

== Named Colors ==
<span style="color:IndianRed">█</span>
<span style="color:LightCoral">█</span>
<span style="color:Salmon">█</span>
<span style="color:DarkSalmon">█</span>
<span style="color:LightSalmon">█</span>
<span style="color:Crimson">█</span>
<span style="color:Red">█</span>
<span style="color:FireBrick">█</span>
<span style="color:DarkRed">█</span>

<span style="color:Pink">█</span>
<span style="color:LightPink">█</span>
<span style="color:HotPink">█</span>
<span style="color:DeepPink">█</span>
<span style="color:MediumVioletRed">█</span>
<span style="color:PaleVioletRed">█</span>

<span style="color:LightSalmon">█</span>
<span style="color:Coral">█</span>
<span style="color:Tomato">█</span>
<span style="color:OrangeRed">█</span>
<span style="color:DarkOrange">█</span>
<span style="color:Orange">█</span>

<span style="color:Gold">█</span>
<span style="color:Yellow">█</span>
<span style="color:LightYellow">█</span>
<span style="color:LemonChiffon">█</span>
<span style="color:LightGoldenrodYellow">█</span>
<span style="color:PapayaWhip">█</span>
<span style="color:Moccasin">█</span>
<span style="color:PeachPuff">█</span>
<span style="color:PaleGoldenrod">█</span>
<span style="color:Khaki">█</span>
<span style="color:DarkKhaki">█</span>

<span style="color:Lavender">█</span>
<span style="color:Thistle">█</span>
<span style="color:Plum">█</span>
<span style="color:Violet">█</span>
<span style="color:Orchid">█</span>
<span style="color:Fuchsia">█</span>
<span style="color:Magenta">█</span>
<span style="color:MediumOrchid">█</span>
<span style="color:MediumPurple">█</span>
<span style="color:RebeccaPurple">█</span>
<span style="color:BlueViolet">█</span>
<span style="color:DarkViolet">█</span>
<span style="color:DarkOrchid">█</span>
<span style="color:DarkMagenta">█</span>
<span style="color:Purple">█</span>
<span style="color:Indigo">█</span>
<span style="color:SlateBlue">█</span>
<span style="color:DarkSlateBlue">█</span>
<span style="color:MediumSlateBlue">█</span>

<span style="color:GreenYellow">█</span>
<span style="color:Chartreuse">█</span>
<span style="color:LawnGreen">█</span>
<span style="color:Lime">█</span>
<span style="color:LimeGreen">█</span>
<span style="color:PaleGreen">█</span>
<span style="color:LightGreen">█</span>
<span style="color:MediumSpringGreen">█</span>
<span style="color:SpringGreen">█</span>
<span style="color:MediumSeaGreen">█</span>
<span style="color:SeaGreen">█</span>
<span style="color:ForestGreen">█</span>
<span style="color:Green">█</span>
<span style="color:DarkGreen">█</span>
<span style="color:YellowGreen">█</span>
<span style="color:OliveDrab">█</span>
<span style="color:Olive">█</span>
<span style="color:DarkOliveGreen">█</span>
<span style="color:MediumAquamarine">█</span>
<span style="color:DarkSeaGreen">█</span>
<span style="color:LightSeaGreen">█</span>
<span style="color:DarkCyan">█</span>
<span style="color:Teal">█</span>

<span style="color:Aqua">█</span>
<span style="color:Cyan">█</span>
<span style="color:LightCyan">█</span>
<span style="color:PaleTurquoise">█</span>
<span style="color:Aquamarine">█</span>
<span style="color:Turquoise">█</span>
<span style="color:MediumTurquoise">█</span>
<span style="color:DarkTurquoise">█</span>
<span style="color:CadetBlue">█</span>
<span style="color:SteelBlue">█</span>
<span style="color:LightSteelBlue">█</span>
<span style="color:PowderBlue">█</span>
<span style="color:LightBlue">█</span>
<span style="color:SkyBlue">█</span>
<span style="color:LightSkyBlue">█</span>
<span style="color:DeepSkyBlue">█</span>
<span style="color:DodgerBlue">█</span>
<span style="color:CornflowerBlue">█</span>
<span style="color:MediumSlateBlue">█</span>
<span style="color:RoyalBlue">█</span>
<span style="color:Blue">█</span>
<span style="color:MediumBlue">█</span>
<span style="color:DarkBlue">█</span>
<span style="color:Navy">█</span>
<span style="color:MidnightBlue">█</span>

<span style="color:Cornsilk">█</span>
<span style="color:BlanchedAlmond">█</span>
<span style="color:Bisque">█</span>
<span style="color:NavajoWhite">█</span>
<span style="color:Wheat">█</span>
<span style="color:BurlyWood">█</span>
<span style="color:Tan">█</span>
<span style="color:RosyBrown">█</span>
<span style="color:SandyBrown">█</span>
<span style="color:Goldenrod">█</span>
<span style="color:DarkGoldenrod">█</span>
<span style="color:Peru">█</span>
<span style="color:Chocolate">█</span>
<span style="color:SaddleBrown">█</span>
<span style="color:Sienna">█</span>
<span style="color:Brown">█</span>
<span style="color:Maroon">█</span>

<span style="color:White">█</span>
<span style="color:Snow">█</span>
<span style="color:HoneyDew">█</span>
<span style="color:MintCream">█</span>
<span style="color:Azure">█</span>
<span style="color:AliceBlue">█</span>
<span style="color:GhostWhite">█</span>
<span style="color:WhiteSmoke">█</span>
<span style="color:SeaShell">█</span>
<span style="color:Beige">█</span>
<span style="color:OldLace">█</span>
<span style="color:FloralWhite">█</span>
<span style="color:Ivory">█</span>
<span style="color:AntiqueWhite">█</span>
<span style="color:Linen">█</span>
<span style="color:LavenderBlush">█</span>
<span style="color:MistyRose">█</span>

<span style="color:Gainsboro">█</span>
<span style="color:LightGray">█</span>
<span style="color:Silver">█</span>
<span style="color:DarkGray">█</span>
<span style="color:Gray">█</span>
<span style="color:DimGray">█</span>
<span style="color:LightSlateGray">█</span>
<span style="color:SlateGray">█</span>
<span style="color:DarkSlateGray">█</span>
<span style="color:Black">█</span>

== For VDCEditor tests ==
Это самый обычный текст.

<span>Это текст обёрнутый в тег &lt;span&gt;.</span>

<span style="font-weight:bold">У этого текста указано CSS свойство font-weight:bold, что делает его жирным.</span>

<span style="color:green">Тут текст окрашен в зелёный цвет с помощью CSS свойства color:green.</span>

<span style="color:#00FF00">В этом тексте <span style="color:#0000FF; font-weight:bold">используется вложенный тег &lt;span&gt;</span> с другим цветом текста</span>

В этом тексте используется шаблон &#123;&#123;intlang&#125;&#125;, который отображает код языка интерфейса ({{intlang}}).

А здесь используется параметр, стандартным значением которого является 'green' если он не был указан: {{{size|green}}}.

<span style="background:{{{size|green}}}">Этот же параметр, но уже в CSS стиле текста</span>