diff --git a/.eslintrc b/.eslintrc index 5162a66..dea38b0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,8 +1,22 @@ { "extends": [ "airbnb", - "prettier" + "prettier", + "prettier/react", + "plugin:prettier/recommended" ], + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "settings": { + "react": { + "version": "detect" + } + }, "plugins": [ "prettier" ], @@ -22,7 +36,14 @@ "error", "absolute-first" ], - "import/newline-after-import": "error" + "import/newline-after-import": "error", + "max-len": [ + "error", + { "code": 140, "ignoreUrls": true } + ], + "import/prefer-default-export": "off", + "import/extensions": "off", + "react/no-unescaped-entities": ["off"] }, "globals": { "window": true, diff --git a/.prettierrc b/.prettierrc index 939167c..0256c87 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,7 @@ { "trailingComma": "es5", "semi": true, + "tabWidth": 2, + "printWidth": 80, "singleQuote": true } \ No newline at end of file diff --git a/dist/assets/main.css b/dist/assets/main.css new file mode 100644 index 0000000..cdfe883 --- /dev/null +++ b/dist/assets/main.css @@ -0,0 +1,38 @@ +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap); +.main-slider{height:300px;display:flex;align-items:center;padding:5%;color:white}.main-slider__subtitle{font-size:13px;display:block;font-weight:bold;text-transform:uppercase}.main-slider__title{display:block;font-size:40px}.main-slider__artist{display:block;font-size:20px}.main-slider__buttons{margin-top:50px}.main-slider__content{width:40%}@media (max-width: 800px){.main-slider__content{width:100%}}.btn{display:inline-block;background-color:#fff;border-radius:3px;color:#435fff;padding:6px 20px;font-size:0.7rem;box-shadow:0px 1px 3px rgba(0,0,0,0.3)} + +.main{background-color:aqua} + +.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 0}input[type=search]{outline:none;box-sizing:content-box;background:#F2F2F2 url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;border:solid 1px #737373;border-radius:21px;transition:all .5s;padding:6px 10px 6px 32px;width:350px}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]:focus{width:550px;background-color:white;border-color:#413c59;box-shadow:0 0 5px rgba(65,60,89,0.5)}.profile{display:flex;align-items:center}.profile__container{margin:0;padding-left:5px;margin-right:20px}.profile__container--image{border-radius:49.98px;height:50px;width:50px;object-fit:cover}.profile__container--account{margin:0} + +.Modal{height:100vh;width:100vw;background:rgba(0,0,0,0.75);position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;color:white}.Modal__content{position:relative;width:400px;background:#211f27;border-radius:4px;padding:25px}.Modal__content--image{position:absolute;right:15px;top:15px;cursor:pointer} + +.success{-webkit-animation:success 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:success 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;position:absolute;top:0%;left:calc(50% - 175px);background:rgba(0,0,0,0.75);color:white;width:350px;padding:25px;text-align:center}@-webkit-keyframes success{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(75px);transform:translateY(75px)}}@keyframes success{0%{-webkit-transform:translateY(0px);transform:translateY(0px)}100%{-webkit-transform:translateY(75px);transform:translateY(75px)}} + +a{text-decoration:none}.menu__list li{margin-bottom:10px}.menu__list li.active{border-left:3px solid #0097db;padding-left:18px}.menu__icon{margin-right:15px;margin-left:20px}.menu__subtitle{margin-left:20px}.new-playlist{cursor:pointer}.newPlaylist{display:flex;justify-content:space-between}form button{background-color:#005ba3;color:white;padding:12.5px 30px;border-radius:25px;text-transform:uppercase;font-weight:bold;font-size:13px;border:none;cursor:pointer}form .title{margin:0;margin-bottom:35px;text-align:center}form input{margin-bottom:20px;height:35px;padding-left:8px;font-size:16px;width:100%;color:black}form .content-wrap{margin:0px auto;max-width:250px;text-align:center} + +.player{position:fixed;bottom:0px;width:100%;display:flex}.player__song{background:#005BA3;padding:20px 40px;display:flex;min-width:350px}.player__song__container{width:50px;height:50px;overflow:hidden;display:flex;border-radius:5px;margin-right:40px}.player__song__content strong{color:white}.player__song__content p{margin:0px;color:#0097DB}.player__player{display:flex;background:#0F1E36;width:100%;justify-content:space-between}.player__player__item{text-align:center;display:flex;align-items:center;justify-content:center;padding:20px;color:#FFFFFF}.player__player__item__progress{background:#fff;width:100px;height:4px}.player__player__item-play{display:flex;align-items:center;justify-content:center;border:solid 5px #0097DB;background:#5aaed6;border-radius:50%;width:70px;height:70px} + +.songs{background-color:azure} + +.albums{background-color:aquamarine} + +.artists{background-color:bisque} + +.login{font-family:"Source Sans Pro",sans-serif;color:#F2F2F2;display:grid;grid-column:1 / 3;width:100%;height:100vh;background:linear-gradient(179.22deg, #0097db 10.23%, #102638 108.63%, rgba(0,91,163,0) 108.64%, #044d86 108.64%)}.login__title{max-width:450px;font-size:35px;line-height:38px;padding-bottom:10px}.login__secondary-title{max-width:450px;font-size:18px;font-weight:normal;padding-bottom:30px;line-height:20px}.login__container{display:flex;align-items:center;justify-content:flex-start;flex-direction:column}.login__form{color:#0f1e36;display:flex;justify-content:center;align-items:center;max-width:400px;flex-direction:column;background:#fff;border-radius:25px;padding:30px;box-shadow:0px 7px 5px -6px rgba(0,0,0,0.47)}.login__form__title{color:#4a4a4a;font-size:19px;font-weight:600}.login__form__secondary-title{color:#0097db;font-size:17px;font-weight:400;padding-bottom:20px}.login__logo{padding-top:40px;margin:0}.login__logo img{width:200px}.form{position:relative;padding:10px 20px}.form input{background:none;border:none;border-bottom:1px solid gray;padding-top:20px;padding-bottom:10px;width:100%;outline:none}.form input::placeholder{font-size:18px;color:#545663}.form input[type='date' i]{font-size:18px;font-family:"Source Sans Pro",sans-serif;color:#545663}.form label{margin-top:20px;color:#545663}.form button{background-color:#0097db;border:none;color:white;width:100%;padding:20px 30px;margin-top:10px;font-size:17px;letter-spacing:3px;border-radius:10px}.form select{width:47%;padding:10px 0px;background-color:none;border:1px solid lightgrey;margin-top:10px;margin:3px}.form__separator{padding-top:8px}.inscription{padding-top:20px;display:flex}.inscription button{display:flex;align-items:center;justify-content:center;padding:10px 20px;margin:10px;background-color:#fff;border-radius:5px;box-shadow:0px 4px 4px rgba(0,0,0,0.25);border:none;font-size:12px;width:165px;cursor:pointer}.user{position:relative;display:flex;align-items:flex-end}.user__image{position:absolute;right:-320px}@media screen and (max-width: 700px){.user__image{display:none}} + +.fullwidthbanner{display:flex;justify-content:center;width:100%;height:342px;background:linear-gradient(179.22deg, #0097db 10.23%, #102638 108.63%, rgba(0,91,163,0) 108.64%, #044d86 108.64%);overflow:hidden}.fullwidthbanner__container{flex-direction:column;display:flex;justify-content:center;align-items:center}.fullwidthbanner__container h1{color:white;font-size:30px}.fullwidthbanner__container img{width:200px} + +.login{font-family:"Source Sans Pro",sans-serif;color:#F2F2F2;display:grid;grid-column:1 / 3;width:100%;height:100vh;background:linear-gradient(179.22deg, #0097db 10.23%, #102638 108.63%, rgba(0,91,163,0) 108.64%, #044d86 108.64%)}.login__title{max-width:450px;font-size:35px;line-height:38px;padding-bottom:10px}.login__secondary-title{max-width:450px;font-size:18px;font-weight:normal;padding-bottom:30px;line-height:20px}.login__container{display:flex;align-items:center;justify-content:flex-start;flex-direction:column}.login__form{color:#0f1e36;display:flex;justify-content:center;align-items:center;max-width:400px;flex-direction:column;background:#fff;border-radius:25px;padding:30px;box-shadow:0px 7px 5px -6px rgba(0,0,0,0.47)}.login__form__title{color:#4a4a4a;font-size:19px;font-weight:600}.login__form__secondary-title{color:#0097db;font-size:17px;font-weight:400;padding-bottom:20px}.login__logo{padding-top:40px;margin:0}.login__logo img{width:200px}.form{position:relative;padding:10px 20px}.form input{background:none;border:none;border-bottom:1px solid gray;padding-top:20px;padding-bottom:10px;width:100%;outline:none}.form input::placeholder{font-size:18px;color:#545663}.form input[type='date' i]{font-size:18px;font-family:"Source Sans Pro",sans-serif;color:#545663}.form label{margin-top:20px;color:#545663}.form button{background-color:#0097db;border:none;color:white;width:100%;padding:20px 30px;margin-top:10px;font-size:17px;letter-spacing:3px;border-radius:10px}.form select{width:47%;padding:10px 0px;background-color:none;border:1px solid lightgrey;margin-top:10px;margin:3px}.form__separator{padding-top:8px}.inscription{padding-top:20px;display:flex}.inscription button{display:flex;align-items:center;justify-content:center;padding:10px 20px;margin:10px;background-color:#fff;border-radius:5px;box-shadow:0px 4px 4px rgba(0,0,0,0.25);border:none;font-size:12px;width:165px;cursor:pointer}.user{position:relative;display:flex;align-items:flex-end}.user__image{position:absolute;right:-320px}@media screen and (max-width: 700px){.user__image{display:none}} + +.container-fluid{display:grid;grid-column:1 / 3;height:100vh}.container-flex{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.googlesingup{max-width:600px;padding-top:50px;padding-left:20px;padding-right:20px}.googlesingup__section h1{color:#4a4a4a;font-size:36px;line-height:40px}.googlesingup__register{display:flex}@media screen and (max-width: 700px){.googlesingup__register{flex-direction:column;align-items:center}}.googlesingup__photo{margin-top:10px;position:relative;width:90%;height:330px;border-radius:5px;box-shadow:0px 4px 4px rgba(0,0,0,0.25);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.googlesingup__photo__picture{margin-top:10px;border-radius:50%;background-color:aliceblue;width:133px;height:133px;display:flex;justify-content:center;align-items:center;border:4px solid white;box-shadow:0px 4px 4px rgba(0,0,0,0.25)}.googlesingup__photo__info{padding-top:30px;color:#4a4a4a} + +*{box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;font-size:16px}html,body{margin:0;padding:0;width:100%;background-color:transparent;font-family:"Source Sans Pro",sans-serif;line-height:1.5;color:#0f1e36;font-size:16px}h1,h2,h3,h4,h5,h6{margin:0;font-family:"Source Sans Pro",sans-serif;font-weight:bold;text-rendering:optimizelegibility}ul,ol{margin:0 0 1.5 0;padding:0 0 0 0;list-style-type:none}li ul,li ol{margin:0}a{text-decoration:none}#app{margin:0;height:100vh;display:grid;grid-template-columns:15% 85%;grid-template-rows:12% 72% 16%}.container__header{grid-column:2 / 3;grid-row:1 / 2}.container__menu{grid-column:1 / 2;grid-row:1 / 3}.main{grid-column:2 / 3;grid-row:2 / 3}.playbar{grid-column:1 / 3;grid-row:3 / 4} + diff --git a/dist/bundle.js b/dist/bundle.js new file mode 100644 index 0000000..9e8fa25 --- /dev/null +++ b/dist/bundle.js @@ -0,0 +1,2 @@ +/*! For license information please see bundle.js.LICENSE.txt */ +(()=>{var e={679:(e,t,n)=>{"use strict";var r=n(864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},l={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},o={};function u(e){return r.isMemo(e)?i:o[e.$$typeof]||a}o[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},o[r.Memo]=i;var c=Object.defineProperty,s=Object.getOwnPropertyNames,f=Object.getOwnPropertySymbols,d=Object.getOwnPropertyDescriptor,p=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=p(n);a&&a!==m&&e(t,a,r)}var i=s(n);f&&(i=i.concat(f(n)));for(var o=u(t),h=u(n),g=0;g{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,l){for(var i,o,u=a(e),c=1;c{"use strict";var r=n(414);function a(){}function l(){}l.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,l,i){if(i!==r){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:l,resetWarningCache:a};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},448:(e,t,n)=>{"use strict";var r=n(294),a=n(418),l=n(840);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n