diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 56 |
1 files changed, 52 insertions, 4 deletions
@@ -6,7 +6,51 @@ <style> body { text-align: center; - background-color: #ADCCF7; + background-color: #c3ddff; + font-family: sans-serif; + } + #crypt { + -moz-box-shadow: 0px 10px 14px -7px #3e7327; + -webkit-box-shadow: 0px 10px 14px -7px #3e7327; + box-shadow: 0px 10px 14px -7px #3e7327; + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352)); + background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%); + background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%); + background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%); + background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%); + background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0); + background-color:#77b55a; + -moz-border-radius:4px; + -webkit-border-radius:4px; + border-radius:4px; + border:1px solid #4b8f29; + display:inline-block; + cursor:pointer; + color:#ffffff; + font-family:Arial; + font-size:1.5em; + font-weight:bold; + padding:1em 2em; + text-decoration:none; + text-shadow:0px 1px 0px #5b8a3c; + } + #crypt:hover { + background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a)); + background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%); + background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%); + background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%); + background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%); + background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0); + background-color:#72b352; + } + #crypt:active { + position:relative; + top:1px; + } + textarea { + font-size: 1.5em; } </style> </head> @@ -16,9 +60,13 @@ <a href="http://github.com/robloach/xor-crypt">XOR-Crypt</a> is a simple XOR string encryption library. </p> - <textarea id="content" rows="6" cols="40">Enter text here, click "XOR-Crypt", and see it encrypt. Click again, and see it translate back.</textarea> - <br> - <button type="button" id="crypt">XOR-Crypt</button> + <p> + <textarea id="content" rows="10" cols="60">Enter text here, click "XOR-Crypt", and see it encrypt. Click again, and see it translate back.</textarea> + </p> + + <p> + <button type="button" id="crypt">XOR-Crypt</button> + </p> <script type="text/javascript" src="xor-crypt.js"></script> <script> |