From ce2a04477a6d242fa116fbeda2cd842c84807b06 Mon Sep 17 00:00:00 2001 From: simon Date: Wed, 2 Jul 2014 21:54:35 +0100 Subject: [PATCH] Sort of semi-working UI. --- resources/public/css/form.css | 94 +++++++++++++++++ resources/public/css/override.css | 50 +++++++++ resources/public/css/screen.css | 6 -- resources/public/css/standard.css | 144 ++++++++++++++++++++++++++ resources/public/img/clojure-icon.gif | Bin 0 -> 2174 bytes resources/public/md/about.md | 41 ++++---- resources/templates/about.html | 6 +- resources/templates/base.html | 52 ++++++---- resources/templates/home.html | 26 +++-- resources/templates/world.html | 8 ++ src/mw_ui/render_world.clj | 51 +++++---- src/mw_ui/routes/home.clj | 15 ++- 12 files changed, 407 insertions(+), 86 deletions(-) create mode 100644 resources/public/css/form.css create mode 100644 resources/public/css/override.css delete mode 100644 resources/public/css/screen.css create mode 100644 resources/public/css/standard.css create mode 100644 resources/public/img/clojure-icon.gif create mode 100644 resources/templates/world.html diff --git a/resources/public/css/form.css b/resources/public/css/form.css new file mode 100644 index 0000000..4116a67 --- /dev/null +++ b/resources/public/css/form.css @@ -0,0 +1,94 @@ +.form-all{list-style:none;list-style-position:outside;margin:0px;font-family:Verdana;font-size:12px}.form-captcha{border:1px +solid #ccc;background:#f5f5f5;padding:6px;width:152px;-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px;border-radius:4px 4px 4px 4px}#payment_total{display:inline-block}#coupon-message{font-size:10px;font-weight:normal;white-space:normal}.form-captcha:hover{border:1px +solid #aaa}.form-captcha-image{border:1px +solid #aaa;-moz-border-radius:4px 4px 4px 4px;-webkit-border-radius:4px;border-radius:4px 4px 4px 4px}.form-collapse-table{height:58px;border:1px +solid #ccc;background:#f5f5f5 url(/images/soft-grad.png) repeat-x;position:relative}.form-list{padding:3px;border:1px +solid #CCC;-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2) inset}.form-list +option{padding:2px}.form-list option:nth-child(2n+1){background:#f5f5f5}.form-textarea{font-family:"Lucida Grande",Verdana}.form-textarea-limit{}.form-textarea-limit>span{display:inline-block}.form-textarea-limit +textarea{overflow:auto}.form-textarea-limit textarea:focus{outline:none !important}.form-textarea-limit-indicator{color:#666;font-size:9px;margin-top: -1px;padding:2px;text-align:right}.form-textarea-limit-indicator-error{background:#FAA;color:#fff}.nicEdit-main{background-color:white}.form-datetime-validation-error{background:#FAA;color:#fff}.form-collapse-left{}.form-collapse-mid{text-shadow:0px 2px 0px #fff;float:left;font-size:18px;margin:16px +45px 16px 20px}.form-product-item{display:inline-block;padding:5px +5px 5px 10px;position:relative}.form-product-item +img{display:block;position:static;margin:0 +12px 0 0;float:left;-moz-border-radius:3px 3px;-webkit-border-radius:3px 3px;border-radius:3px 3px}.hover-product-item:hover{background:#f5f5f5;color:#000}.form-product-item label, .form-product-item .form-radio, .form-product-item .form-checkbox{cursor:pointer}.form-special-subtotal{display:block;font-size:10px;margin-left:10px;margin-top:6px}.form-product-image,.form-product-image-with-options{margin:5px;margin-left:10px}.form-product-image-with-options{position:absolute;top:15px;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px}.form-radio,.form-checkbox{vertical-align:middle;margin:0px;padding:0px}.form-radio-item,.form-checkbox-item{margin-top:5px;float:left}.form-multiple-column,.form-single-column{display:inline-block}.form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item{width:150px}.form-radio-item label, .form-checkbox-item +label{margin-left:5px}.form-radio-item br, .form-checkbox-item +br{clear:left}.form-submit-button,.form-submit-reset,.form-submit-print,.form-screen-button{margin:0px;overflow:visible;padding:1px +6px;width:auto}.form-submit-button::-moz-focus-inner,.form-submit-reset::-moz-focus-inner{border:0px;padding:1px +6px}.form-button-red{border:1px +solid red}.form-button-magenta{border:1px +solid magenta}.form-screen-message{width:260px;height:100px}.form-screen-button +div{background-image:url("/images/photo.png");background-position:center;background-repeat:no-repeat;height:50px;width:50px}.form-screen-button{position:absolute;top:1px;margin:0px;margin-left:10px;padding:0px;background:#fdc000;background: -moz-linear-gradient(top, #fdc000 0%, #fe8900 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdc000), color-stop(100%,#fe8900));background: -webkit-linear-gradient(top, #fdc000 0%,#fe8900 100%);background: -o-linear-gradient(top, #fdc000 0%,#fe8900 100%);background: -ms-linear-gradient(top, #fdc000 0%,#fe8900 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdc000', endColorstr='#fe8900',GradientType=0 );background:linear-gradient(top, #fdc000 0%,#fe8900 100%);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255,255,255,.6) inset;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255,255,255,.6) inset;box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(255,255,255,.6) inset;border:1px +solid #ae5d00;border-radius:5px}.form-screen-button:hover{background:#fcc932;background: -moz-linear-gradient(top, #fcc932 0%, #fc9e32 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcc932), color-stop(100%,#fc9e32));background: -webkit-linear-gradient(top, #fcc932 0%,#fc9e32 100%);background: -o-linear-gradient(top, #fcc932 0%,#fc9e32 100%);background: -ms-linear-gradient(top, #fcc932 0%,#fc9e32 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc932', endColorstr='#fc9e32',GradientType=0 );background:linear-gradient(top, #fcc932 0%,#fc9e32 100%);border:1px +solid #ae5d00}.form-screen-button:active{background:#fe8900;background: -moz-linear-gradient(top, #fe8900 0%, #fdc000 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe8900), color-stop(100%,#fdc000));background: -webkit-linear-gradient(top, #fe8900 0%,#fdc000 100%);background: -o-linear-gradient(top, #fe8900 0%,#fdc000 100%);background: -ms-linear-gradient(top, #fe8900 0%,#fdc000 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe8900', endColorstr='#fdc000',GradientType=0 );background:linear-gradient(top, #fe8900 0%,#fdc000 100%);border:1px +solid #C56600;-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(255,255,255,.6) inset;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(255,255,255,.6) inset;box-shadow:0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(255,255,255,.6) inset}.form-screenshot-plate{background:url("/images/noises/defaultdesktop.png") repeat scroll 0 0 transparent;border:2px +solid #545454;border-radius:3px 3px 3px 3px;box-shadow:0 0 5px rgba(0, 0, 0, 0.7) inset;margin:10px +0;text-align:center}.form-screenshot-img{box-shadow:0 0 5px rgba(0, 0, 0, 0.7);margin:14px +0;display:inline-block}.form-screenshot-img +img{}.form-submit-print::-moz-focus-inner{padding:0px +6px}.form-submit-print{padding:1px +6px}.form-submit-print +img{margin-left: -14px;margin-right:3px;margin-top: -3px}.form-submit-print{margin-bottom: -4px;margin-top: -6px;margin-left: -6px;margin-right:5px}.form-submit-button-img{border:none !important;margin:0 +!important;padding:0 +!important;background:none !important;cursor:pointer !important}.form-collapse-right{position:absolute;right:0px;height:58px;width:40px}.form-collapse-right-show{background:url(/images/arrow-open.png) no-repeat center}.form-collapse-right-hide{background:url(/images/arrow-closed.png) no-repeat center}.form-collapse-hidden{display:none}.form-grading-item{margin-bottom:3px}.form-header{margin:0px}.form-footer{margin:0px;text-align:center;font-size:9px;color:#999;font-weight:300}.form-subHeader{border-top:1px solid #ccc;font-style:italic}.form-header-group{background:#f5f5f5;border-bottom:1px solid #ccc;padding:12px;clear:both}.form-footer-group{padding:12px;clear:both}.form-label{width:150px;margin-bottom:6px;display:inline-block;white-space:normal}.form-label-top{margin-bottom:6px;display:block;white-space:normal}.form-label-left{float:left;display:inline-block;text-align:left;padding:3px;white-space:normal}.form-label-right{float:left;display:inline-block;text-align:right;margin-bottom:6px;padding:3px;white-space:normal}.form-input-wide{}.form-section,.form-section-closed{list-style:none;list-style-position:outside;margin:0px;padding:0px;position:relative;zoom:1;clear:both}.form-section-closed{overflow:hidden;height:60px}.form-input{display:inline-block}.form-line{clear:both;padding:10px;margin:0px;display:block;width:97%;width:-moz-available;position:relative}.form-line-column{float:left;clear:none;width:auto;white-space:nowrap}.form-line.form-line-column{display:inline-block}.form-line-column-clear{clear:left;width:auto}.form-line-active{background-color:#FFFFE0;color:#333}.form-matrix-table{border-collapse:collapse;font-size:10px;margin-bottom:5px}.form-matrix-column-headers{border:1px +solid #ccc;background:#ddd;color:inherit;text-align:center}.form-matrix-row-headers{border:1px +solid #ccc;background:#ddd}.form-matrix-values{border:1px +solid #ccc;background:#f5f5f5}.form-pagebreak{border-top:1px solid #ccc;background:#f5f5f5;height:60px;clear:left}.form-pagebreak-back-container,.form-pagebreak-next-container{float:left;padding:10px;padding-top:14px}.form-pagebreak-next-container{padding-left:0px}.form-pagebreak-back,.form-pagebreak-next{-webkit-border-radius:5px 5px;-webkit-box-shadow:0px 1px 2px #aaa;-moz-border-radius:5px 5px;-moz-box-shadow:0px 1px 2px #aaa;border-radius:5px 5px;box-shadow:0px 1px 2px #aaa;border:1px +solid #999;background:#ddd;padding:5px;margin:0px;font-size:14px}.form-pagebreak-next{margin:0 +0 0 20px}.button-hidden{display:none}.form-required{margin-left:5px;color:red}.form-scale-table{font-size:12px}.form-scale-table +th{border-bottom:1px solid #ccc;color:#999}.form-product-details{font-size:9px;color:#999;font-style:italic}.form-address-table{width:330px}.form-address-line{width:310px}.form-address-city,.form-address-state{width:144px}.form-address-table td, .form-address-table +th{padding-bottom:10px}.form-address-table +select{width:150px}.form-button-error{color:red;display:inline;text-align:center}.form-pagebreak>.form-button-error{padding:14px +10px 10px;display:block}.form-line-error{background:#FAA;color:#333}.form-line-error input:not(#coupon-input), .form-line-error textarea,.form-validation-error{border:1px +solid red;-moz-box-shadow:0 0 2px red;-webkit-box-shadow:0 0 2px red;box-shadow:0 0 2px red}.form-validation-error.form-input{border:none}.form-line-active .form-error-message{display:none}.form-error-message{z-index:900;position:absolute;max-width:130px;right:0px;top:0px;color:#333;padding:3px;font-size:10px;border:4px +solid #d88;-webkit-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-webkit-border-radius:6px 6px;-moz-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-moz-border-radius:6px 6px;box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);border-radius:6px 6px;background:#FCC}.form-error-arrow{position:absolute;top:-20px;left:10px;height:0px;width:0px;border:10px +solid transparent;border-bottom-color:#666;border-bottom:10px solid rgba(102,102,102,0.3)}.form-error-arrow-inner{position:absolute;top:1px;height:0px;width:0px;border:10px +solid transparent;border-bottom-color:#FCC;border-bottom-width:11px;left:-10px;top:-10px}.form-input .form-error-message, .form-input-wide .form-error-message{bottom:-5px;font-size:11px;position:relative;z-index:900;right:auto;top:auto;color:#333;padding:3px;max-width:100%;padding-bottom:3px;font-size:12px;border:none;-moz-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-webkit-box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);-moz-border-radius:6px 6px;-webkit-border-radius:6px 6px;box-shadow:0px 2px 4px rgba(102, 102, 102, 0.5);border-radius:6px 6px;background:#FCC}.form-description{z-index:1000;position:absolute;right:7px;max-width:150px;top:6px;border:4px +solid #ccc;-webkit-border-radius:6px 6px;-webkit-box-shadow:0px 2px 4px #666;-moz-border-radius:6px 6px;-moz-box-shadow:0px 2px 4px #666;border-radius:6px 6px;box-shadow:0px 2px 4px #666;background:#f5f5f5;white-space:normal}.form-description-content{padding:10px;font-size:10px;color:#333}.form-description-arrow{border-color:transparent #CCC transparent transparent;border-style:solid;border-width:10px;height:0;width:0;left:-24px;top:7px;position:absolute}.form-description-arrow-small{border-color:transparent #F5F5F5 transparent transparent;border-style:solid;border-width:7px;height:0;width:0;left:-14px;top:10px;position:absolute}.right{right:33px !important;float:none !important}.form-line:hover .form-description-indicator, .form-line-active .form-description-indicator{display:block}.form-description-indicator{display:none;height:100%;position:absolute;right:0;top:0;width:25px;background:url(/images/s-info.png) no-repeat center}.right .form-description-arrow{border-color:transparent transparent transparent #CCC;left:auto;right:-24px}.right .form-description-arrow-small{border-color:transparent transparent transparent #F5F5F5;left:auto;right:-14px}.form-autocomplete-list{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:12px;background:#333;background:rgba(26,58,81,0.8);border:1px +solid #eee;border-top:none;padding:5px +0;-moz-border-radius-bottomright:10px 10px;-moz-border-radius-bottomleft:10px 10px;-moz-box-shadow:0px 5px 10px rgba(0,0,0,0.6);-webkit-border-bottom-right-radius:10px 10px;-webkit-border-bottom-left-radius:10px 10px;-webkit-box-shadow:0px 5px 10px rgba(0,0,0,0.6);border-radius-bottom-right:10px 10px;border-radius-bottom-left:10px 10px;box-shadow:0px 5px 10px rgba(0,0,0,0.6)}.form-autocomplete-list-item{margin:0 +5px;border:1px +solid transparent;color:#fff;padding:3px;-moz-border-radius:5px 5px;-webkit-border-radius:5px;border-radius:5px 5px;text-shadow:1px 1px 3px #000;cursor:pointer}.form-autocomplete-list-item-selected,.form-autocomplete-list-item:hover{-moz-box-shadow:0 0 4px #333;-webkit-box-shadow:0 0 4px #333;box-shadow:0 0 4px #333;border:1px +solid #1a3a51;background:#4295D1}.form-autocomplete-list-item:hover{border:1px +solid #ccc}.form-sub-label-container{display:inline-block;margin-right:5px;white-space:nowrap}.form-sub-label{color:#999;display:block;font-size:9px}.form-html{padding:3px;white-space:normal}.form-radio-other-input,.form.checkbox-other-input{margin-left:5px}.form-spinner-input-td{white-space:normal}.form-spinner-input-td input[type="number"]::-webkit-inner-spin-button, +.form-spinner-input-td input[type="number"]::-webkit-outer-spin-button{display:none}.edit-hover{display:none}.form-custom-hint{color:#aaa !important;overflow:hidden !important}.filePicker-button{border-style:solid;border-width:1px;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);cursor:pointer;display:inline-block;vertical-align:middle;padding:9px +24px;margin-bottom:0;font-size:13px;line-height:18px;text-align:center;color:#FFF;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background:#0074CC;background: -moz-linear-gradient(top, #08c 0%, #05c 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc));background: -webkit-linear-gradient(top, #08c 0%,#05c 100%);background: -o-linear-gradient(top, #08c 0%,#05c 100%);background: -ms-linear-gradient(top, #08c 0%,#05c 100%);background:linear-gradient(to bottom, #08c 0%,#05c 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 );-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0,0,0,0.05)}.filePicker-button:hover{background:#00a0f0;background: -moz-linear-gradient(top, #00a0f0 0%, #0064f0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a0f0), color-stop(100%,#0064f0));background: -webkit-linear-gradient(top, #00a0f0 0%,#0064f0 100%);background: -o-linear-gradient(top, #00a0f0 0%,#0064f0 100%);background: -ms-linear-gradient(top, #00a0f0 0%,#0064f0 100%);background:linear-gradient(to bottom, #00a0f0 0%,#0064f0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0f0', endColorstr='#0064f0',GradientType=0 )}.filePicker-button:active{background:#0064f0;background: -moz-linear-gradient(top, #0064f0 0%, #00a0f0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0064f0), color-stop(100%,#00a0f0));background: -webkit-linear-gradient(top, #0064f0 0%,#00a0f0 100%);background: -o-linear-gradient(top, #0064f0 0%,#00a0f0 100%);background: -ms-linear-gradient(top, #0064f0 0%,#00a0f0 100%);background:linear-gradient(to bottom, #0064f0 0%,#00a0f0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064f0', endColorstr='#00a0f0',GradientType=0 )}.qq-uploader{position:relative;width:224px}.qq-upload-button{background:#ffa84c;background: -moz-linear-gradient(top, #FBCB5D 0%, #EFA003 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBCB5D), color-stop(100%,#EFA003));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBCB5D', endColorstr='#EFA003',GradientType=0 );color:#FFF;display:block;font-size:16px;padding:8px +0;text-align:center;text-shadow:0 -1px #C64F00;border:1px +solid #C64F00;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px}.qq-upload-button-hover{background:#ff7b0d;background: -moz-linear-gradient(top, #ff7b0d 0%, #ffa84c 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7b0d), color-stop(100%,#ffa84c));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b0d', endColorstr='#ffa84c',GradientType=0 )}.qq-upload-button-focus{outline:1px +dotted black}.qq-upload-delete{display:none;top:0px;position:absolute;background:#f85032;background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 );width:20px;height:20px;right:0px;color:#fff;line-height:18px;text-align:center;text-shadow:0 -1px 0px #000;-moz-border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px;border-left:1px solid #aaa;cursor:pointer}.qq-upload-delete:hover{background:#ffb76b;background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04));filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 )}.qq-upload-list li:hover{border:1px +solid #aaa}.qq-upload-list li:hover .qq-upload-delete{display:block}.qq-upload-drop-area{position:absolute;top:0;left:0;width:100%;height:100%;min-height:54px;z-index:2;background:#F5F5F5;background:rgba(240, 240, 240, 0.9);text-align:center;color:#B1B1B1;border:2px +dashed #c5c5c5;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px}.qq-upload-drop-area +span{display:block;position:absolute;top:50%;width:100%;margin-top:-10px;font-size:16px}.qq-upload-drop-area-active{background:lightyellow;background:rgba(222,255,210,0.9)}.qq-upload-list{margin:10px +0;padding:0;list-style:none}.qq-upload-list +li{position:relative;font-size:11px;margin:8px +0;color:#5E5B5B;padding:2px +4px;background:#EEE;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;border-radius:5px 5px;white-space:normal;border:1px +solid transparent}.qq-upload-file,.qq-upload-spinner,.qq-upload-size,.qq-upload-cancel,.qq-upload-failed-text{font-size:9px;line-height:16px}.qq-file-uploading{display:inline-block;overflow:hidden;white-space:nowrap;width:80px}.qq-upload-failed-text{float:right}.qq-upload-fail{background:#FF927D !important;color:#fff !important}.qq-upload-fail .qq-upload-size{display:none !important}.qq-upload-file{}.qq-upload-spinner{display:inline-block;background:url("/images/loading.gif");width:15px;height:15px;vertical-align:text-bottom;margin-bottom:3px;margin-left:2px}.qq-upload-size,.qq-upload-cancel{float:right;margin-left:4px}.qq-upload-failed-text{display:none}.qq-upload-fail .qq-upload-failed-text{display:inline}.fb-login-wrapper{}.fb-align-auto,.fb-align-center{}.fb-align-left{}.fb-align-right{}.fb-login-label{color:#888;font-size:11px;line-height:23px}.fb-login-button{}.paypalpro_img{width:40px;height:26px;padding-right:7px}.paypalpro_visa{background:url('/images/credit-card-logo.png') no-repeat 0 0}.paypalpro_mc{background:url('/images/credit-card-logo.png') no-repeat -47px 0}.paypalpro_amex{background:url('/images/credit-card-logo.png') no-repeat -94px 0}.paypalpro_dc{background:url('/images/credit-card-logo.png') no-repeat -141px 0}#recaptcha_logo{display:none}#recaptcha_tagline{display:none}#recaptcha_table{border:none !important}.recaptchatable .recaptcha_image_cell,#recaptcha_table{background-color:transparent !important}#recaptcha_table +td{padding-left:0px !important}.form-single-column +.clearfix{display:inline-block}.form-single-column +.clearfix{display:block}@media only screen and (max-device-width: 550px){body{font-size:18px}.form-all{width:auto !important}.form-label-left{float:none;display:block}.form-buttons-wrapper{margin:5px +!important;text-align:center}.form-submit-print{display:none}.form-textarea{width:94% !important}.form-textbox,.form-textarea,.form-dropdown,.form-list{border:1px +solid #555;padding:4px;-webkit-border-radius:5px 5px;-webkit-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;-moz-border-radius:5px 5px;-moz-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;border-radius:5px 5px;box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset}.form-address-table{width:300px}.form-address-line{width:280px}.form-address-city,.form-address-state{width:130px}.form-address-table td, .form-address-table +th{padding-bottom:10px}.form-address-table +select{width:120px}.form-spinner{border-collapse:inherit !important;border:1px +solid #555 !important;-webkit-border-radius:5px 5px;-webkit-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;-moz-border-radius:5px 5px;-moz-box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset;border-radius:5px 5px;box-shadow:0 2px 4px rgba(0,0,0, 0.4) inset}.form-spinner-up,.form-spinner-down{padding:0 +8px !important;border:none !important;border-left:1px solid #555 !important}.form-spinner-up{-moz-border-radius-topright:5px 5px;-webkit-border-top-right-radius:5px 5px;border-top-right-radius:5px 5px;border-bottom:1px solid #555 !important}.form-spinner-down{-moz-border-radius-bottomright:5px 5px;-webkit-border-bottom-right-radius:5px 5px;border-bottom-right-radius:5px 5px}.form-spinner-input-td{padding-right:6px !important}.form-spinner-input-td +input{padding:4px +!important;background:none}.form-sub-label-container img[id*="pick"]{width:25px}div.form-header-group{margin:0px +!important}div.form-pagebreak .form-label-left{display:inline-block !important;float:left}.form-submit-button,.form-submit-reset{font-size:18px;line-height:30px}.form-captcha{border:1px +solid #555}.form-captcha +input{width:120px !important}}.clearfix2:before,.clearfix2:after{content:" ";display:table}.clearfix2:after{clear:both}div.calendar{color:#000;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;-moz-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);box-shadow:0px 0px 8px rgba(0,0,0,0.5)}div.calendar.popup{margin-left: -40px;margin-top: -100px;z-index:100000}div.calendar +td.weekend{background:#b5cfe9}div.calendar +.today{background:#f9621a !important}div.calendar .title, div.calendar +.button{color:#f9621a}div.calendar +table{background-color:#eee;border:1px +solid #aaa;border-collapse:collapse}div.calendar +thead{background-color:white}div.calendar td, +div.calendar +th{font-size:11px;padding:3px;text-align:center}div.calendar +td.title{font-weight:bold}div.calendar +th{background:#ddd;border-bottom:1px solid #ccc;border-top:1px solid #ccc;font-weight:bold;color:#555}div.calendar tr.days +td{width:2em;color:#555;text-align:center;cursor:pointer}div.calendar tr.days td:hover, +div.calendar td.button:hover{background-color:#34ABFA;cursor:pointer}div.calendar tr.days td:active +div.calendar td.button:active{background-color:#cde}div.calendar tr.days +td.selected{font-weight:bold;background-color:#fff;color:#000}div.calendar tr.days +td.today{font-weight:bold;color:#D50000}div.calendar tr.days +td.otherDay{color:#bbb} \ No newline at end of file diff --git a/resources/public/css/override.css b/resources/public/css/override.css new file mode 100644 index 0000000..02404ab --- /dev/null +++ b/resources/public/css/override.css @@ -0,0 +1,50 @@ +/** + * CSS rules added to override those in existing stylesheets in the interests of better look'n'feel + */ + + +/* this lot taken from an embedded style element within the jot form */ + +.form-label{ +/* width:149px !important; */ +} + +.form-label-left{ +/* width:149px !important; */ +} + +.form-line{ + list-style: none; + margin: 0.5 0.5em; +/* padding-top:12px; + padding-bottom:12px; */ +} + +.form-label-right{ +/* width:149px !important; */ +} + +body, html{ + margin:0; + padding:0; + background:false; +} + +.form-all{ + margin:0px auto; +/* padding-top:20px; + width:390px; */ + color:#555 !important; + font-family:'Arial'; +/* font-size:12px; */ +} + +.form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header { + color:#555; +} + +.form-required { + color: red; +} +/* end of group from the embedded style element within the jot form */ + diff --git a/resources/public/css/screen.css b/resources/public/css/screen.css deleted file mode 100644 index d759510..0000000 --- a/resources/public/css/screen.css +++ /dev/null @@ -1,6 +0,0 @@ -html, -body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - height: 100%; - padding-top: 40px; -} diff --git a/resources/public/css/standard.css b/resources/public/css/standard.css new file mode 100644 index 0000000..db70516 --- /dev/null +++ b/resources/public/css/standard.css @@ -0,0 +1,144 @@ +body { + font-family: sans-serif; +} + +/* ids generally in document order */ +/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */ +#main-container{ + clear: both; + width:80%; + margin: 0 10%; + padding: 0; + padding-top: 8em; + padding-bottom: 2em; +} + +/* footer of the document, within #main-container */ +#footer { + clear: both; + padding: 0 2em; + text-align: center; + color:white; + background:rgba(196,196,196,0.95); + width: 100%; + margin: 0; + bottom:0; + position:fixed; + z-index:150; + _position:absolute; + _top:expression(eval(document.documentElement.scrollTop+ + (document.documentElement.clientHeight-this.offsetHeight))); +} + +#header { + width:100%; + margin: 0; + padding: 0.5em 10%; + position: fixed; + z-index: 149; + background-color: black; + color: white; +} + +#header-logo { + float: left; + padding-right: 2.5em; +} + + +#nav{ + float: left; + margin: 0; + min-height: 56px; + width: 60%; +} + +#nav ul li { + padding: 0; + margin: 0; + display: inline; +} +.nav-item a { color: rgb(64, 64, 64); + text-decoration: none; + font-weight: normal; + padding: 0.25em 0.75em; + margin: 0; +} +#nav ul li.active a { background: silver;} +li.nav-item a:hover { background: rgb( 240, 240, 240) } +li.nav-item a:active { background: gray; color: white; } +.error { + background-color: #663399;; + color: white; +} + +.widget { + margin: 0; + padding: 0.25em 1em; + border: thin solid white; +} + +div.error { + width: 100%; +} + +form { + width: 100%; + background-color: silver; + border: thin solid silver; +} + +h1 { + font-size: 300%; +} + +h1, h2, h3, h4, h5 { + background-color: black; + color: white; + padding-left: 20px; +} + + +input { + background-color: white; +} + +input.submit { + background-color: green; +} + +input.required:after { + content: " \*"; + color: red; +} + +label, input { + width: 45%; + padding: 0.25em 1em; + margin: 0 0.5em; +} + +label { + border-right: thin solid gray; +} + +table { + width 100%; + padding: 0; + border: 0.25em solid silver; +} + +td, th { + margin: 0; + padding: 0.25em 1em; +} + +th { + border: thin solid gray; + background-color: silver; +} + +td { + border: thin solid silver; + background-color: white; +} diff --git a/resources/public/img/clojure-icon.gif b/resources/public/img/clojure-icon.gif new file mode 100644 index 0000000000000000000000000000000000000000..84eee16d95b131330e74e55f834849f27a1bb353 GIT binary patch literal 2174 zcmdVXi$BwQ1Hkd`X0w^mCM3yaKcu-NcTQzgE=5$1q)u@n*Gis}qfXB(v212?X_R4` zxu4uBp&FA!*~)#4g>vgcA;+ohd7VGw`TPg(*T>V_!^t@`41|FXB%n|z&eYiiB@Z(j zSs#6VO}h4T`AYsoNz>ew7N5z*5waj?ZC$bS&uq@i_`$EuJ;UFc=jhch zGzTMZ-*Tmqfvzif-tUw@6EuRux6EQ}bWe2c{Iy zC+ph=2fFgiM&}XZ(CrA7Vr0tE5QGGMt>t<0FZ#izm9*O0F;7EqTEQinVLpT z1vGjF1Ki5Got=}LmC4Fy_@w?1jr zKw*{f$hwAlF0@7W>FeItx?7;C7o{8sixG{EJt6j$3=|e1m0P5-xC>+3wRe^Qx)nKNxIimsn?ioZom|#e$KnNN#FlmoF-!PMs37!?`{(1 zuz`hzfvcdMHWO>!j68Hu^QMY)3YAzKjr`-Qc5Fzxx<7oyjbjIju1Vj_cq#7*BYR`N zXKhkSqAz|ICGi^XyhI{8XWAeg0STz-?6SF$sAlzOuWDw%U{NqWoFX7^KK}^786o~K zn3INKJG3LmiH$VFBm_G?`_+p|)9)DGszBP0vml14lLkAp2R7%0z*MA+WMvvMdACPz z#uaD#Y4|5oG8ReUxwbr%e_;784LEDeO-4-%|1e8|Y^xuiRL5ysPdjL)4sswH@nh+g zjACX){$YnBl%no;GAax#Juty#l8OsCb~f;KZunanRV|0OX_`QRPxnLClqf@JJ2UtL zBZJAB2PRF&{jy4Sza?`zu9C=t+i*jZg5^Glqvgf}Kv2 z#~u3)kD?JB%5iSc=ExIgF^t*fn7edVKqg$*nPODuV?&^{gr|0)Z%oL==sbnsWfW9I zkx*5EtG7E;etk4X0RgQ)%z!X>0iBOOCiW_tP?vdKn5Cw8!{-i((aQJ<2|9jaPY*SH z+2^iGPsd+9==z;AI&%c4oK|;;HOT$eJ!jKQ<+^PI7ocr9Kj3c_7C+IVbQd+y@3!GJ zbs%Wy=;vNvN8Ocv2Cj8sfNtz78u8hFQhm_!S^Ds*3= z746Gw5mt~M@1QgI6n%FWNSthP1m}->e<7^C&6fO4do{Ntlt}bJ$g1&4OHOnQWt`wY zsK!QA;cp!{hGOJae-B^q=AG%_l{dP8eLb;^sC}qZ$EyAP=>c#A=@Z)86_Mwa47yIc zki*S9?Ouh_4MW)DL%Z|6yFItY=E?)6s3@!`=JeG7Oy)5@R=;*%-uf1oTK5i*v5-X7 z+N0298uYME6u2D$8akECjNWj~%wafT>NdUy8H7r;f^OUu;;sLB^lraaUbu^gGM!`EExghjFr{0f()3-5{`8*5k4RK;L*y@pnG zw1oa#mswT5_5OE%VP+3$TCma`Hdx=mJ6Y>d;}A%mv#&3}DnAd)_=O@w2Wl+9@>=_x z`zm@B9Z~q496rjFrGldtqqc+N$RlDUd`caAwRMKDYVsOsh%Z5xra(C6o_J+}QYR&H zpY07lT6_e2C>x7(kAq=4Y_)LK+i6zGW|{G6N}FV5M3=ba^!OJ_MqU7^TfE-`TLx2U zA|mUNyv(1<@ZdZ04!-N@EOi&No7!*9hZ~d ziQn4vE@-H`5ZRTp`-EFn@CY&RQNd-)AT{&f9yNDd)pTq4jLGU)xmj3!IDUR79G0f`DZwi4h<9E>XrVjt ztU>Ka?$f}HI4=this is the story of mw-ui... work in progress

+
+

{{title}}

+ + {{content|safe}} +
{% endblock %} diff --git a/resources/templates/base.html b/resources/templates/base.html index a862671..7d07a5f 100644 --- a/resources/templates/base.html +++ b/resources/templates/base.html @@ -1,41 +1,47 @@ - - Welcome to mw-ui + + {{title}} + + + + + + {% script "/lib/jquery-1.9.0.js" %} + {% script "/lib/jquery.validate.min.js" %} + {% script "/lib/script.js" %} + + - -
-
-
- mw-ui -
-
-
-
+
{% block content %} {% endblock %}
- - - - {% style "/css/screen.css" %} - - - - - + diff --git a/resources/templates/home.html b/resources/templates/home.html index 013b45d..2ada9ce 100644 --- a/resources/templates/home.html +++ b/resources/templates/home.html @@ -1,14 +1,20 @@ {% extends "templates/base.html" %} {% block content %} -
-

Welcome to mw-ui

-

Time to start building your site!

-

Learn more »

-
- -
-
- {{content|safe}} -
+
+

{{title}}

+
+

+ + +

+

+ + +

+

+ + +

+
{% endblock %} diff --git a/resources/templates/world.html b/resources/templates/world.html new file mode 100644 index 0000000..6688478 --- /dev/null +++ b/resources/templates/world.html @@ -0,0 +1,8 @@ +{% extends "templates/base.html" %} +{% block content %} +
+

{{title}}

+ + {{content|safe}} +
+{% endblock %} diff --git a/src/mw_ui/render_world.clj b/src/mw_ui/render_world.clj index 9c5328f..c5fc466 100644 --- a/src/mw_ui/render_world.clj +++ b/src/mw_ui/render_world.clj @@ -17,38 +17,47 @@ [statekey] (format "img/tiles/%s.png" (format-css-class statekey))) -(defn render-cell +(defn render-cell "Render this world cell as a Hiccup table cell." [cell] (let [state (:state cell)] - [:td {:class (format-css-class state)} + [:td {:class (format-css-class state)} [:img {:alt (world/format-cell cell) :img (format-image-path state)}]])) -(defn render-world-row +(defn render-world-row "Render this world row as a Hiccup table row." [row] (apply vector (cons :tr (map render-cell row)))) -(defn render-world - "Render this world as a complete HTML page." +(defn render-world-table + "Render the world implied by the session as a complete HTML page." [] (let [world (or (session/get :world) (world/make-world 20 20)) rules (or (session/get :rules) rules/natural-rules) + generation (+ (or (session/get :generation) 0) 1) w2 (engine/transform-world world rules)] (session/put! :world w2) - (html - [:html - [:head - [:title "MicroWorld demo"] - [:link {:media "only screen and (max-device-width: 480px)" :href "css/phone.css" :type "text/css" :rel "stylesheet"}] - [:link {:media "only screen and (min-device-width: 481px) and (max-device-width: 1024px)" :href "css/tablet.css" :type "text/css" :rel "stylesheet"}] - [:link {:media "screen and (min-device-width: 1025px)" :href "css/standard.css" :type "text/css" :rel "stylesheet"}] - [:link {:media "print" :href "css/print.css" :type "text/css" :rel "stylesheet"}] - [:link {:href "css/states.css" :type "text/css" :rel "stylesheet"}] - [:meta {:http-equiv "refresh" :content "5"}]] - [:body - [:h1 "MicroWorld"] - (apply vector - (cons :table - (map render-world-row w2)))]]))) - \ No newline at end of file + (session/put! :generation generation) + [:div {:class "world"} + [:p (str "Generation " generation)] + (apply vector + (cons :table + (map render-world-row w2)))])) + +(defn render-world + "Render the world implied by the session as a complete HTML page." + [] + (html + [:html + [:head + [:title "MicroWorld demo"] + [:link {:media "only screen and (max-device-width: 480px)" :href "css/phone.css" :type "text/css" :rel "stylesheet"}] + [:link {:media "only screen and (min-device-width: 481px) and (max-device-width: 1024px)" :href "css/tablet.css" :type "text/css" :rel "stylesheet"}] + [:link {:media "screen and (min-device-width: 1025px)" :href "css/standard.css" :type "text/css" :rel "stylesheet"}] + [:link {:media "print" :href "css/print.css" :type "text/css" :rel "stylesheet"}] + [:link {:href "css/states.css" :type "text/css" :rel "stylesheet"}] + [:meta {:http-equiv "refresh" :content "5"}]] + [:body + [:h1 "MicroWorld"] + (render-world-table) + ]])) diff --git a/src/mw_ui/routes/home.clj b/src/mw_ui/routes/home.clj index 93288c5..55344fc 100644 --- a/src/mw_ui/routes/home.clj +++ b/src/mw_ui/routes/home.clj @@ -1,17 +1,22 @@ (ns mw-ui.routes.home (:use compojure.core) - (:require [mw-ui.layout :as layout] + (:require [hiccup.core :refer [html]] + [mw-ui.layout :as layout] [mw-ui.util :as util] - [mw-ui.render-world :as world])) + [mw-ui.render-world :as world] + [noir.session :as session])) (defn home-page [] (layout/render - "home.html" {:content (util/md->html "/md/docs.md")})) + "home.html" {:title "Welcome to MicroWorld" :content (util/md->html "/md/docs.md")})) (defn about-page [] - (layout/render "about.html")) + (layout/render "about.html" {:title "About MicroWorld" :content (util/md->html "/md/about.md")})) + +(defn world-page [] + (layout/render "world.html" {:title "Watch your world grow" :content (html (world/render-world-table)) :seconds (or (session/get :seconds) 5) :maybe-refresh "refresh"})) (defroutes home-routes (GET "/" [] (home-page)) (GET "/about" [] (about-page)) - (GET "/world" [] (world/render-world))) + (GET "/world" [] (world-page)))