w3-main,w3-container,w3-blue-grey,w3-row,div {
id: "main-div";
style: "width: 100vw; height: auto; background-color: lightgrey; display: flex; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;";
w3-cell,w3-mobile,w3-container,div {
id: "main-layout-container";
style: "height: 100%; width: 100%; display: flex;";
w3-navbar,w3-cell,w3-top,w3-hide-small,div {
style: "height: 23vmin; width: 100%; max-height: 23vmin; display: flex; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; right: 0px;";
w3-container,div {
style: "width: 100%; height: 100%; position: relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; right: 0px; ";
tech-panel {
style: "width: 100%;"
tech-border-color: "white"
tech-shadow-color: "green"
tech-width: "1px"
tech-top-left: "20px 20px"
tech-bottom-left: "0px 0px";
tech-top-right: "20px 20px"
tech-bottom-right: "0px 0px";
w3-bar,w3-display-container,div {
style: "width: 100%; height: 100%";
w3-display-topleft,w3-bar-item,div {
style: "width: 25%; height: 50%";
w3-label,w3-text-white,div {
text: "Search";
w3-input,input {
}
}
}
w3-display-topright,w3-bar-item,div {
id: "mainWindowLoginStatus";
w3-center,span {
text: "Logged in as";
}
br { }
w3-center,w3-bold,span {
text: "user@domain.com";
}
}
w3-display-bottomright,w3-bar-item,div {
style: "width: 15%;";
w3-text-green,w3-title,w3-padding-top-32,w3-padding-right-32,h3 {
text: "</q-html>";
}
}
}
}
}
}
w3-panel,w3-row,w3-blue-grey,w3-quarter,w3-left,div {
style: "padding-left: 0px; margin-top: 15vmin; height: 70vmax; width: 23vmax;";
w3-sidebar,w3-column,w3-hide-small,w3-stretch,div {
tech-border-color: "black";
tech-shadow-color: "white";
tech-width: "0px";
tech-top-right: "20px 20px";
style: "height: 100%; width: 100; margin-top: 5vh; padding-top: 2vh; overflow: visible; background-color: transparent;";
w3-center,w3-padding,tech-panel {
style: "margin-top: 5vh; padding: 5vh;";
tech-shadow-color: "white";
tech-border-color: "black";
tech-top-dent: "3px";
tech-width: "0px";
tech-top-dent-length: "5%";
tech-top-right: "5px";
tech-top-left: "5px";
tech-bottom-right: "5px";
tech-bottom-left: "5px";
w3-padding-16,w3-cell-row,w3-justify {
div {
style: "overflow: hidden; wrap: no-wrap;"
tech-top-right: "20px";
tech-top-left: "20px";
w3-center {
span {
style: "margin-left: 20%";
text: "🏠"
}
a {
style: "margin-right: 10%; margin-left: 10%; overflow: hidden; wrap: no-wrap;";
text: "️Welcome"
onclick: "setContentPanel('Welcome')";
href: "javascript:void(0)"
}
}
}
div {
w3-center {
span {
style: "margin-left: 22%";
text: "ℹ️ "
}
span {
style: "margin-right: 9%; margin-left: 12%; overflow: hidden; wrap: no-wrap;";
text: "️ Support"
}
}
}
div {
w3-center {
span {
style: "margin-left: 20%";
text: "📥"
}
a {
style: "margin-right: 10%; margin-left: 10%; overflow: hidden; wrap: no-wrap;";
text: "️Downloads"
onclick: "setContentPanel('Downloads')";
href: "javascript:void(0)"
}
}
}
div {
w3-center {
img {
style: "margin-left: 20%; width: 6%; height: 6%;";
src: "wp.svg";
}
span {
style: "margin-right: 10%; margin-left: 10%; overflow: hidden; wrap: no-wrap;";
text: "️Wordpress"
}
}
}
div {
w3-center {
span {
style: "margin-left: 20%";
text: "📝"
}
a {
href: "javascript:void(0)";
onClick: "setContentPanel('Examples');";
style: "margin-right: 10%; margin-left: 10%; overflow: hidden; wrap: no-wrap;";
text: "️ Examples"
}
}
}
div {
w3-center {
img {
style: "margin-left: 20%; width: 6%; height: 6%; overflow: hidden; wrap: no-wrap;";
src: "w3.png";
}
span {
style: "margin-right: 10%; margin-left: 10%; overflow: hidden; wrap: no-wrap;";
text: "w3-tags.js";
}
}
}
}
}
}
}
infomation: "***Here is the container for the main area on the right including the heading****";
w3-cell,w3-container,w3-darkgrey,w3-mobile,div {
style: "margin-top: 25vmin; padding: 0px 0px 0px 0px; right: 0px; width: 70vmax; height: 100%;"
div {
style: "height: 105%; width:100%; background-color: transparent; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; right: 0px;";
w3-panel,w3-card,div {
id: "contentPanelParent"
information: "This is the container which contains all of the pages of the site hidden and shown one at a time when requested";
tech-border-color: "white"
tech-shadow-color: "green"
tech-width: "1px"
tech-top-left: "00px 00px"
tech-bottom-left: "0px 0px";
tech-top-right: "0px 0px"
tech-bottom-right: "0px 0px";
tech-top-dent: "10px";
tech-top-dent-length: "10%";
style: "margin-left: 0%; background: paint(tech-panel); --tech-border-color: white; --tech-shadow-color: green; --tech-width: 1px; --tech-top-left: 00px 00px; height:auto; width: 100%; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; right: 0px;";
div {
class: "contentPanel";
id: "contentPanel_Welcome"
h2 {
text: "Welcome";
}
article {
text: "Hello and welcome to the q-html home page. Here you can find many different resources relating to q-html, the quick and easy way to create HTML that saves time, effort, and improves readability for developers and search engines. ";
}
br { }
article {
text: "If you are like me, you are probably asking yourself: "
i {
text: " How does it work? "
}
}
article {
text: "The answer is actually very simple -- it just works. Unlike many modern scripting languages, q-html is intentionally simple. "
}
br { }
article {
text: "Lets start off with an example q-html element to demonstrate. "
}
h3 {
text: "Basic usage"
}
blockquote {
w3-label,span {
text: "Simple button with hello world alert message on click"
}
w3-input,textarea {
style: "min-height: 170px"
id: "welcomeExample01qhtmlCodeBox"
}
br { }
w3-label,span {
text: "Resulting q-html code"
}
w3-card,w3-white,div {
style: "min-height: 170px; padding: 12px";
button {
text: "Click Here!"
onclick: "alert('Hello world!')"
}
}
}
br { }
br { }
h3 {
text: "Nesting and Combining Tags"
}
article {
text: "q-html conveniently allows for any inline attribute to be attached to any element in a declarative, simple way. Nesting is fully supported using brackets and by combining multiple tags together."
}
blockquote {
w3-label,span {
text: "Nested elements and combined Elements"
}
w3-input,textarea {
style: "min-height: 240px"
id: "welcomeExample02qhtmlCodeBox"
}
br { }
w3-label,span {
text: "Resulting q-html code"
}
w3-card,w3-white,div {
style: "min-height: 220px; padding: 12px;";
div {
style: "width: 120px; background-color: blue";
text: "Here's a Container div";
br { }
a {
href: "#"
onclick: "alert('hello world!')"
text: "Click here"
}
br { }
a,button {
href: "#"
onclick: "alert('hello world!')"
text: "or here!"
}
}
}
}
br { }
br { }
h3 {
text: "w3-tags.js addon"
}
article {
text: "q-html has an extremely powerful addon, made by the same author, called w3-tags.js. This addon turns q-html into an easy-to-use web building tool. To learn more about w3.css visit "
a {
href: "https://www.w3schools.com/w3css/default.asp";
text: "https://www.w3schools.com/w3css/";
}
}
blockquote {
w3-label,span {
text: "Creating a form with w3.css classes using w3-tags.js";
}
w3-input,textarea {
style: "min-height: 240px"
id: "welcomeExample03qhtmlCodeBox"
}
br { }
w3-label,span {
text: "Resulting q-html code"
}
w3-card,w3-white,div {
style: "min-height: 220px; padding: 12px;";
w3-panel,w3-card,w3-form,w3-grey,div {
w3-panel {
span {
text: "First Name";
w3-hover-blue,w3-input,input {
type: "text"
name: "firstName"
}
}
span {
text: "Nickname ";
w3-hover-blue,w3-input,input {
type: "text";
name: "Nickname";
}
}
span {
text: "Submit Results ";
w3-hover-blue,w3-input,w3-button,w3-green,input {
type: "submit";
}
}
}
}
}
}
}
div {
id: "contentPanel_Examples";
class: "w3-hide contentPanel";
h2 { text: "Examples"; }
br {}
span { text: "w3.css navbar"; }
code-view {
id: "example01";
}
}
}
div {
id: "contentPanel_Downloads";
class: "w3-hide contentPanel";
h2 {
text: "Downloads";
}
article {
text: "Offical Github Repo:"
br { }
a {
href: "https://github.com/mikeNickaloff/qhtml";
text: "https://github.com/mikeNickaloff/qhtml";
}
}
}
}
}
}
}