first page

master
poni 3 years ago
parent fd296e49a2
commit c7954853a6

@ -64,6 +64,16 @@ html1 = '''
<title>📡 💻📘</title>
</head>
<body>
<div class="firstP">
<h1 style="position: absolute; top: 0; left:0; color: black;">Title!</h1>
<p style="position: absolute; bottom: 0; right:0;" class="nomignoli">Funix and Kamo</p>
</div>
<div class="contents">
'''
html2 = '''
@ -77,6 +87,15 @@ html2 = '''
<title>📡 💻📘</title>
</head>
<body>
<div class="firstP">
<h1 style="position: absolute; top: 0; left:0; color: black;">Title!</h1>
<p style="position: absolute; bottom: 0; right:0;" class="nomignoli">Funix and Kamo</p>
</div>
<div class="contents">
'''
# Process each element of the list
@ -91,7 +110,8 @@ for e in pos: # e is the current element, pos is the a
html += " <span class='"+e[1]+"'> "+e[0]+" </span>\n"
# Close the html text
html += '''</body>
html += ''' </div>
</body>
</html>'''
# to tidy wrong " . " and " ' " position

@ -21,16 +21,25 @@ time.sleep(2) # check qq in the console!
# in the process with loops
html = '''
<html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./pagedjs_files/interface.css">
<script src="./pagedjs_files/paged.polyfill.js"></script>
<link rel="stylesheet" href="./styles/3.css">
<meta charset="utf-8"/>
<link rel="stylesheet" href="./styles/2.css">
<title>📡 💻📘</title>
</head>
<body>
<div class="firstP">
<h1 style="position: absolute; top: 0; left:0; color: black;">Title!</h1>
<p style="position: absolute; bottom: 0; right:0;">NamesFunix and Kamo</p>
</div>
<div class="contents">
'''
# Elaborate each line :: process every element of the array qq

@ -9,75 +9,250 @@
<title>📡 💻📘</title>
</head>
<body>
<span class='CD'> 12345 </span>
<span class='NN'> multiply </span>
<span class='NN'> function </span>
<span class='VBD'> hello </span>
<div class="firstP">
<h1 style="position: absolute; top: 0; left:0; color: black;">Title!</h1>
<p style="position: absolute; bottom: 0; right:0;" class="nomignoli">Funix and Kamo</p>
</div>
<div class="contents">
<span class='WRB'> why </span>
<span class='VBZ'> is </span>
<span class='VB'> pink </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> for </span>
<span class='NNS'> girls </span>
<span class='CC'> and </span>
<span class='VB'> blue </span>
<span class='DT'> the </span>
<span class='NN'> colours </span>
<span class='IN'> for </span>
<span class='NNS'> boys </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='JJ'> 19th </span>
<span class='NN'> century </span>
<span class='NNS'> girls </span>
<span class='CC'> and </span>
<span class='NNS'> boys </span>
<span class='VBD'> were </span>
<span class='VBN'> bored </span>
<span class='NN'> dress </span>
<span class='IN'> in </span>
<span class='JJ'> white </span>
<span class='IN'> because </span>
<span class='PRP'> it </span>
<span class='VBZ'>'s </span>
<span class='VBG'> working </span>
<span class='RB'> so </span>
<span class='JJ'> much </span>
<span class='JJR'> better </span>
<span class='RB'> now </span>
<span class='JJ'> good </span>
<span class='NNS'> purple </span>
<span class='IN'> so </span>
<span class='VBD'> was </span>
<span class='JJR'> easier </span>
<span class='TO'> to </span>
<span class='VB'> clean </span>
<span class='IN'> after </span>
<span class='NNP'> WWI </span>
<span class='NNP'> World </span>
<span class='NNP'> War </span>
<span class='NNP'> One </span>
<span class='NN'> department </span>
<span class='NN'> store </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='NNP'> US </span>
<span class='NN'> realise </span>
<span class='WDT'> that </span>
<span class='MD'> could </span>
<span class='VB'> make </span>
<span class='JJR'> more </span>
<span class='NN'> money </span>
<span class='IN'> if </span>
<span class='NN'> baby </span>
<span class='NNS'> products </span>
<span class='MD'> will </span>
<span class='VB'> be </span>
<span class='VBN'> gender </span>
<span class='JJ'> specific </span>
<span class='NN'> pastel </span>
<span class='VBG'> swearing </span>
<span class='NN'> fashion </span>
<span class='CC'> and </span>
<span class='PRP'> it </span>
<span class='VBZ'> means </span>
<span class='VBD'> was </span>
<span class='VBN'> decided </span>
<span class='IN'> that </span>
<span class='PRP'> it </span>
<span class='VBZ'> works </span>
<span class='IN'> pumpkinMichaelnewspaper </span>
<span class='NN'> canGoogle </span>
<span class='NN'> speaker </span>
<span class='JJ'> small </span>
<span class='NNP'> America </span>
<span class='NN'> thing </span>
<span class='MD'> would </span>
<span class='VB'> be </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> for </span>
<span class='NNS'> boys </span>
<span class='CC'> and </span>
<span class='NN'> blue </span>
<span class='IN'> for </span>
<span class='NNS'> girls </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='CD'> 94 </span>
<span class='NNS'> days </span>
<span class='NN'> market </span>
<span class='NN'> research </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='NNP'> US </span>
<span class='RB'> just </span>
<span class='IN'> that </span>
<span class='DT'> the </span>
<span class='JJ'> current </span>
<span class='MD'> should </span>
<span class='VB'> be </span>
<span class='DT'> the </span>
<span class='JJ'> other </span>
<span class='NN'> way </span>
<span class='IN'> around </span>
<span class='CC'> and </span>
<span class='DT'> the </span>
<span class='NN'> baby </span>
<span class='NN'> boom </span>
<span class='NN'> generation </span>
<span class='VBD'> was </span>
<span class='DT'> the </span>
<span class='JJ'> first </span>
<span class='WRB'> where </span>
<span class='DT'> the </span>
<span class='NN'> girl </span>
<span class='NN'> dress </span>
<span class='IN'> in </span>
<span class='NN'> pink </span>
<span class='CC'> and </span>
<span class='NNS'> boys </span>
<span class='IN'> in </span>
<span class='JJ'> blue </span>
<span class='JJ'> blue </span>
<span class='NN'> lupilu </span>
<span class='NNP'> Balle </span>
<span class='NNP'> Balle </span>
<span class='VBD'> hello </span>
<span class='PRP$'> hello </span>
<span class='NN'> hello </span>
<span class='PRP'> you </span>
<span class='WRB'> when </span>
<span class='PRP'> I </span>
<span class='MD'> can </span>
<span class='RB'> theoretically </span>
<span class='VB'> distinguish </span>
<span class='IN'> between </span>
<span class='CD'> 75 </span>
<span class='CC'> and </span>
<span class='CD'> 10 </span>
<span class='NN'> meal </span>
<span class='IN'> on </span>
<span class='NNS'> heels </span>
<span class='VBP'> play </span>
<span class='DT'> some </span>
<span class='CD'> 0 </span>
<span class='JJ'> ok </span>
<span class='NN'> green </span>
<span class='VBZ'> is </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NN'> metal </span>
<span class='NN'> green </span>
<span class='VBZ'> is </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NN'> netta </span>
<span class='IN'> in </span>
<span class='JJ'> many </span>
<span class='NNS'> cultures </span>
<span class='JJ'> early </span>
<span class='JJ'> retail </span>
<span class='NN'> centre </span>
<span class='IN'> of </span>
<span class='RB'> only </span>
<span class='NN'> hope </span>
<span class='IN'> for </span>
<span class='JJ'> good </span>
<span class='NN'> harvest </span>
<span class='IN'> with </span>
<span class='JJ'> green </span>
<span class='NNS'> vegetables </span>
<span class='JJ'> green </span>
<span class='VBZ'> is </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='JJ'> traditional </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NNP'> Islam </span>
<span class='VBP'> yeah </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NNP'> Prophet </span>
<span class='NNP'> Muhammad </span>
<span class='WDT'> which </span>
<span class='VBZ'> is </span>
<span class='WRB'> why </span>
<span class='JJ'> many </span>
<span class='NNS'> flags </span>
<span class='IN'> in </span>
<span class='DT'> this </span>
<span class='NN'> number </span>
<span class='NN'> call </span>
<span class='PRP'> you </span>
<span class='IN'> with </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='JJ'> green </span>
<span class='IN'> since </span>
<span class='CD'> 1980s </span>
<span class='NNP'> Green </span>
<span class='VBZ'> has </span>
<span class='VBN'> been </span>
<span class='NN'> kind </span>
<span class='JJ'> colourful </span>
<span class='JJ'> environmental </span>
<span class='NNS'> parties </span>
<span class='CC'> and </span>
<span class='NN'> organisation </span>
<span class='DT'> the </span>
<span class='NN'> word </span>
<span class='JJ'> green </span>
<span class='NN'> washing </span>
<span class='VBZ'> is </span>
<span class='VBN'> used </span>
<span class='TO'> to </span>
<span class='VB'> see </span>
<span class='WRB'> how </span>
<span class='PRP'> it </span>
<span class='VBZ'> goes </span>
<span class='JJ'> email </span>
<span class='NNP'> Sterling </span>
<span class='NNP'> Knight </span>
<span class='NN'> part </span>
<span class='VB'> describe </span>
<span class='VBG'> advising </span>
<span class='IN'> of </span>
<span class='NN'> speech </span>
<span class='CD'> 20 </span>
<span class='JJ'> ok </span>
<span class='JJ'> independent </span>
<span class='NN'> boilerplate </span>
<span class='NNP'> IKEA </span>
<span class='WRB'> where </span>
<span class='VBP'> are </span>
<span class='PRP$'> my </span>
<span class='JJ'> next </span>
<span class='NNP'> Tuesday </span>
<span class='NN'> mum </span>
<span class='NN'> barrister </span>
<span class='VBN'> assisted </span>
<span class='IN'> into </span>
<span class='NNS'> months </span>
<span class='VBP'> turn </span>
<span class='RP'> off </span>
<span class='VBG'> living </span>
<span class='NNS'> companies </span>
<span class='WDT'> that </span>
<span class='VBP'> use </span>
<span class='JJ'> positive </span>
<span class='JJ'> environmental </span>
<span class='NN'> practice </span>
<span class='NN'> cease </span>
<span class='TO'> to </span>
<span class='JJ'> cover-up </span>
<span class='RB'> environmentally </span>
<span class='JJ'> unfriendly </span>
<span class='NNS'> activities </span>
<span class='VBP'> rear </span>
<span class='NN'> room </span>
<span class='NNP'> TVmaterial </span>
<span class='NN'> lightstream </span>
<span class='NN'> todayhello </span>
<span class='VBZ'> is </span>
<span class='VBN'> used </span>
<span class='IN'> in </span>
<span class='NN'> television </span>
<span class='CC'> and </span>
<span class='NNP'> Theatre </span>
<span class='TO'> to </span>
<span class='PRP'> you </span>
<span class='NNP'> CBR </span>
<span class='CD'> 929 </span>
<span class='MD'> ca </span>
<span class='RB'> n't </span>
<span class='VB'> encode </span>
<span class='DT'> this </span>
<span class='CD'> one </span>
<span class='NN'> kodi </span>
<span class='NN'> turn </span>
<span class='NN'> bedroom </span>
<span class='NNS'> twoalways </span>
</body>
<span class='RB'> quite </span>
<span class='JJ'> nervous </span>
<span class='NN'> performer </span>
</div>
</body>
</html>

@ -9,75 +9,249 @@
<title>📡 💻📘</title>
</head>
<body>
<span class='CD'> 12345 </span>
<span class='NN'> multiply </span>
<span class='NN'> function </span>
<span class='VBD'> hello </span>
<div class="firstP">
<h1 style="position: absolute; top: 0; left:0; color: black;">Title!</h1>
<p style="position: absolute; bottom: 0; right:0;" class="nomignoli">Funix and Kamo</p>
</div>
<div class="contents">
<span class='WRB'> why </span>
<span class='VBZ'> is </span>
<span class='VB'> pink </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> for </span>
<span class='NNS'> girls </span>
<span class='CC'> and </span>
<span class='VB'> blue </span>
<span class='DT'> the </span>
<span class='NN'> colours </span>
<span class='IN'> for </span>
<span class='NNS'> boys </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='JJ'> 19th </span>
<span class='NN'> century </span>
<span class='NNS'> girls </span>
<span class='CC'> and </span>
<span class='NNS'> boys </span>
<span class='VBD'> were </span>
<span class='VBN'> bored </span>
<span class='NN'> dress </span>
<span class='IN'> in </span>
<span class='JJ'> white </span>
<span class='IN'> because </span>
<span class='PRP'> it </span>
<span class='VBZ'>'s </span>
<span class='VBG'> working </span>
<span class='RB'> so </span>
<span class='JJ'> much </span>
<span class='JJR'> better </span>
<span class='RB'> now </span>
<span class='JJ'> good </span>
<span class='NNS'> purple </span>
<span class='IN'> so </span>
<span class='VBD'> was </span>
<span class='JJR'> easier </span>
<span class='TO'> to </span>
<span class='VB'> clean </span>
<span class='IN'> after </span>
<span class='NNP'> WWI </span>
<span class='NNP'> World </span>
<span class='NNP'> War </span>
<span class='NNP'> One </span>
<span class='NN'> department </span>
<span class='NN'> store </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='NNP'> US </span>
<span class='NN'> realise </span>
<span class='WDT'> that </span>
<span class='MD'> could </span>
<span class='VB'> make </span>
<span class='JJR'> more </span>
<span class='NN'> money </span>
<span class='IN'> if </span>
<span class='NN'> baby </span>
<span class='NNS'> products </span>
<span class='MD'> will </span>
<span class='VB'> be </span>
<span class='VBN'> gender </span>
<span class='JJ'> specific </span>
<span class='NN'> pastel </span>
<span class='VBG'> swearing </span>
<span class='NN'> fashion </span>
<span class='CC'> and </span>
<span class='PRP'> it </span>
<span class='VBZ'> means </span>
<span class='VBD'> was </span>
<span class='VBN'> decided </span>
<span class='IN'> that </span>
<span class='PRP'> it </span>
<span class='VBZ'> works </span>
<span class='IN'> pumpkinMichaelnewspaper </span>
<span class='NN'> canGoogle </span>
<span class='NN'> speaker </span>
<span class='JJ'> small </span>
<span class='NNP'> America </span>
<span class='NN'> thing </span>
<span class='MD'> would </span>
<span class='VB'> be </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> for </span>
<span class='NNS'> boys </span>
<span class='CC'> and </span>
<span class='NN'> blue </span>
<span class='IN'> for </span>
<span class='NNS'> girls </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='CD'> 94 </span>
<span class='NNS'> days </span>
<span class='NN'> market </span>
<span class='NN'> research </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='NNP'> US </span>
<span class='RB'> just </span>
<span class='IN'> that </span>
<span class='DT'> the </span>
<span class='JJ'> current </span>
<span class='MD'> should </span>
<span class='VB'> be </span>
<span class='DT'> the </span>
<span class='JJ'> other </span>
<span class='NN'> way </span>
<span class='IN'> around </span>
<span class='CC'> and </span>
<span class='DT'> the </span>
<span class='NN'> baby </span>
<span class='NN'> boom </span>
<span class='NN'> generation </span>
<span class='VBD'> was </span>
<span class='DT'> the </span>
<span class='JJ'> first </span>
<span class='WRB'> where </span>
<span class='DT'> the </span>
<span class='NN'> girl </span>
<span class='NN'> dress </span>
<span class='IN'> in </span>
<span class='NN'> pink </span>
<span class='CC'> and </span>
<span class='NNS'> boys </span>
<span class='IN'> in </span>
<span class='JJ'> blue </span>
<span class='JJ'> blue </span>
<span class='NN'> lupilu </span>
<span class='NNP'> Balle </span>
<span class='NNP'> Balle </span>
<span class='VBD'> hello </span>
<span class='PRP$'> hello </span>
<span class='NN'> hello </span>
<span class='PRP'> you </span>
<span class='WRB'> when </span>
<span class='PRP'> I </span>
<span class='MD'> can </span>
<span class='RB'> theoretically </span>
<span class='VB'> distinguish </span>
<span class='IN'> between </span>
<span class='CD'> 75 </span>
<span class='CC'> and </span>
<span class='CD'> 10 </span>
<span class='NN'> meal </span>
<span class='IN'> on </span>
<span class='NNS'> heels </span>
<span class='VBP'> play </span>
<span class='DT'> some </span>
<span class='CD'> 0 </span>
<span class='JJ'> ok </span>
<span class='NN'> green </span>
<span class='VBZ'> is </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NN'> metal </span>
<span class='NN'> green </span>
<span class='VBZ'> is </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NN'> netta </span>
<span class='IN'> in </span>
<span class='JJ'> many </span>
<span class='NNS'> cultures </span>
<span class='JJ'> early </span>
<span class='JJ'> retail </span>
<span class='NN'> centre </span>
<span class='IN'> of </span>
<span class='RB'> only </span>
<span class='NN'> hope </span>
<span class='IN'> for </span>
<span class='JJ'> good </span>
<span class='NN'> harvest </span>
<span class='IN'> with </span>
<span class='JJ'> green </span>
<span class='NNS'> vegetables </span>
<span class='JJ'> green </span>
<span class='VBZ'> is </span>
<span class='IN'> in </span>
<span class='DT'> the </span>
<span class='JJ'> traditional </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NNP'> Islam </span>
<span class='VBP'> yeah </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='IN'> of </span>
<span class='NNP'> Prophet </span>
<span class='NNP'> Muhammad </span>
<span class='WDT'> which </span>
<span class='VBZ'> is </span>
<span class='WRB'> why </span>
<span class='JJ'> many </span>
<span class='NNS'> flags </span>
<span class='IN'> in </span>
<span class='DT'> this </span>
<span class='NN'> number </span>
<span class='NN'> call </span>
<span class='PRP'> you </span>
<span class='IN'> with </span>
<span class='DT'> the </span>
<span class='NN'> colour </span>
<span class='JJ'> green </span>
<span class='IN'> since </span>
<span class='CD'> 1980s </span>
<span class='NNP'> Green </span>
<span class='VBZ'> has </span>
<span class='VBN'> been </span>
<span class='NN'> kind </span>
<span class='JJ'> colourful </span>
<span class='JJ'> environmental </span>
<span class='NNS'> parties </span>
<span class='CC'> and </span>
<span class='NN'> organisation </span>
<span class='DT'> the </span>
<span class='NN'> word </span>
<span class='JJ'> green </span>
<span class='NN'> washing </span>
<span class='VBZ'> is </span>
<span class='VBN'> used </span>
<span class='TO'> to </span>
<span class='VB'> see </span>
<span class='WRB'> how </span>
<span class='PRP'> it </span>
<span class='VBZ'> goes </span>
<span class='JJ'> email </span>
<span class='NNP'> Sterling </span>
<span class='NNP'> Knight </span>
<span class='NN'> part </span>
<span class='VB'> describe </span>
<span class='VBG'> advising </span>
<span class='IN'> of </span>
<span class='NN'> speech </span>
<span class='CD'> 20 </span>
<span class='JJ'> ok </span>
<span class='JJ'> independent </span>
<span class='NN'> boilerplate </span>
<span class='NNP'> IKEA </span>
<span class='WRB'> where </span>
<span class='VBP'> are </span>
<span class='PRP$'> my </span>
<span class='JJ'> next </span>
<span class='NNP'> Tuesday </span>
<span class='NN'> mum </span>
<span class='NN'> barrister </span>
<span class='VBN'> assisted </span>
<span class='IN'> into </span>
<span class='NNS'> months </span>
<span class='VBP'> turn </span>
<span class='RP'> off </span>
<span class='VBG'> living </span>
<span class='NNS'> companies </span>
<span class='WDT'> that </span>
<span class='VBP'> use </span>
<span class='JJ'> positive </span>
<span class='JJ'> environmental </span>
<span class='NN'> practice </span>
<span class='NN'> cease </span>
<span class='TO'> to </span>
<span class='JJ'> cover-up </span>
<span class='RB'> environmentally </span>
<span class='JJ'> unfriendly </span>
<span class='NNS'> activities </span>
<span class='VBP'> rear </span>
<span class='NN'> room </span>
<span class='NNP'> TVmaterial </span>
<span class='NN'> lightstream </span>
<span class='NN'> todayhello </span>
<span class='VBZ'> is </span>
<span class='VBN'> used </span>
<span class='IN'> in </span>
<span class='NN'> television </span>
<span class='CC'> and </span>
<span class='NNP'> Theatre </span>
<span class='TO'> to </span>
<span class='PRP'> you </span>
<span class='NNP'> CBR </span>
<span class='CD'> 929 </span>
<span class='MD'> ca </span>
<span class='RB'> n't </span>
<span class='VB'> encode </span>
<span class='DT'> this </span>
<span class='CD'> one </span>
<span class='NN'> kodi </span>
<span class='NN'> turn </span>
<span class='NN'> bedroom </span>
<span class='NNS'> twoalways </span>
</body>
<span class='RB'> quite </span>
<span class='JJ'> nervous </span>
<span class='NN'> performer </span>
</div>
</body>
</html>

@ -27,6 +27,8 @@
}
/* Rules for everything */
body{
font-size: 24px;
line-height: 25px;
@ -34,6 +36,13 @@
text-justify: inter-word;
}
/* Rules for the rest */
.contents{
break-before: left
}
span{
color: var(--text)
}

@ -35,7 +35,11 @@
line-height: 35px;
}
/* Rules for the rest */
/* Rules for the rest */
.contents{
break-before: left
}
div {
box-sizing: border-box;

@ -30,7 +30,11 @@
font-family: "neuzeit";
}
/* Rules for the rest */
/* Rules for the rest */
.contents{
break-before: left
}
div {
box-sizing: border-box;

Loading…
Cancel
Save