diff --git a/app/css/main.css b/app/css/main.css index 6cf3fb3..9be165a 100644 --- a/app/css/main.css +++ b/app/css/main.css @@ -563,11 +563,18 @@ body .hidden { body #content #questions .input-container .action-buttons { flex: 1 25%; } + body #content #questions .no-questions { + width: 100%; + margin: 16px; + color: #FBFFFE; + text-align: center; + } body #content #questions .questions-content { display: flex; position: fixed; top: 16px; bottom: 16px; + min-width: 90%; } body #content #questions .questions-content hr { width: 75%; diff --git a/app/css/variables.css b/app/css/variables.css new file mode 100644 index 0000000..e69de29 diff --git a/app/less/main.css b/app/less/main.css new file mode 100644 index 0000000..9be165a --- /dev/null +++ b/app/less/main.css @@ -0,0 +1,830 @@ +.alertify-notifier .ajs-message.ajs-error { + color: #FBFFFE; +} +.alertify-notifier .ajs-message { + color: #0079B2; + background-color: #FBFFFE; +} +body { + color: #1B1B1E; + margin: 0; + background-color: #0079B2; + font-size: 16px; + line-height: 1.2; + font-family: 'Open Sans', sans-serif; + /* common */ +} +body [ng\:cloak], +body [ng-cloak], +body [data-ng-cloak], +body [x-ng-cloak], +body .ng-cloak, +body .x-ng-cloak { + display: none !important; +} +body .red { + color: red; +} +body p, +body div, +body span, +body a, +body button { + font-size: 100%; +} +body h1 { + font-size: 200%; +} +body .primary-button { + margin: 0 8px; + cursor: pointer; + background-color: #ff8c00; + color: #FBFFFE; + border: none; + padding: 8px; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; +} +body .primary-button:active { + background-color: #cc7000; +} +body .secondary-button { + border: none; + background: none; + cursor: pointer; + color: #ff8c00; + font-weight: bold; +} +body .single-line-input { + background-color: #0079B2; + color: #FBFFFE; + font-weight: bold; + border: none; + border-radius: 2px; + border-bottom: 2px solid black; + margin: 16px; + font-size: 16px; + padding: 8px; + text-align: center; + transition: 0.15s all linear; +} +body .single-line-input:focus { + outline: none !important; + border-bottom: 2px solid #FBFFFE; + transition: 0.15s all linear; +} +body .action-buttons { + position: fixed; + top: 32px; + right: 32px; +} +body .action-buttons button { + margin: 0 8px; + cursor: pointer; + background-color: #ff8c00; + color: #FBFFFE; + border: none; + padding: 8px; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; +} +body .action-buttons button:active { + background-color: #cc7000; +} +body .loader { + position: fixed; + top: 40%; + left: 45%; + border: 16px solid #f3f3f3; + /* Light grey */ + border-top: 16px solid #3498db; + /* Blue */ + border-radius: 50%; + width: 120px; + height: 120px; + animation: spin 2s linear infinite; +} +body input[type="text"], +body input[type="password"] { + background-color: #0079B2; + color: #FBFFFE; + font-weight: bold; + border: none; + border-radius: 2px; + border-bottom: 2px solid black; + margin: 16px; + font-size: 16px; + padding: 8px; + text-align: center; + transition: 0.15s all linear; +} +body input[type="text"]:focus, +body input[type="password"]:focus { + outline: none !important; + border-bottom: 2px solid #FBFFFE; + transition: 0.15s all linear; +} +body .modal-icon { + position: fixed; + right: 16px; + bottom: 16px; + font-size: 24px; + color: rgba(251, 255, 254, 0.35); +} +body .overlay { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(27, 27, 30, 0.92); + z-index: 10000; + transition: all 5s ease-in; +} +body .overlay.ng-enter { + opacity: 0; + transition: .25s linear; +} +body .overlay.ng-enter.ng-enter-active { + opacity: 1; +} +body .overlay.ng-leave { + opacity: 1; + transition: .25s linear; +} +body .overlay.ng-leave.ng-leave-active { + opacity: 0; +} +body .overlay .modal { + padding: 24px; + z-index: 10001; + background-color: #FBFFFE; + position: fixed; + top: 20%; + left: 35%; + right: 35%; + bottom: 35%; + box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.3); +} +body .overlay i.fa-times { + position: absolute; + top: 16px; + right: 16px; + cursor: pointer; +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +body .animate { + transition: left 0.25s ease; +} +body .form-group { + margin: 16px 0; +} +body .form-actions { + margin-top: 32px; +} +body .control-label { + font-weight: 700; + display: block; + margin-bottom: 8px; +} +body .hidden { + display: none !important; +} +@media only screen and (max-width: 1223px) and (min-width: 320px) { + body .modal { + top: 10% !important; + right: 4% !important; + bottom: 10% !important; + left: 4% !important; + } + body .mobile-hidden { + display: none !important; + } + body html { + margin: none; + } + body .loader { + left: 40%; + width: 60px; + height: 60px; + } + body #mobile-nav { + position: fixed; + top: 0; + display: flex; + width: 100%; + height: 48px; + text-align: center; + border-bottom: 2px solid #C1CAD6; + } + body #mobile-nav i { + margin: 8px auto; + color: #ff8c00; + font-size: 200%; + flex-grow: 1; + color: #ffd199; + } + body #mobile-nav i.active-nav { + color: #ff8c00; + opacity: 1; + } + body #action-buttons { + display: none; + } + body #content { + position: fixed; + top: 50px; + bottom: 0; + overflow-y: scroll; + width: 100%; + text-align: center; + color: white; + } + body #content #start .mobile-account-button { + border: none; + background: none; + position: fixed; + top: 8px; + right: 8px; + font-size: 32px; + color: #ff8c00; + } + body #content #start h1 { + font-size: 4em; + margin: 0 auto; + margin-top: -8px; + } + body #content #start h3 { + margin-top: 8px; + margin-bottom: none; + } + body #content #start img { + margin-top: -16px; + height: 35vh; + } + body #content #start .id-input { + font-weight: bold; + font-size: 16px; + } + body #content #start .start-button { + margin: 16px; + cursor: pointer; + background-color: #ff8c00; + width: 256px; + height: 96px; + font-weight: 700; + color: #FBFFFE; + border: none; + border-radius: 4px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; + } + body #content #start .start-button:active { + background-color: #cc7000; + } + body #questions .admin-actions { + display: none; + } + body #questions #session-info { + display: none; + } + body #questions hr { + display: none; + } + body #questions .question-input-group { + position: fixed; + bottom: 0; + display: flex; + width: 100%; + height: 8vh; + } + body #questions .question-input-group input { + border: none; + flex: 1 75%; + border-top: 2px solid #C1CAD6; + font-size: 24px; + padding: 8px; + } + body #questions .question-input-group button { + border: none; + background-color: #ff8c00; + color: #FBFFFE; + font-weight: bold; + border-top: 2px solid #cc7000; + flex: 1 25%; + } + body #questions .questions { + position: fixed; + top: 50px; + bottom: 8vh; + right: 0; + left: 0; + overflow-y: scroll; + } + body #questions .question { + display: flex; + flex-wrap: wrap; + background-color: white; + border-top: 1px solid black; + color: black; + padding: 8px 4px; + vertical-align: middle; + } + body #questions .question .question-content { + padding: 4px; + flex-wrap: wrap; + text-align: left; + flex: 3 70%; + height: fit-content; + min-height: 6vh; + font-size: 16px; + } + body #questions .question .upvotes { + text-align: right; + flex: 1 10%; + } + body #questions .question .upvotes .upvote-button { + color: #ff8c00; + font-size: 24px; + } + body #questions .question .upvote-button-container { + text-align: center; + } + body #questions .question .orange { + color: orange; + font-weight: bold; + } + body #questions .question:first-child { + border-top: none; + } + body #info { + background-color: #FBFFFE; + color: #1B1B1E; + padding: 16px; + text-align: left; + } + body #info h1 { + margin: 0; + } + body #info h3 { + color: #C1CAD6; + margin: 8px 0; + } + body #login { + padding: 16px; + } + body #login label { + margin-bottom: -8px; + display: block; + } + body #login button { + margin: 0 8px; + cursor: pointer; + background-color: #ff8c00; + color: #FBFFFE; + border: none; + padding: 8px; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; + margin: 32px; + } + body #login button:active { + background-color: #cc7000; + } + body #account .session-add-form { + background-color: #66C7F4; + color: #FBFFFE; + padding: 16px; + margin: 16px; + border: 2px solid #C1CAD6; + } + body #account .session-add-form input { + background-color: #0079B2; + color: #FBFFFE; + font-weight: bold; + border: none; + border-radius: 2px; + border-bottom: 2px solid black; + margin: 16px; + font-size: 16px; + padding: 8px; + text-align: center; + transition: 0.15s all linear; + text-align: left; + background-color: #66C7F4; + } + body #account .session-add-form input:focus { + outline: none !important; + border-bottom: 2px solid #FBFFFE; + transition: 0.15s all linear; + } + body #account .session-add-form textarea { + background-color: #0079B2; + color: #FBFFFE; + font-weight: bold; + border: none; + border-radius: 2px; + border-bottom: 2px solid black; + margin: 16px; + font-size: 16px; + padding: 8px; + text-align: center; + transition: 0.15s all linear; + border: 2px solid black; + text-align: left; + background-color: #66C7F4; + } + body #account .session-add-form textarea:focus { + outline: none !important; + border-bottom: 2px solid #FBFFFE; + transition: 0.15s all linear; + } + body #account .session-add-form textarea:focus { + border: 2px solid #FBFFFE; + outline: none !important; + } + body #account .sessions { + margin-top: 32px; + } + body #account .session { + padding: 16px; + background-color: white; + color: black; + border: 1px solid #C1CAD6; + } + body #account .session .session-title { + float: left; + } + body #account .session .session-pin { + float: right; + } + body #account .session .session-description { + margin-top: 32px; + text-align: left; + } + body #account .session .session-actions { + margin-top: 32px; + } +} +@media only screen and (min-width: 1224px) { + body ::-webkit-scrollbar { + width: 12px; + } + body ::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); + border-radius: 10px; + } + body ::-webkit-scrollbar-thumb { + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8); + } + body #mobile-nav { + display: none; + } + body #mobile-account-button { + display: none; + } + body #content #start { + text-align: center; + height: 100%; + } + body #content #start h1 { + color: #FBFFFE; + font-size: 72px; + font-weight: bold; + margin-bottom: 0; + } + body #content #start h3 { + margin-top: 8px; + color: #FBFFFE; + } + body #content #start img { + height: 40vh; + margin: 0 auto; + display: block; + } + body #content #start .id-input { + color: #FBFFFE; + font-weight: bold; + font-size: 32px; + } + body #content #start .id-input input { + background-color: #0079B2; + color: #FBFFFE; + font-weight: bold; + border: none; + border-radius: 2px; + border-bottom: 2px solid black; + margin: 16px; + font-size: 16px; + padding: 8px; + text-align: center; + transition: 0.15s all linear; + } + body #content #start .id-input input:focus { + outline: none !important; + border-bottom: 2px solid #FBFFFE; + transition: 0.15s all linear; + } + body #content #start .start-button { + margin: 16px; + cursor: pointer; + background-color: #ff8c00; + width: 256px; + height: 96px; + font-weight: 700; + color: #FBFFFE; + border: none; + border-radius: 4px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; + } + body #content #start .start-button:active { + background-color: #cc7000; + } + body #content #questions { + width: 100%; + } + body #content #questions .input-container { + display: flex; + margin: 8px; + width: 100%; + } + body #content #questions .input-container .action-buttons { + flex: 1 25%; + } + body #content #questions .no-questions { + width: 100%; + margin: 16px; + color: #FBFFFE; + text-align: center; + } + body #content #questions .questions-content { + display: flex; + position: fixed; + top: 16px; + bottom: 16px; + min-width: 90%; + } + body #content #questions .questions-content hr { + width: 75%; + border-color: black; + } + body #content #questions .questions-content .question-input-group { + display: flex; + flex: 1 25%; + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); + height: 48px; + margin: 16px 8px 32px 8px; + } + body #content #questions .questions-content .question-input-group input { + flex: 3 75%; + line-height: 40px; + font-size: 16px; + padding-left: 8px; + border: none; + border-right: 1px solid #cc7000; + border-bottom: 3px solid #C1CAD6; + } + body #content #questions .questions-content .question-input-group button { + border-left: 10px solid #000000; + flex: 1 20%; + height: 100%; + display: inline-block; + border: none; + background-color: #ff8c00; + color: white; + cursor: pointer; + font-weight: bold; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; + } + body #content #questions .questions-content .question-input-group button:active { + background-color: #cc7000; + } + body #content #questions .questions-content .questions-container { + display: inline-block; + flex: 3 75%; + margin: 8px; + } + body #content #questions .questions-content .questions { + overflow-y: scroll; + height: 90%; + } + body #content #questions .questions-content .question { + background-color: #FBFFFE; + border: 1px solid #657b99; + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); + padding: 24px; + margin: 8px; + display: flex; + } + body #content #questions .questions-content .question .question-content { + display: inline-block; + text-align: left; + flex: 1 80%; + } + body #content #questions .questions-content .question .upvotes { + text-align: right; + flex: 1 20%; + } + body #content #questions .questions-content .question .upvotes input { + width: 40px; + text-align: center; + } + body #content #questions .questions-content .question .upvotes .upvote-button { + font-size: 32px; + color: #ff8c00; + margin: -24px 8px 0 8px; + cursor: pointer; + } + body #content #questions .questions-content .question .upvotes .upvote-count.orange { + color: orange; + font-weight: bold; + } + body #content #questions .questions-content .question .upvotes .remove-button { + cursor: pointer; + font-weight: 700; + color: red; + } + body #content #questions .questions-content .question.ng-move { + transition: all 0.5s linear; + animation: shake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; + } + body #content #questions .questions-content .upvote-button-container { + display: inline-block; + text-align: center; + } + body #content #questions .questions-content .admin-actions { + display: inline-block; + color: #ff8c00; + font-size: 24px; + } + body #content #questions .questions-content .admin-actions i { + margin: 0 4px; + cursor: pointer; + } + body #content #questions .questions-content .admin-actions.remove { + font-size: 1em; + color: #657b99; + } + body #content #questions .questions-content .admin-actions.remove i { + color: #ff8c00; + margin: 0 8px; + font-size: 24px; + } + body #content #questions .questions-content .session-info { + height: fit-content; + flex: 1 25%; + display: inline-block; + position: relative; + top: 96px; + background-color: #FBFFFE; + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); + padding: 16px; + margin: 8px; + } + body #content #questions .questions-content .session-info .clear-questions-button { + margin: 0 8px; + cursor: pointer; + background-color: #ff8c00; + color: #FBFFFE; + border: none; + padding: 8px; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; + float: right; + } + body #content #questions .questions-content .session-info .clear-questions-button:active { + background-color: #cc7000; + } + body #content #questions .questions-content .session-info .session-title { + font-size: 240%; + font-weight: 700; + margin: 0; + } + body #content #questions .questions-content .session-info .session-id { + margin: 8px 8px 16px 4px; + color: #C1CAD6; + font-weight: 700; + } + body #content #questions .questions-content .session-info .session-description { + margin-left: 4px; + } + body #login form { + color: white; + margin: 4em auto; + width: 100%; + text-align: center; + } + body #login form .input-group { + margin: 32px; + } + body #login form .input-group label { + display: block; + margin-bottom: -16px; + } + body #login form button { + margin: 0 8px; + cursor: pointer; + background-color: #ff8c00; + color: #FBFFFE; + border: none; + padding: 8px; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; + margin: 32px; + } + body #login form button:active { + background-color: #cc7000; + } + body #account { + color: white; + padding: 32px; + } + body #account .your-sessions .your-sessions-text { + display: block; + font-size: 150%; + font-weight: 700; + } + body #account .your-sessions .primary-button { + margin-top: 16px; + } + body #account .session-add-form { + background-color: #FBFFFE; + color: #1B1B1E; + padding: 16px; + border: 2px solid #797BA8; + width: 30%; + margin: 8px 0; + } + body #account .sessions { + overflow-y: scroll; + } + body #account .sessions .session { + color: #1B1B1E; + background-color: #FBFFFE; + line-height: 16px; + display: inline-block; + width: 30%; + padding: 16px; + margin: 16px 16px 16px 0; + border: 1px solid #797BA8; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); + } + body #account .sessions .session .session-title { + font-weight: 700; + font-size: 125%; + } + body #account .sessions .session .session-pin { + margin-left: 24px; + font-size: 75%; + color: #657b99; + } + body #account .sessions .session .session-description { + margin: 16px 0; + padding: 8px 0; + } + body #account .sessions .session.ng-enter { + opacity: 0; + transition: .25s linear; + } + body #account .sessions .session.ng-enter.ng-enter-active { + opacity: 1; + } + body #account .sessions .session.ng-leave { + opacity: 1; + transition: .25s linear; + } + body #account .sessions .session.ng-leave.ng-leave-active { + opacity: 0; + } +} +@keyframes shake { + 10%, + 50%, + 90% { + transform: translate3d(-2px, 0, 0); + } + 20%, + 60%, + 80% { + transform: translate3d(2px, 0, 0); + } +} diff --git a/app/less/main.less b/app/less/main.less index 8fd57ad..447373b 100644 --- a/app/less/main.less +++ b/app/less/main.less @@ -1,19 +1,4 @@ -@base-text-color: #1B1B1E; -@orange: #ff8c00; -@dark-blue: #0079B2; -@light-blue: #00ACFF; -@white: #FBFFFE; -@light-gray: #C1CAD6; -// @gray: darken(@light-gray, 15%); -@darker-gray: darken(@light-gray, 30%); -@single-space: 8px; -@double-space: 16px; -@triple-space: 24px; -@quad-space: 32px; -@float-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); -@bleak-blue: #797BA8; -@light-blue: #66C7F4; -@red: #ff3e41; +@import 'variables'; .alertify-notifier .ajs-message.ajs-error { color: @white; } @@ -535,11 +520,19 @@ body { flex: 1 25%; } } + + .no-questions { + width: 100%; + margin: 16px; + color: @white; + text-align: center; + } .questions-content { display: flex; position: fixed; top: @double-space; bottom: @double-space; + min-width: 90%; hr { width: 75%; border-color: black; diff --git a/app/less/variables.less b/app/less/variables.less new file mode 100644 index 0000000..ec8b17a --- /dev/null +++ b/app/less/variables.less @@ -0,0 +1,16 @@ +@base-text-color: #1B1B1E; +@orange: #ff8c00; +@dark-blue: #0079B2; +@light-blue: #00ACFF; +@white: #FBFFFE; +@light-gray: #C1CAD6; +// @gray: darken(@light-gray, 15%); +@darker-gray: darken(@light-gray, 30%); +@single-space: 8px; +@double-space: 16px; +@triple-space: 24px; +@quad-space: 32px; +@float-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); +@bleak-blue: #797BA8; +@light-blue: #66C7F4; +@red: #ff3e41; \ No newline at end of file diff --git a/app/views/session.html b/app/views/session.html index 7f14610..fc264b0 100644 --- a/app/views/session.html +++ b/app/views/session.html @@ -14,6 +14,7 @@
+
No questions have been added yet. Ask one!
{{question.questionText}} diff --git a/gulpfile.js b/gulpfile.js index b73de5a..ebc7e62 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,7 +18,8 @@ gulp.task('browserSync', function () { baseDir: 'app', routes: { '/bower_components': 'bower_components', - '/node_modules': 'node_modules' + '/node_modules': 'node_modules', + '/public': 'public' } } }) @@ -26,7 +27,7 @@ gulp.task('browserSync', function () { gulp.task('less', function () { return gulp - .src('./app/less/**/*.less') + .src(['./app/less/**/main.less']) .pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] })) @@ -34,12 +35,24 @@ gulp.task('less', function () { .pipe(browserSync.reload({stream: true})); }) +gulp.task('lessPublic', function () { + return gulp + .src(['./public/less/**/styles.less']) + .pipe(less({ + paths: [path.join(__dirname, 'less', 'includes')] + })) + .pipe(gulp.dest('./public/css')) + .pipe(browserSync.reload({stream: true})); +}) + gulp.task('watch', [ - 'browserSync', 'less' + 'browserSync', 'less', 'lessPublic' ], function () { gulp.watch('./app/less/**/*.less', ['less']); + gulp.watch('./public/less/**/*.less', ['lessPublic']); gulp.watch('./app/*.html', browserSync.reload); gulp.watch('./app/js/**/*.js', browserSync.reload); + gulp.watch('./public/**/**.*', browserSync.reload); }) gulp.task('build', function () { @@ -80,8 +93,7 @@ gulp.task('build', function () { .pipe(gulp.dest('dist/img')); gulp - .src(['bower_components/toastr/toastr.min.css', - 'node_modules/alertifyjs/build/css/alertify.min.css']) + .src(['bower_components/toastr/toastr.min.css', 'node_modules/alertifyjs/build/css/alertify.min.css']) .pipe(concatCSS('vendor.css')) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css')); @@ -106,12 +118,7 @@ gulp.task('deployDev', function () { base: './dist', buffer: false }) - .pipe(sftp({ - host: ftpConfig.host, - user: ftpConfig.user, - pass: ftpConfig.password, - remotePath: '/srv/www/dev.andrewhill.io/socrates' - })); + .pipe(sftp({host: ftpConfig.host, user: ftpConfig.user, pass: ftpConfig.password, remotePath: '/srv/www/dev.andrewhill.io/socrates'})); }) @@ -125,11 +132,6 @@ gulp.task('deployProd', function () { base: './dist', buffer: false }) - .pipe(sftp({ - host: ftpConfig.host, - user: ftpConfig.user, - pass: ftpConfig.password, - remotePath: '/srv/www/socratesapp.co' - })); + .pipe(sftp({host: ftpConfig.host, user: ftpConfig.user, pass: ftpConfig.password, remotePath: '/srv/www/socratesapp.co'})); }) \ No newline at end of file diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 0000000..baec7c8 --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,183 @@ +body { + margin: 0; + padding: 0; + background-color: #FBFFFE; + color: #1B1B1E; + font-family: 'Open Sans'; + font-size: 18px; + line-height: 32px; +} +button.primary { + margin: 0 8px; + cursor: pointer; + background-color: #ff8c00; + color: #FBFFFE; + border: none; + padding: 8px; + border-radius: 2px; + border-right: 3px solid #cc7000; + border-bottom: 3px solid #cc7000; +} +button.primary:active { + background-color: #cc7000; +} +.container { + width: 90%; + margin: 32px auto; +} +.container img { + border-radius: 4px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); +} +.container h1, +.container h2, +.container h3 { + text-align: center; + color: #ff8c00; +} +.landing { + background: linear-gradient(-45deg, #0079B2, #00a3ef); + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); + color: #FBFFFE; + width: 100%; + display: flex; + align-items: center; + height: 92vh; + margin-bottom: 8vh; + flex-direction: column; + justify-content: center; +} +.landing h1 { + font-size: 60px; + margin: 0; + letter-spacing: 3px; +} +.landing h3 { + letter-spacing: 1px; +} +.landing img { + height: 35vh; +} +.landing button { + display: inline-block; + font-size: 24px; + padding: 16px !important; + margin-top: 32px !important; +} +.about { + width: 50%; + margin: 128px auto; +} +.engagement { + margin: 128px 0; + display: grid; + grid-template-areas: "image content"; + grid-column-gap: 128px; +} +.engagement h3 { + margin-top: 0; + text-align: left; +} +.engagement img { + grid-area: image; +} +.engagement .engagement-content { + grid-area: content; +} +.time { + text-align: right; + margin: 128px 0; + display: grid; + grid-template-areas: "content image"; + grid-column-gap: 128px; +} +.time h3 { + margin-top: 0; + text-align: right; +} +.time img { + grid-area: image; +} +.time .time-content { + grid-area: content; +} +.anywhere { + margin: 128px 0; + display: grid; + grid-template-areas: "image content"; + grid-column-gap: 128px; +} +.anywhere h3 { + margin-top: 0; + text-align: left; +} +.anywhere img { + margin: 0 auto; + box-shadow: none; + display: block; + max-width: 75%; + max-height: 50%; + width: auto; + height: auto; + grid-area: image; +} +.anywhere .anywhere-content { + grid-area: content; +} +.features { + display: grid; + height: 50vh; + grid-auto-columns: 1fr; + grid-template-rows: .5fr 1fr 1fr; + grid-template-areas: "header header header" "feature-1 feature-2 feature-3" "feature-4 feature-5 feature-6"; + padding: 32px; +} +.features h2 { + padding: 0; + margin: 0; + grid-area: header; + font-size: 200%; +} +.features div { + text-align: center; +} +.features i { + font-size: 5em; +} +.features .feature-1 { + grid-area: feature-1; +} +.features .feature-2 { + grid-area: feature-2; +} +.features .feature-3 { + grid-area: feature-3; +} +.features .feature-4 { + grid-area: feature-4; +} +.features .feature-5 { + grid-area: feature-5; +} +.features .feature-6 { + grid-area: feature-6; +} +button.try-it { + position: fixed; + bottom: 64px; + right: 64px; + font-size: 24px; + padding: 16px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); +} +.gradient { + width: 100%; + background: linear-gradient(-45deg, #0079B2, #00a3ef); + color: #FBFFFE; + box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4); +} +.gradient h1, +.gradient h2, +.gradient h3 { + color: #FBFFFE; +} diff --git a/public/img/desktop.png b/public/img/desktop.png new file mode 100644 index 0000000..0cc8436 Binary files /dev/null and b/public/img/desktop.png differ diff --git a/public/img/engagement.jpg b/public/img/engagement.jpg new file mode 100644 index 0000000..1d6f112 Binary files /dev/null and b/public/img/engagement.jpg differ diff --git a/public/img/iPhone-Socrates.png b/public/img/iPhone-Socrates.png new file mode 100644 index 0000000..1700cd9 Binary files /dev/null and b/public/img/iPhone-Socrates.png differ diff --git a/public/img/iPhone.jpg b/public/img/iPhone.jpg new file mode 100644 index 0000000..10a595d Binary files /dev/null and b/public/img/iPhone.jpg differ diff --git a/public/img/iPhone.png b/public/img/iPhone.png new file mode 100644 index 0000000..a3cfd35 Binary files /dev/null and b/public/img/iPhone.png differ diff --git a/public/img/responsive.png b/public/img/responsive.png new file mode 100644 index 0000000..03fb8fd Binary files /dev/null and b/public/img/responsive.png differ diff --git a/public/img/save-time.jpg b/public/img/save-time.jpg new file mode 100644 index 0000000..6b0a94e Binary files /dev/null and b/public/img/save-time.jpg differ diff --git a/public/img/socratesOrange.png b/public/img/socratesOrange.png new file mode 100644 index 0000000..0d23902 Binary files /dev/null and b/public/img/socratesOrange.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..41d6513 --- /dev/null +++ b/public/index.html @@ -0,0 +1,97 @@ + + + + + + + + Socrates | Just Ask + + + + + +
+

Socrates

+

Just Ask.

+ Socrates + +
+ +
+
+

What is Socrates?

+

Socrates is a platform that enables easier question and answer sessions in any setting. By allowing a user + to remain anonymous when asking their question, it eliminates the opportunity for judgement -- which + means more authentic questions. With the upvoting feature, other audience members can vote for questions + they agree with to allow the host to see the most popular questions all in real time and all while never + requiring the user to speak out.

+
+ +
+
+

Save Time

+

No one wants to hear a novel when you're attending a limited-time Q&A session. Everyone knows at least + one conference or speech they have been to where the microphone was handed to someone, and they spent + twenty minutes telling a story just to ask a five second question. With Socrates as your question + and answer platform, you ensure you have enough time to answer the most popular questions that the + entire audience wants answered. +

+
+ Save Time +
+
+ Use anywhere +
+

Use It Anywhere

+

Everyone wants to use the device they love the most, and Socrates is equipped to handle it. Easily access + the Socrates web app from your desktop, tablet, laptop, and mobile phone. No download necessary! + Just enter a session number, and click start. It's really that easy. +

+
+
+
+
+
+
+

Features

+
+

Real-Time

+ +
+
+

Responsive

+ +
+
+

Easy Admin Tools

+ +
+
+

Anonymous

+ +
+
+

Cutting-Edge

+ +
+
+

Testing

+ +
+
+
+
+ + + \ No newline at end of file diff --git a/public/less/styles.less b/public/less/styles.less new file mode 100644 index 0000000..d132e88 --- /dev/null +++ b/public/less/styles.less @@ -0,0 +1,198 @@ +@import '../../app/less/variables'; +@float-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); +@gradient: linear-gradient(-45deg, @dark-blue, lighten(@dark-blue, 12%)); +body { + margin: 0; + padding: 0; + background-color: @white; + color: @base-text-color; + font-family: 'Open Sans'; + font-size: 18px; + line-height: 32px; +} + +button.primary { + margin: 0 @single-space; + cursor: pointer; + background-color: @orange; + color: @white; + border: none; + padding: @single-space; + border-radius: 2px; + border-right: 3px solid darken(@orange, 10%); + border-bottom: 3px solid darken(@orange, 10%); + &:active { + background-color: darken(@orange, 10%); + } +} + +.container { + width: 90%; + margin: @quad-space auto; + img { + border-radius: 4px; + box-shadow: @float-shadow; + } + h1, + h2, + h3 { + text-align: center; + color: @orange; + } +} + +.landing { + background: @gradient; + box-shadow: @float-shadow; + color: @white; + width: 100%; + display: flex; + align-items: center; + height: 92vh; + margin-bottom: 8vh; + flex-direction: column; + justify-content: center; + h1 { + font-size: 60px; + margin: 0; + letter-spacing: 3px; + } + h3 { + letter-spacing: 1px; + } + img { + height: 35vh; + } + button { + display: inline-block; + font-size: 24px; + padding: 16px !important; + margin-top: @quad-space !important; + } +} + +.about { + width: 50%; + margin: @quad-space * 4 auto; +} + +.engagement { + margin: @quad-space * 4 0; + h3 { + margin-top: 0; + text-align: left; + } + display: grid; + grid-template-areas: "image content"; + grid-column-gap: @quad-space * 4; + img { + grid-area: image; + } + .engagement-content { + grid-area: content; + } +} + +.time { + text-align: right; + margin: @quad-space * 4 0; + h3 { + margin-top: 0; + text-align: right; + } + display: grid; + grid-template-areas: "content image"; + grid-column-gap: @quad-space * 4; + img { + grid-area: image; + } + .time-content { + grid-area: content; + } +} + +.anywhere { + margin: @quad-space * 4 0; + h3 { + margin-top: 0; + text-align: left; + } + display: grid; + grid-template-areas: "image content"; + grid-column-gap: @quad-space * 4; + img { + margin: 0 auto; + box-shadow: none; + display: block; + max-width: 75%; + max-height: 50%; + width: auto; + height: auto; + grid-area: image; + } + .anywhere-content { + grid-area: content; + } +} + +.features { + display: grid; + height: 50vh; + grid-auto-columns: 1fr; + grid-template-rows: .5fr 1fr 1fr; + grid-template-areas: "header header header" "feature-1 feature-2 feature-3" "feature-4 feature-5 feature-6"; + padding: @quad-space; + h2 { + padding: 0; + margin: 0; + grid-area: header; + font-size: 200%; + } + + div { + text-align: center; + } + + i { + font-size: 5em; + } + .feature-1 { + grid-area: feature-1; + } + .feature-2 { + grid-area: feature-2; + } + .feature-3 { + grid-area: feature-3; + } + .feature-4 { + grid-area: feature-4; + } + .feature-5 { + grid-area: feature-5; + } + .feature-6 { + grid-area: feature-6; + } +} + +button.try-it { + position: fixed; + bottom: @single-space * 8; + right: @single-space * 8; + font-size: 24px; + padding: 16px; + box-shadow: @float-shadow; +} + +.gradient { + width: 100%; + background: @gradient; + color: @white; + h1, + h2, + h3 { + color: @white; + } + box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4); +} \ No newline at end of file