diff --git a/README.md b/README.md index 304a16f1..a5124afd 100755 --- a/README.md +++ b/README.md @@ -66,24 +66,17 @@ Sample Readme (delete the above when you're ready to submit, and modify the belo --- ## Your Web Application Title -Include a very brief summary of your project here. -Images are encouraged, along with concise, high-level text. +This server is a basic prototype for my e-commerce art store, Fey Foundry. -Here is a sample formula for summarizing your activities, talk about: -- the domain area the project pertains to -- the main challenges or problems the application addresses -- the key innovations that make it possible to address the problem -- the main results of the implementation, does it really address the problem? -- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities +Repositories used: + - modified login page from https://github.com/nauvalazhar/bootstrap-4-login-page -(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.) - -http://a2-charlieroberts.glitch.me +http://a2-jeffreyxiao.glitch.me ## Technical Achievements -- **Tech Achievement 1**: Using a combination of... -- **Tech Achievement 2**: ... +- **Tech Achievement 1**: Uses json files to store users and products +- **Tech Achievement 2**: Main page, login page, store page ### Design/Evaluation Achievements -- **Design Achievement 1**: Shown in `style.css`, the code... -- **Design Achievement 2**: We tested the application with n=X users, finding that... +- **Design Achievement 1**: Applied Bootstrap css as well as custom css +- **Design Achievement 2**: Products are displayed from JSON diff --git a/public/cart.html b/public/cart.html new file mode 100644 index 00000000..09f90c27 --- /dev/null +++ b/public/cart.html @@ -0,0 +1,71 @@ + + + + + + + My Login Page + + + + + +
+
+
+
+
+ logo +
+
+
+

Login

+ +
+
+
+ Copyright © 2019 — Fey Foundry +
+
+
+
+
+ + + + + + + diff --git a/public/css/style.css b/public/css/style.css index d5f842ab..ced6c911 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,618 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +/*Style your own assignment! This is fun! */ + +@font-face { + font-family: "NORTHEN"; + src: url(http://www.mangamatic.net/resources/NORTHEN.ttf) format("truetype"); +} + +@charset "UTF-8"; +/* Body */ +body { + font-family: source-sans-pro; + background-color: #f2f2f2; + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + font-style: normal; + font-weight: 200; + +} +/* Container */ +.container { + width: 90%; + margin-left: auto; + margin-right: auto; + height: 1000px; + background-color: #FFFFFF; +} +/* Navigation */ +header { + width: 100%; + height: 5%; + background-color: #52bad5; + border-bottom: 1px solid #2C9AB7; +} +.banner { + display: block; + color: #fff; + font-weight: bold; + width: 100%; + /*float: left;*/ + letter-spacing: 4px; +} + +.banner-content{ + padding: 20px; + text-decoration: none; + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} + +.logo_child { + display: inline; + font-weight: bold; + float: left; +} + +nav { + float: right; + width: 50%; + text-align: right; + margin-right: 25px; +} +header nav ul { + list-style: none; + float: right; +} +nav ul li { + float: left; + color: #FFFFFF; + font-size: 14px; + text-align: left; + margin-right: 25px; + letter-spacing: 2px; + font-weight: bold; + transition: all 0.3s linear; +} +ul li a { + color: #FFFFFF; + text-decoration: none; +} +ul li:hover a { + color: #2C9AB7; +} + +/* Split the screen in half */ +.split { + height: 100%; + width: 50%; + position: fixed; + z-index: 1; + top: 0; + overflow-x: hidden; + padding-top: 20px; +} + +/* Control the left side */ +.left { + left: 0; + background-color: #111; +} + +/* Control the right side */ +.right { + right: 0; + background-color: red; +} +/* If you want the content centered horizontally and vertically */ +.centered { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.brand { + width: 90px; + height: 90px; + overflow: hidden; + border-radius: 50%; + margin: 40px auto; + box-shadow: 0 4px 8px rgba(0,0,0,.05); + position: relative; + z-index: 1; +} + +/* Style the image inside the centered container, if needed */ +.centered img { + width: 150px; + border-radius: 50%; +} + +.box { + margin-bottom: 50px; + margin-top: 50px; +} + +body.my-login-page { + background-color: #f7f9fb; + font-size: 14px; +} + +.my-login-page .brand { + width: 90px; + height: 90px; + overflow: hidden; + border-radius: 50%; + margin: 40px auto; + box-shadow: 0 4px 8px rgba(0,0,0,.05); + position: relative; + z-index: 1; +} + +.my-login-page .brand img { + justify-content: center; + width: 100%; +} + +.my-login-page .card-wrapper { + width: 400px; +} + +.my-login-page .card { + border-color: transparent; + box-shadow: 0 4px 8px rgba(0,0,0,.05); +} + +.my-login-page .card.fat { + padding: 10px; +} + +.my-login-page .card .card-title { + margin-bottom: 30px; +} + +.my-login-page .form-control { + border-width: 2.3px; +} + +.my-login-page .form-group label { + width: 100%; +} + +.my-login-page .btn.btn-block { + padding: 12px 10px; +} + +.my-login-page .footer { + margin: 40px 0; + color: #888; + text-align: center; +} + +@media screen and (max-width: 425px) { + .my-login-page .card-wrapper { + width: 90%; + margin: 0 auto; + } +} + +@media screen and (max-width: 320px) { + .my-login-page .card.fat { + padding: 0; + } + + .my-login-page .card.fat .card-body { + padding: 15px; + } +} + +.hero_header { + background-image: url(/images/fairyu_blank.png); + color: #FFFFFF; + text-align: center; + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + letter-spacing: 4px; + font-family: "NORTHEN"; + font-size: 120px; +} +/* Hero Section */ +.hero { + background-size: contain; + background-color: #B3B3B3; + padding-top: 0px; + padding-bottom: 150px; + margin-right: 150px; + margin-left: 150px; +} +img { + max-width:50%; + position:inherit; + +} +h1 { + font-weight: 900; + font-size: 64px; +} + +p { + font-size: 36px; +} +.light { + font-weight: bold; + color: #717070; +} +.tagline { + text-align: center; + color: #FFFFFF; + margin-top: 4px; + font-weight: lighter; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 60px; + font-weight: 200px; +} +/* About Section */ +.about { + padding-left: 25px; + padding-right: 25px; + display: inline-block; + background-color: #FFFFFF; +} +/* Stats Gallery */ +.stats { + color: #717070; + margin-bottom: 5px; +} +.gallery { + clear: both; + display: inline-block; + width: 100%; + background-color: #FFFFFF; + /* [disabled]min-width: 400px; +*/ + padding-bottom: 35px; + padding-top: 0px; + margin-top: -5px; + margin-bottom: 0px; +} +.thumbnail { + width: 25%; + text-align: center; + float: left; + margin-top: 35px; +} +.gallery .thumbnail h4 { + margin-top: 5px; + margin-right: 5px; + margin-bottom: 5px; + margin-left: 5px; + color: #52BAD5; +} +.gallery .thumbnail p { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + color: #A3A3A3; +} +/* Parallax Section */ +.banner { + background-color: #2D9AB7; + background-image: url(../images/parallax.png); + height: 400px; + background-attachment: fixed; + background-size: cover; + background-repeat: no-repeat; +} +.parallax { + color: #FFFFFF; + text-align: right; + padding-right: 100px; + padding-top: 110px; + letter-spacing: 2px; + margin-top: 0px; +} +.parallax_description { + color: #FFFFFF; + text-align: right; + padding-right: 100px; + width: 30%; + float: right; + font-weight: lighter; + line-height: 23px; + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; +} +/* More info */ +footer { + background-color: #FFFFFF; + padding-bottom: 35px; +} +.footer_column { + width: 50%; + text-align: center; + padding-top: 30px; + float: left; +} +footer .footer_column h3 { + color: #B3B3B3; + text-align: center; +} +footer .footer_column p { + color: #717070; + background-color: #FFFFFF; +} +.cards { + width: 100%; + height: auto; + max-width: 400px; + max-height: 200px; +} +footer .footer_column p { + padding-left: 30px; + padding-right: 30px; + text-align: justify; + line-height: 25px; + font-weight: lighter; + margin-left: 20px; + margin-right: 20px; +} +.button { + width: 200px; + margin-top: 40px; + margin-right: auto; + margin-bottom: auto; + margin-left: auto; + padding-top: 20px; + padding-right: 10px; + padding-bottom: 20px; + padding-left: 10px; + text-align: center; + vertical-align: middle; + border-radius: 0px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + border: 3px solid #FFFFFF; + color: #FFFFFF; + transition: all 0.3s linear; +} +.button:hover { + background-color: #FEFEFE; + color: #C4C4C4; + cursor: pointer; +} +.copyright { + text-align: center; + padding-top: 20px; + padding-bottom: 20px; + background-color: #717070; + color: #FFFFFF; + text-transform: uppercase; + font-weight: lighter; + letter-spacing: 2px; + border-top-width: 2px; +} +.footer_banner { + background-color: #B3B3B3; + padding-top: 60px; + padding-bottom: 60PX; + margin-bottom: 0px; + background-image: url(../images/pattern.png); + background-repeat: repeat; +} +footer { + display: inline-block; +} +.hidden { + display: none; +} + +/* Mobile */ +@media (max-width: 320px) { + .logo { + width: 100%; + text-align: center; + margin-top: 13px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + } + .container header nav { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + width: 100%; + float: none; + display: none; + } + header nav ul { + } + nav ul li { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + width: 100%; + text-align: center; + } + .thumbnail { + width: 100%; + } + .footer_column { + width: 100%; + margin-top: 0px; + } + .parallax { + text-align: center; + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + padding-top: 40%; + padding-right: 0px; + padding-bottom: 0px; + padding-left: 0px; + width: 100%; + font-size: 18px; + } + .parallax_description { + padding-top: 0px; + padding-right: 0px; + padding-bottom: 0px; + padding-left: 0px; + width: 90%; + margin-top: 25px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 12px; + float: none; + text-align: center; + } + .banner { + background-color: #2D9AB7; + background-image: none; + } + .tagline { + margin-top: 20px; + line-height: 22px; + } + .hero_header { + padding-left: 10px; + padding-right: 10px; + line-height: 22px; + text-align: center; + } +} + +/* Small Tablets */ +@media (min-width: 321px)and (max-width: 767px) { + .logo { + width: 100%; + text-align: center; + margin-top: 13px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + color: #043745; + } + .container header nav { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + width: 100%; + float: none; + overflow: auto; + display: inline-block; + background: #52bad5; + } + header nav ul { + padding: 0px; + float: none; + } + nav ul li { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + width: 100%; + text-align: center; + padding-top: 8px; + padding-bottom: 8px; + } + .text_column { + width: 100%; + text-align: left; + padding-top: 0px; + padding-right: 0px; + padding-bottom: 0px; + padding-left: 0px; + } + .thumbnail { + width: 100%; + } + .footer_column { + width: 100%; + margin-top: 0px; + } + .parallax { + text-align: center; + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + padding-top: 40%; + padding-right: 0px; + padding-bottom: 0px; + padding-left: 0px; + width: 100%; + font-size: 18px; + } + .parallax_description { + padding-top: 0px; + padding-right: 0px; + padding-bottom: 0px; + padding-left: 0px; + margin-top: 30%; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + float: none; + width: 100%; + text-align: center; + } + .thumbnail { + width: 50%; + } + .parallax { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + padding-right: 0px; + padding-bottom: 0px; + padding-left: 0px; + padding-top: 20%; + } + .parallax_description { + margin-top: 0px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: 0px; + width: 100%; + padding-top: 30px; + } + .banner { + padding-left: 20px; + padding-right: 20px; + } + .footer_column { + width: 100%; + } +} + +/* Small Desktops */ +@media (min-width: 768px) and (max-width: 1096px) { + .text_column { + width: 100%; + } + + .thumbnail { + width: 50%; + } + .banner { + margin-top: 0px; + padding-top: 0px; + } +} \ No newline at end of file diff --git a/public/images/cantthinkstraightpin.jpg b/public/images/cantthinkstraightpin.jpg new file mode 100644 index 00000000..863187e4 Binary files /dev/null and b/public/images/cantthinkstraightpin.jpg differ diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 00000000..0884817c Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/myheroacademiapin.jpg b/public/images/myheroacademiapin.jpg new file mode 100644 index 00000000..4ad48a3f Binary files /dev/null and b/public/images/myheroacademiapin.jpg differ diff --git a/public/images/pokemoncharm.jpg b/public/images/pokemoncharm.jpg new file mode 100644 index 00000000..e489a758 Binary files /dev/null and b/public/images/pokemoncharm.jpg differ diff --git a/public/images/porcupin.jpg b/public/images/porcupin.jpg new file mode 100644 index 00000000..f07c7d00 Binary files /dev/null and b/public/images/porcupin.jpg differ diff --git a/public/index.html b/public/index.html index c56d620e..be923c95 100755 --- a/public/index.html +++ b/public/index.html @@ -1,41 +1,33 @@ - - CS4241 Assignment 2 - - - -
- - -
- - + + CS4241 Assignment 2 + + + + + +
+ +
+
+

+ + Fey Foundry + +

+
+ diff --git a/public/json/products.json b/public/json/products.json new file mode 100644 index 00000000..998cdcb0 --- /dev/null +++ b/public/json/products.json @@ -0,0 +1,18 @@ +{ + "cantthinkstraightpin" : { + "id": "cantthinkstraightpin", + "title": "I can't even think straight - gay, lesbian, bisexual, and pansexual pride pinback button - multiple color schemes available", + "price": 1.99, + "variations": ["Bisexual", "Original LGBT", "Pansexual", "Lesbian"], + "img": "images/porcupin.jpg", + "description": "- 1.75 inch pin\n- High-definition laser-printed image\n- Multiple color variations for different orientations\n" + }, + "kantostarterscharm" : { + "id": "kantostarterscharm", + "title": "Pokémon Kanto Starter Phone Charm Keychains 1.5 (Bulbasaur, Charmander, Squirtle)", + "price": 8.95, + "variations": ["Bulbasaur", "Charmander", "Squirtle"], + "img": "images/pokemoncharm.jpg", + "description": "- 1.5 inch charm\n- High-definition laser-printed image\n" + } +} \ No newline at end of file diff --git a/public/json/users.json b/public/json/users.json new file mode 100644 index 00000000..d71be85d --- /dev/null +++ b/public/json/users.json @@ -0,0 +1,17 @@ +{ + "suedoenym": { + "name": "John Doe", + "shipping address": "123 Fakeaddress st, Worcester, MA", + "cart": { + "items": [], + "total": 0 + } + }, + "bigbeardedfellow": { + "name": "Santa Claus", + "shipping address": "325 S. Santa Claus Lane, North Pole, Alaska", + "cart": { + "items": [], + "total": 0 + }} +} diff --git a/public/login.html b/public/login.html new file mode 100644 index 00000000..09f90c27 --- /dev/null +++ b/public/login.html @@ -0,0 +1,71 @@ + + + + + + + My Login Page + + + + + +
+
+
+
+
+ logo +
+
+
+

Login

+ +
+
+
+ Copyright © 2019 — Fey Foundry +
+
+
+
+
+ + + + + + + diff --git a/public/register.html b/public/register.html new file mode 100644 index 00000000..566549bd --- /dev/null +++ b/public/register.html @@ -0,0 +1,10 @@ + + + + + Title + + + + + \ No newline at end of file diff --git a/public/store.html b/public/store.html new file mode 100644 index 00000000..5c8d4d1e --- /dev/null +++ b/public/store.html @@ -0,0 +1,87 @@ + + + + CS4241 Assignment 2 + + + + + + +
+ +
+
+
+
+

+ + Fey Foundry + +

+
+ + + + + diff --git a/server.improved.js b/server.improved.js index 26673fc0..7b04091a 100644 --- a/server.improved.js +++ b/server.improved.js @@ -4,13 +4,11 @@ const http = require( 'http' ), // to install the mime library used in the following line of code mime = require( 'mime' ), dir = 'public/', - port = 3000 + port = 3000; const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] + { 'username': 'suedoenym', 'name': "John Doe", 'shipping address': "123 Fakeaddress st, Worcester, MA", 'cart': [] } +]; const server = http.createServer( function( request,response ) { if( request.method === 'GET' ) { @@ -18,37 +16,45 @@ const server = http.createServer( function( request,response ) { }else if( request.method === 'POST' ){ handlePost( request, response ) } -}) +}); const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) + const filename = dir + request.url.slice( 1 ); if( request.url === '/' ) { sendFile( response, 'public/index.html' ) }else{ sendFile( response, filename ) } -} - +}; const handlePost = function( request, response ) { - let dataString = '' + let dataString = ''; request.on( 'data', function( data ) { dataString += data - }) + }); request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) - - // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) + console.log( JSON.parse( dataString ) ); + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }); + response.write(JSON.stringify({ name: dataString["id"], total: addToTotal(dataString["price"])})); response.end() }) -} +}; + +let total = 0; +const addToTotal = function (prices) { + const shippingCosts = 2.49; + for (let price in prices) + { + total += price; + } + total += shippingCosts; + return total; +}; const sendFile = function( response, filename ) { - const type = mime.getType( filename ) + const type = mime.getType( filename ) ; fs.readFile( filename, function( err, content ) { @@ -56,17 +62,17 @@ const sendFile = function( response, filename ) { if( err === null ) { // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) + response.writeHeader( 200, { 'Content-Type': type }); response.end( content ) }else{ // file not found, error code 404 - response.writeHeader( 404 ) + response.writeHeader( 404 ); response.end( '404 Error: File Not Found' ) } }) -} +}; -server.listen( process.env.PORT || port ) +server.listen( process.env.PORT || port );