diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 000000000..b4bf53688 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/fonts/Arial-MT.woff b/assets/fonts/Arial-MT.woff new file mode 100644 index 000000000..a6dc456ce Binary files /dev/null and b/assets/fonts/Arial-MT.woff differ diff --git a/assets/fonts/owfont-regular.eot b/assets/fonts/owfont-regular.eot new file mode 100644 index 000000000..d536096c3 Binary files /dev/null and b/assets/fonts/owfont-regular.eot differ diff --git a/assets/fonts/owfont-regular.otf b/assets/fonts/owfont-regular.otf new file mode 100644 index 000000000..42e6ffa13 Binary files /dev/null and b/assets/fonts/owfont-regular.otf differ diff --git a/assets/fonts/owfont-regular.svg b/assets/fonts/owfont-regular.svg new file mode 100644 index 000000000..6969ffb4a --- /dev/null +++ b/assets/fonts/owfont-regular.svg @@ -0,0 +1,394 @@ + + + + +Created by FontForge 20110222 at Wed Feb 11 17:55:33 2015 + By www-data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/owfont-regular.ttf b/assets/fonts/owfont-regular.ttf new file mode 100644 index 000000000..2b1683c8d Binary files /dev/null and b/assets/fonts/owfont-regular.ttf differ diff --git a/assets/fonts/owfont-regular.woff b/assets/fonts/owfont-regular.woff new file mode 100644 index 000000000..591f3d06f Binary files /dev/null and b/assets/fonts/owfont-regular.woff differ diff --git a/assets/img/bg.jpg b/assets/img/bg.jpg new file mode 100644 index 000000000..4bbfd6a70 Binary files /dev/null and b/assets/img/bg.jpg differ diff --git a/assets/img/settings.png b/assets/img/settings.png new file mode 100644 index 000000000..b6bab69a9 Binary files /dev/null and b/assets/img/settings.png differ diff --git a/assets/sounds/Aqua Caelestis.mp3 b/assets/sounds/Aqua Caelestis.mp3 new file mode 100644 index 000000000..086daa155 Binary files /dev/null and b/assets/sounds/Aqua Caelestis.mp3 differ diff --git a/assets/sounds/Ennio Morricone.mp3 b/assets/sounds/Ennio Morricone.mp3 new file mode 100644 index 000000000..ea938122e Binary files /dev/null and b/assets/sounds/Ennio Morricone.mp3 differ diff --git a/assets/sounds/River Flows In You.mp3 b/assets/sounds/River Flows In You.mp3 new file mode 100644 index 000000000..127c17ea3 Binary files /dev/null and b/assets/sounds/River Flows In You.mp3 differ diff --git a/assets/sounds/Summer Wind.mp3 b/assets/sounds/Summer Wind.mp3 new file mode 100644 index 000000000..ea7bda237 Binary files /dev/null and b/assets/sounds/Summer Wind.mp3 differ diff --git a/assets/svg/pause.svg b/assets/svg/pause.svg new file mode 100644 index 000000000..2af7cb1e7 --- /dev/null +++ b/assets/svg/pause.svg @@ -0,0 +1,5 @@ + + +pause + + diff --git a/assets/svg/play-next.svg b/assets/svg/play-next.svg new file mode 100644 index 000000000..d1da2c450 --- /dev/null +++ b/assets/svg/play-next.svg @@ -0,0 +1,5 @@ + + +forward2 + + diff --git a/assets/svg/play-prev.svg b/assets/svg/play-prev.svg new file mode 100644 index 000000000..da6e07ad0 --- /dev/null +++ b/assets/svg/play-prev.svg @@ -0,0 +1,5 @@ + + +backward + + diff --git a/assets/svg/play.svg b/assets/svg/play.svg new file mode 100644 index 000000000..c9451dc05 --- /dev/null +++ b/assets/svg/play.svg @@ -0,0 +1,5 @@ + + +play2 + + diff --git a/assets/svg/reload.svg b/assets/svg/reload.svg new file mode 100644 index 000000000..327ecdc85 --- /dev/null +++ b/assets/svg/reload.svg @@ -0,0 +1,6 @@ + + +loop2 + + + diff --git a/assets/svg/slider-next.svg b/assets/svg/slider-next.svg new file mode 100644 index 000000000..39eef4127 --- /dev/null +++ b/assets/svg/slider-next.svg @@ -0,0 +1,5 @@ + + +arrow_forward_ios + + diff --git a/assets/svg/slider-prev.svg b/assets/svg/slider-prev.svg new file mode 100644 index 000000000..24bc6b89a --- /dev/null +++ b/assets/svg/slider-prev.svg @@ -0,0 +1,5 @@ + + +arrow_back_ios + + diff --git a/css/owfont-regular.css b/css/owfont-regular.css new file mode 100644 index 000000000..c491ac511 --- /dev/null +++ b/css/owfont-regular.css @@ -0,0 +1,558 @@ +/*! + * owfont-regular 1.0.0 by Deniz Fuchidzhiev - http://websygen.com + * License - font: SIL OFL 1.1, css: MIT License + */ +/* FONT PATH + * -------------------------- */ +@font-face { + font-family: 'owfont'; + src: url('../assets/fonts/owfont-regular.eot?v=1.0.0'); + src: url('../assets/fonts/owfont-regular.eot?#iefix&v=1.0.0') format('embedded-opentype'), + url('../assets/fonts/owfont-regular.woff') format('woff'), + url('../assets/fonts/owfont-regular.ttf') format('truetype'), + url('../assets/fonts/owfont-regular.svg#owf-regular') format('svg'); + font-weight: normal; + font-style: normal; +} +.owf { + display: inline-block; + font: normal normal normal 14px/1 owfont; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); +} +/* makes the font 33% larger relative to the icon container */ +.owf-lg { + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; +} +.owf-2x { + font-size: 2em; +} +.owf-3x { + font-size: 3em; +} +.owf-4x { + font-size: 4em; +} +.owf-5x { + font-size: 5em; +} +.owf-fw { + width: 1.28571429em; + text-align: center; +} +.owf-ul { + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; +} +.owf-ul > li { + position: relative; +} +.owf-li { + position: absolute; + left: -2.14285714em; + width: 2.14285714em; + top: 0.14285714em; + text-align: center; +} +.owf-li.owf-lg { + left: -1.85714286em; +} +.owf-border { + padding: .2em .25em .15em; + border: solid 0.08em #eeeeee; + border-radius: .1em; +} +.owf-pull-right { + float: right; +} +.owf-pull-left { + float: left; +} +.owf.owf-pull-left { + margin-right: .3em; +} +.owf.owf-pull-right { + margin-left: .3em; +} + +/* owfont uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ + +/* Weather Condition Codes */ + +/* Thunderstorm - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* thunderstorm with light rain */ +.owf-200:before, +.owf-200-d:before, +.owf-200-n:before { + content: "\EB28"; +} +/* thunderstorm with rain */ +.owf-201:before, +.owf-201-d:before, +.owf-201-n:before { + content: "\EB29"; +} +/* thunderstorm with heavy rain */ +.owf-202:before, +.owf-202-d:before, +.owf-202-n:before { + content: "\EB2A"; +} +/* light thunderstorm */ +.owf-210:before, +.owf-210-d:before, +.owf-210-n:before { + content: "\EB32"; +} +/* thunderstorm */ +.owf-211:before, +.owf-211-d:before, +.owf-211-n:before { + content: "\EB33"; +} +/* heavy thunderstorm */ +.owf-212:before, +.owf-212-d:before, +.owf-212-n:before { + content: "\EB34"; +} +/* ragged thunderstorm */ +.owf-221:before, +.owf-221-d:before, +.owf-221-n:before { + content: "\EB3D"; +} +/* thunderstorm with light drizzle */ +.owf-230:before, +.owf-230-d:before, +.owf-230-n:before { + content: "\EB46"; +} +/* thunderstorm with drizzle */ +.owf-231:before, +.owf-231-d:before, +.owf-231-n:before { + content: "\EB47"; +} +/* thunderstorm with heavy drizzle */ +.owf-232:before, +.owf-232-d:before, +.owf-232-n:before { + content: "\EB48"; +} + +/* Drizzle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* light intensity drizzle */ +.owf-300:before, +.owf-300-d:before, +.owf-300-n:before { + content: "\EB8C"; +} +/* drizzle */ +.owf-301:before, +.owf-301-d:before, +.owf-301-n:before { + content: "\EB8D"; +} +/* heavy intensity drizzle */ +.owf-302:before, +.owf-302-d:before, +.owf-302-n:before { + content: "\EB8E"; +} +/* light intensity drizzle rain */ +.owf-310:before, +.owf-310-d:before, +.owf-310-n:before { + content: "\EB96"; +} +/* drizzle rain */ +.owf-311:before, +.owf-311-d:before, +.owf-311-n:before { + content: "\EB97"; +} +/* heavy intensity drizzle rain */ +.owf-312:before, +.owf-312-d:before, +.owf-312-n:before { + content: "\EB98"; +} +/* shower rain and drizzle */ +.owf-313:before, +.owf-313-d:before, +.owf-313-n:before { + content: "\EB99"; +} +/* heavy shower rain and drizzle*/ +.owf-314:before, +.owf-314-d:before, +.owf-314-n:before { + content: "\EB9A"; +} +/* shower drizzle */ +.owf-321:before, +.owf-321-d:before, +.owf-321-n:before { + content: "\EBA1"; +} + +/* Rain - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* light rain */ +.owf-500:before, +.owf-500-d:before, +.owf-500-n:before { + content: "\EC54"; +} +/* moderate rain */ +.owf-501:before, +.owf-501-d:before, +.owf-501-n:before { + content: "\EC55"; +} +/* heavy intensity rain */ +.owf-502:before, +.owf-502-d:before, +.owf-502-n:before { + content: "\EC56"; +} +/* very heavy rain */ +.owf-503:before, +.owf-503-d:before, +.owf-503-n:before { + content: "\EC57"; +} +/* extreme rain */ +.owf-504:before, +.owf-504-d:before, +.owf-504-n:before { + content: "\EC58"; +} +/* freezing rain */ +.owf-511:before, +.owf-511-d:before, +.owf-511-n:before { + content: "\EC5F"; +} +/* light intensity shower rain */ +.owf-520:before, +.owf-520-d:before, +.owf-520-n:before { + content: "\EC68"; +} +/* shower rain */ +.owf-521:before, +.owf-521-d:before, +.owf-521-n:before { + content: "\EC69"; +} +/* heavy intensity shower rain */ +.owf-522:before, +.owf-522-d:before, +.owf-522-n:before { + content: "\EC6A"; +} +/* ragged shower rain */ +.owf-531:before, +.owf-531-d:before, +.owf-531-n:before { + content: "\EC73"; +} + +/* Snow - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* light snow */ +.owf-600:before, +.owf-600-d:before, +.owf-600-n:before { + content: "\ECB8"; +} +/* snow */ +.owf-601:before, +.owf-601-d:before, +.owf-601-n:before { + content: "\ECB9"; +} +/* heavy snow */ +.owf-602:before, +.owf-602-d:before, +.owf-602-n:before { + content: "\ECBA"; +} +/* sleet */ +.owf-611:before, +.owf-611-d:before, +.owf-611-n:before { + content: "\ECC3"; +} +/* shower sleet */ +.owf-612:before, +.owf-612-d:before, +.owf-612-n:before { + content: "\ECC4"; +} +/* light rain and snow */ +.owf-615:before, +.owf-615-d:before, +.owf-615-n:before { + content: "\ECC7"; +} +/* rain and snow */ +.owf-616:before, +.owf-616-d:before, +.owf-616-n:before { + content: "\ECC8"; +} +/* light shower snow */ +.owf-620:before, +.owf-620-d:before, +.owf-620-n:before { + content: "\ECCC"; +} +/* shower snow */ +.owf-621:before, +.owf-621-d:before, +.owf-621-n:before { + content: "\ECCD"; +} +/* heavy shower snow */ +.owf-622:before, +.owf-622-d:before, +.owf-622-n:before { + content: "\ECCE"; +} + +/* Atmosphere - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* mist */ +.owf-701:before, +.owf-701-d:before, +.owf-701-n:before { + content: "\ED1D"; +} +/* smoke */ +.owf-711:before, +.owf-711-d:before, +.owf-711-n:before { + content: "\ED27"; +} +/* haze */ +.owf-721:before, +.owf-721-d:before, +.owf-721-n:before { + content: "\ED31"; +} +/* Sand/Dust Whirls */ +.owf-731:before, +.owf-731-d:before, +.owf-731-n:before { + content: "\ED3B"; +} +/* Fog */ +.owf-741:before, +.owf-741-d:before, +.owf-741-n:before { + content: "\ED45"; +} +/* sand */ +.owf-751:before, +.owf-751-d:before, +.owf-751-n:before { + content: "\ED4F"; +} +/* dust */ +.owf-761:before, +.owf-761-d:before, +.owf-761-n:before { + content: "\ED59"; +} +/* VOLCANIC ASH */ +.owf-762:before, +.owf-762-d:before, +.owf-762-n:before { + content: "\ED5A"; +} +/* SQUALLS */ +.owf-771:before, +.owf-771-d:before, +.owf-771-n:before { + content: "\ED63"; +} +/* TORNADO */ +.owf-781:before, +.owf-781-d:before, +.owf-781-n:before { + content: "\ED6D"; +} + +/* Clouds - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* sky is clear */ /* Calm */ +.owf-800:before, +.owf-800-d:before, +.owf-951:before, +.owf-951-d:before { + content: "\ED80"; +} +.owf-800-n:before, +.owf-951-n:before { + content: "\F168"; +} +/* few clouds */ +.owf-801:before, +.owf-801-d:before { + content: "\ED81"; +} +.owf-801-n:before { + content: "\F169"; +} +/* scattered clouds */ +.owf-802:before, +.owf-802-d:before { + content: "\ED82"; +} +.owf-802-n:before { + content: "\F16A"; +} +/* broken clouds */ +.owf-803:before, +.owf-803-d:before, +.owf-803-n:before { + content: "\ED83"; +} +/* overcast clouds */ +.owf-804:before, +.owf-804-d:before, +.owf-804-n:before { + content: "\ED84"; +} + +/* Extreme - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* tornado */ +.owf-900:before, +.owf-900-d:before, +.owf-900-n:before { + content: "\EDE4"; +} +/* tropical storm */ +.owf-901:before, +.owf-901-d:before, +.owf-901-n:before { + content: "\EDE5"; +} +/* hurricane */ +.owf-902:before, +.owf-902-d:before, +.owf-902-n:before { + content: "\EDE6"; +} +/* cold */ +.owf-903:before, +.owf-903-d:before, +.owf-903-n:before { + content: "\EDE7"; +} +/* hot */ +.owf-904:before, +.owf-904-d:before, +.owf-904-n:before { + content: "\EDE8"; +} +/* windy */ +.owf-905:before, +.owf-905-d:before, +.owf-905-n:before { + content: "\EDE9"; +} +/* hail */ +.owf-906:before, +.owf-906-d:before, +.owf-906-n:before { + content: "\EDEA"; +} + +/* Additional - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ + +/* Setting */ +.owf-950:before, +.owf-950-d:before, +.owf-950-n:before { + content: "\EE16"; +} +/* Light breeze */ +.owf-952:before, +.owf-952-d:before, +.owf-952-n:before { + content: "\EE18"; +} +/* Gentle Breeze */ +.owf-953:before, +.owf-953-d:before, +.owf-953-n:before { + content: "\EE19"; +} +/* Moderate breeze */ +.owf-954:before, +.owf-954-d:before, +.owf-954-n:before { + content: "\EE1A"; +} +/* Fresh Breeze */ +.owf-955:before, +.owf-955-d:before, +.owf-955-n:before { + content: "\EE1B"; +} +/* Strong Breeze */ +.owf-956:before, +.owf-956-d:before, +.owf-956-n:before { + content: "\EE1C"; +} +/* High wind, near gale */ +.owf-957:before, +.owf-957-d:before, +.owf-957-n:before { + content: "\EE1D"; +} +/* Gale */ +.owf-958:before, +.owf-958-d:before, +.owf-958-n:before { + content: "\EE1E"; +} +/* Severe Gale */ +.owf-959:before, +.owf-959-d:before, +.owf-959-n:before { + content: "\EE1F"; +} +/* Storm */ +.owf-960:before, +.owf-960-d:before, +.owf-960-n:before { + content: "\EE20"; +} +/* Violent Storm */ +.owf-961:before, +.owf-961-d:before, +.owf-961-n:before { + content: "\EE21"; +} +/* Hurricane */ +.owf-962:before, +.owf-962-d:before, +.owf-962-n:before { + content: "\EE22"; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..e1c129abb --- /dev/null +++ b/css/style.css @@ -0,0 +1,330 @@ +@font-face { + font-family: 'Arial-MT'; + src: url("../assets/fonts/Arial-MT.woff"); /* Путь к файлу со шрифтом */ + } + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + min-width: 480px; + min-height: 100vh; + font-family: 'Arial', sans-serif; + font-size: 16px; + color: #fff; + text-align: center; + /* background: url("../assets/img/bg.jpg") center/cover, rgba(0, 0, 0, 0.5); */ + /* background: url("https://images.unsplash.com/photo-1581135137275-c0c3153f33c3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNjg5ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MzQ3MjE4NjY&ixlib=rb-1.2.1&q=80&w=1080") center/cover, rgba(0, 0, 0, 0.5); */ + background: center/cover, rgba(0, 0, 0, 0.5); + background-image: url("https://images.unsplash.com/photo-1581135137275-c0c3153f33c3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNjg5ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2MzQ3MjE4NjY&ixlib=rb-1.2.1&q=80&w=1080"); + background-blend-mode: multiply; + transition: background-image 1s ease-in-out; +} + +.header { + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; + height: 30vh; + min-height: 220px; + padding: 20px; +} + +.player-controls { + display: flex; + align-items: center; + justify-content: space-between; + width: 120px; + margin-bottom: 28px; +} + +.play-list { + text-align: left; +} + +.play-item { + position: relative; + padding: 5px; + padding-left: 20px; + list-style: none; + opacity: .8; + cursor: pointer; + transition: .3s; +} + +.play-item:hover { + opacity: 1; +} + +.play-item::before { + content: "\2713"; + position: absolute; + left: 0; + top: 2px; + font-weight: 900; +} + +.item-active::before { + color: #C5B358; +} + +.player-icon, +.slider-icon, +.change-quote { + width: 32px; + height: 32px; + background-size: 32px 32px; + background-position: center center; + background-repeat: no-repeat; + background-color: transparent; + border: 0; + outline: 0; + opacity: .8; + cursor: pointer; + transition: .3s; +} + +.player-icon:hover, +.slider-icon:hover, +.change-quote:hover { + opacity: 1; +} + +.player-icon:active, +.slider-icon:active, +.change-quote:active { + border: 0; + outline: 0; + transform: scale(1.1); +} + +.play { + width: 40px; + height: 40px; + background-size: 40px 40px; + background-image: url("../assets/svg/play.svg"); +} + +.pause { + background-image: url("../assets/svg/pause.svg"); +} + +.play-prev { + background-image: url("../assets/svg/play-prev.svg"); +} + +.play-next { + background-image: url("../assets/svg/play-next.svg"); +} + +.weather { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + row-gap: 5px; + width: 180px; + min-height: 180px; + text-align: left; +} + +.weather-error { + margin-top: -10px; +} + +.description-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + column-gap: 12px; +} + +.weather-icon { + font-size: 44px; +} + +.city { + width: 170px; + height: 34px; + padding: 5px; + font-size: 20px; + line-height: 24px; + color: #fff; + border: 0; + outline: 0; + border-bottom: 1px solid #fff; + background-color: transparent; +} + +.city::placeholder { + font-size: 20px; + color: #fff; + opacity: .6; +} + +.main { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 40vh; + min-height: 260px; + padding: 20px; +} + +.slider-icon { + position: absolute; + top: 50%; + margin-top: -16px; + cursor: pointer; +} + +.slide-prev { + left: 20px; + background-image: url("../assets/svg/slider-prev.svg"); +} + +.slide-next { + right: 20px; + background-image: url("../assets/svg/slider-next.svg"); +} + +.time { + min-height: 124px; + margin-bottom: 10px; + font-family: 'Arial-MT'; + font-size: 100px; + letter-spacing: -4px; +} + +.date { + min-height: 28px; + font-size: 24px; + margin-bottom: 20px; +} + +.greeting-container { + display: flex; + flex-wrap: wrap; + justify-content: stretch; + align-items: center; + min-height: 48px; + /* width: 100vw; */ + font-size: 40px; +} + +.greeting { + flex: 1; + padding: 10px; + text-align: right; +} + +.name { + flex: 1; + max-width: 50%; + padding: 10px; + font-size: 40px; + text-align: left; + color: #fff; + background-color: transparent; + border: 0; + outline: 0; +} + +.name::placeholder { + color: #fff; + opacity: .6; +} + +.footer { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + width: 100%; + height: 30vh; + min-height: 160px; + padding: 20px; +} + +.change-quote { + margin-bottom: 30px; + background-image: url("../assets/svg/reload.svg"); +} + +.quote { + min-height: 32px; +} + +.author { + min-height: 20px; +} + +@media (max-width: 768px) { + .time { + min-height: 80px; + font-size: 72px; + } + + .greeting-container { + min-height: 40px; + font-size: 32px; + } + + .greeting { + padding: 5px; + } + + .name { + font-size: 32px; + padding: 5px; + } +} + +.what-pic { + display: none; +} + +.settings { + position: absolute; + z-index: 3; + background-color: black; + padding: 20px; + line-height: 50px; + border-radius: 10px; + right: 50px; + top: 200px; + visibility: hidden; +} + +button { + cursor: pointer; +} + +.lang { + padding: 5px; + width: 50px; +} +.close { + + font-size: 25px; + padding: 0 8px; + border: rgb(112, 234, 255) solid 5px; + border-radius: 50%; +} +.pic { + max-width: 70px; + padding: 5px; +} + +.what-pic { + height: 30px; + border: rgb(145, 255, 112) solid 5px; +} \ No newline at end of file diff --git a/data-be.json b/data-be.json new file mode 100644 index 000000000..5601a8921 --- /dev/null +++ b/data-be.json @@ -0,0 +1,14 @@ +[ + { + "text": "Пішыце код так, як паведамляць яго будзе схільны да гвалту псіхапат, які ведае, дзе вы жывяце", + "author": "Стыў Макконнелл" + }, + { + "text": "Складанасць праграмы расце да таго часу, пакуль не перавысіць здольнасці праграміста", + "author": "Артур Блох. Законы Мэрфі" + }, + { + "text": "Хадзіць па вадзе і распрацоўваць праграмы, вынікаючы ТЗ, вельмі проста ... калі яны замарожаныя", + "author": "І. Берардо" + } + ] \ No newline at end of file diff --git a/data-eng.json b/data-eng.json new file mode 100644 index 000000000..0fc9049dc --- /dev/null +++ b/data-eng.json @@ -0,0 +1,14 @@ +[ + { + "text": "Write your code in a way that will be reported by a violent psychopath who knows where you live", + "author": "Steve McConnell" + }, + { + "text": "The complexity of the program grows until it exceeds the capabilities of the programmer", + "author": "Arthur Bloch. Murphy's Laws" + }, + { + "text": "It's very easy to walk on water and develop programs following the TOR ... if they are frozen", + "author": "I. Berard" + } + ] \ No newline at end of file diff --git a/data-ru.json b/data-ru.json new file mode 100644 index 000000000..606e9747e --- /dev/null +++ b/data-ru.json @@ -0,0 +1,14 @@ +[ + { + "text": "Пишите код так, как будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете", + "author": "Стив Макконнелл" + }, + { + "text": "Сложность программы растет до тех пор, пока не превысит способности программиста", + "author": "Артур Блох. Законы Мэрфи" + }, + { + "text": "Ходить по воде и разрабатывать программы, следуя ТЗ, очень просто… если они заморожены", + "author": "И. Берард" + } + ] diff --git a/index.html b/index.html new file mode 100644 index 000000000..5c6bb38f3 --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + + + + momentum + + +
+
+ + + + +
+ +
+ +

Language

+
+ + + +
+

Picture type

+
+ + + + +
+ + +
+ + +
+ + +
+
+ + +
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + \ No newline at end of file diff --git a/infinity.mp3 b/infinity.mp3 new file mode 100644 index 000000000..a415295e0 Binary files /dev/null and b/infinity.mp3 differ diff --git a/js/audio.js b/js/audio.js new file mode 100644 index 000000000..55296f472 --- /dev/null +++ b/js/audio.js @@ -0,0 +1,553 @@ +// export {playAudio} +// import {playList} from './playList.js' +// let playListContainer = document.querySelector('.play-list') +// for(let i = 0; i < playList.length; i++) { +// const li = document.createElement('li') +// li.style.listStyle = 'none' +// playListContainer.append(li) +// li.innerHTML = `
+// +// +// +//
`} +// let button = document.querySelectorAll('.play-song') +// let prev = document.querySelectorAll('.play-prev') +// let next = document.querySelectorAll('.play-next') +// console.log(button) +// let s + +// for (let i = 0; i < button.length; i++) { +// let pre = i-1 +// let nex = i+1 +// let audio = new Audio() +// button[i].onclick = () => { +// audio.src = playList[i].src +// playPause(i, audio) +// } +// prev[i].onclick = () => { +// // song = playList[pre].src +// audio.src = playList[pre].src +// previous(pre, audio) +// } +// next[i].onclick = () => { +// // song = playList[nex].src +// audio.src = playList[nex].src +// tnext(nex, audio) +// } +// } +// let isPlay = false + +// function playPause(n, audio) { +// //audio.src = playList[n].src +// for (let i = 0; i < button.length; i++) { +// if (i != n) { +// button[i].classList.remove('pause') +// button[i].classList.add('play') +// audio.pause() +// } +// } +// isPlay = !isPlay +// toggle(n) +// console.log(isPlay) +// plPs(n, audio) +// s = n +// } +// function plPs(n, audio) { +// if (isPlay == false) { +// audio.pause() +// console.log('pause') +// } +// else { +// audio.play() +// console.log('yeah') +// console.log('play') +// } +// } +// function toggle(n) { +// button[n].classList.toggle('play') +// button[n].classList.toggle('pause') +// } +// function previous(n, audio) { +// console.log(isPlay) +// isPlay = !isPlay +// playPause(n, audio) +// } +// function tnext(n, audio) { +// console.log(isPlay) +// isPlay = !isPlay +// playPause(n, audio) +// } +// function playAudio() { + +// } +// playAudio() + +export {playAudio} +import {playList} from './playList.js' +let playListContainer = document.querySelector('.play-list') +const audio = new Audio(); +let isPlay = 1 +let c +let n +let vidLine = document.querySelector('.vid-line') +let stop + +for(let i = 0; i < playList.length; i++) { + const li = document.createElement('li') + li.style.listStyle = 'none' + playListContainer.append(li) + li.innerHTML = `
+ + + +
`} + let button = document.querySelectorAll('.play-song') + let prev = document.querySelectorAll('.play-prev') +let next = document.querySelectorAll('.play-next') + function toggleBtn(b) { + b.classList.toggle('pause'); + b.classList.toggle('play'); + } + let track +function playAudio() { + for (let i = 0; i < button.length; i++) { + console.log(playList) + audio.currentTime = 0 + button[i].onclick = function() { + c = audio.currentTime + audio.src = playList[i].src + if (button[i].classList.value.includes('play')) { + setTimeout(function() { + button.forEach(b => { + b.classList.remove('pause') + b.classList.add('play') + }) + if (c !== undefined && n == i) { + audio.currentTime = c + } + n = i + audio.play() + + audio.onended = function() { + console.log(1) + button[i].classList.remove('pause') + button[i].classList.add('play') + button[i + 1].classList.remove('play') + button[i + 1].classList.add('pause') + audio.src = playList[i + 1].src + audio.play() + + } + let duration = audio.duration + let step = Math.round(100/duration) + let q = Math.round(100/step) + console.log(step) + let stepP = vidLine.value + console.log(+vidLine.value + step) + for (let i = 0; i < q; i++) { + setTimeout(() => { + vidLine.value = +vidLine.value + step + }, 1000) + } + + + button[i].classList.remove('play') + button[i].classList.add('pause') + }, 50) + console.log(button[i].classList.value) + } + if (button[i].classList.value.includes('pause')) { + stop = 1 + console.log(c) + setTimeout(function() { + audio.pause() + button[i].classList.remove('pause') + button[i].classList.add('play') + }, 50) + + } + } + console.log(next[i]) + next[i].onclick = function() { + if (i + 1 < playList.length) { + setTimeout( function() { + button.forEach(b => { + b.classList.remove('pause') + b.classList.add('play') + }) + button[i+1].classList.remove('play') + button[i+1].classList.add('pause') + audio.src = playList[i + 1].src + audio.play() + }, 50) + } + + + } + prev[i].onclick = function() { + if (i - 1 >= 0) { + setTimeout( function() { + button.forEach(b => { + b.classList.remove('pause') + b.classList.add('play') + }) + button[i-1].classList.remove('play') + button[i-1].classList.add('pause') + audio.src = playList[i-1].src + audio.play() + }, 50) + } + + } + } + +} +playAudio() + + + // for (let i = 0; i < button.length; i++) { + // audio.currentTime = 0 + // button[i].onclick = function() { + // if (isPlay % 2 != 0 ) { + // audio.src = playList[i].src + // console.log(audio) + // if (c != undefined) { + // audio.currentTime = c + // } + // if (track != audio.src) { + // audio.currentTime = 0 + // } + // toggleBtn(button[i]) + // // setTimeout(function() { + // // toggleBtn(button[i]) + // // }, audio.duration*1000) + // audio.play() + // isPlay++ + // console.log(isPlay) + // } + + // else { + // audio.pause() + // track = audio.src + // console.log(audio) + // c = audio.currentTime + // toggleBtn(button[i]) + // isPlay++ + // console.log(isPlay) + // } + // } + // } + + + // for (let i = 0; i < button.length; i++) { + // button[i].addEventListener('click', () => { + // audio.src = playList[i].src + // c = audio.currentTime + // console.log(c) + // if (c != undefined) { + // audio.currentTime = c + // } + // isPlay++ + // console.log(i) + // if (isPlay%2!==0) { + // button.forEach(b => { + // toggleBtn(button[i]) + // }) + // toggleBtn(button[i]) + // audio.play() + // } + // else { + // toggleBtn(button[i]) + // audio.pause() + // } + // }) + // } + +// let isPlay = false +// let button = document.querySelectorAll('.play-song') +// console.log(button) +// let playNum +// const li = document.createElement('li') +// for(let i = 0; i < playList.length; i++) { +// playListContainer.append(li) +// li.innerHTML = `
+// +// +// +//
`} +// let prev = document.querySelectorAll('.play-prev') +// let next = document.querySelectorAll('.play-next') +// button = document.querySelectorAll('.play-song') +// console.log(button) +// function playAudio() { +// for (let i = 0; i < button.length; i++) { +// button[i].onclick = function() { +// if (!isPlay) { +// console.log(playList[i].src) +// audio.src = `${playList[i].src}` +// audio.play() +// isPlay = true +// button[i].classList.remove('play') +// button[i].classList.add('pause') +// } +// else { +// audio.src = `${playList[i].src}` +// button.forEach(b => { +// b.classList.remove('pause') +// b.classList.add('play') +// }) +// audio.pause() +// isPlay = false +// button[i].classList.remove('pause') +// button[i].classList.add('play') +// } +// } +// next[i].onclick = function() { +// button.forEach(b => { +// b.classList.remove('pause') +// b.classList.add('play') +// }) +// audio.pause() +// audio.src = `${playList[i + 1].src}` +// audio.play() +// button[i + 1].classList.remove('play') +// button[i + 1].classList.add('pause') +// } +// prev[i].onclick = function() { +// console.log(34359597) +// button.forEach(b => { +// b.classList.remove('pause') +// b.classList.add('play') +// }) +// audio.pause() +// audio.src = `${playList[i - 1].src}` +// audio.play() +// button[i - 1].classList.remove('play') +// button[i - 1].classList.add('pause') +// } + +// }} +// audio.onended = function() { +// button[i].classList.add('play') +// button[i].classList.remove('pause') + +// } + +// playAudio() + + + + + + + + + + + + +// function playAudio() { +// audio.src = playList[playNum].src +// //audio.currentTime = 0; +// if (isPlay == false) { +// //toggleBtn() +// audio.play() +// } +// if (isPlay == true) { +// //toggleBtn() +// audio.pause() +// } +// } + +// playAudio() + +// function toggleBtn() { +// button[playNum].classList.toggle('pause'); +// } + +// const li = document.createElement('li') +// for(let i = 0; i < playList.length; i++) { +// playListContainer.append(li) +// li.innerHTML = `
+// +// +// +//
`} + +// for (let i = 0; i < button.length; i++) { +// button[i].addEventListener('click', () => { +// playNum = i +// playAudio() +// isPlay = !isPlay +// }) +// } + + + + + +// let playNum +// const audio = new Audio(); +// let isPlay = false +// function playA() { +// audio.play(); +// isPlay = true +// } +// function pauseA() { +// audio.pause() +// isPlay = false +// } +// function toggleBtn() { +// button[playNum].classList.toggle('pause'); +// button[playNum].classList.toggle('play') +// } +// function playAudio() { +// let list = button[playNum].classList +// // if (list.value.includes('play')) { +// // toggleBtn() +// // playA() +// // } +// audio.src = playList[playNum].src + +// // if (button[playNum].classList.includes('play')) { +// // isPlay = false +// // } +// if (isPlay == false || list.value.includes('play')) { +// toggleBtn() +// playA() + +// } +// if (isPlay == true) { +// toggleBtn() +// pauseA() + +// } +// } + +// const li = document.createElement('li') +// for(let i = 0; i < playList.length; i++) { +// playListContainer.append(li) +// li.innerHTML = `
+// +// +// +//
` +// } + + +// let button = document.querySelectorAll('.play-song') +// console.log(button) +// for (let i = 0; i < button.length; i++) { +// button[i].addEventListener('click', () => { +// playNum = i +// playAudio() +// }) +// } + + +// const audio = document.querySelectorAll('audio'); +// const playBtn = document.querySelectorAll('.play'); +// console.log(audio.duration) + +// function controlAudio() { +// for (let i = 0; i < audio.length; i++) { +// function playAudio() { +// audio[i].play(); +// } + +// function pauseAudio() { +// audio[i].pause(); +// } + +// function stopAudio() { +// audio[i].stop() +// } + +// let times = 1 + +// if (audio[i].currentTime == 0) { +// audio[i].classList.remove('pause') +// audio[i].classList.add('play') +// } +// playBtn[i].addEventListener('click', () => { +// if (times % 2 != 0) { +// audio.forEach(a => { +// () => a.stop() +// }) +// playAudio() +// playBtn[i].classList.remove('play') +// playBtn[i].classList.add('pause') +// times++ +// } +// else { +// playBtn[i].classList.remove('pause') +// playBtn[i].classList.add('play') +// pauseAudio() +// times++ +// } +// }); + +// audio[i].onended = function() { +// playBtn[i].classList.remove('pause') +// playBtn[i].classList.add('play') +// }; + +// function controlAudio() { +// playAudio() +// pauseAudio() +// } + +// controlAudio() +// }} +// controlAudio() + + +// let songs = document.querySelectorAll('.song') +// let playList = document.querySelector('.play-list') +// let controls = document.querySelector('.player-controls') + + +// const audio = document.querySelector('audio'); +// const playBtn = document.querySelector('.play'); +// console.log(audio.duration) +// function playAudio() { +// audio.play(); +// } + +// function pauseAudio() { +// audio.pause(); +// } + +// let times = 1 + +// playBtn.addEventListener('click', () => { +// if (times % 2 != 0) { +// playAudio() +// playBtn.classList.remove('play') +// playBtn.classList.add('pause') +// times++ +// } +// else { +// playBtn.classList.remove('pause') +// playBtn.classList.add('play') +// pauseAudio() +// times++ +// } +// }); + +// audio.onended = function() { +// playBtn.classList.remove('pause') +// playBtn.classList.add('play') +// }; + +// function controlAudio() { +// playAudio() +// pauseAudio() +// } + +// controlAudio() + +// let songs = document.querySelectorAll('.song') +// let playList = document.querySelector('.play-list') +// let controls = document.querySelector('.player-controls') + diff --git a/js/background-image.js b/js/background-image.js new file mode 100644 index 000000000..1bc6f9fd4 --- /dev/null +++ b/js/background-image.js @@ -0,0 +1,216 @@ +export {pics} +let body = document.querySelector('body') +let date = new Date() +let hours = date.getHours() +let prev = document.querySelector('.slide-prev') +let next = document.querySelector('.slide-next') +let u = [] + + +let picApi = document.querySelector('.api') +let picGit = document.querySelector('.git') +let picFl = document.querySelector('.flic') + +let obj = { + 'api': api, + 'git': git, + 'flic': api +} + +picApi.onclick = () => { + localStorage.setItem('pics', 'api') + location.reload() + } + picGit.onclick = () => { + localStorage.setItem('pics', 'git') + location.reload() + } + picFl.onclick = () => { + localStorage.setItem('pics', 'api') + location.reload() + } + +let s = localStorage.getItem('pics') +let pics = obj[s] + +let whatPic = document.querySelector('.what-pic') +console.log(whatPic[0]) +let picSelect + + +function selected() { + for (let i = 0; i < whatPic.length; i++) { + if (whatPic[i].innerHTML == localStorage.getItem('picType')) { + whatPic[i].selected = true + } + } +} + +selected() + +if (s == 'api') { + console.log(3333) + whatPic.style.display = 'inline' + console.log(whatPic.value) + whatPic.onchange = () => { + localStorage.setItem('picType', whatPic.value) + console.log(whatPic.value) + location.reload() + } +} +if (localStorage.getItem('picType') !== null) { + picSelect = localStorage.getItem('picType') + if (picSelect == 'daytime') { + picSelect = time() + } +} +function time() { + let dayTime + if (hours >= 6 && hours < 12) { + dayTime = 'morning' + } + if (hours >= 12 && hours < 18) { + dayTime = 'afternoon' + } + if (hours >= 18 && hours < 24) { + dayTime = 'evening' + } + if (hours >= 0 && hours < 6) { + dayTime = 'night' + } + return dayTime; +} + + +pics() + +function git() { + + let num = 1 + function time() { + let dayTime + if (hours >= 6 && hours < 12) { + dayTime = 'morning' + } + if (hours >= 12 && hours < 18) { + dayTime = 'afternoon' + } + if (hours >= 18 && hours < 24) { + dayTime = 'evening' + } + if (hours >= 0 && hours < 6) { + dayTime = 'night' + } + return `https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/assets/images/${dayTime}/${num}.jpg`; + } + let images = [] + + function getLinkToImage() { + let url = time() + async function image() { + const res = await fetch(url); + const data = await res.url; + console.log(data) + body.style.backgroundImage = `url(${data})` + } + image() + console.log(num) + } + num = '0' + num + getLinkToImage() + num = 1 + + function backImage() { + + next.addEventListener('click', () => { + num++ + if (num == 21) { + num = 1 + } + let n = num + if (num.toString().length < 2) { + num = '0' + num + getLinkToImage() + num = n + } + else { + getLinkToImage() + } + }) + + prev.addEventListener('click', () => { + if (num == 0) { + num = 20 + } + num-- + console.log(num) + let n = num + if (num.toString().length < 2) { + num = '0' + num + getLinkToImage() + num = n + } + else { + getLinkToImage() + } + }) + } + + backImage() +} + + +function api() { + function getLinkToImage() { + const url = `https://api.unsplash.com/photos/random?query=${picSelect}&client_id=mWnJPWbGtVDvJ4gMlUhG6LaMGz_X0LMwKqJF3pe_NdM` + fetch(url) + .then(res => res.json()) + .then(data => { + body.style.backgroundImage = `url(${data.urls.regular})` + }); + } + + + function backImage() { + getLinkToImage() + let n = 0 + next.addEventListener('click', () => { + + if (u.length <= 20) { + getLinkToImage() + u.push(body.style.backgroundImage) + console.log(u) + n++ + console.log(n) + } + else { + body.style.backgroundImage = u[n] + n += 1 + if (n > 20) { + n = 0 + } + console.log(n) + } + }) + prev.addEventListener('click', () => { + console.log(n) + n-- + if (n <= 0) { + n = u.length + } + body.style.backgroundImage = u[n] + } + ) + } + + + + backImage() + } + + + + + + + diff --git a/js/greeting.js b/js/greeting.js new file mode 100644 index 000000000..1227d3a7a --- /dev/null +++ b/js/greeting.js @@ -0,0 +1,68 @@ +import { language } from "./switchLang.js"; +export {greeting} +let lan = language() +console.log(lan) +let date = new Date() +let hours = date.getHours() +let greet = document.querySelector('.greeting') +let nam = document.querySelector('.name') + +function greeting() { + if (hours >= 0 && hours < 6) { + if (lan == 'ru') { + greet.innerHTML = "Спокойной ночи," + } + if (lan == 'en') { + console.log(lan) + greet.innerHTML = "Good night," + } + if (lan == 'be') { + console.log(lan) + greet.innerHTML = "Добра нач," + } + } + if (hours >= 6 && hours < 12) { + if (lan == 'ru') { + greet.innerHTML = "Добрый утро," + } + if (lan == 'en') { + console.log(lan) + greet.innerHTML = "Good morning," + } + if (lan == 'be') { + console.log(lan) + greet.innerHTML = "Добрай раніцы," + } + } + if (hours >= 12 && hours < 18) { + if (lan == 'ru') { + greet.innerHTML = "Добрый день," + } + if (lan == 'en') { + console.log(lan) + greet.innerHTML = "Good afternoon," + } + if (lan == 'be') { + console.log(lan) + greet.innerHTML = "Добры дзень," + } + } + if (hours >= 18 && hours < 24) { + if (lan == 'ru') { + greet.innerHTML = "Добрый вечер," + } + if (lan == 'en') { + console.log(lan) + greet.innerHTML = "Good evening," + } + if (lan == 'be') { + console.log(lan) + greet.innerHTML = "Добры вечар," + } + } + nam.value = localStorage.getItem('name') + nam.addEventListener('input', () => { + localStorage.setItem('name', nam.value) + }) +} +greeting() diff --git a/js/main.js b/js/main.js new file mode 100644 index 000000000..35759281c --- /dev/null +++ b/js/main.js @@ -0,0 +1,7 @@ +import { showTime } from "./time.js"; +import { greeting } from "./greeting.js"; +import { pics } from "./background-image.js"; +import { getQuotes } from "./quotes.js"; +import { getWeather } from "./weather.js"; +import { playAudio } from "./audio.js"; +import { setApp } from "./settings.js"; \ No newline at end of file diff --git a/js/playList.js b/js/playList.js new file mode 100644 index 000000000..bab770210 --- /dev/null +++ b/js/playList.js @@ -0,0 +1,13 @@ +const playList = [ + { + title: 'Aqua Caelestis', + src: '../assets/sounds/Aqua Caelestis.mp3', + duration: '00:58' + }, + { + title: 'River Flows In You', + src: '../assets/sounds/River Flows In You.mp3', + duration: '03:50' + } + ] + export {playList}; \ No newline at end of file diff --git a/js/quotes.js b/js/quotes.js new file mode 100644 index 000000000..94c02a426 --- /dev/null +++ b/js/quotes.js @@ -0,0 +1,51 @@ +export {getQuotes} +import { language } from "./switchLang.js"; +let lang = language() +let r +let quote = document.querySelector('.quote') +let author = document.querySelector('.author') +function random() { + return Math.round(0 + Math.random() * (2 - 0)) +} + +async function getQuotes() { + + let rand = random() + + while (rand == r) { + rand = random() + } + + r = rand + + console.log(r, rand) + if (lang == 'ru') { + const quotes = 'data-ru.json' + const res = await fetch(quotes) + const data = await res.json() + console.log(data[rand]) + quote.innerHTML = data[rand].text; + author.innerHTML = data[rand].author; + } + if (lang == 'en') { + const quotes = 'data-eng.json' + const res = await fetch(quotes) + const data = await res.json() + console.log(data[rand]) + quote.innerHTML = data[rand].text; + author.innerHTML = data[rand].author; + } + if (lang == 'be') { + const quotes = 'data-be.json' + const res = await fetch(quotes) + const data = await res.json() + console.log(data[rand]) + quote.innerHTML = data[rand].text; + author.innerHTML = data[rand].author; + } + + } + document.querySelector('.change-quote').addEventListener('click', () => { + getQuotes() +}) + getQuotes() \ No newline at end of file diff --git a/js/quotesLang.js b/js/quotesLang.js new file mode 100644 index 000000000..e69de29bb diff --git a/js/script.js b/js/script.js new file mode 100644 index 000000000..03a9512dc --- /dev/null +++ b/js/script.js @@ -0,0 +1,303 @@ +setInterval(function() { +let date = new Date() +let hours = date.getHours() +let minutes = date.getMinutes() +if (hours < 10) { + hours = '0' + hours +} +if (minutes < 10) { + minutes = '0' + minutes +} +let seconds = date.getSeconds() +if (seconds < 10) { + seconds = '0' + seconds +} + let time = document.querySelector('.time') + time.innerHTML = hours + ':' + minutes + ':' + seconds +}) + +let curDate = new Date() +let month = curDate.getMonth() +let day = curDate.getDate() +let months = ['Jan', 'Feb', 'March', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Seb', 'Oct', 'Nov', 'Dec'] +let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] +let dayNum = curDate.getDay() +let date = document.querySelector('.date') +date.innerHTML = `${days[dayNum]}, ${months[month]} ${day}` + + + +let weather = document.querySelector('.weather') +let temp = document.querySelector('.temperature') +let wIcon = document.querySelector('.weather-icon') +let wDesc = document.querySelector('.weather-description') +let icon +let city = document.querySelector('.city') +let curCity +let wind = document.querySelector('.wind') +let humidity = document.querySelector('.humidity') +let hours = curDate.getHours() + +// function weatherPic(desc, hours) { +// let icon +// if (desc == 'clear sky' && hours < 20) { +// icon = '01d.png' +// } +// if (desc == 'clear sky' && hours >= 20) { +// icon = '01n.png' +// } +// if (desc == 'few clouds' && hours < 20) { +// icon = '02d.png' +// } +// if (desc == 'few clouds' && hours >= 20) { +// icon = '02n.png' +// } +// if (desc == 'scattered clouds' && hours < 20) { +// icon = '03d.png' +// } +// if (desc == 'scattered clouds' && hours >= 20) { +// icon = '03n.png' +// } +// if (desc == 'broken clouds' && hours < 20) { +// icon = '04d.png' +// } +// if (desc == 'broken clouds' && hours >= 20) { +// icon = '04n.png' +// } +// if (desc == 'shower rain' && hours < 20) { +// icon = '09d.png' +// } +// if (desc == 'shower rain' && hours >= 20) { +// icon = '09n.png' +// } +// if (desc == 'rain' && hours < 20) { +// icon = '10d.png' +// } +// if (desc == 'rain' && hours >= 20) { +// icon = '10n.png' +// } +// if (desc == 'thunderstorm' && hours < 20) { +// icon = '11d.png' +// } +// if (desc == 'thunderstorm' && hours >= 20) { +// icon = '11n.png' +// } +// if (desc == 'snow' && hours < 20) { +// icon = '13d.png' +// } +// if (desc == 'snow' && hours >= 20) { +// icon = '13n.png' +// } +// if (desc == 'mist' && hours < 20) { +// icon = '50d.png' +// } +// if (desc == 'mist' && hours >= 20) { +// icon = '50n.png' +// } +// if (desc.includes('clouds') && hours < 20) { +// icon = '02d.png' +// } +// if (desc.includes('clouds') && hours > 20) { +// icon = '02n.png' +// } +// if (desc.includes('drizzle') && hours < 20) { +// icon = '10d.png' +// } +// if (desc.includes('drizzle') && hours > 20) { +// icon = '10n.png' +// } +// // if (desc.includes('rain') && hours < 20) { +// // icon = '10d.png' +// // } +// if (desc.includes('rain') && hours >= 0) { +// icon = '10n.png' +// } +// return icon +// } + +city = localStorage.getItem('city') == 'Minsk' ? '' : localStorage.getItem('city') +console.log(city) + +async function getWeather(city) { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city.value}&lang=en&appid=0854c30f1d1333de1d391b6482784866&units=metric`; + const res = await fetch(url); + const data = await res.json(); + console.log(data) + let temp = document.querySelector('.temperature') + temp.innerHTML = Math.round(data.main.temp) + ' °' + 'C' + let desc = data.weather[0].description + wind.innerHTML = 'Wind speed: ' + data.wind.speed + ' m/s' + humidity.innerHTML = `Humidity: ${data.main.humidity} %` + wDesc.innerHTML = desc + // let icon = weatherPic(desc, hours) + console.log(icon) + //wIcon.innerHTML = `weather pic` + wIcon.classList.add(`owf-${data.weather[0].id}`) + document.querySelector('.weather-error').innerHTML = '' +} +getWeather(city) + +city.addEventListener('input', () => { + //curCity = city.value + city = city.value + console.log(city) + localStorage.setItem('city', city.value) + async function getWeather() { + try { + getWeather(city) + } + catch(e) { + document.querySelector('.weather-error').innerHTML = `There isn't such city or data cannot be downloaded at the moment` + if ( document.querySelector('.weather-error').innerHTML != '') { + wDesc.innerHTML= '' + temp.innerHTML = '' + humidity.innerHTML = '' + wind.innerHTML = '' + wIcon.classList.remove(wIcon.classList[wIcon.classList.length - 1]) + } + } + } + getWeather() + +}) +let datee = new Date(); +console.log(datee.toLocaleTimeString()) +let greeting = document.querySelector('.greeting') +if (hours >= 0 && hours < 6) { + greeting.innerHTML = 'Good night,' +} +// if (hours >= 6 && hours < 12) { +// greeting.innerHTML = 'Good morning,' +// } +// if (hours >= 12 && hours < 18) { +// greeting.innerHTML = 'Good afternoon,' +// } +// if (hours >= 18 && hours < 24) { +// greeting.innerHTML = 'Good evening,' +// } + + +let nam = document.querySelector('.name') +nam.value = localStorage.getItem('name') +nam.addEventListener('input', () => { + localStorage.setItem('name', nam.value) + }) + + let body = document.querySelector('body') + + + // function getLinkToImage() { + // const url = 'https://api.unsplash.com/photos/random?query=morning&client_id=pKoi4IxCJey7dbHtk4CcOcM5MrsAa23U_8mQ84Rd5hg'; + // fetch(url) + // .then(res => res.json()) + // .then(data => { + // console.log(data.urls.regular) + // body.style.backgroundImage = `url(${data.urls.regular})` + // }); + // } + + // getLinkToImage() + + async function getLinkToImage() { + let dayTime + if (hours >= 6 && hours < 12) { + dayTime = 'morning' + } + if (hours >= 12 && hours < 18) { + dayTime = 'afternoon' + } + if (hours >= 18 && hours < 24) { + dayTime = 'evening' + } + if (hours >= 0 && hours < 6) { + dayTime = 'night' + } + console.log(dayTime) + const url = `https://api.unsplash.com/photos/random?query=${dayTime}&client_id=pKoi4IxCJey7dbHtk4CcOcM5MrsAa23U_8mQ84Rd5hg`; + const res = await fetch(url); + const data = await res.json(); + console.log(data.urls.regular) + body.style.backgroundImage = `url(${data.urls.regular})` + } + + getLinkToImage() + + let r + let quote = document.querySelector('.quote') + let author = document.querySelector('.author') + function random() { + return Math.round(0 + Math.random() * (2 - 0)) + } + + async function getQuotes() { + // function random() { + // let rand = Math.round(0 + Math.random() * (2 - 0)) + // if (r !== rand) { + // r = rand + // return rand + // } + // else { + // console.log('ЗАШЛООО') + // return random() + // } + // } + + let rand = random() + + while (rand == r) { + rand = random() + } + + r = rand + + console.log(r, rand) + const quotes = 'data.json' + const res = await fetch(quotes) + const data = await res.json() + console.log(data[rand]) + quote.innerHTML = data[rand].text; + author.innerHTML = data[rand].author; + } + getQuotes() + + + document.querySelector('.change-quote').addEventListener('click', () => { + getQuotes() + }) + + + const audio = document.querySelector('audio'); + const playBtn = document.querySelector('.play'); + + function playAudio() { + audio.play(); + } + + function pauseAudio() { + audio.pause(); + } + + let times = 1 + + playBtn.addEventListener('click', () => { + if (times % 2 != 0) { + playAudio() + times++ + } + else {pauseAudio() + times++ + } + }); + + + + + + + + + + + + + diff --git a/js/settings.js b/js/settings.js new file mode 100644 index 000000000..096a5b9ea --- /dev/null +++ b/js/settings.js @@ -0,0 +1,40 @@ +export {setApp} + + + + +let setButton = document.querySelector('.settings__button') +let settings = document.querySelector('.settings') +let close = document.querySelector('.close') + +// let deleteBlock = document.querySelectorAll('.delete') +// let selectDel = document.querySelector('.select-del') +// let time = document.querySelector('.time') +// let date = document.querySelector('.date') +// let greeting = document.querySelector('.greeting-container') +// let weather = document.querySelector('.weather') +// let player = document.querySelector('.player') +// let quotes = document.querySelector('footer') +// let blocks = [time, date, greeting, weather, player, quotes, ] + +// function delBlock() { +// selectDel.onchange = () => { +// for (let i = 0; i < deleteBlock.length; i++) { +// console.log(selectDel.value) +// } +// } +// } +// delBlock() +function setApp() { + settings.style.visibility = localStorage.getItem('set') + setButton.onclick = () => { + settings.style.visibility = 'visible' + localStorage.setItem('set', 'visible') + } + close.onclick = () => { + settings.style.visibility = 'hidden' + localStorage.setItem('set', 'hidden') + } +} + +setApp() diff --git a/js/switchLang.js b/js/switchLang.js new file mode 100644 index 000000000..f7af12971 --- /dev/null +++ b/js/switchLang.js @@ -0,0 +1,30 @@ +export {language} + +let en = document.querySelector('.en') +let ru = document.querySelector('.ru') +let be = document.querySelector('.bl') + +function language() { + let obj = { + language: localStorage.getItem('lang') + } + + + + en.onclick = () => { + localStorage.setItem('lang', 'en') + location.reload() + } + ru.onclick = () => { + localStorage.setItem('lang', 'ru') + location.reload() + } + be.onclick = () => { + localStorage.setItem('lang', 'be') + location.reload() + } + + return obj.language +} + + diff --git a/js/time.js b/js/time.js new file mode 100644 index 000000000..d61fdbe54 --- /dev/null +++ b/js/time.js @@ -0,0 +1,15 @@ +export {showTime} + +let time = document.querySelector('.time') +let dateC = document.querySelector('.date') +function showTime() { + const date = new Date(); + const currentTime = date.toLocaleTimeString(); + time.textContent = currentTime + setTimeout(showTime, 1000); + const options = {month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZone: 'UTC'}; +const currentDate = date.toLocaleDateString('en-En', options); +dateC.innerHTML = currentDate + } +showTime(); + diff --git a/js/weather.js b/js/weather.js new file mode 100644 index 000000000..103618902 --- /dev/null +++ b/js/weather.js @@ -0,0 +1,118 @@ +import { language } from "./switchLang.js"; +export {getWeather} +const weatherIcon = document.querySelector('.weather-icon'); +const temperature = document.querySelector('.temperature'); +const weatherDescription = document.querySelector('.weather-description'); +let city = document.querySelector('.city') +let l = language() +let noCity +let enterCity +window.onload = function() { + getWeather() +}; +if (localStorage.getItem('city') == '') { + if (l == 'ru') { + city.value = 'Минск' + noCity = 'Похоже, такого места нет' + enterCity = 'Введите город выше' + } + if (l == 'be') { + city.value = 'Минск' + noCity = 'Падобна на тое, такога месца няма' + enterCity = 'Увядзіце горад вышэй' + } + if (l == 'en') { + city.value = 'Minsk' + noCity = `It seems like this city doesn't exist` + enterCity = 'Enter the city above' + } +} +else { + city.value = localStorage.getItem('city') +} + + + // let lang = language() + // console.log(lang) + +// let en = document.querySelector('.en') +// let ru = document.querySelector('.ru') +// let be = document.querySelector('.bl') + + + + +// let obj = { +// language: localStorage.getItem('lang') +// } + +// localStorage.setItem('lang', 'en') + +// en.onclick = () => { +// localStorage.setItem('lang', 'en') +// location.reload() +// } +// ru.onclick = () => { +// localStorage.setItem('lang', 'ru') +// location.reload() +// } +// be.onclick = () => { +// localStorage.setItem('lang', 'be') +// location.reload() +// } + +console.log(111111111, localStorage.getItem('lang')) + +let lang +if (localStorage.getItem('lang') == null) { + lang = 'en' +} +else { + lang = language() +} + +async function getWeather() { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city.value}&lang=${lang}&appid=0854c30f1d1333de1d391b6482784866&units=metric`; + const res = await fetch(url); + const data = await res.json(); + console.log(res.status) + if (res.status == 200) { + weatherIcon.style.display = 'block' + temperature.style.display = 'block' + weatherIcon.classList.add(`owf-${data.weather[0].id}`); + temperature.innerHTML = `${data.main.temp}°C`; + weatherDescription.innerHTML = data.weather[0].description; + } + // if (city.value == '') { + // weatherIcon.style.display = 'none' + // temperature.style.display = 'none' + // weatherDescription.innerHTML = `Enter any city above`; + // } + else { + weatherIcon.style.display = 'none' + temperature.style.display = 'none' + weatherDescription.innerHTML = noCity; + if (city.value == '') { + weatherDescription.innerHTML = enterCity; + } + } + + + + // else { + // city.addEventListener('change', () => { + // console.log(1) + // weatherIcon.classList.remove(`owf-${data.weather[0].id}`); + // temperature.textContent = ``; + // weatherDescription.textContent = ''; + // document.querySelector('.weather-error').innerHTML = `City not found` + // console.log(temperature.textContent) + // }) + // } + + } +city.addEventListener('input', () => { + localStorage.setItem('city', city.value) + console.log(localStorage.getItem('city')) + getWeather() +}) \ No newline at end of file diff --git a/zemf.mp3 b/zemf.mp3 new file mode 100644 index 000000000..58924fa03 Binary files /dev/null and b/zemf.mp3 differ