diff --git a/public/fonts/Fyodor-Bold.eot b/public/fonts/Fyodor-Bold.eot new file mode 100644 index 00000000..d253c67f Binary files /dev/null and b/public/fonts/Fyodor-Bold.eot differ diff --git a/public/fonts/Fyodor-Bold.woff b/public/fonts/Fyodor-Bold.woff new file mode 100644 index 00000000..68fbfd68 Binary files /dev/null and b/public/fonts/Fyodor-Bold.woff differ diff --git a/public/fonts/Fyodor-Bold.woff2 b/public/fonts/Fyodor-Bold.woff2 new file mode 100644 index 00000000..69c4bf66 Binary files /dev/null and b/public/fonts/Fyodor-Bold.woff2 differ diff --git a/public/img/gagarin/space.jpg b/public/img/gagarin/space.jpg new file mode 100644 index 00000000..511fed06 Binary files /dev/null and b/public/img/gagarin/space.jpg differ diff --git a/resources/css/app.scss b/resources/css/app.scss index c21442c3..627d0c4d 100644 --- a/resources/css/app.scss +++ b/resources/css/app.scss @@ -103,6 +103,7 @@ $utilities: ( @import 'thread'; @import 'marketing'; @import 'post'; +@import 'gagarin'; .avatar { border-radius: 10em; diff --git a/resources/css/gagarin.scss b/resources/css/gagarin.scss new file mode 100644 index 00000000..46492940 --- /dev/null +++ b/resources/css/gagarin.scss @@ -0,0 +1,181 @@ +@mixin sp-layout { + @media screen and (max-width: 750px) { + @content; + } +} + +@function random_range($min, $max) { + $rand: random(); + $random_range: $min + floor($rand * (($max - $min) + 1)); + @return $random_range; +} + +@keyframes fall { + to { + visibility: visible; + transform: translate3d(-30em, 0, 0); + } +} + +@keyframes tail-fade { + 0%, + 50% { + visibility: visible; + width: var(--star-tail-length); + opacity: 1; + } + + 70%, + 80% { + visibility: visible; + width: 0; + opacity: 0.4; + } + + 100% { + visibility: visible; + width: 0; + opacity: 0; + } +} + +@keyframes blink { + 50% { + visibility: visible; + opacity: 0.6; + } +} + +@font-face { + font-family: 'Fyodor-Bold'; + src: url('/fonts/Fyodor-Bold.eot'); + src: + url('/fonts/Fyodor-Bold.eot?#iefix') format('embedded-opentype'), + url('/fonts/Fyodor-Bold.woff2') format('woff2'), + url('/fonts/Fyodor-Bold.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +.gagarin { + background-color: #e5ddbc; + //background: url(/img/gagarin/space.jpg); + background-size: cover; + overflow: hidden; + font-family: 'Fyodor-Bold', serif !important; + position: relative; + @extend .rounded; + + svg { + display: block; + background-image: url('/img/gagarin/space.jpg'); + border-radius: 0.5rem; + background-size: cover; + } + + #ship, + #comet { + border-radius: 8px; + } + + .assets { + display: none; + } + + #timer { + color: #fff; + font-size: 2rem; + } + + .stats { + margin: 1rem; + color: rgba(255, 255, 255, 0.5); + font-size: 2rem; + } + + #message { + border-radius: 0.5rem 0.5rem 0 0; + color: #e5ddbc; + font-size: 4rem; + text-align: center; + background: #c44b43; + } + + .wrapper { + background: #c44b43; + color: #e5ddbc; + border-radius: 0.35rem; + padding: 1rem 1rem 0 1rem; + z-index: 2; + } + + .stars { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 120%; + transform: rotate(-45deg); + z-index: 1; + } + + .star { + $star-count: 50; + --star-color: var(--primary-color); + --star-tail-length: 6em; + --star-tail-height: 2px; + --star-width: calc(var(--star-tail-length) / 6); + --fall-duration: 9s; + --tail-fade-duration: var(--fall-duration); + + position: absolute; + top: var(--top-offset); + left: 0; + width: var(--star-tail-length); + height: var(--star-tail-height); + color: var(--star-color); + background: linear-gradient(45deg, #6c7a9a, transparent); + border-radius: 50%; + filter: drop-shadow(0 0 6px currentColor); + transform: translate3d(104em, 0, 0); + visibility: hidden; + animation: + fall var(--fall-duration) var(--fall-delay) linear infinite, + tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite; + + @include sp-layout { + // For mobile performance, tail-fade animation will be removed QAQ + animation: fall var(--fall-duration) var(--fall-delay) linear infinite; + } + + @for $i from 1 through $star-count { + &:nth-child(#{$i}) { + --star-tail-length: #{max(600, random(750)) / 100}em; + --top-offset: #{random(10000) / 100}vh; + --fall-duration: #{max(6000, random(12000)) / 1000}s; + --fall-delay: #{random(10000) / 1000}s; + } + } + + &::before, + &::after { + position: absolute; + content: ''; + top: 0; + left: calc(var(--star-width) / -2); + width: var(--star-width); + height: 100%; + background: linear-gradient(45deg, transparent, currentColor, transparent); + border-radius: inherit; + animation: blink 2s linear infinite; + } + + &::before { + transform: rotate(45deg); + } + + &::after { + transform: rotate(-45deg); + } + } +} diff --git a/resources/js/controllers/gagarin_controller.js b/resources/js/controllers/gagarin_controller.js new file mode 100644 index 00000000..e69de29b diff --git a/resources/views/pages/gagarin.blade.php b/resources/views/pages/gagarin.blade.php new file mode 100644 index 00000000..34b903ec --- /dev/null +++ b/resources/views/pages/gagarin.blade.php @@ -0,0 +1,285 @@ +@extends('html') +@section('title', 'Поехали') + +@section('body') + +
+ + +
+ + +
+
+

С днём космонавтики

+

Каждый День Космонавтики напоминает нам о том, что человечество всегда + стремилось к звёздам и неуклонно движется вперёд, преодолевая границы + исследований и познания. Пусть эта дата вдохновляет нас на новые открытия + и смелые шаги в неизведанные просторы Вселенной.

+
+
+
+ +
+
Космос — это наша судьба, наша мечта, наша надежда и наше будущее.
+ +
+
+
Юрий Гагарин
+ Первый космонавт +
+
+
+
+
+
+ + {{-- +
+
+
+
+
+
+ --}} + +
+
+ +
Поехали!
+ + + +
Очки: 0.0
+
+
+ + +

С пожеланиями о великих открытиях и бесконечном стремлении к небесам,
Ваше имя

+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ + +@endsection diff --git a/routes/web.php b/routes/web.php index cc5a070b..ea85c755 100644 --- a/routes/web.php +++ b/routes/web.php @@ -46,6 +46,7 @@ Route::get('/achievements', [AchievementsController::class, 'index'])->name('achievements'); Route::view('/hangman', 'pages.hangman')->name('hangman'); +Route::view('/gagarin', 'pages.gagarin')->name('gagarin'); Route::view('/editor-guide', 'pages.editor-guide')->name('editor-guide'); Route::view('/library', 'library.index')->name('library');