diff options
| -rw-r--r-- | webapp/app/static/carousel.css | 138 | ||||
| -rw-r--r-- | webapp/app/templates/index.html | 182 | ||||
| -rw-r--r-- | webapp/app/views.py | 6 |
3 files changed, 279 insertions, 47 deletions
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 <hr> 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 @@ -<html> - <head> - <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> - <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> - - <script> - var SPAWN_URL = "/spawn"; +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> + <!--<meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../favicon.ico">--> - function creature(name, socket) { - var self = this; - self.name = name; - self.socket = socket; - - self.render = function($parent) { - var $a = $('<a>'); - $a.text(self.name); - $a.click(self.click.bind(self)); + <!-- Bootstrap core CSS --> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> - var $li = $('<li>'); - $li.append($a); - $parent.append($li); - }; + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> - self.click = function() { - self.socket.emit('spawn', {name:self.name}); - } + <!-- Custom styles for this template --> + <link href="static/carousel.css" rel="stylesheet"> + + </head> + +<div class = "page-header"> +<center> + <h1> + Welcome to the Underwater World <br> + <small>Select your favorite sea creature and relax!</small> + </h1> +</center> + +</div> + + + <!-- Marketing messaging and featurettes + ================================================== --> + <!-- Wrap the rest of the page in another container to center all the content. --> + + <div class="container marketing"> + + <!-- Three columns of text below the carousel --> + <div class="row"> + <div class="col-lg-4"> + <img id="jellyfish" onClick="clickImg(this)" class="img-circle" src="http://animalia-life.com/data_images/jellyfish/jellyfish7.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="dolphin" onClick="clickImg(this)" class="img-circle" src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/A-G/bottlenose-dolphin-jumping.jpg.adapt.945.1.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="boat" onClick="clickImg(this)" class="img-circle" src="http://yachtpals.com/files/groupimages/woodduck.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> +<br> + <div class="row"> + <div class="col-lg-4"> + <img id="dory" onClick="clickImg(this)" class="img-circle" src="https://www.sciencenewsforstudents.org/sites/default/files/2016/06/main/articles/wt_blue_tang_dory_free.jpg" alt="Generic placeholder image" width="150" height="150"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="nemo" onClick="clickImg(this)" class="img-circle" src="http://img.wallpaperfolder.com/f/63DCF495B5BC/clown-fish-75948.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="whale" onClick="clickImg(this)" class="img-circle" src="http://media-channel.nationalgeographic.com/media/uploads/photos/content/photo/2013/01/30/KillerWhale_01_BuiltForTheKillV.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> +<br> + <div class="row"> + <div class="col-lg-4"> + <img id="stingray" onClick="clickImg(this)" class="img-circle" src="http://3.bp.blogspot.com/-enlwcfp2skQ/Tlxxws9FRlI/AAAAAAAAAmg/0-TEWn8Sokw/s1600/stingray_5.JPG" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="eel" onClick="clickImg(this)" class="img-circle" src="http://blogs.courierpostonline.com/fishhead/files/2012/11/eel.jpg" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + <div class="col-lg-4"> + <img id="shark" onClick="clickImg(this)" class="img-circle" src="http://www.livescience.com/images/i/000/083/926/original/shark-attacks-increased-in-2015.jpg?interpolation=lanczos-none&downsize=*:1000" alt="Generic placeholder image" width="140" height="140"> + </div><!-- /.col-lg-4 --> + </div><!-- /.row --> + + </div><!-- /.container --> + + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script> + <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + + <script> + var SPAWN_URL = "/spawn"; + + function creature(name, socket) { + var self = this; + self.name = name; + self.socket = socket; + + self.render = function($parent) { + var $a = $('<a>'); + $a.text(self.name); + $a.click(self.click.bind(self)); + + var $li = $('<li>'); + $li.append($a); + $parent.append($li); + }; + + self.click = function() { + self.socket.emit('spawn', {name:self.name}); } + } - $(document).ready(function() { - var namespace = '/spawn'; - var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); - - socket.on('connect', function() { - console.log('connected!'); - }); - socket.on('new creature', function(msg) { - console.log('new!'); - var c = new creature(msg.name, socket); - c.render($('#creatures')); - }); + $(document).ready(function() { + var namespace = '/spawn'; + socket = io.connect('http://' + document.domain + ':' + location.port + namespace); + + socket.on('connect', function() { + console.log('connected!'); + }); - socket.on('disconnect', function() { - console.log('disconnected'); - }); + socket.on('new creature', function(msg) { + console.log('new!'); + var c = new creature(msg.name, socket); + c.render($('#creatures')); + }); - socket.emit('ready'); + socket.on('disconnect', function() { + console.log('disconnected'); }); - </script> - <title>{{ title }}</title> - </head> - <body> - <h1>Ocean Fun Times</h1> - <ul id="creatures"></ul> - </body> + socket.emit('ready'); + }); + + function clickImg(element) { + console.log(element.id); + var c = new creature(element.id, socket); + c.click() + } + + </script> + <!-- Just to make our placeholder images work. Don't actually copy the next line! --> + <!--<script src="../../assets/js/vendor/holder.min.js"></script>--> + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <!--<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>--> + </body> </html> 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/<path:path>') +def send_static(path): + return send_from_directory('static', path) + connections = set() @sio.on('connect', namespace='/spawn') |