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 ++++++++++++++++++++++++++++ webapp/app/templates/index.html | 194 +++++++++++++++++++++++++++++----------- webapp/app/views.py | 6 +- 3 files changed, 285 insertions(+), 53 deletions(-) create mode 100644 webapp/app/static/carousel.css (limited to 'webapp') 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; + } + + + +} diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html index d4d1853..a8e3479 100644 --- a/webapp/app/templates/index.html +++ b/webapp/app/templates/index.html @@ -1,57 +1,147 @@ - - - - - - + + + + - {{ title }} - - -

Ocean Fun Times

- + socket.on('new creature', function(msg) { + console.log('new!'); + var c = new creature(msg.name, socket); + c.render($('#creatures')); + }); + + socket.on('disconnect', function() { + console.log('disconnected'); + }); + + socket.emit('ready'); + }); + + function clickImg(element) { + console.log(element.id); + var c = new creature(element.id, socket); + c.click() + } + + + + + + + diff --git a/webapp/app/views.py b/webapp/app/views.py index 1c68688..b03f6ab 100644 --- a/webapp/app/views.py +++ b/webapp/app/views.py @@ -1,4 +1,4 @@ -from flask import render_template, request +from flask import render_template, request, send_from_directory from app import app, sio, send_queue, recv_queue import time @@ -10,6 +10,10 @@ def index(): return render_template('index.html', title='F16 Group1') +@app.route('/static/') +def send_static(path): + return send_from_directory('static', path) + connections = set() @sio.on('connect', namespace='/spawn') -- cgit v1.3.1