From a862e866db252a6eceb50ee222d645c31f0ab3b4 Mon Sep 17 00:00:00 2001 From: Aaron Perley Date: Tue, 11 Oct 2016 17:08:34 -0400 Subject: Add pretty webpage --- webapp/app/static/carousel.css | 138 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 webapp/app/static/carousel.css (limited to 'webapp/app/static') diff --git a/webapp/app/static/carousel.css b/webapp/app/static/carousel.css new file mode 100644 index 0000000..9ef5474 --- /dev/null +++ b/webapp/app/static/carousel.css @@ -0,0 +1,138 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-bottom: 40px; + color: #5a5a5a; + /*background: lighten(#000, 93.5%);*/ +} + + +/* CUSTOMIZE THE NAVBAR +-------------------------------------------------- */ + +/* Special class on .container surrounding .navbar, used for positioning it into place. */ +.navbar-wrapper { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 20; +} + +/* Flip around the padding for proper display in narrow viewports */ +.navbar-wrapper > .container { + padding-right: 0; + padding-left: 0; +} +.navbar-wrapper .navbar { + padding-right: 15px; + padding-left: 15px; +} +.navbar-wrapper .navbar .container { + width: auto; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + height: 500px; + margin-bottom: 60px; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel .item { + height: 500px; + background-color: #777; +} +.carousel-inner > .item > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 500px; +} + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + margin-bottom: 20px; + text-align: center; +} +.marketing h2 { + font-weight: normal; +} +.marketing .col-lg-4 p { + margin-right: 10px; + margin-left: 10px; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 80px 0; /* Space out the Bootstrap
more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + letter-spacing: -1px; +} + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 768px) { + /* Navbar positioning foo */ + .navbar-wrapper { + margin-top: 20px; + } + .navbar-wrapper .container { + padding-right: 15px; + padding-left: 15px; + } + .navbar-wrapper .navbar { + padding-right: 0; + padding-left: 0; + } + + /* The navbar becomes detached from the top, so we round the corners */ + .navbar-wrapper .navbar { + border-radius: 4px; + } + + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 20px; + font-size: 21px; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } +} + +@media (min-width: 992px) { + .featurette-heading { + margin-top: 120px; + } + + + +} -- cgit v1.3.1 From ad2fbe28d4e345c9b100f47eef2da0b8f76ff9a5 Mon Sep 17 00:00:00 2001 From: liwencTaiwan Date: Fri, 14 Oct 2016 13:33:01 -0400 Subject: Add img-disable css and usage MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The “socket.on(enable/disable image)” haven’t been tested. --- webapp/app/static/carousel.css | 10 ++++++++-- webapp/app/templates/index.html | 24 ++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) (limited to 'webapp/app/static') diff --git a/webapp/app/static/carousel.css b/webapp/app/static/carousel.css index 9ef5474..4e49305 100644 --- a/webapp/app/static/carousel.css +++ b/webapp/app/static/carousel.css @@ -93,6 +93,14 @@ body { letter-spacing: -1px; } +img.img-disable { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -o-filter: grayscale(100%); + -ms-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.5; +} /* RESPONSIVE CSS -------------------------------------------------- */ @@ -133,6 +141,4 @@ body { margin-top: 120px; } - - } diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index 3592985..4dadb7b 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -124,6 +124,23 @@ var c = new creature(msg.name, socket); c.render($('#creatures')); }); + + socket.on('enable image', function(msg) { + console.log('enable image'); + // to be tested + var name = msg.name; + var myImgElement = $("#" + name); + myImgElement.removeClass('img-disable'); + + }); + + socket.on('disable image', function(msg) { + console.log('disable image'); + // to be tested + var name = msg.name; + var myImgElement = $("#" + name); + myImgElement.addClass('img-disable'); + }); socket.on('disconnect', function() { console.log('disconnected'); @@ -134,6 +151,13 @@ function clickImg(element) { console.log(element.id); + + //-----Testing------------------ + //var name = element.id; + //var myImgElement = $("#" + name); + //myImgElement.addClass('img-disable'); + // ----------------------------- + var c = new creature(element.id, socket); c.click() } -- cgit v1.3.1