From b58ae134c6836f479fc935b5944ff8760238a8d3 Mon Sep 17 00:00:00 2001 From: Jesse Qin Date: Thu, 4 Feb 2016 19:16:57 -0800 Subject: [PATCH] beautifying code --- app.js | 11 ++-- initDB.js | 58 ++++++++--------- models.js | 5 +- package.json | 44 ++++++------- projects.json | 91 ++++++++++++-------------- public/css/introHCI.css | 56 ++++++++-------- public/js/introHCI.js | 135 ++++++++++++++++++++------------------- routes/index.js | 21 +++--- routes/project.js | 34 +++++----- views/index.handlebars | 110 +++++++++++++++---------------- views/project.handlebars | 95 ++++++++++++++------------- 11 files changed, 326 insertions(+), 334 deletions(-) diff --git a/app.js b/app.js index 7e04e28..68c0cac 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,3 @@ - /** * Module dependencies. */ @@ -17,8 +16,8 @@ var project = require('./routes/project'); // Connect to the Mongo database, whether locally or on Heroku // MAKE SURE TO CHANGE THE NAME FROM 'lab7' TO ... IN OTHER PROJECTS var local_database_name = 'lab7'; -var local_database_uri = 'mongodb://localhost/' + local_database_name -var database_uri = process.env.MONGOLAB_URI || local_database_uri +var local_database_uri = 'mongodb://localhost/' + local_database_name; +var database_uri = process.env.MONGOLAB_URI || local_database_uri; mongoose.connect(database_uri); var app = express(); @@ -40,7 +39,7 @@ app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { - app.use(express.errorHandler()); + app.use(express.errorHandler()); } // Add routes here @@ -51,6 +50,6 @@ app.post('/project/:id/delete', project.deleteProject); // Example route // app.get('/users', user.list); -http.createServer(app).listen(app.get('port'), function(){ - console.log('Express server listening on port ' + app.get('port')); +http.createServer(app).listen(app.get('port'), function() { + console.log('Express server listening on port ' + app.get('port')); }); diff --git a/initDB.js b/initDB.js index be8a6e4..2bac9b5 100644 --- a/initDB.js +++ b/initDB.js @@ -1,4 +1,3 @@ - /* This script will initialize a local Mongo database on your machine so you can do development work. @@ -12,13 +11,13 @@ */ var mongoose = require('mongoose'); -var models = require('./models'); +var models = require('./models'); // Connect to the Mongo database, whether locally or on Heroku // MAKE SURE TO CHANGE THE NAME FROM 'lab7' TO ... IN OTHER PROJECTS var local_database_name = 'lab7'; -var local_database_uri = 'mongodb://localhost/' + local_database_name -var database_uri = process.env.MONGOLAB_URI || local_database_uri +var local_database_uri = 'mongodb://localhost/' + local_database_name; +var database_uri = process.env.MONGOLAB_URI || local_database_uri; mongoose.connect(database_uri); @@ -29,33 +28,32 @@ var projects_json = require('./projects.json'); // Step 2: Remove all existing documents models.Project - .find() - .remove() - .exec(onceClear); // callback to continue at + .find() + .remove() + .exec(onceClear); // callback to continue at // Step 3: load the data from the JSON file function onceClear(err) { - if(err) console.log(err); - - // loop over the projects, construct and save an object from each one - // Note that we don't care what order these saves are happening in... - var to_save_count = projects_json.length; - for(var i=0; iThink about some of the designs that you consider to be great innovations. Quite likely, they came about because the design team was able to see a new problem or opportunity, or reframe things in a new way. As the light bulb joke illustrates, an important strategy of successful designers is to reframe things so that... we can see things in a new light. This first week's exercise is intended to work your perception and reframing 'muscles'. How creative can you be? (Later exercises will work different 'muscles'.)

Any questions about this assignment should be posed to the forums and will be answered promptly by the staff.

For this first project, your mission is to redesign the experience of waiting in line.

An important part of the designer's role is to come up with a point of view. For example, your point of view might be that standing in line is intrinsic, but being bored is not.

What can we do with our time that is more productive, more interesting, or more entertaining than just wait? Maybe it's reading the news, playing a game, or preempt the parents by giving them a surprise call? Alternatively, your point of view might be to eliminate the line by preordering, or hire people to act as placeholders in the line? Or maybe this is precious time for us to do nothing? A few minutes to space out, or quickly center ourselves. No matter what you come up with, it should be something that improves the experience of standing in line. For one jumping off point, here's a few thoughts from the New York Times.

This assignment will introduce iterative design so that during the main course project, the steps of the design process will be more familiar. For further explanations about the design process, have a look at the d.school Bootcamp Bootleg here.

", - "image": "http://upload.wikimedia.org/wikipedia/commons/3/3b/Bowery_men_waiting_for_bread_in_bread_line,_New_York_City,_Bain_Collection.jpg" - }, - { - "title": "Needfinding", - "date": "January 16, 2014", - "summary": "

As Yogi Berra said, you can observe a lot just by watching. Watching how people do things is a great way to learn their goals and values, and come up with design insight. We call this needfinding. This assignment helps you train your eyes and ears to come up with design ideas. Your goal is to uncover user needs, breakdowns, clever hacks, and opportunities for improvement.

", - "image": "http://developertodesigner.files.wordpress.com/2012/11/observing.jpg" - }, - { - "title": "Prototyping", - "date": "January 23, 2014", - "summary": "

This is the first team assignment. Review and share the user needs you brainstormed. This week, you'll flesh out your design ideas by creating a point of view, seeking inspiration, storyboarding, and making paper prototypes. These are the blueprints for the mobile web application you'll make.

", - "image": "http://www.google.com/think/images/prototyping-for-success_articles_lg.jpg" - }, - { - "title": "Heuristic Evaluation", - "date": "January 30, 2014", - "summary": "

As Carolyn Snyder writes, 'Paper prototyping is a variation of usability testing where the representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person 'playing computer' who doesn't explain how the interface is intended to work.' In this assignment, your group will conduct heuristic evaluations (HEs) of your paper prototypes and you will individually help out other groups by evaluating theirs. This will complete the prototyping phase of the project, providing you with the feedback you need to begin implementing.

", - "image": "http://searchwide.com/wp-content/uploads/2013/11/evaluation.jpg" - }, - { - "title": "Skeleton and a Plan", - "date": "February 6, 2014", - "summary": "

Review the feedback you got last week from the Heuristic Evaluations of your prototypes. Distill the HE results into a list of concrete changes you want to make to your prototype. Use what worked, and improve what didn't. If you haven't already, make a decision about the prototype you are going with. This could be one of the two you tested or a combination of them. Again, take the time you need. This is what you will be working on for the rest of the course, so make sure you will feel invested in it.

", - "image": "http://www.quality-wars.com/wp-content/uploads/Gantt-Chart-Example-2-NO-LETTERS1.jpg" - }, - { - "title": "Meat on the Bones", - "date": "February 13, 2014", - "summary": "

Functionality functionality functionality! Continue developing your interactive prototypes in accordance with your development plan. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up. The goal is for you to complete the interaction flow this week.

", - "image": "http://regmedia.co.uk/2011/03/01/node_code.png" - }, - { - "title": "Ready for Testing", - "date": "February 20, 2014", - "summary": "

Crunch time! Your interactive prototypes have to be ready for user testing by the end of this week.

", - "image": "http://torontopubliclibrary.typepad.com/.a/6a00e5509ea6a18834019b00ff4518970b-800wi" - }, - { - "title": "User Test Results and Online Test Proposal", - "date": "February 27, 2014", - "summary": "

The goal of this assignment is to launch a user test. To get the kinks out of your application, first test it with a couple of in-person users.

Any questions about this assignment should be posed to the forums and will be answered promptly by the staff.

", - "image": "http://unbounce.com/photos/ab-testing.png" - } -] \ No newline at end of file +[{ + "title": "Waiting in Line", + "date": "January 9, 2014", + "summary": "

Think about some of the designs that you consider to be great innovations. Quite likely, they came about because the design team was able to see a new problem or opportunity, or reframe things in a new way. As the light bulb joke illustrates, an important strategy of successful designers is to reframe things so that... we can see things in a new light. This first week's exercise is intended to work your perception and reframing 'muscles'. How creative can you be? (Later exercises will work different 'muscles'.)

Any questions about this assignment should be posed to the forums and will be answered promptly by the staff.

For this first project, your mission is to redesign the experience of waiting in line.

An important part of the designer's role is to come up with a point of view. For example, your point of view might be that standing in line is intrinsic, but being bored is not.

What can we do with our time that is more productive, more interesting, or more entertaining than just wait? Maybe it's reading the news, playing a game, or preempt the parents by giving them a surprise call? Alternatively, your point of view might be to eliminate the line by preordering, or hire people to act as placeholders in the line? Or maybe this is precious time for us to do nothing? A few minutes to space out, or quickly center ourselves. No matter what you come up with, it should be something that improves the experience of standing in line. For one jumping off point, here's a few thoughts from the New York Times.

This assignment will introduce iterative design so that during the main course project, the steps of the design process will be more familiar. For further explanations about the design process, have a look at the d.school Bootcamp Bootleg here.

", + "image": "http://upload.wikimedia.org/wikipedia/commons/3/3b/Bowery_men_waiting_for_bread_in_bread_line,_New_York_City,_Bain_Collection.jpg" +}, { + "title": "Needfinding", + "date": "January 16, 2014", + "summary": "

As Yogi Berra said, you can observe a lot just by watching. Watching how people do things is a great way to learn their goals and values, and come up with design insight. We call this needfinding. This assignment helps you train your eyes and ears to come up with design ideas. Your goal is to uncover user needs, breakdowns, clever hacks, and opportunities for improvement.

", + "image": "http://developertodesigner.files.wordpress.com/2012/11/observing.jpg" +}, { + "title": "Prototyping", + "date": "January 23, 2014", + "summary": "

This is the first team assignment. Review and share the user needs you brainstormed. This week, you'll flesh out your design ideas by creating a point of view, seeking inspiration, storyboarding, and making paper prototypes. These are the blueprints for the mobile web application you'll make.

", + "image": "http://www.google.com/think/images/prototyping-for-success_articles_lg.jpg" +}, { + "title": "Heuristic Evaluation", + "date": "January 30, 2014", + "summary": "

As Carolyn Snyder writes, 'Paper prototyping is a variation of usability testing where the representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person 'playing computer' who doesn't explain how the interface is intended to work.' In this assignment, your group will conduct heuristic evaluations (HEs) of your paper prototypes and you will individually help out other groups by evaluating theirs. This will complete the prototyping phase of the project, providing you with the feedback you need to begin implementing.

", + "image": "http://searchwide.com/wp-content/uploads/2013/11/evaluation.jpg" +}, { + "title": "Skeleton and a Plan", + "date": "February 6, 2014", + "summary": "

Review the feedback you got last week from the Heuristic Evaluations of your prototypes. Distill the HE results into a list of concrete changes you want to make to your prototype. Use what worked, and improve what didn't. If you haven't already, make a decision about the prototype you are going with. This could be one of the two you tested or a combination of them. Again, take the time you need. This is what you will be working on for the rest of the course, so make sure you will feel invested in it.

", + "image": "http://www.quality-wars.com/wp-content/uploads/Gantt-Chart-Example-2-NO-LETTERS1.jpg" +}, { + "title": "Meat on the Bones", + "date": "February 13, 2014", + "summary": "

Functionality functionality functionality! Continue developing your interactive prototypes in accordance with your development plan. Also, update your development plan as you discover more about what you want to prioritize, what you can expect to implement, and what you may need to mock up. The goal is for you to complete the interaction flow this week.

", + "image": "http://regmedia.co.uk/2011/03/01/node_code.png" +}, { + "title": "Ready for Testing", + "date": "February 20, 2014", + "summary": "

Crunch time! Your interactive prototypes have to be ready for user testing by the end of this week.

", + "image": "http://torontopubliclibrary.typepad.com/.a/6a00e5509ea6a18834019b00ff4518970b-800wi" +}, { + "title": "User Test Results and Online Test Proposal", + "date": "February 27, 2014", + "summary": "

The goal of this assignment is to launch a user test. To get the kinks out of your application, first test it with a couple of in-person users.

Any questions about this assignment should be posed to the forums and will be answered promptly by the staff.

", + "image": "http://unbounce.com/photos/ab-testing.png" +}] diff --git a/public/css/introHCI.css b/public/css/introHCI.css index 0efa2c4..0735efb 100644 --- a/public/css/introHCI.css +++ b/public/css/introHCI.css @@ -1,53 +1,47 @@ /* applies to anything of class "example-class-selector" */ + .example-class-selector { - margin-top: 2em; + margin-top: 2em; } /* applies to any

descendants of an element of class "example-class-selector" */ + .example-class-selector p { - /* Colors are in hexadecimal: http://www.colorpicker.com/ */ - color: #CC00AA; + /* Colors are in hexadecimal: http://www.colorpicker.com/ */ + color: #CC00AA; } - .jumbotron { - position: relative; - background: none; + position: relative; + background: none; } - .jumbotron:after { - content:""; - background: url("../images/lorempixel.jumbotron.jpeg"); - opacity: 0.2; - top: 0; - left: 0; - bottom: 0; - right: 0; - position: absolute; - z-index: -1; + content: ""; + background: url("../images/lorempixel.jumbotron.jpeg"); + opacity: 0.2; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + z-index: -1; } - .jumbotron p { - color: #6e6e6e; + color: #6e6e6e; } - .project a { - text-align: center; + text-align: center; } - .project .details { - overflow: hidden; + overflow: hidden; } - .project .details .detailsImage { - width: 200px; - margin: 10px 10px 10px 0px; - float: left; + width: 200px; + margin: 10px 10px 10px 0px; + float: left; } - body > div.container { - margin-bottom: 20px; + margin-bottom: 20px; } - .project-img { - max-height: 300px; -} \ No newline at end of file + max-height: 300px; +} diff --git a/public/js/introHCI.js b/public/js/introHCI.js index 07452e6..37b4879 100644 --- a/public/js/introHCI.js +++ b/public/js/introHCI.js @@ -1,77 +1,78 @@ -'use strict'; +(function () { + 'use strict'; -// Call this function when the page loads (the "ready" event) -$(document).ready(function() { - initializePage(); -}) + // Call this function when the page loads (the "ready" event) + $(document).ready(function() { + initializePage(); + }); -/* - * Function that is called when the document is ready. - */ -function initializePage() { - $('.project a').click(function(e) { - // Prevent following the link - e.preventDefault(); + /* + * Function that is called when the document is ready. + */ + function initializePage() { + $('.project a').click(function(e) { + // Prevent following the link + e.preventDefault(); - // Get the div ID, e.g., "project3" - var projectID = $(this).closest('.project').attr('id'); - // get rid of 'project' from the front of the id 'project3' - var idNumber = projectID.substr('project'.length); + // Get the div ID, e.g., "project3" + var projectID = $(this).closest('.project').attr('id'); + // get rid of 'project' from the front of the id 'project3' + var idNumber = projectID.substr('project'.length); - // this is the URL we'll call - var url_call = '/project/'+idNumber; + // this is the URL we'll call + var url_call = '/project/' + idNumber; - // How to respond to the GET request - function addProjectDetails(project_json) { - // We need to compute a display string for the date - // Search 'toLocaleDateString' online for more details. - var date_obj = new Date(project_json['date']); - var options = { - weekday: "long", - year: "numeric", - month: "long", - day: "numeric" - }; - var display_date = date_obj.toLocaleDateString('en-US', options); + // How to respond to the GET request + function addProjectDetails(project_json) { + // We need to compute a display string for the date + // Search 'toLocaleDateString' online for more details. + var date_obj = new Date(project_json.date); + var options = { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric" + }; + var display_date = date_obj.toLocaleDateString('en-US', options); - // compose the HTML - var new_html = - '

'+display_date+'
'+ - '
'+project_json['summary']+'
'+ - ''; + // compose the HTML + var new_html = + '
' + display_date + '
' + + '
' + project_json.summary + '
' + + ''; - // get the DIV to add content to - var details_div = $('#project' + idNumber + ' .details'); - // add the content to the DIV - details_div.html(new_html); + // get the DIV to add content to + var details_div = $('#project' + idNumber + ' .details'); + // add the content to the DIV + details_div.html(new_html); - details_div.find('.project-delete').click(function(e) { - $.post('/project/'+idNumber+'/delete', function() { - window.location.href = '/'; - }); - }); - } + details_div.find('.project-delete').click(function(e) { + $.post('/project/' + idNumber + '/delete', function() { + window.location.href = '/'; + }); + }); + } - // issue the GET request - $.get(url_call, addProjectDetails); - }); - - $('#newProjectSubmitButton').click(function(e) { - console.log('clicked'); - var title = $('#new-project-form #title').val(); - var image_url = $('#new-project-form #image_url').val(); - var date = $('#new-project-form #date').val(); - var summary = $('#new-project-form #summary').val(); - var json = { - 'project_title': title, - 'image_url': image_url, - 'date': date, - 'summary': summary - }; - $.post('/project/new', json, function() { - window.location.href = '/'; // reload the page - }); - }); -} + // issue the GET request + $.get(url_call, addProjectDetails); + }); + $('#newProjectSubmitButton').click(function(e) { + console.log('clicked'); + var title = $('#new-project-form #title').val(); + var image_url = $('#new-project-form #image_url').val(); + var date = $('#new-project-form #date').val(); + var summary = $('#new-project-form #summary').val(); + var json = { + 'project_title': title, + 'image_url': image_url, + 'date': date, + 'summary': summary + }; + $.post('/project/new', json, function() { + window.location.href = '/'; // reload the page + }); + }); + } +}()); diff --git a/routes/index.js b/routes/index.js index b5d861f..3d0856b 100644 --- a/routes/index.js +++ b/routes/index.js @@ -1,19 +1,20 @@ - var models = require('../models'); /* * GET home page. */ -exports.view = function(req, res){ +exports.view = function(req, res) { - models.Project - .find() - .sort('date') - .exec(renderProjects); + models.Project + .find() + .sort('date') + .exec(renderProjects); - function renderProjects(err, projects) { - res.render('index', { 'projects': projects }); - } + function renderProjects(err, projects) { + res.render('index', { + 'projects': projects + }); + } -}; \ No newline at end of file +}; diff --git a/routes/project.js b/routes/project.js index f5991de..e470ed5 100644 --- a/routes/project.js +++ b/routes/project.js @@ -1,28 +1,28 @@ var models = require('../models'); exports.projectInfo = function(req, res) {
 - var projectID = req.params.id; + var projectID = req.params.id; - // query for the specific project and - // call the following callback + // query for the specific project and + // call the following callback - function afterQuery(err, projects) { - if(err) console.log(err); - res.json(projects[0]); - } -} + function afterQuery(err, projects) { + if (err) console.log(err); + res.json(projects[0]); + } +}; exports.addProject = function(req, res) { - var form_data = req.body; - console.log(form_data); + var form_data = req.body; + console.log(form_data); - // make a new Project and save it to the DB - // YOU MUST send an OK response w/ res.send(); -} + // make a new Project and save it to the DB + // YOU MUST send an OK response w/ res.send(); +}; exports.deleteProject = function(req, res) { - var projectID = req.params.id; + var projectID = req.params.id; - // find the project and remove it - // YOU MUST send an OK response w/ res.send(); -} \ No newline at end of file + // find the project and remove it + // YOU MUST send an OK response w/ res.send(); +}; diff --git a/views/index.handlebars b/views/index.handlebars index 80eb233..1bb08d6 100755 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,74 +1,76 @@ + - HCI Project Portfolio - - - - - - + HCI Project Portfolio + + + + + + + -
- - -
-

Michael Bernstein

-

human-computer interaction · social computing · crowdsourcing

-
+
+ + +
+

Michael Bernstein

+

human-computer interaction · social computing · crowdsourcing

+
-

Projects

- - - - {{#each projects}} - - {{/each}} +

Projects

+ + + + {{#each projects}} + + {{/each}} -
+
-
-
- - -
-
- - -
-
- - -
-
- - -
- -
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
-
+
- - - + + + + diff --git a/views/project.handlebars b/views/project.handlebars index df26ce6..b330af4 100644 --- a/views/project.handlebars +++ b/views/project.handlebars @@ -1,6 +1,7 @@ - + + Project @@ -14,52 +15,60 @@ - - - -
-
-

{{projectName}}

-

one-sentence description of project

-
+ + + + +
+
+

{{projectName}}

+

one-sentence description of project

+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim diam, adipiscing sodales sem ut, tristique suscipit odio. Nam mollis ipsum et venenatis euismod. Aliquam erat volutpat. Praesent placerat condimentum tristique. Morbi egestas + dapibus viverra. Mauris sit amet dignissim risus, non elementum eros. Donec urna dui, placerat et feugiat non, vulputate in ipsum. Quisque dignissim pulvinar nisi. Quisque feugiat commodo dolor nec suscipit. Donec pretium scelerisque aliquet. + Vivamus vitae turpis metus. Sed lobortis vitae orci sed gravida. Donec euismod ipsum sagittis pellentesque pellentesque. Aenean at lorem nec leo consequat tincidunt. Maecenas sit amet felis vel ante dictum suscipit quis nec magna. Sed augue + velit, imperdiet quis mi a, porta aliquet urna.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim diam, adipiscing sodales sem ut, tristique suscipit odio. Nam mollis ipsum et venenatis euismod. Aliquam erat volutpat. Praesent placerat condimentum tristique. Morbi egestas dapibus viverra. Mauris sit amet dignissim risus, non elementum eros. Donec urna dui, placerat et feugiat non, vulputate in ipsum. Quisque dignissim pulvinar nisi. Quisque feugiat commodo dolor nec suscipit. Donec pretium scelerisque aliquet. Vivamus vitae turpis metus. Sed lobortis vitae orci sed gravida. Donec euismod ipsum sagittis pellentesque pellentesque. Aenean at lorem nec leo consequat tincidunt. Maecenas sit amet felis vel ante dictum suscipit quis nec magna. Sed augue velit, imperdiet quis mi a, porta aliquet urna.

+

Phasellus at neque eget sapien elementum sollicitudin. In odio mauris, pulvinar quis turpis sed, faucibus tristique leo. Phasellus a volutpat tortor. Nunc blandit imperdiet iaculis. Nam purus orci, placerat in venenatis ut, ultrices id dolor. + Duis ornare erat lectus, at posuere justo mollis eu. Duis dictum feugiat imperdiet. Praesent vitae orci in eros semper lacinia a ut arcu. Cras vitae sapien et erat faucibus imperdiet nec a turpis. Integer at egestas ipsum, sed suscipit eros.

-

Phasellus at neque eget sapien elementum sollicitudin. In odio mauris, pulvinar quis turpis sed, faucibus tristique leo. Phasellus a volutpat tortor. Nunc blandit imperdiet iaculis. Nam purus orci, placerat in venenatis ut, ultrices id dolor. Duis ornare erat lectus, at posuere justo mollis eu. Duis dictum feugiat imperdiet. Praesent vitae orci in eros semper lacinia a ut arcu. Cras vitae sapien et erat faucibus imperdiet nec a turpis. Integer at egestas ipsum, sed suscipit eros.

+
+
+ + + + + + + + + + + + + + + +
User + Salient need +
SchoolteacherWants to know what music students are listening to so he can integrate it into his lessons.
Student 5th gradeDesire to be seen as a tastemaker for her friends. Hears about new music from older sister in middle school.
+
+
+ Lorem Pixel image +
+
-
-
- - - - - - - - - - - - - - - -
User - Salient need -
SchoolteacherWants to know what music students are listening to so he can integrate it into his lessons.
Student 5th gradeDesire to be seen as a tastemaker for her friends. Hears about new music from older sister in middle school.
-
-
- Lorem Pixel image -
-
+

Sed vitae ultricies magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce pulvinar sapien eget lacus volutpat suscipit. Duis bibendum condimentum sapien, quis vulputate turpis ultricies sit amet. + Quisque sollicitudin vitae ipsum vel scelerisque. Aliquam facilisis eros eros, in ultricies erat aliquam nec. Suspendisse nec egestas arcu. Sed nec malesuada turpis. Proin eu lorem sed mauris bibendum consectetur sit amet mattis arcu. Aliquam + porta ligula in nulla ullamcorper, at pulvinar diam porta.

-

Sed vitae ultricies magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce pulvinar sapien eget lacus volutpat suscipit. Duis bibendum condimentum sapien, quis vulputate turpis ultricies sit amet. Quisque sollicitudin vitae ipsum vel scelerisque. Aliquam facilisis eros eros, in ultricies erat aliquam nec. Suspendisse nec egestas arcu. Sed nec malesuada turpis. Proin eu lorem sed mauris bibendum consectetur sit amet mattis arcu. Aliquam porta ligula in nulla ullamcorper, at pulvinar diam porta.

+

Back »

-

Back »

+ + + + + - - - - -