qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
38 lines (32 loc) • 15.7 kB
HTML
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Qompile Test</title>
<style>
/* Widget Base Styles */
.widget,
.widget * {
box-sizing: border-box;
font-family: sans-serif;
}
.widget {
margin: 1em 0;
padding: 1em;
color: white;
background: black;
}
</style>
<link href="widget-external.css" rel="stylesheet"></head><body><div class="widget" data-widgetel100eloffsetwidtheloffsetwidth200at121="0" data-widgetel100eloffsetwidtheloffsetwidth200at151="0" data-widgetel100eloffsetwidtheloffsetwidth200at181="0" data-widgetel100eloffsetwidtheloffsetwidth200at211="0" data-widgetel200eloffsetwidtheloffsetwidth300at241="0" data-widgetel200eloffsetwidtheloffsetwidth300at271="0" data-widgetel200eloffsetwidtheloffsetwidth300at301="0" data-widgetel300eloffsetwidtheloffsetwidth400at331="0" data-widgetel300eloffsetwidtheloffsetwidth400at361="0" data-widgetel300eloffsetwidtheloffsetwidth400at391="0" data-widgetel400eloffsetwidtheloffsetwidth500at421="0" data-widgetel400eloffsetwidtheloffsetwidth500at451="0" data-widgetel400eloffsetwidtheloffsetwidth500at481="0" data-widgetel400eloffsetwidtheloffsetwidth500at511="0" data-widgetel500eloffsetwidtheloffsetwidth600at541="0" data-widgetel500eloffsetwidtheloffsetwidth600at571="0" data-widgetel500eloffsetwidtheloffsetwidth600at601="0" data-widgetel600eloffsetwidtheloffsetwidth700at631="0" data-widgetel600eloffsetwidtheloffsetwidth700at661="0" data-widgetel600eloffsetwidtheloffsetwidth700at691="0" data-widgetel700eloffsetwidthat721="0" data-widgetel700eloffsetwidthat751="0" data-widgetel700eloffsetwidthat781="0" data-widgetel700eloffsetwidthat811="0" data-widgetel700eloffsetwidthat841="0" data-widgetel700eloffsetwidthat871="0" data-widgetel700eloffsetwidthat901="0" data-widgetel700eloffsetwidthat931="0" data-widgetel700eloffsetwidthat961="0" data-widgetel700eloffsetwidthat991="0" data-widgetel700eloffsetwidthat1021="0" data-widgetel700eloffsetwidthat1051="0" data-widgetel700eloffsetwidthat1081="0" data-widgetel700eloffsetwidthat1111="0" data-widgetel700eloffsetwidthat1141="0" data-widgetel700eloffsetwidthat1171="0" data-widgetel700eloffsetwidthat1201="0" data-widgetel700eloffsetwidthat1231="0" data-widgetel700eloffsetwidthat1261="0" data-widgetel700eloffsetwidthat1291="0" data-widgetel700eloffsetwidthat1321="0" data-widgetel700eloffsetwidthat1351="0" data-widgetel700eloffsetwidthat1381="0" data-widgetel700eloffsetwidthat1411="0" data-widgetel700eloffsetwidthat1441="0" data-widgetel700eloffsetwidthat1471="0" data-widgetel700eloffsetwidthat1501="0" data-widgetel700eloffsetwidthat1531="0" data-widgetel700eloffsetwidthat1561="0" data-widgetel700eloffsetwidthat1591="0" data-widgetel700eloffsetwidthat1621="0" data-widgetel700eloffsetwidthat1651="0" data-widgetel700eloffsetwidthat1681="0" data-widgetel700eloffsetwidthat1711="0" data-widgetel700eloffsetwidthat1741="0" data-widgetel700eloffsetwidthat1771="0" data-widgetel700eloffsetwidthat1801="0" data-widgetel700eloffsetwidthat1831="0" data-widgetel700eloffsetwidthat1861="0" data-widgetel700eloffsetwidthat1891="0" data-widgetel700eloffsetwidthat1921="0" data-widgetel700eloffsetwidthat1951="0" data-widgetel700eloffsetwidthat1981="0" data-widgetel700eloffsetwidthat2000="0">
<p>Qompile Demo</p>
</div>
<div class="widget" style="width:75%" data-widgetel100eloffsetwidtheloffsetwidth200at151="1" data-widgetel100eloffsetwidtheloffsetwidth200at181="1" data-widgetel100eloffsetwidtheloffsetwidth200at211="1" data-widgetel100eloffsetwidtheloffsetwidth200at241="0" data-widgetel100eloffsetwidtheloffsetwidth200at271="0" data-widgetel200eloffsetwidtheloffsetwidth300at301="1" data-widgetel200eloffsetwidtheloffsetwidth300at331="0" data-widgetel200eloffsetwidtheloffsetwidth300at361="0" data-widgetel200eloffsetwidtheloffsetwidth300at391="0" data-widgetel300eloffsetwidtheloffsetwidth400at421="0" data-widgetel300eloffsetwidtheloffsetwidth400at451="0" data-widgetel300eloffsetwidtheloffsetwidth400at481="0" data-widgetel300eloffsetwidtheloffsetwidth400at511="0" data-widgetel300eloffsetwidtheloffsetwidth400at541="0" data-widgetel400eloffsetwidtheloffsetwidth500at571="0" data-widgetel400eloffsetwidtheloffsetwidth500at601="0" data-widgetel400eloffsetwidtheloffsetwidth500at631="0" data-widgetel400eloffsetwidtheloffsetwidth500at661="0" data-widgetel500eloffsetwidtheloffsetwidth600at691="0" data-widgetel500eloffsetwidtheloffsetwidth600at721="0" data-widgetel500eloffsetwidtheloffsetwidth600at751="0" data-widgetel500eloffsetwidtheloffsetwidth600at781="0" data-widgetel500eloffsetwidtheloffsetwidth600at811="0" data-widgetel600eloffsetwidtheloffsetwidth700at841="0" data-widgetel600eloffsetwidtheloffsetwidth700at871="0" data-widgetel600eloffsetwidtheloffsetwidth700at901="0" data-widgetel600eloffsetwidtheloffsetwidth700at931="0" data-widgetel700eloffsetwidthat961="1" data-widgetel700eloffsetwidthat991="1" data-widgetel700eloffsetwidthat1021="1" data-widgetel700eloffsetwidthat1051="1" data-widgetel700eloffsetwidthat1081="1" data-widgetel700eloffsetwidthat1111="1" data-widgetel700eloffsetwidthat1141="1" data-widgetel700eloffsetwidthat1171="1" data-widgetel700eloffsetwidthat1201="1" data-widgetel700eloffsetwidthat1231="1" data-widgetel700eloffsetwidthat1261="1" data-widgetel700eloffsetwidthat1291="1" data-widgetel700eloffsetwidthat1321="1" data-widgetel700eloffsetwidthat1351="1" data-widgetel700eloffsetwidthat1381="1" data-widgetel700eloffsetwidthat1411="1" data-widgetel700eloffsetwidthat1441="1" data-widgetel700eloffsetwidthat1471="1" data-widgetel700eloffsetwidthat1501="1" data-widgetel700eloffsetwidthat1531="1" data-widgetel700eloffsetwidthat1561="1" data-widgetel700eloffsetwidthat1591="1" data-widgetel700eloffsetwidthat1621="1" data-widgetel700eloffsetwidthat1651="1" data-widgetel700eloffsetwidthat1681="1" data-widgetel700eloffsetwidthat1711="1" data-widgetel700eloffsetwidthat1741="1" data-widgetel700eloffsetwidthat1771="1" data-widgetel700eloffsetwidthat1801="1" data-widgetel700eloffsetwidthat1831="1" data-widgetel700eloffsetwidthat1861="1" data-widgetel700eloffsetwidthat1891="1" data-widgetel700eloffsetwidthat1921="1" data-widgetel700eloffsetwidthat1951="1" data-widgetel700eloffsetwidthat1981="1" data-widgetel700eloffsetwidthat2000="1">
<p>Qompile Demo</p>
</div>
<div class="widget" style="width:50%" data-widgetel100eloffsetwidtheloffsetwidth200at241="1" data-widgetel100eloffsetwidtheloffsetwidth200at271="1" data-widgetel100eloffsetwidtheloffsetwidth200at301="0" data-widgetel100eloffsetwidtheloffsetwidth200at331="0" data-widgetel100eloffsetwidtheloffsetwidth200at361="0" data-widgetel100eloffsetwidtheloffsetwidth200at391="0" data-widgetel200eloffsetwidtheloffsetwidth300at421="0" data-widgetel200eloffsetwidtheloffsetwidth300at451="0" data-widgetel200eloffsetwidtheloffsetwidth300at481="0" data-widgetel200eloffsetwidtheloffsetwidth300at511="0" data-widgetel200eloffsetwidtheloffsetwidth300at541="0" data-widgetel200eloffsetwidtheloffsetwidth300at571="0" data-widgetel200eloffsetwidtheloffsetwidth300at601="0" data-widgetel300eloffsetwidtheloffsetwidth400at631="0" data-widgetel300eloffsetwidtheloffsetwidth400at661="0" data-widgetel300eloffsetwidtheloffsetwidth400at691="0" data-widgetel300eloffsetwidtheloffsetwidth400at721="0" data-widgetel300eloffsetwidtheloffsetwidth400at751="0" data-widgetel300eloffsetwidtheloffsetwidth400at781="0" data-widgetel300eloffsetwidtheloffsetwidth400at811="0" data-widgetel400eloffsetwidtheloffsetwidth500at841="0" data-widgetel400eloffsetwidtheloffsetwidth500at871="0" data-widgetel400eloffsetwidtheloffsetwidth500at901="0" data-widgetel400eloffsetwidtheloffsetwidth500at931="0" data-widgetel400eloffsetwidtheloffsetwidth500at961="0" data-widgetel400eloffsetwidtheloffsetwidth500at991="0" data-widgetel500eloffsetwidtheloffsetwidth600at1021="0" data-widgetel500eloffsetwidtheloffsetwidth600at1051="0" data-widgetel500eloffsetwidtheloffsetwidth600at1081="0" data-widgetel500eloffsetwidtheloffsetwidth600at1111="0" data-widgetel500eloffsetwidtheloffsetwidth600at1141="0" data-widgetel500eloffsetwidtheloffsetwidth600at1171="0" data-widgetel500eloffsetwidtheloffsetwidth600at1201="0" data-widgetel600eloffsetwidtheloffsetwidth700at1231="0" data-widgetel600eloffsetwidtheloffsetwidth700at1261="0" data-widgetel600eloffsetwidtheloffsetwidth700at1291="0" data-widgetel600eloffsetwidtheloffsetwidth700at1321="0" data-widgetel600eloffsetwidtheloffsetwidth700at1351="0" data-widgetel600eloffsetwidtheloffsetwidth700at1381="0" data-widgetel600eloffsetwidtheloffsetwidth700at1411="0" data-widgetel700eloffsetwidthat1441="2" data-widgetel700eloffsetwidthat1471="2" data-widgetel700eloffsetwidthat1501="2" data-widgetel700eloffsetwidthat1531="2" data-widgetel700eloffsetwidthat1561="2" data-widgetel700eloffsetwidthat1591="2" data-widgetel700eloffsetwidthat1621="2" data-widgetel700eloffsetwidthat1651="2" data-widgetel700eloffsetwidthat1681="2" data-widgetel700eloffsetwidthat1711="2" data-widgetel700eloffsetwidthat1741="2" data-widgetel700eloffsetwidthat1771="2" data-widgetel700eloffsetwidthat1801="2" data-widgetel700eloffsetwidthat1831="2" data-widgetel700eloffsetwidthat1861="2" data-widgetel700eloffsetwidthat1891="2" data-widgetel700eloffsetwidthat1921="2" data-widgetel700eloffsetwidthat1951="2" data-widgetel700eloffsetwidthat1981="2" data-widgetel700eloffsetwidthat2000="2">
<p>Qompile Demo</p>
</div>
<div class="widget" style="width:33.33%" data-widgetel100eloffsetwidtheloffsetwidth200at331="1" data-widgetel100eloffsetwidtheloffsetwidth200at361="1" data-widgetel100eloffsetwidtheloffsetwidth200at391="1" data-widgetel100eloffsetwidtheloffsetwidth200at421="0" data-widgetel100eloffsetwidtheloffsetwidth200at451="0" data-widgetel100eloffsetwidtheloffsetwidth200at481="0" data-widgetel100eloffsetwidtheloffsetwidth200at511="0" data-widgetel100eloffsetwidtheloffsetwidth200at541="0" data-widgetel100eloffsetwidtheloffsetwidth200at571="0" data-widgetel100eloffsetwidtheloffsetwidth200at601="0" data-widgetel200eloffsetwidtheloffsetwidth300at631="0" data-widgetel200eloffsetwidtheloffsetwidth300at661="0" data-widgetel200eloffsetwidtheloffsetwidth300at691="0" data-widgetel200eloffsetwidtheloffsetwidth300at721="0" data-widgetel200eloffsetwidtheloffsetwidth300at751="0" data-widgetel200eloffsetwidtheloffsetwidth300at781="0" data-widgetel200eloffsetwidtheloffsetwidth300at811="0" data-widgetel200eloffsetwidtheloffsetwidth300at841="0" data-widgetel200eloffsetwidtheloffsetwidth300at871="0" data-widgetel200eloffsetwidtheloffsetwidth300at901="0" data-widgetel300eloffsetwidtheloffsetwidth400at931="0" data-widgetel300eloffsetwidtheloffsetwidth400at961="0" data-widgetel300eloffsetwidtheloffsetwidth400at991="0" data-widgetel300eloffsetwidtheloffsetwidth400at1021="0" data-widgetel300eloffsetwidtheloffsetwidth400at1051="0" data-widgetel300eloffsetwidtheloffsetwidth400at1081="0" data-widgetel300eloffsetwidtheloffsetwidth400at1111="0" data-widgetel300eloffsetwidtheloffsetwidth400at1141="0" data-widgetel300eloffsetwidtheloffsetwidth400at1171="0" data-widgetel300eloffsetwidtheloffsetwidth400at1201="0" data-widgetel400eloffsetwidtheloffsetwidth500at1231="0" data-widgetel400eloffsetwidtheloffsetwidth500at1261="0" data-widgetel400eloffsetwidtheloffsetwidth500at1291="0" data-widgetel400eloffsetwidtheloffsetwidth500at1321="0" data-widgetel400eloffsetwidtheloffsetwidth500at1351="0" data-widgetel400eloffsetwidtheloffsetwidth500at1381="0" data-widgetel400eloffsetwidtheloffsetwidth500at1411="0" data-widgetel400eloffsetwidtheloffsetwidth500at1441="0" data-widgetel400eloffsetwidtheloffsetwidth500at1471="0" data-widgetel400eloffsetwidtheloffsetwidth500at1501="0" data-widgetel500eloffsetwidtheloffsetwidth600at1531="0" data-widgetel500eloffsetwidtheloffsetwidth600at1561="0" data-widgetel500eloffsetwidtheloffsetwidth600at1591="0" data-widgetel500eloffsetwidtheloffsetwidth600at1621="0" data-widgetel500eloffsetwidtheloffsetwidth600at1651="0" data-widgetel500eloffsetwidtheloffsetwidth600at1681="0" data-widgetel500eloffsetwidtheloffsetwidth600at1711="0" data-widgetel500eloffsetwidtheloffsetwidth600at1741="0" data-widgetel500eloffsetwidtheloffsetwidth600at1771="0" data-widgetel500eloffsetwidtheloffsetwidth600at1801="0" data-widgetel600eloffsetwidtheloffsetwidth700at1831="0" data-widgetel600eloffsetwidtheloffsetwidth700at1861="0" data-widgetel600eloffsetwidtheloffsetwidth700at1891="0" data-widgetel600eloffsetwidtheloffsetwidth700at1921="0" data-widgetel600eloffsetwidtheloffsetwidth700at1951="0" data-widgetel600eloffsetwidtheloffsetwidth700at1981="0" data-widgetel600eloffsetwidtheloffsetwidth700at2000="0">
<p>Qompile Demo</p>
</div>
<div class="widget" style="width:25%" data-widgetel100eloffsetwidtheloffsetwidth200at421="1" data-widgetel100eloffsetwidtheloffsetwidth200at451="1" data-widgetel100eloffsetwidtheloffsetwidth200at481="1" data-widgetel100eloffsetwidtheloffsetwidth200at511="1" data-widgetel100eloffsetwidtheloffsetwidth200at541="1" data-widgetel100eloffsetwidtheloffsetwidth200at571="1" data-widgetel100eloffsetwidtheloffsetwidth200at601="1" data-widgetel100eloffsetwidtheloffsetwidth200at631="0" data-widgetel100eloffsetwidtheloffsetwidth200at661="0" data-widgetel100eloffsetwidtheloffsetwidth200at691="0" data-widgetel100eloffsetwidtheloffsetwidth200at721="0" data-widgetel100eloffsetwidtheloffsetwidth200at751="0" data-widgetel100eloffsetwidtheloffsetwidth200at781="0" data-widgetel100eloffsetwidtheloffsetwidth200at811="0" data-widgetel200eloffsetwidtheloffsetwidth300at841="1" data-widgetel200eloffsetwidtheloffsetwidth300at871="1" data-widgetel200eloffsetwidtheloffsetwidth300at901="1" data-widgetel200eloffsetwidtheloffsetwidth300at931="0" data-widgetel200eloffsetwidtheloffsetwidth300at961="0" data-widgetel200eloffsetwidtheloffsetwidth300at991="0" data-widgetel200eloffsetwidtheloffsetwidth300at1021="0" data-widgetel200eloffsetwidtheloffsetwidth300at1051="0" data-widgetel200eloffsetwidtheloffsetwidth300at1081="0" data-widgetel200eloffsetwidtheloffsetwidth300at1111="0" data-widgetel200eloffsetwidtheloffsetwidth300at1141="0" data-widgetel200eloffsetwidtheloffsetwidth300at1171="0" data-widgetel200eloffsetwidtheloffsetwidth300at1201="0" data-widgetel300eloffsetwidtheloffsetwidth400at1231="0" data-widgetel300eloffsetwidtheloffsetwidth400at1261="0" data-widgetel300eloffsetwidtheloffsetwidth400at1291="0" data-widgetel300eloffsetwidtheloffsetwidth400at1321="0" data-widgetel300eloffsetwidtheloffsetwidth400at1351="0" data-widgetel300eloffsetwidtheloffsetwidth400at1381="0" data-widgetel300eloffsetwidtheloffsetwidth400at1411="0" data-widgetel300eloffsetwidtheloffsetwidth400at1441="0" data-widgetel300eloffsetwidtheloffsetwidth400at1471="0" data-widgetel300eloffsetwidtheloffsetwidth400at1501="0" data-widgetel300eloffsetwidtheloffsetwidth400at1531="0" data-widgetel300eloffsetwidtheloffsetwidth400at1561="0" data-widgetel300eloffsetwidtheloffsetwidth400at1591="0" data-widgetel400eloffsetwidtheloffsetwidth500at1621="0" data-widgetel400eloffsetwidtheloffsetwidth500at1651="0" data-widgetel400eloffsetwidtheloffsetwidth500at1681="0" data-widgetel400eloffsetwidtheloffsetwidth500at1711="0" data-widgetel400eloffsetwidtheloffsetwidth500at1741="0" data-widgetel400eloffsetwidtheloffsetwidth500at1771="0" data-widgetel400eloffsetwidtheloffsetwidth500at1801="0" data-widgetel400eloffsetwidtheloffsetwidth500at1831="0" data-widgetel400eloffsetwidtheloffsetwidth500at1861="0" data-widgetel400eloffsetwidtheloffsetwidth500at1891="0" data-widgetel400eloffsetwidtheloffsetwidth500at1921="0" data-widgetel400eloffsetwidtheloffsetwidth500at1951="0" data-widgetel400eloffsetwidtheloffsetwidth500at1981="0" data-widgetel400eloffsetwidtheloffsetwidth500at2000="0">
<p>Qompile Demo</p>
</div></body></html>