w3-card {
class: "w3-container";
h1 {
class: "w3-title";
content: "q-html code playground";
}
w3-bar {
w3-blue {
div { class: "tabnav";
a { class: "w3-bar-item w3-button"; content: "Playground"; href: "#"; onclick: "toggleTab('Playground')"; }
a { class: "w3-bar-item w3-button"; content: "q-html Official Home Page"; href: "/qhtml/"; }
}
}
}
div {
id: "tab_About";
class: "w3-card w3-margin w3-hide";
p {
class: "w3-container";
content: "About qHTML";
br { }
w3-link,w3-center,w3-large,a {
href: "https://github.com/mikeNickaloff/qhtml"
text: "Visit the qHTML Github Repo to learn more"
}
}
button {
class: "w3-btn w3-blue w3-margin";
content: "Click Me!";
onclick: "openModal()";
}
}
div { id: "tab_Playground"; class: " w3-margin";
w3-container {
class: "w3-container";
content: "This is a playground for testing qhtml";
}
p { content: "Enter your qHTML Code below" }
TextArea {
id: "qhtmlEditor";
onKeyUp: "updateQHTMLFromEditor()";
content: "";
class: "w3-card w3-large w3-input";
style: "min-width: 1300px";
}
br { }
w3-large, w3-h3 {
div {
content: "Results";
}
}
w3-card {
w3-wide {
div {
id: "qhtmlPreview";
}
}
}
}
div {
id: "tab_Download";
class: "w3-margin w3-hide";
p {
class: "w3-container";
content: "Here's the contact page";
}
table { id: "maintable"; class: "w3-table w3-border-blue w3-grey w3-striped w3-text-black w3-card";
th {
content: "Column 1";
}
th {
content: "Column 2";
}
th {
content: "column3";
}
tr {
td { content: "asdf"; }
td { content: "asdf"; }
td { content: "asdf"; }
}
tr {
td { content: "1234"; }
td { content: "4567"; }
td { content: "7890"; }
}
tr {
td { content: "asdf"; }
td { content: "asdf"; }
td { content: "asdf"; }
}
}
button {
class: "w3-btn w3-blue w3-margin";
content: "Click Me!";
onclick: "openModal()";
}
}
div {
class: "w3-modal";
id: "myModal";
div {
id: "myModalContent";
class: "w3-modal-content w3-container w3-card w3-large w3-white w3-padding";
header {
class: "w3-header w3-blue w3-bar w3-padding w3-border";
content: "my dialog";
}
article {
id: "myModalMessage";
class: "w3-container w3-center w3-white w3-normal w3-padding w3-margin";
content: "heres my dialog";
br {
}
br {
}
span {
content: "and an extra span for kicks";
}
}
div {
class: "w3-footer w3-blue w3-center w3-large w3-padding";
button {
class: "w3-btn w3-blue w3-margin";
content: "Close";
onclick: "closeModal()";
}
}
}
}
}