Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blank ticket TS template #305

Merged
merged 1 commit into from
Dec 19, 2019
+254 −0
Merged

Blank ticket TS template #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions examples/TicketTemplate/Makefile
View file
Open in desktop
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
39 changes: 39 additions & 0 deletions examples/TicketTemplate/TicketTemplate.en.shtml
View file
Open in desktop
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>

93 changes: 93 additions & 0 deletions examples/TicketTemplate/TicketTemplate.xml
View file
Open in desktop
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>
84 changes: 84 additions & 0 deletions examples/TicketTemplate/shared.css
View file
Open in desktop
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%;
}