Alteras
The Sleepy Prisoner
[class=container]
width: 100%;
max-width: 1200px;
margin: 5px auto;
position: relative;
background-color: rgb(240,240,240);
border: 1px solid gray;
border-radius: 10px;
box-shadow: 0 0 5px black;
color: black;
padding: 10px;
box-sizing: border-box;
[/class]
[class=title]
position: relative;
width: 100%;
font-size: 40px;
font-family: 'Oxygen Mono';
text-align: center;
[/class]
[class=intro]
position: relative;
width: 100%;
max-width: 700px;
margin: 10px auto;
font-family: 'Roboto';
color: gray;
[/class]
[class=inputFields]
position: relative;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
[/class]
[class=inputs]
position: relative;
width: 100%;
max-width: 355px;
margin-bottom: 10px;
[/class]
[class=inputTitle]
position: relative;
font-size: 1.25em;
text-align: center;
width: 100%;
text-decoration: underline;
font-weight: bold;
[/class]
[class=tabinput]
width: 200px;
display: inline-block;
box-sizing: border-box;
color: black;
[/class]
[class=field]
display: inline-block;
width: 150px;
[/class]
[class=TabNameGen]
width: 100%;
max-width: 700px;
margin: 0 auto;
[/class]
[class=tabNameField]
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
min-height: 100px;
border: 1px solid gray;
border-radius: 15px;
padding: 10px;
box-sizing: border-box;
[/class]
[class=tabNameInput]
width: 100px;
display: inline-block;
margin: 5px auto;
width: 100%;
max-width: 700px;
text-align: center;
[/class]
[class=layoutselect]
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-between;
[/class]
[class=layoutselectbutton]
cursor: pointer;
display: inline-block;
--yes: none;
--no: inline;
[/class]
[class=selectlayout]
pointer-events: none;
--yes: inline;
--no: none;
[/class]
[class=yes]
display: var(--yes);
[/class]
[class=no]
display: var(--no);
[/class]
[class=GENERATE]
margin: 0 auto;
position: relative;
display: block;
color: black;
[/class]
[class=output]
margin: 10px auto;
position: relative;
display: block;
border: 5px solid black;
border-radius: 15px;
max-width: 1000px;
width: 100%;
box-sizing: border-box;
padding: 20px;
background-color: #222945;
color: white;
white-space: pre-wrap;
[/class]
[class=codefield]
display: none;
[/class]
[class name=codevalue]
display: inline;
[/class]
[div class=codefield]
[div class="codeheader"] [div class="tab selected"][div class=tabID]1Tab[/div][div class="codevalue tabnamecode1"]TabName[/div][/div]
[/div]
[div class="tabnamecode"] [div class=tab][div class=tabID][div class="codevalue tabnamecodenum"]2Tab[/div]TabName[/div][/div]
[/div]
[div class="codecontent"] [div class="codevalue codetabcontentvalue"]1[/div]
[div class="codevalue codetabcontent"][/div] tab content
[/div]
[/div]
[div class="codebuilderfinal"][nobr]
[import]9010974[/import]
[comment][div class="codevalue codetabfontcalling"]font[/div][/comment]
[class=values]
--tabStyle: [div class="codevalue codetabstyle1"]row wrap[/div];
--contentStyle: [div class="codevalue codetabstyle2"]column nowrap[/div];
--tab-txt-align: [div class="codevalue codetabstyle3"]center[/div];
--tab-txt-color: [div class="codevalue codetabcolor"]white[/div];
--bg-color: [div class="codevalue codetabbg"]#2c3e50[/div];
--fontFamily: '[div class="codevalue codetabfont"]Play[/div]';
--fontSize: [div class="codevalue codetabsize"]20px[/div];
--tab-hover-color: [div class="codevalue codetabhcolor"]white[/div];
--tab-hover-bg: [div class="codevalue codetabhbg"]#2980b9[/div];
--tab-select-color: [div class="codevalue codetabscolor"]white[/div];
--tab-select-bg: [div class="codevalue codetabsbg"]#2980b9[/div];
[/class]
[/nobr][div class="tabContainer values"][nobr]
[div class=tabHolder]
[div class="codevalue codebuilder1"][/div] [/div][/nobr]
[div class=tabContentHolder]
[div class="codevalue codebuilder2"][/div] [/div]
[/div]
[/div]
[/div] [export] [class=tabContainer] width: 100%; position: relative; display: flex; flex-flow: var(--contentStyle); [/class] [class=tabHolder] min-width: 200px; position: relative; display: flex; flex-flow: var(--tabStyle); border: 0px solid transparent; border-radius: 10px; overflow: hidden; [/class] [class=tab] font-size: var(--fontSize , 18px); font-family: var(--fontFamily , 'Roboto'); background-color: var(--bg-color, #2c3e50); color: var(--tab-txt-color, white); padding: calc( var(--fontSize , 18px) / 3 ); position: relative; flex:1; text-align: var(--tab-txt-align, center); cursor: pointer; transition: all .25s; [/class] [class name=tab state=hover] background-color: var(--tab-hover-bg, #2980b9); color: var(--tab-hover-color, white); [/class] [class=selected] text-decoration: underline; background-color: var(--tab-select-bg, #2980b9); color: var(--tab-select-color, white); cursor: default; pointer-events: none; [/class] [class=tabID] display: none; [/class] [class=tabContentHolder] flex: 1; align-self: stretch; position: relative; min-width: 200px; [/class] [class=tabContent] position: relative; padding: 5px; [/class] [script class=tab version=2] (hide "tabContent") (show "1") [/script] [script class=tab version=2 on=click] (= currenttab (index (split (getText) "Tab") 0)) (removeClass "selected" "tab") (hide "tabContent") (show currenttab) (addClass "selected") [/script] [/export] [script class=layoutselectbutton version=2 on=click] (removeClass "selectlayout" "layoutselectbutton") (addClass "selectlayout") [/script] [script class=GENERATE version=2 on=click] (hide "output") (= raw (getVal "tabNameField")) (if (== (count raw) 0) (stop)) (= rawArray (split raw "%") ) (= rareArray [ ]) (each rawArray (append rareArray (trim _ ) ) ) (= trimArray [ ]) (each rareArray (if (!= (count _ ) 0) (append trimArray _ ) ) ) (setText "" "codebuilder1") (setText "" "codebuilder2") (= tabnumber 0) (each trimArray (group (++ tabnumber) (if (== tabnumber 1) (group (setText _ "tabnamecode1") (= codesnippet (getText "codeheader")))) (if (!= tabnumber 1) (group (setText (+ tabnumber "Tab[/div]" _ "[/div]") "tabnamecodenum") (= codesnippet (getText "tabnamecode")))) (= codesnippet (+ (getText "codebuilder1") codesnippet)) (setText codesnippet "codebuilder1") (setText (+ "[div class=\"tabContent " tabnumber "\"]" ) "codetabcontentvalue") (setText _ "codetabcontent") (= codesnippet (+ (getText "codebuilder2") (getText "codecontent"))) (setText codesnippet "codebuilder2") )) (if (== (getText "selectlayout") "Horizontal") (group (setText "row wrap" "codetabstyle1") (setText "column nowrap" "codetabstyle2") (setText "center" "codetabstyle3"))) (if (== (getText "selectlayout") "Vertical") (group (setText "column nowrap" "codetabstyle1") (setText "row wrap" "codetabstyle2") (setText "left" "codetabstyle3"))) (if (!= 0 (count (trim (getVal "TabNameColor")))) (setText (trim (getVal "TabNameColor")) "codetabcolor")) (if (!= 0 (count (trim (getVal "TabBGColor")))) (setText (trim (getVal "TabBGColor")) "codetabbg")) (if (!= 0 (count (trim (getVal "TabFont")))) (setText (trim (getVal "TabFont")) "codetabfont")) (if (!= 0 (count (trim (getVal "TabFont")))) (setText (+ "[font=" (trim (getVal "TabFont")) "]font[/font]") "codetabfontcalling")) (if (!= 0 (count (trim (getVal "TabFontSize")))) (setText (trim (getVal "TabFontSize")) "codetabsize")) (if (!= 0 (count (trim (getVal "TabHoverNameColor")))) (setText (trim (getVal "TabHoverNameColor")) "codetabhcolor")) (if (!= 0 (count (trim (getVal "TabHoverBGColor")))) (setText (trim (getVal "TabHoverBGColor")) "codetabhbg")) (if (!= 0 (count (trim (getVal "TabSelNameColor")))) (setText (trim (getVal "TabSelNameColor")) "codetabscolor")) (if (!= 0 (count (trim (getVal "TabSelBGColor")))) (setText (trim (getVal "TabSelBGColor")) "codetabsbg")) (setText (getText "codebuilderfinal") "output") (slideDown 500 "output") [/script] [div class=container][div class=title] Tab Code Generator 1.0[/div] [div class=intro] This is the Tab Code Generator 1.0!!! Due to the limitations of BBscript 2 (and my motivation), the options that you have is somewhat limited. However, it should be able to accept CSS code and easily prepare it in the code printout, such as
When you are creating a new tab, use the
I will be posting an explanation for the generator in Resource - ¬ FEVERDREAMS ⸥ alt sugar [/div] [div class=inputFields] [div class=inputs] [div class=inputTitle]Tab Styling[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabBGColor" maxlength=25 placeholder="Navy, #2c3e50, rgb(44, 62, 80), etc."][/input]
[div class=field]Tab Font: [/div] [input type=text class="tabinput TabFont" maxlength=50 placeholder="Play"][/input]
[div class=field]Font size: [/div] [input type=text class="tabinput TabFontSize" maxlength=20 placeholder="20px"][/input] [div class=field]Tab Layout:[/div] [div class="layoutselect tabinput"][div class="layoutselectbutton selectlayout"][div class=yes][/div][div class=no][/div]Horizontal[/div][div class="layoutselectbutton"][div class=yes][/div][div class=no][/div]Vertical[/div][/div] [/div] [div class=inputs] [div class=inputTitle]Tab Styling When Hovering[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabHoverNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabHoverBGColor" maxlength=25 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input] [/div] [div class=inputs] [div class=inputTitle]Tab Styling When Selected[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabSelNameColor" maxlength=20 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabSelBGColor" maxlength=20 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input] [/div] [div class=TabNameGen] [div class=inputTitle]Tabs and Tab Names[/div] [div class=tabNameInput] [input type=textarea class="tabNameField TabName"][/input] Separate tabs using %. So an example would be "Tab Name 1 % Tab Name 2" [/div] [input type=button class="GENERATE"]Generate Code[/input] [/div] [/div][div class=output style="display: none"][/div][/div]
[div class="codeheader"] [div class="tab selected"][div class=tabID]1Tab[/div][div class="codevalue tabnamecode1"]TabName[/div][/div]
[/div]
[div class="tabnamecode"] [div class=tab][div class=tabID][div class="codevalue tabnamecodenum"]2Tab[/div]TabName[/div][/div]
[/div]
[div class="codecontent"] [div class="codevalue codetabcontentvalue"]1[/div]
[div class="codevalue codetabcontent"][/div] tab content
[/div]
[/div]
[div class="codebuilderfinal"][nobr]
[import]9010974[/import]
[comment][div class="codevalue codetabfontcalling"]font[/div][/comment]
[class=values]
--tabStyle: [div class="codevalue codetabstyle1"]row wrap[/div];
--contentStyle: [div class="codevalue codetabstyle2"]column nowrap[/div];
--tab-txt-align: [div class="codevalue codetabstyle3"]center[/div];
--tab-txt-color: [div class="codevalue codetabcolor"]white[/div];
--bg-color: [div class="codevalue codetabbg"]#2c3e50[/div];
--fontFamily: '[div class="codevalue codetabfont"]Play[/div]';
--fontSize: [div class="codevalue codetabsize"]20px[/div];
--tab-hover-color: [div class="codevalue codetabhcolor"]white[/div];
--tab-hover-bg: [div class="codevalue codetabhbg"]#2980b9[/div];
--tab-select-color: [div class="codevalue codetabscolor"]white[/div];
--tab-select-bg: [div class="codevalue codetabsbg"]#2980b9[/div];
[/class]
[/nobr][div class="tabContainer values"][nobr]
[div class=tabHolder]
[div class="codevalue codebuilder1"][/div] [/div][/nobr]
[div class=tabContentHolder]
[div class="codevalue codebuilder2"][/div] [/div]
[/div]
[/div]
[/div] [export] [class=tabContainer] width: 100%; position: relative; display: flex; flex-flow: var(--contentStyle); [/class] [class=tabHolder] min-width: 200px; position: relative; display: flex; flex-flow: var(--tabStyle); border: 0px solid transparent; border-radius: 10px; overflow: hidden; [/class] [class=tab] font-size: var(--fontSize , 18px); font-family: var(--fontFamily , 'Roboto'); background-color: var(--bg-color, #2c3e50); color: var(--tab-txt-color, white); padding: calc( var(--fontSize , 18px) / 3 ); position: relative; flex:1; text-align: var(--tab-txt-align, center); cursor: pointer; transition: all .25s; [/class] [class name=tab state=hover] background-color: var(--tab-hover-bg, #2980b9); color: var(--tab-hover-color, white); [/class] [class=selected] text-decoration: underline; background-color: var(--tab-select-bg, #2980b9); color: var(--tab-select-color, white); cursor: default; pointer-events: none; [/class] [class=tabID] display: none; [/class] [class=tabContentHolder] flex: 1; align-self: stretch; position: relative; min-width: 200px; [/class] [class=tabContent] position: relative; padding: 5px; [/class] [script class=tab version=2] (hide "tabContent") (show "1") [/script] [script class=tab version=2 on=click] (= currenttab (index (split (getText) "Tab") 0)) (removeClass "selected" "tab") (hide "tabContent") (show currenttab) (addClass "selected") [/script] [/export] [script class=layoutselectbutton version=2 on=click] (removeClass "selectlayout" "layoutselectbutton") (addClass "selectlayout") [/script] [script class=GENERATE version=2 on=click] (hide "output") (= raw (getVal "tabNameField")) (if (== (count raw) 0) (stop)) (= rawArray (split raw "%") ) (= rareArray [ ]) (each rawArray (append rareArray (trim _ ) ) ) (= trimArray [ ]) (each rareArray (if (!= (count _ ) 0) (append trimArray _ ) ) ) (setText "" "codebuilder1") (setText "" "codebuilder2") (= tabnumber 0) (each trimArray (group (++ tabnumber) (if (== tabnumber 1) (group (setText _ "tabnamecode1") (= codesnippet (getText "codeheader")))) (if (!= tabnumber 1) (group (setText (+ tabnumber "Tab[/div]" _ "[/div]") "tabnamecodenum") (= codesnippet (getText "tabnamecode")))) (= codesnippet (+ (getText "codebuilder1") codesnippet)) (setText codesnippet "codebuilder1") (setText (+ "[div class=\"tabContent " tabnumber "\"]" ) "codetabcontentvalue") (setText _ "codetabcontent") (= codesnippet (+ (getText "codebuilder2") (getText "codecontent"))) (setText codesnippet "codebuilder2") )) (if (== (getText "selectlayout") "Horizontal") (group (setText "row wrap" "codetabstyle1") (setText "column nowrap" "codetabstyle2") (setText "center" "codetabstyle3"))) (if (== (getText "selectlayout") "Vertical") (group (setText "column nowrap" "codetabstyle1") (setText "row wrap" "codetabstyle2") (setText "left" "codetabstyle3"))) (if (!= 0 (count (trim (getVal "TabNameColor")))) (setText (trim (getVal "TabNameColor")) "codetabcolor")) (if (!= 0 (count (trim (getVal "TabBGColor")))) (setText (trim (getVal "TabBGColor")) "codetabbg")) (if (!= 0 (count (trim (getVal "TabFont")))) (setText (trim (getVal "TabFont")) "codetabfont")) (if (!= 0 (count (trim (getVal "TabFont")))) (setText (+ "[font=" (trim (getVal "TabFont")) "]font[/font]") "codetabfontcalling")) (if (!= 0 (count (trim (getVal "TabFontSize")))) (setText (trim (getVal "TabFontSize")) "codetabsize")) (if (!= 0 (count (trim (getVal "TabHoverNameColor")))) (setText (trim (getVal "TabHoverNameColor")) "codetabhcolor")) (if (!= 0 (count (trim (getVal "TabHoverBGColor")))) (setText (trim (getVal "TabHoverBGColor")) "codetabhbg")) (if (!= 0 (count (trim (getVal "TabSelNameColor")))) (setText (trim (getVal "TabSelNameColor")) "codetabscolor")) (if (!= 0 (count (trim (getVal "TabSelBGColor")))) (setText (trim (getVal "TabSelBGColor")) "codetabsbg")) (setText (getText "codebuilderfinal") "output") (slideDown 500 "output") [/script] [div class=container][div class=title] Tab Code Generator 1.0[/div] [div class=intro] This is the Tab Code Generator 1.0!!! Due to the limitations of BBscript 2 (and my motivation), the options that you have is somewhat limited. However, it should be able to accept CSS code and easily prepare it in the code printout, such as
calc(5vmax + 5px). Unfortunately, the way it is set up, everything will be squished together into one line when you copy and paste it. There is no way around it at this moment. That will have to way for version 2 (if I'm ever motivated).
When you are creating a new tab, use the
% to separate between your tab names. It is fine to use the enter key, as it will not be picked up. You can also use emojis and font awesome (and even some bbcode of your own) when you are making the tab names.
I will be posting an explanation for the generator in Resource - ¬ FEVERDREAMS ⸥ alt sugar [/div] [div class=inputFields] [div class=inputs] [div class=inputTitle]Tab Styling[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabBGColor" maxlength=25 placeholder="Navy, #2c3e50, rgb(44, 62, 80), etc."][/input]
[div class=field]Tab Font: [/div] [input type=text class="tabinput TabFont" maxlength=50 placeholder="Play"][/input]
[div class=field]Font size: [/div] [input type=text class="tabinput TabFontSize" maxlength=20 placeholder="20px"][/input] [div class=field]Tab Layout:[/div] [div class="layoutselect tabinput"][div class="layoutselectbutton selectlayout"][div class=yes][/div][div class=no][/div]Horizontal[/div][div class="layoutselectbutton"][div class=yes][/div][div class=no][/div]Vertical[/div][/div] [/div] [div class=inputs] [div class=inputTitle]Tab Styling When Hovering[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabHoverNameColor" maxlength=25 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabHoverBGColor" maxlength=25 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input] [/div] [div class=inputs] [div class=inputTitle]Tab Styling When Selected[/div] [div class=field]Tab Name Color: [/div] [input type=text class="tabinput TabSelNameColor" maxlength=20 placeholder="White, #ffffff, rgb(255,255,255), etc."][/input]
[div class=field]Background Color: [/div] [input type=text class="tabinput TabSelBGColor" maxlength=20 placeholder="Blue, #2980b9, rgb(41, 128, 185), etc."][/input] [/div] [div class=TabNameGen] [div class=inputTitle]Tabs and Tab Names[/div] [div class=tabNameInput] [input type=textarea class="tabNameField TabName"][/input] Separate tabs using %. So an example would be "Tab Name 1 % Tab Name 2" [/div] [input type=button class="GENERATE"]Generate Code[/input] [/div] [/div][div class=output style="display: none"][/div][/div]
