diff --git a/frontend/src/assets/img/app-icons/sky-flappy.svg b/frontend/src/assets/img/app-icons/sky-flappy.svg new file mode 100644 index 0000000..3a8cc0d --- /dev/null +++ b/frontend/src/assets/img/app-icons/sky-flappy.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/app-icons/sky-flappy.webp b/frontend/src/assets/img/app-icons/sky-flappy.webp index 7c21f26..5d30469 100644 Binary files a/frontend/src/assets/img/app-icons/sky-flappy.webp and b/frontend/src/assets/img/app-icons/sky-flappy.webp differ diff --git a/frontend/src/features/games/sky-flappy/SkyFlappyGlider.vue b/frontend/src/features/games/sky-flappy/SkyFlappyGlider.vue new file mode 100644 index 0000000..b572681 --- /dev/null +++ b/frontend/src/features/games/sky-flappy/SkyFlappyGlider.vue @@ -0,0 +1,15 @@ + diff --git a/frontend/src/views/apps/SkyFlappyApp.vue b/frontend/src/views/apps/SkyFlappyApp.vue index befce7d..c179efa 100644 --- a/frontend/src/views/apps/SkyFlappyApp.vue +++ b/frontend/src/views/apps/SkyFlappyApp.vue @@ -3,6 +3,7 @@ import { ChevronLeft, Pause, Play, RotateCcw, Volume2, VolumeX, Wind } from 'luc import { computed, onBeforeUnmount, ref, watch, type CSSProperties } from 'vue' import { playSkyFlappySound } from '@/features/games/sky-flappy/audio' +import SkyFlappyGlider from '@/features/games/sky-flappy/SkyFlappyGlider.vue' import { useSkyFlappyStore } from '@/features/games/sky-flappy/store' import type { SkyFlappyDesign, SkyFlappyObstacle } from '@/features/games/sky-flappy/types' import { usePhoneStore } from '@/stores/phone' @@ -113,7 +114,7 @@ onBeforeUnmount(() => {
- + {{ phone.t('Apps.skyFlappy.firstTap') }} @@ -159,7 +160,7 @@ onBeforeUnmount(() => { .flappy-app { --sky-a:#53c9ed;--sky-b:#7970df;--tower:#645bd1; position:absolute;inset:0;overflow:hidden;padding:52px 16px 27px;color:#fff;background:linear-gradient(160deg,#19375e,#433b80);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none;touch-action:manipulation; } .flappy-app--neon { --sky-a:#1b1e58;--sky-b:#7b258c;--tower:#23cbd1; }.flappy-app--storm { --sky-a:#526779;--sky-b:#24354e;--tower:#b06f64; } .flappy-header{height:55px;display:flex;align-items:center;justify-content:space-between}.flappy-header span{display:block;color:#c3d7ef;font-size:9px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase}.flappy-header h1{margin:0;font-size:24px;line-height:1}.flappy-header button,.flappy-toolbar button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #ffffff1c;border-radius:12px;color:#fff;background:#ffffff12} -.flappy-menu{height:calc(100% - 55px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.flappy-menu__hero{position:relative;width:220px;height:210px;overflow:hidden;border-radius:28px;background:linear-gradient(var(--sky-a),var(--sky-b));box-shadow:0 18px 32px #101b3b66}.flappy-menu__tower{position:absolute;top:0;bottom:0;width:50px;background:repeating-linear-gradient(180deg,var(--tower) 0 42px,#ffffff2b 43px 48px);box-shadow:inset -7px 0 12px #0003}.flappy-menu__tower--left{left:0}.flappy-menu__tower--right{right:0}.flappy-menu__trail{position:absolute;top:103px;left:45px;width:72px;height:10px;border-radius:50%;background:#ffe381;filter:blur(5px);animation:flappy-trail 1s ease-in-out infinite}.sky-glider{position:absolute;z-index:4;width:48px;height:38px;border-radius:48% 54% 48% 52%;background:linear-gradient(145deg,#48e0db,#087f9d);box-shadow:inset -5px -7px 8px #064f7066,0 0 16px #7bfff0}.sky-glider::after{position:absolute;top:10px;right:7px;width:15px;height:15px;border-radius:50%;background:#ffd75f;box-shadow:inset 3px 0 0 #fff5bf;content:""}.sky-glider i,.sky-glider span{position:absolute;left:-13px;width:24px;height:12px;border-radius:70% 20%;background:#ffbd52;transform-origin:right}.sky-glider i{top:5px;transform:rotate(20deg)}.sky-glider span{bottom:4px;transform:rotate(-18deg)}.sky-glider b{position:absolute;right:0;bottom:3px;width:9px;height:6px;border-radius:50%;background:#ff765e}.sky-glider--hero{top:83px;left:84px;animation:flappy-hero 1.1s ease-in-out infinite alternate}.flappy-menu__copy>span{color:#ffda70;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.flappy-menu__copy h2{margin:3px 0 5px;font-size:21px}.flappy-menu__copy p{max-width:275px;margin:0;color:#c0c8df;font-size:10px;line-height:1.4}.flappy-record{width:100%;display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border:1px solid #ffffff14;border-radius:13px;background:#ffffff0c}.flappy-record span{color:#bdc8df;font-size:9px;font-weight:800;text-transform:uppercase}.flappy-record strong{font-size:19px}.flappy-designs{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.flappy-designs button{display:grid;place-items:center;gap:3px;padding:7px 3px;border:1px solid #ffffff12;border-radius:12px;color:#ccd4e9;background:#ffffff0a;font-size:8px}.flappy-designs button.active{border-color:#ffdd72;color:#fff;background:#ffffff1b}.flappy-designs i{width:26px;height:13px;border-radius:8px}.flappy-designs__dawn{background:linear-gradient(90deg,#58d6ee,#ff9b80)}.flappy-designs__neon{background:linear-gradient(90deg,#24255f,#ef55ca)}.flappy-designs__storm{background:linear-gradient(90deg,#71899b,#253750)}.flappy-primary,.flappy-secondary{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:14px;font-size:11px;font-weight:850}.flappy-primary{border:0;color:#173353;background:linear-gradient(135deg,#ffe16c,#ff9d68)}.flappy-secondary{border:1px solid #ffffff18;color:#fff;background:#ffffff0b}.flappy-menu>p,.flappy-game__hint{margin:0;color:#aeb9d2;font-size:9px} +.flappy-menu{height:calc(100% - 55px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.flappy-menu__hero{position:relative;width:220px;height:210px;overflow:hidden;border-radius:28px;background:linear-gradient(var(--sky-a),var(--sky-b));box-shadow:0 18px 32px #101b3b66}.flappy-menu__tower{position:absolute;top:0;bottom:0;width:50px;background:repeating-linear-gradient(180deg,var(--tower) 0 42px,#ffffff2b 43px 48px);box-shadow:inset -7px 0 12px #0003}.flappy-menu__tower--left{left:0}.flappy-menu__tower--right{right:0}.flappy-menu__trail{position:absolute;top:103px;left:45px;width:72px;height:10px;border-radius:50%;background:#ffe381;filter:blur(5px);animation:flappy-trail 1s ease-in-out infinite}.sky-glider{position:absolute;z-index:4;width:58px;height:40px;overflow:visible;filter:drop-shadow(0 4px 5px #071d3e66) drop-shadow(0 0 7px #72fff088)}.sky-glider :deep(path){stroke-linejoin:round}.sky-glider :deep(.sky-flappy-glider__trail){fill:#ffb14a}.sky-glider :deep(.sky-flappy-glider__lower-wing){fill:#0aa2b7;stroke:#063653;stroke-width:2}.sky-glider :deep(.sky-flappy-glider__upper-wing){fill:#62f4e8;stroke:#063653;stroke-width:2}.sky-glider :deep(.sky-flappy-glider__body){fill:#20d7d2;stroke:#063653;stroke-width:2}.sky-glider :deep(.sky-flappy-glider__cockpit){fill:#fff0a6;stroke:#063653;stroke-width:1.5}.sky-glider :deep(.sky-flappy-glider__keel){fill:#087b98;stroke:#063653;stroke-width:2}.sky-glider--hero{top:84px;left:81px;animation:flappy-hero 1.1s ease-in-out infinite alternate}.sky-glider--hero :deep(.sky-flappy-glider__upper-wing),.sky-glider--hero :deep(.sky-flappy-glider__lower-wing){transform-box:fill-box;transform-origin:center;animation:flappy-glider-wing 1.1s ease-in-out infinite alternate}.flappy-menu__copy>span{color:#ffda70;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.flappy-menu__copy h2{margin:3px 0 5px;font-size:21px}.flappy-menu__copy p{max-width:275px;margin:0;color:#c0c8df;font-size:10px;line-height:1.4}.flappy-record{width:100%;display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border:1px solid #ffffff14;border-radius:13px;background:#ffffff0c}.flappy-record span{color:#bdc8df;font-size:9px;font-weight:800;text-transform:uppercase}.flappy-record strong{font-size:19px}.flappy-designs{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.flappy-designs button{display:grid;place-items:center;gap:3px;padding:7px 3px;border:1px solid #ffffff12;border-radius:12px;color:#ccd4e9;background:#ffffff0a;font-size:8px}.flappy-designs button.active{border-color:#ffdd72;color:#fff;background:#ffffff1b}.flappy-designs i{width:26px;height:13px;border-radius:8px}.flappy-designs__dawn{background:linear-gradient(90deg,#58d6ee,#ff9b80)}.flappy-designs__neon{background:linear-gradient(90deg,#24255f,#ef55ca)}.flappy-designs__storm{background:linear-gradient(90deg,#71899b,#253750)}.flappy-primary,.flappy-secondary{width:100%;min-height:43px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:14px;font-size:11px;font-weight:850}.flappy-primary{border:0;color:#173353;background:linear-gradient(135deg,#ffe16c,#ff9d68)}.flappy-secondary{border:1px solid #ffffff18;color:#fff;background:#ffffff0b}.flappy-menu>p,.flappy-game__hint{margin:0;color:#aeb9d2;font-size:9px} .flappy-game{position:relative;height:calc(100% - 55px)}.flappy-toolbar{height:47px;display:grid;grid-template-columns:36px 1fr 1fr 36px;align-items:center;gap:7px}.flappy-toolbar div{display:grid;justify-items:center}.flappy-toolbar span{color:#bac9df;font-size:8px;font-weight:850;text-transform:uppercase}.flappy-toolbar strong{font-size:16px}.flappy-stage{position:relative;width:100%;height:500px;display:block;overflow:hidden;padding:0;border:1px solid #ffffff1c;border-radius:22px;background:linear-gradient(var(--sky-a),var(--sky-b));box-shadow:inset 0 0 35px #15244c55,0 16px 30px #10193477;touch-action:manipulation}.flappy-clouds i{position:absolute;width:80px;height:24px;border-radius:50%;background:#ffffff30;filter:blur(1px);animation:cloud-drift 7s linear infinite}.flappy-clouds i:nth-child(1){top:10%;left:15%}.flappy-clouds i:nth-child(2){top:25%;left:65%;animation-delay:-2s}.flappy-clouds i:nth-child(3){top:45%;left:35%;animation-delay:-4s}.flappy-clouds i:nth-child(4){top:68%;left:78%}.flappy-clouds i:nth-child(5){top:78%;left:4%;animation-delay:-3s}.flappy-obstacle{position:absolute;z-index:2;top:0;bottom:0}.flappy-obstacle span{position:absolute;right:0;left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--tower),white 20%),var(--tower));box-shadow:inset -6px 0 8px #0003,0 0 13px #17204e55}.flappy-obstacle span::after{position:absolute;right:-4px;left:-4px;height:14px;border-radius:6px;background:color-mix(in srgb,var(--tower),white 10%);box-shadow:inset 0 3px 0 #ffffff25;content:""}.flappy-obstacle__top{top:0;border-radius:0 0 7px 7px}.flappy-obstacle__top::after{bottom:0}.flappy-obstacle__bottom{bottom:0;border-radius:7px 7px 0 0}.flappy-obstacle__bottom::after{top:0}.sky-glider--player{left:23%;animation:flappy-wing .2s ease-out}.flappy-ready{position:absolute;z-index:6;top:36%;left:50%;padding:9px 15px;border-radius:17px;background:#15284fbb;font-size:11px;transform:translateX(-50%)}.flappy-horizon{position:absolute;z-index:3;right:0;bottom:0;left:0;height:12px;background:#263a62;box-shadow:0 -5px 14px #ffffff26}.flappy-stage--crashed{animation:flappy-crash .55s ease-out}.flappy-game__hint{margin-top:8px;text-align:center}.flappy-overlay{position:absolute;z-index:12;inset:47px 0 25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px;border-radius:22px;background:#101a38dc;backdrop-filter:blur(7px);text-align:center}.flappy-overlay>svg{color:#ffdc71}.flappy-overlay>span{color:#ffad78;font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.flappy-overlay h2{margin:0 0 5px;font-size:26px} -@keyframes flappy-hero{from{transform:translateY(7px) rotate(-5deg)}to{transform:translateY(-8px) rotate(7deg)}}@keyframes flappy-trail{0%,100%{opacity:.25;transform:scaleX(.6)}50%{opacity:.9;transform:scaleX(1)}}@keyframes flappy-wing{from{filter:brightness(1.5);scale:1.08}to{filter:brightness(1);scale:1}}@keyframes cloud-drift{from{translate:90px 0}to{translate:-160px 0}}@keyframes flappy-crash{0%,100%{transform:translate(0)}25%{transform:translate(-5px,3px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px)}}button:active{transform:scale(.97)}@media(prefers-reduced-motion:reduce){.sky-glider,.flappy-menu__trail,.flappy-clouds i,.flappy-stage{animation:none}} +@keyframes flappy-hero{from{transform:translateY(7px) rotate(-5deg)}to{transform:translateY(-8px) rotate(7deg)}}@keyframes flappy-trail{0%,100%{opacity:.25;transform:scaleX(.6)}50%{opacity:.9;transform:scaleX(1)}}@keyframes flappy-wing{from{filter:brightness(1.5) drop-shadow(0 4px 5px #071d3e66);scale:1.1}to{filter:brightness(1) drop-shadow(0 4px 5px #071d3e66);scale:1}}@keyframes flappy-glider-wing{from{transform:scaleY(.72)}to{transform:scaleY(1.08)}}@keyframes cloud-drift{from{translate:90px 0}to{translate:-160px 0}}@keyframes flappy-crash{0%,100%{transform:translate(0)}25%{transform:translate(-5px,3px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px)}}button:active{transform:scale(.97)}@media(prefers-reduced-motion:reduce){.sky-glider,.sky-glider :deep(path),.flappy-menu__trail,.flappy-clouds i,.flappy-stage{animation:none}} diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html index ba95d5e..fe78b85 100644 --- a/sky_phone/source/html/index.html +++ b/sky_phone/source/html/index.html @@ -4,7 +4,7 @@ Sky Phone - +