-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
blank ticket template done for tokenscript
- Loading branch information
Showing
4 changed files
with
254 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
XMLSECTOOL=xmlsectool | ||
KEYSTORE= | ||
KEY=1 | ||
KEYPASSWORD= | ||
SIGNATURE_ALGORITHM=rsa-sha256 | ||
|
||
help: | ||
# Needs a target, example: $$ make EntryToken.canonicalized.xml | ||
# | ||
# Let's say you have a TokenScript "EntryToken.xml" | ||
#- to validate and canonicalize, add 'canonicalized' in the filename | ||
@echo $$ make EntryToken.canonicalized.xml | ||
# - to sign, use tsml as file extension: | ||
@echo $$ make EntryToken.tsml | ||
|
||
%.canonicalized.xml : %.xml | ||
# xmlsectool canonicalises automatically when needed, but leaving an xml:base attribute which creates trouble later. | ||
# xmlstarlet does it neatly | ||
# XML Canonicalization | ||
xmlstarlet c14n $^ > $@ | ||
# xmlsectool validates too, albeit adding xml:base with breaks schema. Example: | ||
# JVMOPTS=-Djavax.xml.accessExternalDTD=all /opt/xmlsectool-2.0.0/xmlsectool.sh --validateSchema --xsd --schemaDirectory ../../schema --inFile $^ | ||
# XML Validation | ||
# if INVALID, run validation again with xmllint to get meaningful error | ||
# then delete the canonicalized file | ||
-xmlstarlet val --xsd http://tokenscript.org/2019/10/tokenscript/tokenscript.xsd $@ || (mv $@ $@.INVALID; xmllint --noout --schema http://tokenscript.org/2019/10/tokenscript/tokenscript.xsd $@.INVALID) | ||
|
||
%.tsml: %.canonicalized.xml | ||
ifeq (,$(KEYSTORE)) | ||
@echo ---------------- Keystore missing. Try this ---------------- | ||
@echo $$ make KEYSTORE=shong.wang.p12 KEYPASSWORD=shong.wang $@ | ||
@echo replace it with your .p12 file and your password | ||
rm $^ | ||
else | ||
$(XMLSECTOOL) --sign --keyInfoKeyName 'AliPay' --digest SHA-256 --signatureAlgorithm http://www.w3.org/2001/04/xmldsig-more#$(SIGNATURE_ALGORITHM) --inFile $^ --outFile $@ --keystore $(KEYSTORE) --keystoreType PKCS12 --key $(KEY) --keyPassword $(KEYPASSWORD) --signaturePosition LAST | ||
# removing the canonicalized created for validation | ||
rm $^ | ||
endif |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<script type="text/javascript"><![CDATA[ | ||
class Token { | ||
constructor(tokenInstance) { | ||
this.props = tokenInstance | ||
} | ||
|
||
render() { | ||
return `<div class="ticket"> | ||
<div class="content"> | ||
<div class="left-content"> | ||
<div class="top-section"> | ||
<span class="title"> | ||
${this.props.title} | ||
</span> | ||
<span class="subtitle"> | ||
${this.props.subtitle} | ||
</span> | ||
</div> | ||
<div class="bottom-section"> | ||
<span class="footer"> | ||
${this.props.footer} | ||
</span> | ||
</div> | ||
</div> | ||
<div class="right-content"> | ||
|
||
</div> | ||
</div> | ||
</div>`; | ||
} | ||
} | ||
|
||
web3.tokens.dataChanged = (oldTokens, updatedTokens) => { | ||
const currentTokenInstance = web3.tokens.data.currentInstance; | ||
document.getElementById('root').innerHTML = new Token(currentTokenInstance).render(); | ||
}; | ||
]]></script> | ||
<div id="root"></div> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | ||
<!DOCTYPE token [ | ||
<!ENTITY TicketTemplate.en SYSTEM "TicketTemplate.en.shtml"> | ||
<!ENTITY style SYSTEM "shared.css"> | ||
]> | ||
<ts:token xmlns:ts="http://tokenscript.org/2019/10/tokenscript" | ||
xmlns="http://www.w3.org/1999/xhtml" | ||
xmlns:xml="http://www.w3.org/XML/1998/namespace" | ||
xsi:schemaLocation="http://tokenscript.org/2019/10/tokenscript http://tokenscript.org/2019/10/tokenscript.xsd" | ||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" | ||
custodian="false" | ||
> | ||
<ts:name> | ||
<ts:plurals xml:lang="en"> | ||
<ts:string quantity="one">An Example TokenScript Ticket </ts:string> | ||
<ts:string quantity="other">Some Example TokenScript Tickets</ts:string> | ||
</ts:plurals> | ||
</ts:name> | ||
|
||
<!-- need to make your own contract address --> | ||
<ts:contract name="Ticket Template" interface="erc721"> | ||
<ts:address network="100">0x5e8c614cac6d140fbd5a454f41a1d5dc5da1a218</ts:address> | ||
</ts:contract> | ||
|
||
<ts:origins> | ||
<!-- Define the contract which holds the token that the user will use --> | ||
<ts:ethereum contract="Ticket Template"> | ||
</ts:ethereum> | ||
</ts:origins> | ||
|
||
<ts:cards> | ||
<ts:token-card> | ||
<style type="text/css">&style;</style> | ||
<ts:view-iconified xml:lang="en"> | ||
&TicketTemplate.en; | ||
</ts:view-iconified> | ||
<ts:view xml:lang="en"> | ||
&TicketTemplate.en; | ||
</ts:view> | ||
</ts:token-card> | ||
</ts:cards> | ||
|
||
<!-- Attribute types define what's inside the Tokenscript --> | ||
<ts:attribute-types> | ||
<ts:attribute-type id="title" syntax="1.3.6.1.4.1.1466.115.121.1.24"> | ||
<ts:name> | ||
<ts:string xml:lang="en">TokenScript Template</ts:string> | ||
</ts:name> | ||
<ts:origins> | ||
<ts:token-id bitmask="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF00000000000000000000000000" as="utf8"> | ||
</ts:token-id> | ||
</ts:origins> | ||
</ts:attribute-type> | ||
|
||
<ts:attribute-type id="subtitle" oid="2.5.4.7" syntax="1.3.6.1.4.1.1466.115.121.1.15"> | ||
<ts:name> | ||
<ts:string xml:lang="en">A blank template for Tokenscript</ts:string> | ||
</ts:name> | ||
<ts:origins> | ||
<ts:token-id bitmask="000000000000000000000000000000000000FF00000000000000000000000000" as="uint"> | ||
<ts:mapping> | ||
<ts:option key="1"> | ||
<ts:value xml:lang="en">Shanghai</ts:value> | ||
</ts:option> | ||
<ts:option key="2"> | ||
<ts:value xml:lang="en">London</ts:value> | ||
</ts:option> | ||
</ts:mapping> | ||
</ts:token-id> | ||
</ts:origins> | ||
</ts:attribute-type> | ||
|
||
<ts:attribute-type id="footer" syntax="1.3.6.1.4.1.1466.115.121.1.15"> | ||
<ts:name> | ||
<ts:string xml:lang="en">You can fill this in later</ts:string> | ||
</ts:name> | ||
<ts:origins> | ||
<ts:token-id bitmask="00000000000000000000000000000000000000FF000000000000000000000000" as="uint"> | ||
<ts:mapping> | ||
<ts:option key="1"> | ||
<ts:value xml:lang="en">Shanghai Pudong Airport</ts:value> | ||
</ts:option> | ||
<ts:option key="2"> | ||
<ts:value xml:lang="en">London Heathrow Airport</ts:value> | ||
</ts:option> | ||
</ts:mapping> | ||
</ts:token-id> | ||
</ts:origins> | ||
</ts:attribute-type> | ||
|
||
|
||
</ts:attribute-types> | ||
</ts:token> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
/* | ||
These are the key CSS attributes that will make a | ||
Tokenscript card appear on Android and iOS | ||
*/ | ||
|
||
html { | ||
min-height: 10px; | ||
} | ||
body { | ||
min-height: 10px; | ||
} | ||
.subtitle { | ||
font-family: "SourceSansPro"; | ||
font-weight: lighter; | ||
font-size: 15px; | ||
vertical-align: middle; | ||
color: white; | ||
} | ||
|
||
.ticket { | ||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzQ0cHgiIGhlaWdodD0iMTg0cHgiIHZpZXdCb3g9IjAgMCAzNDQgMTg0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA2MSAoODk1ODEpIC0gaHR0cHM6Ly9za2V0Y2guY29tIC0tPgogICAgPHRpdGxlPkNvbWJpbmVkIFNoYXBlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoNDUpIj4KCSAgICAgIDxzdG9wIG9mZnNldD0iNSUiICBzdG9wLWNvbG9yPSIjRDY1REIxIiAvPgoJICAgICAgPHN0b3Agb2Zmc2V0PSI5NSUiIHN0b3AtY29sb3I9IiNGRkM3NUYiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2FyZHMvQ29udGVudC9QaWNrdXAiIGZpbGw9InVybCgjR3JhZGllbnQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTS00LjI2MzI1NjQxZS0xNCwxNiBDLTQuMzcxNDczMDFlLTE0LDcuMTYzNDQ0IDcuMTYzNDQ0LDEuNjIzMjQ5ZS0xNSAxNiwwIEwzMjgsMCBDMzM2LjgzNjU1NiwtMS42MjMyNDllLTE1IDM0NCw3LjE2MzQ0NCAzNDQsMTYgTDM0NCw3NyBDMzM1LjcxNTcyOSw3NyAzMjksODMuNzE1NzI4OCAzMjksOTIgQzMyOSwxMDAuMjg0MjcxIDMzNS43MTU3MjksMTA3IDM0NCwxMDcgTDM0NCwxMDcgTDM0NCwxNjggQzM0NCwxNzYuODM2NTU2IDMzNi44MzY1NTYsMTg0IDMyOCwxODQgTDE2LDE4NCBDNy4xNjM0NDQsMTg0IC00LjE1NTAzOTgxZS0xNCwxNzYuODM2NTU2IC00LjI2MzI1NjQxZS0xNCwxNjggTC00LjI2MzI1NjQxZS0xNCwxMDcgTDAuMzEzODI4MTUzLDEwNi45OTY3ODIgQzguNDUzMjEzNjMsMTA2LjgyOTczIDE1LDEwMC4xNzk0MDcgMTUsOTIgQzE1LDgzLjcxNTcyODggOC4yODQyNzEyNSw3NyAtNC4yNjMyNTY0MWUtMTQsNzcgTC00LjI2MzI1NjQxZS0xNCw3NyBMLTQuMjYzMjU2NDFlLTE0LDE2IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+'); | ||
border-radius: 15px; | ||
flex-direction: column; | ||
background-size: contain; | ||
width: 100%; | ||
background-repeat: no-repeat; | ||
/* Keep this height */ | ||
height: 52.7vw; | ||
} | ||
.title { | ||
font-family: "SourceSansPro"; | ||
font-weight: 800; | ||
font-size: 20px; | ||
color: white; | ||
width: 100%; | ||
display: block; | ||
margin-left: 5%; | ||
} | ||
|
||
.bottom-section { | ||
display: block; | ||
padding-left: 12%; | ||
padding-top: 7%; | ||
align-items: center; | ||
flex: 50%; | ||
width: auto; | ||
} | ||
|
||
.top-section { | ||
display: flex; | ||
flex-direction: row; | ||
padding-top: 2%; | ||
width: auto; | ||
} | ||
|
||
.footer { | ||
font-family: "SourceSansPro"; | ||
font-weight: 500; | ||
font-size: 14px; | ||
color: white; | ||
width: 100%; | ||
display: block; | ||
padding-top: 3%; | ||
padding-bottom: 3%; | ||
} | ||
|
||
/* flex row */ | ||
.content { | ||
display: flex; | ||
flex-flow: row wrap; | ||
justify-content: flex-start; | ||
} | ||
|
||
.left-content { | ||
width: 75%; | ||
} | ||
|
||
.right-content { | ||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMnB4IiBoZWlnaHQ9IjE4NHB4IiB2aWV3Qm94PSIwIDAgMiAxODQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYxICg4OTU4MSkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+U2VwYXJhdG9ycy9Eb3R0ZWRfU21hbGw8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkNhcmRzL0NvbnRlbnQvUGlja3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjcxLjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IlNlcGFyYXRvcnMvRG90dGVkX1NtYWxsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzEuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI4LjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTIiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTUuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxOSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIyMi41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjI2IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjI5LjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMzMiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMzYuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI0MCIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI0NyIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI0My41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjUwIiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjUzLjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iNTciIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iNjAuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI2NCIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI2Ny41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjcxIiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9Ijc0LjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iNzgiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iODEuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI4NSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI5MiIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI4OC41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjE0MSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxNDQuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxNDgiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTUxLjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTU1IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjE1OC41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjE2MiIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxNjUuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxNjkiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTcyLjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTc2IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjE4MyIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxNzkuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI5NiIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSI5OS41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjEwMyIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxMDYuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxMTAiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTEzLjUiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTE3IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjEyMC41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjEyNCIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxMjcuNSIgcj0iMSI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEiIGN5PSIxMzEiIHI9IjEiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGN4PSIxIiBjeT0iMTM4IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBjeD0iMSIgY3k9IjEzNC41IiByPSIxIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+'); | ||
background-repeat: repeat-y; | ||
margin-left: 3%; | ||
height: 100%; | ||
width: 20%; | ||
} |