From e8e676d58474cc0c07de3e382a6e72c40311de27 Mon Sep 17 00:00:00 2001 From: revvie Date: Sun, 4 Mar 2018 18:43:18 +0200 Subject: [PATCH] search form --- public/main.css | 144 ++++++++++++++++++++++++++++++++++++ server/server.js | 3 +- server/templates/footer.ejs | 2 + server/templates/header.ejs | 5 +- server/templates/index.ejs | 20 ++++- server/templates/result.ejs | 3 + server/templates/search.ejs | 16 ++++ 7 files changed, 189 insertions(+), 4 deletions(-) create mode 100644 public/main.css create mode 100644 server/templates/footer.ejs create mode 100644 server/templates/result.ejs create mode 100644 server/templates/search.ejs diff --git a/public/main.css b/public/main.css new file mode 100644 index 0000000..732a23d --- /dev/null +++ b/public/main.css @@ -0,0 +1,144 @@ +@import url(https://fonts.googleapis.com/css?family=Cabin:400); + +.searchform { + background: #151515; + height: 100%; + position: absolute; + text-align: center; + width: 100%; +} + +.searchform:before, +.searchform:after { + content: ''; + display: block; + height: 1px; + left: 50%; + margin: 0 0 0 -400px; + position: absolute; + width: 800px; +} + +.searchform:before { + background: #444; + background: linear-gradient(left, #151515, #444, #151515); + top: 192px; +} + +.searchform:after { + background: #000; + background: linear-gradient(left, #151515, #000, #151515); + top: 191px; +} + +.searchform form { + background: #111; + background: linear-gradient(#1b1b1b, #111); + border: 1px solid #000; + border-radius: 5px; + box-shadow: inset 0 0 0 1px #272727; + display: inline-block; + font-size: 0px; + margin: 150px auto 0; + padding: 20px; + position: relative; + z-index: 1; +} + +.searchform input { + background: #222; + background: linear-gradient(#333, #222); + border: 1px solid #444; + border-radius: 5px 0 0 5px; + box-shadow: 0 2px 0 #000; + color: #888; + display: block; + float: left; + font-family: 'Cabin', helvetica, arial, sans-serif; + font-size: 13px; + font-weight: 400; + height: 40px; + margin: 0; + padding: 0 10px; + text-shadow: 0 -1px 0 #000; + width: 200px; +} + +.ie .searchform input { + line-height: 40px; +} + +.searchform input::-webkit-input-placeholder { + color: #888; +} + +.searchform input:-moz-placeholder { + color: #888; +} + +.searchform input:focus { + animation: glow 800ms ease-out infinite alternate; + background: #222922; + background: linear-gradient(#333933, #222922); + border-color: #393; + box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; + color: #efe; + outline: none; +} + +.searchform input:focus::-webkit-input-placeholder { + color: #efe; +} + +.searchform input:focus:-moz-placeholder { + color: #efe; +} + +.searchform button { + background: #222; + background: linear-gradient(#333, #222); + box-sizing: border-box; + border: 1px solid #444; + border-left-color: #000; + border-radius: 0 5px 5px 0; + box-shadow: 0 2px 0 #000; + color: #fff; + display: block; + float: left; + font-family: 'Cabin', helvetica, arial, sans-serif; + font-size: 13px; + font-weight: 400; + height: 40px; + line-height: 40px; + margin: 0; + padding: 0; + position: relative; + text-shadow: 0 -1px 0 #000; + width: 80px; +} + +.searchform button:hover, +.searchform button:focus { + background: #292929; + background: linear-gradient(#393939, #292929); + color: #5f5; + outline: none; +} + +.searchform button:active { + background: #292929; + background: linear-gradient(#393939, #292929); + box-shadow: 0 1px 0 #000, inset 1px 0 1px #222; + top: 1px; +} + +@keyframes glow { + 0% { + border-color: #393; + box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; + } + 100% { + border-color: #6f6; + box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000; + } +} diff --git a/server/server.js b/server/server.js index ac267ea..85e28d4 100644 --- a/server/server.js +++ b/server/server.js @@ -16,6 +16,7 @@ const server = express() // set template engine server.set('view engine', 'ejs') server.set('views', path.join(__dirname, 'templates')) +server.use('/public', express.static('public')) // set up console logs in dev mode if (process.env.NODE_ENV !== 'production') { @@ -29,7 +30,7 @@ server.use(bodyParser.urlencoded({ extended: true })) server.use('/', (req, res, next) => { console.log('hello') - res.render('index') + res.render('search') }) server.use('/search', (req, res, next) => { diff --git a/server/templates/footer.ejs b/server/templates/footer.ejs new file mode 100644 index 0000000..308b1d0 --- /dev/null +++ b/server/templates/footer.ejs @@ -0,0 +1,2 @@ + + diff --git a/server/templates/header.ejs b/server/templates/header.ejs index 5960e31..1271c1e 100644 --- a/server/templates/header.ejs +++ b/server/templates/header.ejs @@ -1 +1,4 @@ -

Penis

+ + + + diff --git a/server/templates/index.ejs b/server/templates/index.ejs index 9a71e42..d889006 100644 --- a/server/templates/index.ejs +++ b/server/templates/index.ejs @@ -1,3 +1,19 @@ <% include header %> -

An awesome template

-{{>header }} + + + +Goodreads API + + + + + + +
+
+ + +
+
+ +<% include footer %> \ No newline at end of file diff --git a/server/templates/result.ejs b/server/templates/result.ejs new file mode 100644 index 0000000..4ecdd29 --- /dev/null +++ b/server/templates/result.ejs @@ -0,0 +1,3 @@ +<% include header %> + +<% include footer %> \ No newline at end of file diff --git a/server/templates/search.ejs b/server/templates/search.ejs new file mode 100644 index 0000000..309f1f4 --- /dev/null +++ b/server/templates/search.ejs @@ -0,0 +1,16 @@ +<% include header %> + + +Goodreads API + + + + + +
+
+ + +
+
+<% include footer %> \ No newline at end of file