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 @@ + + + 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/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 @@ + + 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 @@ + + 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 @@ + + 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 @@ + + 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 @@ + + 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 @@ + + 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 @@ + + 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..dd3740faa --- /dev/null +++ b/css/style.css @@ -0,0 +1,286 @@ +@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-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; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..9a1caf55c --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + +
+ + + + + +