div {
}
div { id: "tab_Playground" class: " w3-margin"
w3-container {
class: "w3-container"
html { "This is a playground for testing qhtml" }
}
p { html { "Enter your qHTML Code below" } }
code-view {
id: "qhtmlCodeView"
class: "w3-card"
data-preview: "#qhtmlPreview";
code-view-tab { tab: "0" label: "QHTML" }
code-view-tab { tab: "1" label: "HTML" }
}
br { }
w3-large, w3-h3 {
div {
html { "Preview" }
}
}
w3-card {
w3-wide {
div {
id: "qhtmlPreview"
}
}
}
}
div {
id: "tab_Download"
class: "w3-margin w3-hide"
p {
class: "w3-container"
html { "Download from github" }
br { }
a {
href: "https://www.github.com/mikeNickaloff/qhtml"
html { Download }
}
}
table { id: "maintable" class: "w3-table w3-border-blue w3-grey w3-striped w3-text-black w3-card"
th {
html { "Column 1" }
}
th {
html { "Column 2" }
}
th {
html { "column3" }
}
tr {
td { html { "asdf" } }
td { html { "asdf" } }
td { html { "asdf" } }
}
tr {
td { html { "1234" } }
td { html { "4567" } }
td { html { "7890" } }
}
tr {
td { html { "asdf" } }
td { html { "asdf" } }
td { html { "asdf" } }
}
}
button {
class: "w3-btn w3-blue w3-margin"
html { "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"
html { "my dialog" }
}
article {
id: "myModalMessage"
class: "w3-container w3-center w3-white w3-normal w3-padding w3-margin"
html { "heres my dialog" }
br {
}
br {
}
span {
html { "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"
html { "Close" }
onclick: "closeModal()"
}
}
}
}