diff --git a/googletrendsgame/JQueryReWork/README.md b/googletrendsgame/JQueryReWork/README.md index 8215528..6a53ad9 100644 --- a/googletrendsgame/JQueryReWork/README.md +++ b/googletrendsgame/JQueryReWork/README.md @@ -4,4 +4,6 @@ npm install express-session --save npm install url --save npm install whiskers --save npm install fs --save +npm install sanitizer --save +npm install google-trends-api --save ``` \ No newline at end of file diff --git a/googletrendsgame/JQueryReWork/css/app.css b/googletrendsgame/JQueryReWork/css/app.css index 5636ce4..88cc831 100644 --- a/googletrendsgame/JQueryReWork/css/app.css +++ b/googletrendsgame/JQueryReWork/css/app.css @@ -1,3 +1,311 @@ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} +*, +*::after, +*::before { + box-sizing: border-box; +} + +html { + background: #000; +} + +body { + font-family: 'Barlow', Helvetica, Arial, sans-serif; + font-weight: 500; + min-height: 100vh; + color: #57585c; + color: var(--color-text); + background-color: #000; + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Fade effect */ +.js body { + opacity: 0; + transition: opacity 0.6s; +} + +.js body.render { + opacity: 1; +} + +a { + text-decoration: none; + color: var(--color-link); + outline: none; +} + +a:hover, +a:focus { + color: var(--color-link-hover); + outline: none; +} + +.hidden { + position: absolute; + overflow: hidden; + width: 0; + height: 0; + pointer-events: none; +} + +.message { + position: relative; + z-index: 100; + display: none; + padding: 1em; + text-align: center; + color: var(--color-bg); + background: var(--color-text); +} + +/* Icons */ +.icon { + display: block; + width: 1.5em; + height: 1.5em; + margin: 0 auto; + fill: currentColor; +} + +.icon--keyboard { + display: none; +} + +main { + position: relative; + width: 100%; +} + +.content { + position: relative; + display: grid; + justify-content: center; + align-items: center; + align-content: center; + margin: 0 auto; + min-height: 100vh; +} + +.content--fixed { + position: fixed; + z-index: 10000; + top: 0; + left: 0; + display: grid; + align-content: space-between; + width: 100%; + max-width: none; + min-height: 0; + height: 100vh; + padding: 1.5em; + pointer-events: none; + grid-template-columns: 50% 50%; + grid-template-rows: auto auto 4em; + grid-template-areas: 'header ...' + '... ...' + 'github demos'; +} + +.content--fixed a { + pointer-events: auto; +} + +/* Header */ +.codrops-header { + position: relative; + z-index: 100; + display: flex; + flex-direction: row; + align-items: flex-start; + align-items: center; + align-self: start; + grid-area: header; + justify-self: start; +} + +.codrops-header__title { + font-size: 1em; + font-weight: 500; + margin: 0; + padding: 0.75em 0; +} + +.info { + margin: 0 0 0 1.25em; + color: var(--color-info); +} + +.github { + display: block; + align-self: end; + grid-area: github; + justify-self: start; +} + +.demos { + position: relative; + display: block; + align-self: end; + text-align: center; + grid-area: demos; +} + +.demo { + margin: 0 0.15em; +} + +.demo:hover, +.demo:focus { + opacity: 0.5; +} + +.demo span { + white-space: nowrap; + text-transform: lowercase; + pointer-events: none; +} + +.demo span::before { + content: '#'; +} + +a.demo--current { + pointer-events: none; + color: var(--color-link-hover); +} + +/* Top Navigation Style */ +.codrops-links { + position: relative; + display: flex; + justify-content: center; + margin: 0 1em 0 0; + text-align: center; + white-space: nowrap; +} + +.codrops-icon { + display: inline-block; + margin: 0.15em; + padding: 0.25em; +} + +/* Canvas positions */ +.content__inner { + grid-area: 1 / 1 / 1 / 1; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + align-content: center; +} + +.scene { + position: absolute; +} + +.scene--left { + width: 100vmin; + height: 100vmin; + transform: translate3d(-50vmin,0,0); +} + +.scene--full { + width: 100%; + height: 100vh; +} + +.scene--up { + height: 150vmin; + width: 150vmin; + top: -50vh; + left: 50%; + margin-left: -75vmin; +} + +@media screen and (min-width: 55em) { + .icon--keyboard { + position: absolute; + right: 0.55em; + bottom: -30%; + display: block; + width: 54px; + height: 46px; + fill: var(--color-link); + } + .demos { + display: flex; + padding-right: 80px; + justify-self: end; + } + .demo { + display: block; + width: 17px; + height: 17px; + margin: 0 4px; + border-radius: 50%; + background: var(--color-link); + } + a.demo--current { + background: var(--color-link-hover); + } + .demo span { + line-height: 1; + position: absolute; + right: 100%; + display: none; + margin: 0 1em 0 0; + } + .demo--current span { + display: block; + } +} + +@media screen and (max-width: 55em) { + .message { + /* display: block; */ + } + .content { + flex-direction: column; + height: auto; + } + .content--fixed { + position: relative; + z-index: 1000; + display: block; + padding: 0.85em; + } + .content:not(.content--fixed) { + margin-bottom: 6em; + } + .codrops-header { + flex-direction: column; + align-items: center; + } + .codrops-header__title { + font-weight: bold; + padding-bottom: 0.25em; + text-align: center; + } + .info { + margin: 0; + } + .github { + display: block; + margin: 1em auto; + } + .codrops-links { + margin: 0; + } +} + + + + body { -moz-osx-font-smoothing: grayscale; background: #B9B9B9; @@ -17,15 +325,26 @@ body { color: #FFF; } .logo { - float: left; - margin: 0 0 60px 40px; - font-size: 30px; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; } - .logo:hover { - color: #FFF; + width: auto; + flex: 0; + padding: 20px; + font-size: 50px; + text-transform: uppercase; + font-family: 'Poppins', sans-serif; + font-weight: 900; + background: #0459ed; + color: #FFF !important; } + +.logo { + float: left; + margin: 0 0 60px 40px; + font-size: 30px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } +.logo:hover { + color: #FFF !important; text-decoration: none; } - .logo div { +.logo div { line-height: 30px; } a { diff --git a/googletrendsgame/JQueryReWork/html/home.html b/googletrendsgame/JQueryReWork/html/home.html index 7905c44..454d904 100644 --- a/googletrendsgame/JQueryReWork/html/home.html +++ b/googletrendsgame/JQueryReWork/html/home.html @@ -1,84 +1,29 @@ - - -
- - - -