Furries.tech/BoopHub_TimeWeb
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add initial styles, logo, and language support

Browse Source 
- Added custom font 'Onest' and main CSS styles for the application.
- Created a logo SVG file for branding.
- Implemented language translations for Russian and English.
- Developed JavaScript functions for language selection and social link creation.
- Set up particle effects for a dynamic background.
- Included download button functionality with a specified URL.
This commit is contained in:
Mr1rbis
2025-08-05 10:43:07 +07:00
parent 02b8c783e8
commit 25df9ae73f
5 changed files with 630 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
Onest.ttf → src/css/Onest.ttf
View File

764
main.css → src/css/main.css
View File

@@ -1,383 +1,383 @@
@font-face {
font-family: Onest;
src: url(./Onest.ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Onest', sans-serif;
background: #181818;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
.container {
text-align: center;
max-width: 50rem;
padding: 2rem;
position: relative;
}
.logo {
width: 7.5rem;
height: 7.5rem;
background: #cf6a3e;
border-radius: 1.25rem;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 2.5rem;
font-weight: bold;
color: #fff;
box-shadow:
0 0 1.875rem rgba(207, 106, 62, 0.5),
0 0 3.75rem rgba(207, 106, 62, 0.3),
0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
animation: logoGlow 3s ease-in-out infinite alternate;
}
.logo-img {
width: 105%;
height: auto;
object-fit: cover;
/* Сохранить пропорции */
border-radius: 0.625rem;
/* Слегка скруглить углы изображения */
}
@keyframes logoGlow {
from {
box-shadow:
0 0 1.875rem rgba(207, 106, 62, 0.5),
0 0 3.75rem rgba(207, 106, 62, 0.3),
0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
}
to {
box-shadow:
0 0 2.5rem rgba(207, 106, 62, 0.7),
0 0 5rem rgba(207, 106, 62, 0.4),
0 0.9375rem 2.5rem rgba(0, 0, 0, 0.4);
}
}
h1 {
font-size: 4rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, #cf6a3e, #ff8c5a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 1.875rem rgba(207, 106, 62, 0.5);
animation: textGlow 2s ease-in-out infinite alternate;
}
@keyframes textGlow {
from {
filter: drop-shadow(0 0 0.625rem rgba(207, 106, 62, 0.3));
}
to {
filter: drop-shadow(0 0 1.25rem rgba(207, 106, 62, 0.6));
}
}
.subtitle {
font-size: 1.2rem;
color: #aaa;
margin-bottom: 3rem;
max-width: 31.25rem;
margin-left: auto;
margin-right: auto;
}
.download-btn {
background: linear-gradient(45deg, #cf6a3e, #ff8c5a);
color: white;
padding: 0.9375rem 2.5rem;
border: none;
border-radius: 3.125rem;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin-bottom: 3rem;
transition: all 0.3s ease;
box-shadow:
0 0.3125rem 0.9375rem rgba(207, 106, 62, 0.4),
0 0 1.25rem rgba(207, 106, 62, 0.2);
position: relative;
overflow: hidden;
}
.download-btn:hover {
transform: translateY(-0.1875rem);
box-shadow:
0 0.5rem 1.5625rem rgba(207, 106, 62, 0.6),
0 0 1.875rem rgba(207, 106, 62, 0.4);
}
.download-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.download-btn:hover:before {
left: 100%;
}
.beta-notice {
font-size: 0.875rem;
color: #888;
margin-bottom: 3rem;
margin-top: -1.5rem;
font-style: italic;
opacity: 0.8;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.social-btn {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.25rem;
border-radius: 1.5625rem;
text-decoration: none;
color: white;
font-weight: 500;
transition: all 0.3s ease;
border: 0.125rem solid transparent;
position: relative;
}
.social-btn:hover {
transform: translateY(-0.125rem);
border-color: rgba(255, 255, 255, 0.2);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.1875rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.social-icon img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.1875rem;
}
/* Платформо-специфичные стили */
.platform-github {
background-color: #333;
}
.platform-github:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(51, 51, 51, 0.4);
}
.platform-gitea {
background-color: #609926;
}
.platform-gitea:hover {
box-shadow: 0 0.3125rem 0.9375rem #47721c;
}
.platform-twitter {
background-color: #1da1f2;
}
.platform-twitter:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(29, 161, 242, 0.4);
}
.platform-instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.platform-instagram:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(225, 48, 108, 0.4);
}
.platform-youtube {
background-color: #ff0000;
}
.platform-youtube:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(255, 0, 0, 0.4);
}
.platform-telegram {
background-color: #0088cc;
}
.platform-telegram:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(0, 136, 204, 0.4);
}
.platform-discord {
background-color: #5865f2;
}
.platform-discord:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(88, 101, 242, 0.4);
}
.platform-facebook {
background-color: #1877f2;
}
.platform-facebook:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(24, 119, 242, 0.4);
}
.platform-linkedin {
background-color: #0077b5;
}
.platform-linkedin:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(0, 119, 181, 0.4);
}
.platform-tiktok {
background: linear-gradient(45deg, #ff0050, #00f2ea);
}
.platform-tiktok:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(255, 0, 80, 0.4);
}
.language-selector {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 100;
}
.language-select {
background: rgba(24, 24, 24, 0.9);
border: 0.125rem solid #cf6a3e;
border-radius: 1.5625rem;
color: #fff;
padding: 0.5rem 0.9375rem;
font-size: 0.875rem;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 0 0.9375rem rgba(207, 106, 62, 0.3);
}
.language-select:hover {
background: rgba(207, 106, 62, 0.2);
box-shadow: 0 0 1.25rem rgba(207, 106, 62, 0.5);
}
.language-select option {
background: #181818;
color: #fff;
padding: 0.3125rem;
}
/* RTL поддержка для арабского */
.rtl {
direction: rtl;
text-align: right;
}
.rtl .language-selector {
right: auto;
left: 1.25rem;
}
.rtl .container {
text-align: center;
/* Центрирование для основного контента */
}
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
width: 0.125rem;
height: 0.125rem;
background: #cf6a3e;
border-radius: 50%;
animation: float 6s ease-in-out infinite;
opacity: 0.3;
}
@keyframes float {
0%,
100% {
transform: translateY(0rem) rotate(0deg);
}
50% {
transform: translateY(-1.25rem) rotate(180deg);
}
}
@media (max-width: 48rem) {
h1 {
font-size: 2.5rem;
}
.container {
padding: 1rem;
}
.social-links {
flex-direction: column;
align-items: center;
}
.social-btn {
width: 12.5rem;
justify-content: center;
}
@font-face {
font-family: Onest;
src: url(./Onest.ttf);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Onest', sans-serif;
background: #181818;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
.container {
text-align: center;
max-width: 50rem;
padding: 2rem;
position: relative;
}
.logo {
width: 7.5rem;
height: 7.5rem;
background: #cf6a3e;
border-radius: 1.25rem;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 2.5rem;
font-weight: bold;
color: #fff;
box-shadow:
0 0 1.875rem rgba(207, 106, 62, 0.5),
0 0 3.75rem rgba(207, 106, 62, 0.3),
0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
animation: logoGlow 3s ease-in-out infinite alternate;
}
.logo-img {
width: 105%;
height: auto;
object-fit: cover;
/* Сохранить пропорции */
border-radius: 0.625rem;
/* Слегка скруглить углы изображения */
}
@keyframes logoGlow {
from {
box-shadow:
0 0 1.875rem rgba(207, 106, 62, 0.5),
0 0 3.75rem rgba(207, 106, 62, 0.3),
0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
}
to {
box-shadow:
0 0 2.5rem rgba(207, 106, 62, 0.7),
0 0 5rem rgba(207, 106, 62, 0.4),
0 0.9375rem 2.5rem rgba(0, 0, 0, 0.4);
}
}
h1 {
font-size: 4rem;
margin-bottom: 1rem;
background: linear-gradient(45deg, #cf6a3e, #ff8c5a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 1.875rem rgba(207, 106, 62, 0.5);
animation: textGlow 2s ease-in-out infinite alternate;
}
@keyframes textGlow {
from {
filter: drop-shadow(0 0 0.625rem rgba(207, 106, 62, 0.3));
}
to {
filter: drop-shadow(0 0 1.25rem rgba(207, 106, 62, 0.6));
}
}
.subtitle {
font-size: 1.2rem;
color: #aaa;
margin-bottom: 3rem;
max-width: 31.25rem;
margin-left: auto;
margin-right: auto;
}
.download-btn {
background: linear-gradient(45deg, #cf6a3e, #ff8c5a);
color: white;
padding: 0.9375rem 2.5rem;
border: none;
border-radius: 3.125rem;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
text-decoration: none;
display: inline-block;
margin-bottom: 3rem;
transition: all 0.3s ease;
box-shadow:
0 0.3125rem 0.9375rem rgba(207, 106, 62, 0.4),
0 0 1.25rem rgba(207, 106, 62, 0.2);
position: relative;
overflow: hidden;
}
.download-btn:hover {
transform: translateY(-0.1875rem);
box-shadow:
0 0.5rem 1.5625rem rgba(207, 106, 62, 0.6),
0 0 1.875rem rgba(207, 106, 62, 0.4);
}
.download-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.download-btn:hover:before {
left: 100%;
}
.beta-notice {
font-size: 0.875rem;
color: #888;
margin-bottom: 3rem;
margin-top: -1.5rem;
font-style: italic;
opacity: 0.8;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
}
.social-btn {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1.25rem;
border-radius: 1.5625rem;
text-decoration: none;
color: white;
font-weight: 500;
transition: all 0.3s ease;
border: 0.125rem solid transparent;
position: relative;
}
.social-btn:hover {
transform: translateY(-0.125rem);
border-color: rgba(255, 255, 255, 0.2);
}
.social-icon {
width: 1.25rem;
height: 1.25rem;
border-radius: 0.1875rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.social-icon img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.1875rem;
}
/* Платформо-специфичные стили */
.platform-github {
background-color: #333;
}
.platform-github:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(51, 51, 51, 0.4);
}
.platform-gitea {
background-color: #609926;
}
.platform-gitea:hover {
box-shadow: 0 0.3125rem 0.9375rem #47721c;
}
.platform-twitter {
background-color: #1da1f2;
}
.platform-twitter:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(29, 161, 242, 0.4);
}
.platform-instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.platform-instagram:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(225, 48, 108, 0.4);
}
.platform-youtube {
background-color: #ff0000;
}
.platform-youtube:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(255, 0, 0, 0.4);
}
.platform-telegram {
background-color: #0088cc;
}
.platform-telegram:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(0, 136, 204, 0.4);
}
.platform-discord {
background-color: #5865f2;
}
.platform-discord:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(88, 101, 242, 0.4);
}
.platform-facebook {
background-color: #1877f2;
}
.platform-facebook:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(24, 119, 242, 0.4);
}
.platform-linkedin {
background-color: #0077b5;
}
.platform-linkedin:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(0, 119, 181, 0.4);
}
.platform-tiktok {
background: linear-gradient(45deg, #ff0050, #00f2ea);
}
.platform-tiktok:hover {
box-shadow: 0 0.3125rem 0.9375rem rgba(255, 0, 80, 0.4);
}
.language-selector {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 100;
}
.language-select {
background: rgba(24, 24, 24, 0.9);
border: 0.125rem solid #cf6a3e;
border-radius: 1.5625rem;
color: #fff;
padding: 0.5rem 0.9375rem;
font-size: 0.875rem;
cursor: pointer;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 0 0.9375rem rgba(207, 106, 62, 0.3);
}
.language-select:hover {
background: rgba(207, 106, 62, 0.2);
box-shadow: 0 0 1.25rem rgba(207, 106, 62, 0.5);
}
.language-select option {
background: #181818;
color: #fff;
padding: 0.3125rem;
}
/* RTL поддержка для арабского */
.rtl {
direction: rtl;
text-align: right;
}
.rtl .language-selector {
right: auto;
left: 1.25rem;
}
.rtl .container {
text-align: center;
/* Центрирование для основного контента */
}
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
width: 0.125rem;
height: 0.125rem;
background: #cf6a3e;
border-radius: 50%;
animation: float 6s ease-in-out infinite;
opacity: 0.3;
}
@keyframes float {
0%,
100% {
transform: translateY(0rem) rotate(0deg);
}
50% {
transform: translateY(-1.25rem) rotate(180deg);
}
}
@media (max-width: 48rem) {
h1 {
font-size: 2.5rem;
}
.container {
padding: 1rem;
}
.social-links {
flex-direction: column;
align-items: center;
}
.social-btn {
width: 12.5rem;
justify-content: center;
}
}

36
logo.svg → src/icons/logo.svg
View File

@@ -1,18 +1,18 @@
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.9518 98.8645C69.5048 95.8063 63.51 89.9345 59.1066 90.9131C52.99 91.117 30.025 71.9603 29.1356 62.1653C28.5253 55.4458 28.5244 55.4351 30.3589 50.5439C32.0002 48.5002 35.4309 48.0136 40.755 47.5904C49.9495 46.8597 62.3486 45.8742 65.8347 34.6409C61.5532 36.6798 52.9911 40.1458 51.1556 37.6992C65.2602 34.1731 65.2315 8.25037 65.224 1.41687L65.2237 1H127V127.001H113.544C109.874 122.107 101.555 112.076 97.6407 111.098C96.4512 110.8 93.7072 110.901 90.1823 111.029C79.2073 111.43 60.661 112.108 57.8832 101.923C61.1456 100.7 68.5266 98.3752 71.9518 98.8645Z" fill="#73558F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.1066 90.9131C63.51 89.9345 69.5048 95.8063 71.9518 98.8645C68.5266 98.3752 61.1456 100.7 57.8832 101.923C55.0289 102.535 49.4424 102.657 49.9318 98.2529C50.4211 93.849 56.2522 91.5247 59.1066 90.9131Z" fill="#8E3D3D"/>
<path d="M59.1066 90.9131C63.51 89.9345 69.5048 95.8063 71.9518 98.8645C68.5266 98.3752 61.1456 100.7 57.8832 101.923M59.1066 90.9131C52.99 91.117 30.025 71.9603 29.1356 62.1653M59.1066 90.9131C56.2522 91.5247 50.4211 93.849 49.9318 98.2529C49.4424 102.657 55.0289 102.535 57.8832 101.923M29.1356 62.1653C28.5253 55.4458 28.5244 55.4351 30.3589 50.5439M29.1356 62.1653C28.5246 55.4372 28.5236 55.4371 30.3589 50.5439M30.3589 50.5439C32.0002 48.5002 35.4309 48.0136 40.755 47.5904C49.9495 46.8597 62.3486 45.8742 65.8347 34.6409C61.5532 36.6798 52.9911 40.1458 51.1556 37.6992C65.2602 34.1731 65.2315 8.25037 65.224 1.41687L65.2237 1M65.2237 1H127M65.2237 1C65.2237 1 108.243 1 127 1M127 1V127.001H113.544C109.874 122.107 101.555 112.076 97.6407 111.098C96.4512 110.8 93.7072 110.901 90.1823 111.029C79.2073 111.43 60.661 112.108 57.8832 101.923" stroke="#28262B" stroke-width="1.2233"/>
<path d="M47.5002 64.0002C49.9002 58.4002 46.5002 47.1004 44.0002 47.3003C41.5002 47.5002 41.0002 47.5002 36.5002 48.0002C29.0295 48.8302 30.0903 51.7748 29.0001 54.5002C28.2001 56.5002 35.6668 71.0003 39.5002 78.0003C41.1669 75.667 45.1002 69.6003 47.5002 64.0002Z" fill="#170924" stroke="#28262B"/>
<path d="M40 78L48 64.5C48 64.5 55.6522 64.6053 60.5 64C62.8572 63.7057 64.1698 63.4617 66.5 63C71.0528 62.0978 78 60 78 60L90 56.5L107.5 52L111 51L115.5 49.5L119.5 48L124 46.5L127 45.5V126.5H113C113 126.5 110.899 123.732 109.5 122C107.238 119.199 103.5 115 103.5 115C103.5 115 100.439 112.241 98.5 111.5C97.3904 111.076 96.5 111 96.5 111H89.5C85.79 111 83.7089 111.09 80 111C80 111 73.5725 110.617 69.5 110L69.4626 109.994C67.326 109.67 65.9906 109.468 64 108.5C61.5043 107.286 59.5 105 58.5 103.5C58.0668 102.85 57.8752 102.469 58.5 102C60.5 100.5 66.5 99.5 66.5 99.5L72.5 99C72.5 99 69.3167 95.749 67 94C64.9681 92.466 63.9788 91.5805 61.5 91C59.7889 90.5993 58.6417 91.1567 57 90.5C49.5 87.5 40 78 40 78Z" fill="#8E8E8E" stroke="#28262B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M126.5 37C126.5 37 117.406 32.1258 116 26.5C115.337 23.848 115.5 17 115.5 17L126.5 29.5V37Z" fill="#507891"/>
<path d="M46 48C46.0953 48.2042 46.1924 48.4104 46.2907 48.6191C47.3957 50.9657 48.6441 53.6164 49 57C49.3071 59.9193 48.5 64.5 48.5 64.5L59.5 64L74 61L92 55.5L108 51.5L115.5 49L126.5 45.5V39.5C126.5 39.5 117.096 37.6605 116.5 37.5C113.86 36.7893 109.5 37.5 109.5 37.5C109.5 37.5 108.469 36.0302 107.5 35.5C106.757 35.0933 106.118 35.0954 105.423 35.0976C104.985 35.099 104.524 35.1005 104 35C103.693 34.9412 103.411 34.8907 103.145 34.843C102.038 34.6447 101.2 34.4947 100 34C98.297 33.2977 97.4131 32.6817 96 31.5C94.4077 30.1684 92.5 27.5 92.5 27.5C92.5 27.5 90.5982 29.4304 90 31C89.4394 32.4711 89.5 35 89.5 35H87.5C87.5 35 85.2942 34.5602 84 35C82.556 35.4907 81 37.5 81 37.5C81 37.5 78.6268 40.0054 77 41.5C76.1145 42.3136 75.461 42.8578 74.7167 43.4775C74.3469 43.7855 73.9545 44.1122 73.5 44.5C72.6228 45.2485 71.9341 45.9688 71.2831 46.6495C70.0569 47.9319 68.9648 49.074 67 50C64.9861 50.9492 63.726 51.5356 61.5 51.5C60.3124 51.481 59.6473 51.3072 58.5 51C56.6423 50.5026 55.5287 50.1669 54 49C53.122 48.3298 52 47 52 47L46 48Z" fill="#507891"/>
<path d="M126.5 39.5C126.5 39.5 117.096 37.6605 116.5 37.5C113.86 36.7893 109.5 37.5 109.5 37.5C109.5 37.5 108.469 36.0302 107.5 35.5C106.757 35.0933 106.118 35.0954 105.423 35.0976C104.985 35.099 104.524 35.1005 104 35C103.693 34.9412 103.411 34.8907 103.145 34.843C102.038 34.6447 101.2 34.4947 100 34C98.297 33.2977 97.4131 32.6817 96 31.5C94.4077 30.1684 92.5 27.5 92.5 27.5C92.5 27.5 90.5982 29.4304 90 31C89.4394 32.4711 89.5 35 89.5 35H87.5C87.5 35 85.2942 34.5602 84 35C82.556 35.4907 81 37.5 81 37.5C81 37.5 78.6268 40.0054 77 41.5C76.1145 42.3136 75.461 42.8578 74.7167 43.4775C74.3469 43.7855 73.9545 44.1122 73.5 44.5C72.6228 45.2485 71.9341 45.9688 71.2831 46.6495C70.0569 47.9319 68.9648 49.074 67 50C64.9861 50.9492 63.726 51.5356 61.5 51.5C60.3124 51.481 59.6473 51.3072 58.5 51C56.6423 50.5026 55.5287 50.1669 54 49C53.122 48.3298 52 47 52 47L46 48C46.0953 48.2042 46.1924 48.4104 46.2907 48.6191C47.3957 50.9657 48.6441 53.6164 49 57C49.3071 59.9193 48.5 64.5 48.5 64.5L59.5 64L74 61L92 55.5L108 51.5L115.5 49L126.5 45.5V39.5ZM126.5 39.5V37M126.5 37C126.5 37 117.406 32.1258 116 26.5C115.337 23.848 115.5 17 115.5 17L126.5 29.5V37Z" stroke="#28262B"/>
<path d="M21.1846 62.1656C17.7594 66.0802 6.30104 76.0297 1.00005 80.5152V127.001H35.8643C35.8643 125.043 33.4177 122.515 32.1944 121.496C37.5769 108.773 27.9128 98.2529 22.4079 94.583C43.8158 81.1266 49.9323 57.884 43.8158 52.3791C37.6993 46.8743 25.4662 57.2724 21.1846 62.1656Z" fill="url(#paint0_linear_0_1)" stroke="#28262B" stroke-width="1.2233"/>
<path d="M59 71.5C59 71.5 78.5 55 95 51M68 73.5C68 73.5 75.5 66.5 88.5 65M72.5 77C72.5 77 87.5 78.5 96 73.5" stroke="#28262B"/>
<defs>
<linearGradient id="paint0_linear_0_1" x1="17.5147" y1="66.4469" x2="56.6605" y2="79.9033" gradientUnits="userSpaceOnUse">
<stop stop-color="#D4B18E"/>
<stop offset="1" stop-color="#886541"/>
</linearGradient>
</defs>
</svg>
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M71.9518 98.8645C69.5048 95.8063 63.51 89.9345 59.1066 90.9131C52.99 91.117 30.025 71.9603 29.1356 62.1653C28.5253 55.4458 28.5244 55.4351 30.3589 50.5439C32.0002 48.5002 35.4309 48.0136 40.755 47.5904C49.9495 46.8597 62.3486 45.8742 65.8347 34.6409C61.5532 36.6798 52.9911 40.1458 51.1556 37.6992C65.2602 34.1731 65.2315 8.25037 65.224 1.41687L65.2237 1H127V127.001H113.544C109.874 122.107 101.555 112.076 97.6407 111.098C96.4512 110.8 93.7072 110.901 90.1823 111.029C79.2073 111.43 60.661 112.108 57.8832 101.923C61.1456 100.7 68.5266 98.3752 71.9518 98.8645Z" fill="#73558F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M59.1066 90.9131C63.51 89.9345 69.5048 95.8063 71.9518 98.8645C68.5266 98.3752 61.1456 100.7 57.8832 101.923C55.0289 102.535 49.4424 102.657 49.9318 98.2529C50.4211 93.849 56.2522 91.5247 59.1066 90.9131Z" fill="#8E3D3D"/>
<path d="M59.1066 90.9131C63.51 89.9345 69.5048 95.8063 71.9518 98.8645C68.5266 98.3752 61.1456 100.7 57.8832 101.923M59.1066 90.9131C52.99 91.117 30.025 71.9603 29.1356 62.1653M59.1066 90.9131C56.2522 91.5247 50.4211 93.849 49.9318 98.2529C49.4424 102.657 55.0289 102.535 57.8832 101.923M29.1356 62.1653C28.5253 55.4458 28.5244 55.4351 30.3589 50.5439M29.1356 62.1653C28.5246 55.4372 28.5236 55.4371 30.3589 50.5439M30.3589 50.5439C32.0002 48.5002 35.4309 48.0136 40.755 47.5904C49.9495 46.8597 62.3486 45.8742 65.8347 34.6409C61.5532 36.6798 52.9911 40.1458 51.1556 37.6992C65.2602 34.1731 65.2315 8.25037 65.224 1.41687L65.2237 1M65.2237 1H127M65.2237 1C65.2237 1 108.243 1 127 1M127 1V127.001H113.544C109.874 122.107 101.555 112.076 97.6407 111.098C96.4512 110.8 93.7072 110.901 90.1823 111.029C79.2073 111.43 60.661 112.108 57.8832 101.923" stroke="#28262B" stroke-width="1.2233"/>
<path d="M47.5002 64.0002C49.9002 58.4002 46.5002 47.1004 44.0002 47.3003C41.5002 47.5002 41.0002 47.5002 36.5002 48.0002C29.0295 48.8302 30.0903 51.7748 29.0001 54.5002C28.2001 56.5002 35.6668 71.0003 39.5002 78.0003C41.1669 75.667 45.1002 69.6003 47.5002 64.0002Z" fill="#170924" stroke="#28262B"/>
<path d="M40 78L48 64.5C48 64.5 55.6522 64.6053 60.5 64C62.8572 63.7057 64.1698 63.4617 66.5 63C71.0528 62.0978 78 60 78 60L90 56.5L107.5 52L111 51L115.5 49.5L119.5 48L124 46.5L127 45.5V126.5H113C113 126.5 110.899 123.732 109.5 122C107.238 119.199 103.5 115 103.5 115C103.5 115 100.439 112.241 98.5 111.5C97.3904 111.076 96.5 111 96.5 111H89.5C85.79 111 83.7089 111.09 80 111C80 111 73.5725 110.617 69.5 110L69.4626 109.994C67.326 109.67 65.9906 109.468 64 108.5C61.5043 107.286 59.5 105 58.5 103.5C58.0668 102.85 57.8752 102.469 58.5 102C60.5 100.5 66.5 99.5 66.5 99.5L72.5 99C72.5 99 69.3167 95.749 67 94C64.9681 92.466 63.9788 91.5805 61.5 91C59.7889 90.5993 58.6417 91.1567 57 90.5C49.5 87.5 40 78 40 78Z" fill="#8E8E8E" stroke="#28262B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M126.5 37C126.5 37 117.406 32.1258 116 26.5C115.337 23.848 115.5 17 115.5 17L126.5 29.5V37Z" fill="#507891"/>
<path d="M46 48C46.0953 48.2042 46.1924 48.4104 46.2907 48.6191C47.3957 50.9657 48.6441 53.6164 49 57C49.3071 59.9193 48.5 64.5 48.5 64.5L59.5 64L74 61L92 55.5L108 51.5L115.5 49L126.5 45.5V39.5C126.5 39.5 117.096 37.6605 116.5 37.5C113.86 36.7893 109.5 37.5 109.5 37.5C109.5 37.5 108.469 36.0302 107.5 35.5C106.757 35.0933 106.118 35.0954 105.423 35.0976C104.985 35.099 104.524 35.1005 104 35C103.693 34.9412 103.411 34.8907 103.145 34.843C102.038 34.6447 101.2 34.4947 100 34C98.297 33.2977 97.4131 32.6817 96 31.5C94.4077 30.1684 92.5 27.5 92.5 27.5C92.5 27.5 90.5982 29.4304 90 31C89.4394 32.4711 89.5 35 89.5 35H87.5C87.5 35 85.2942 34.5602 84 35C82.556 35.4907 81 37.5 81 37.5C81 37.5 78.6268 40.0054 77 41.5C76.1145 42.3136 75.461 42.8578 74.7167 43.4775C74.3469 43.7855 73.9545 44.1122 73.5 44.5C72.6228 45.2485 71.9341 45.9688 71.2831 46.6495C70.0569 47.9319 68.9648 49.074 67 50C64.9861 50.9492 63.726 51.5356 61.5 51.5C60.3124 51.481 59.6473 51.3072 58.5 51C56.6423 50.5026 55.5287 50.1669 54 49C53.122 48.3298 52 47 52 47L46 48Z" fill="#507891"/>
<path d="M126.5 39.5C126.5 39.5 117.096 37.6605 116.5 37.5C113.86 36.7893 109.5 37.5 109.5 37.5C109.5 37.5 108.469 36.0302 107.5 35.5C106.757 35.0933 106.118 35.0954 105.423 35.0976C104.985 35.099 104.524 35.1005 104 35C103.693 34.9412 103.411 34.8907 103.145 34.843C102.038 34.6447 101.2 34.4947 100 34C98.297 33.2977 97.4131 32.6817 96 31.5C94.4077 30.1684 92.5 27.5 92.5 27.5C92.5 27.5 90.5982 29.4304 90 31C89.4394 32.4711 89.5 35 89.5 35H87.5C87.5 35 85.2942 34.5602 84 35C82.556 35.4907 81 37.5 81 37.5C81 37.5 78.6268 40.0054 77 41.5C76.1145 42.3136 75.461 42.8578 74.7167 43.4775C74.3469 43.7855 73.9545 44.1122 73.5 44.5C72.6228 45.2485 71.9341 45.9688 71.2831 46.6495C70.0569 47.9319 68.9648 49.074 67 50C64.9861 50.9492 63.726 51.5356 61.5 51.5C60.3124 51.481 59.6473 51.3072 58.5 51C56.6423 50.5026 55.5287 50.1669 54 49C53.122 48.3298 52 47 52 47L46 48C46.0953 48.2042 46.1924 48.4104 46.2907 48.6191C47.3957 50.9657 48.6441 53.6164 49 57C49.3071 59.9193 48.5 64.5 48.5 64.5L59.5 64L74 61L92 55.5L108 51.5L115.5 49L126.5 45.5V39.5ZM126.5 39.5V37M126.5 37C126.5 37 117.406 32.1258 116 26.5C115.337 23.848 115.5 17 115.5 17L126.5 29.5V37Z" stroke="#28262B"/>
<path d="M21.1846 62.1656C17.7594 66.0802 6.30104 76.0297 1.00005 80.5152V127.001H35.8643C35.8643 125.043 33.4177 122.515 32.1944 121.496C37.5769 108.773 27.9128 98.2529 22.4079 94.583C43.8158 81.1266 49.9323 57.884 43.8158 52.3791C37.6993 46.8743 25.4662 57.2724 21.1846 62.1656Z" fill="url(#paint0_linear_0_1)" stroke="#28262B" stroke-width="1.2233"/>
<path d="M59 71.5C59 71.5 78.5 55 95 51M68 73.5C68 73.5 75.5 66.5 88.5 65M72.5 77C72.5 77 87.5 78.5 96 73.5" stroke="#28262B"/>
<defs>
<linearGradient id="paint0_linear_0_1" x1="17.5147" y1="66.4469" x2="56.6605" y2="79.9033" gradientUnits="userSpaceOnUse">
<stop stop-color="#D4B18E"/>
<stop offset="1" stop-color="#886541"/>
</linearGradient>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

180
const.js → src/js/const.js
View File

@@ -1,91 +1,91 @@
const translations = {
ru: {
comingSoon: 'Скоро...',
subtitle: 'Что-то невероятное готовится к запуску. Следите за обновлениями!',
downloadBtn: 'Скачать программу',
betaNotice: 'Закрытое бета-тестирование.',
language: 'Язык'
},
en: {
comingSoon: 'Coming Soon...',
subtitle: 'Something incredible is about to launch. Stay tuned for updates!',
downloadBtn: 'Download App',
betaNotice: 'Closed beta testing.',
language: 'Language'
}
};
const downloadUrl = 'https://boophub.erry.xyz/api/app/download'; // Замените на вашу ссылку
const iconSources = {
// Simple Icons (основной источник)
simple: (platform) => `https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/${platform}.svg`,
// Tabler Icons (альтернативный)
tabler: (platform) => `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/${platform}.svg`,
// Bootstrap Icons (еще один вариант)
bootstrap: (platform) => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/icons/${platform}.svg`,
// Локальные иконки (если у вас есть собственные)
local: (platform) => `./icons/${platform}.svg`
};
const socialLinks = [
{
platform: 'gitea',
name: 'Gitea',
url: 'https://gt.1rb1.me/R1nc',
icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/gitea.svg'
},
// {
// platform: 'telegram',
// name: 'Telegram',
// url: 'https://t.me/yourchannel',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/telegram.svg'
// },
{
platform: 'discord',
name: 'Discord',
url: 'https://discord.gg/Bx4H8FDyvB',
icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg'
},
// {
// platform: 'youtube',
// name: 'YouTube',
// url: 'https://youtube.com/@yourchannel',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube.svg'
// },
// {
// platform: 'twitter',
// name: 'Twitter',
// url: 'https://twitter.com/yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg'
// },
// {
// platform: 'instagram',
// name: 'Instagram',
// url: 'https://instagram.com/yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg'
// },
// {
// platform: 'facebook',
// name: 'Facebook',
// url: 'https://facebook.com/yourpage',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg'
// },
// {
// platform: 'linkedin',
// name: 'LinkedIn',
// url: 'https://linkedin.com/in/yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg'
// },
// {
// platform: 'tiktok',
// name: 'TikTok',
// url: 'https://tiktok.com/@yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/tiktok.svg'
// }
const translations = {
ru: {
comingSoon: 'Скоро...',
subtitle: 'Что-то невероятное готовится к запуску. Следите за обновлениями!',
downloadBtn: 'Скачать программу',
betaNotice: 'Закрытое бета-тестирование.',
language: 'Язык'
},
en: {
comingSoon: 'Coming Soon...',
subtitle: 'Something incredible is about to launch. Stay tuned for updates!',
downloadBtn: 'Download App',
betaNotice: 'Closed beta testing.',
language: 'Language'
}
};
const downloadUrl = 'https://boophub.erry.xyz/api/app/download'; // Замените на вашу ссылку
const iconSources = {
// Simple Icons (основной источник)
simple: (platform) => `https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/${platform}.svg`,
// Tabler Icons (альтернативный)
tabler: (platform) => `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/${platform}.svg`,
// Bootstrap Icons (еще один вариант)
bootstrap: (platform) => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/icons/${platform}.svg`,
// Локальные иконки (если у вас есть собственные)
local: (platform) => `./icons/${platform}.svg`
};
const socialLinks = [
{
platform: 'gitea',
name: 'Gitea',
url: 'https://gt.1rb1.me/R1nc',
icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/gitea.svg'
},
// {
// platform: 'telegram',
// name: 'Telegram',
// url: 'https://t.me/yourchannel',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/telegram.svg'
// },
{
platform: 'discord',
name: 'Discord',
url: 'https://discord.gg/Bx4H8FDyvB',
icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg'
},
// {
// platform: 'youtube',
// name: 'YouTube',
// url: 'https://youtube.com/@yourchannel',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube.svg'
// },
// {
// platform: 'twitter',
// name: 'Twitter',
// url: 'https://twitter.com/yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg'
// },
// {
// platform: 'instagram',
// name: 'Instagram',
// url: 'https://instagram.com/yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg'
// },
// {
// platform: 'facebook',
// name: 'Facebook',
// url: 'https://facebook.com/yourpage',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg'
// },
// {
// platform: 'linkedin',
// name: 'LinkedIn',
// url: 'https://linkedin.com/in/yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg'
// },
// {
// platform: 'tiktok',
// name: 'TikTok',
// url: 'https://tiktok.com/@yourusername',
// icon: 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/tiktok.svg'
// }
];

140
src/js/main.js Normal file
View File

@@ -0,0 +1,140 @@
// Текущий язык (по умолчанию русский)
let currentLanguage = localStorage.getItem('language') || 'ru';
// Функция для обновления текста на странице
function updateLanguage(lang) {
const t = translations[lang];
if (!t) return;
document.getElementById('mainTitle').textContent = t.comingSoon;
document.getElementById('subtitle').textContent = t.subtitle;
document.getElementById('downloadBtn').textContent = t.downloadBtn;
document.getElementById('betaNotice').textContent = t.betaNotice;
// Сохранить выбранный язык
localStorage.setItem('language', lang);
currentLanguage = lang;
// Применить RTL для арабского
if (lang === 'ar') {
document.body.classList.add('rtl');
} else {
document.body.classList.remove('rtl');
}
}
// Функция для инициализации переключателя языка
function initLanguageSelector() {
const selector = document.getElementById('languageSelect');
selector.value = currentLanguage;
selector.addEventListener('change', function () {
updateLanguage(this.value);
});
}
function createSocialLinks() {
const container = document.getElementById('socialLinks');
socialLinks.forEach(link => {
const linkElement = document.createElement('a');
linkElement.href = link.url;
linkElement.className = `social-btn platform-${link.platform}`;
linkElement.target = '_blank';
linkElement.rel = 'noopener noreferrer';
linkElement.innerHTML = `
<div class="social-icon platform-${link.platform}"><img src="${link.icon}"/></div>
<span>${link.name}</span>
`;
container.appendChild(linkElement);
});
}
// Функция для создания частиц
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDuration = (Math.random() * 3 + 3) + 's';
particle.style.animationDelay = Math.random() * 2 + 's';
particlesContainer.appendChild(particle);
}
}
// Инициализация
document.addEventListener('DOMContentLoaded', function () {
// Инициализировать переключатель языка
initLanguageSelector();
// Применить сохраненный язык
updateLanguage(currentLanguage);
// Установить ссылку для скачивания
document.getElementById('downloadBtn').href = downloadUrl;
// Создать социальные ссылки
createSocialLinks();
// Создать частицы
createParticles();
});
// Функция для добавления новой ссылки (для удобства)
function addSocialLink(platform, name, url, icon) {
socialLinks.push({ platform, name, url, icon });
// Пересоздать ссылки
document.getElementById('socialLinks').innerHTML = '';
createSocialLinks();
}
// Альтернативные источники иконок для разных платформ
// Функция для смены источника иконок
function changeIconSource(source) {
socialLinks.forEach(link => {
if (iconSources[source]) {
link.icon = iconSources[source](link.platform);
}
});
// Пересоздать ссылки с новыми иконками
document.getElementById('socialLinks').innerHTML = '';
createSocialLinks();
}
// Функция для изменения ссылки на скачивание
function setDownloadUrl(url) {
document.getElementById('downloadBtn').href = url;
}
// Функция для добавления нового языка
function addLanguage(code, translations, flagEmoji, nativeName) {
// Добавить переводы
translations[code] = translations;
// Добавить опцию в селектор
const selector = document.getElementById('languageSelect');
const option = document.createElement('option');
option.value = code;
option.textContent = `${flagEmoji} ${nativeName}`;
selector.appendChild(option);
}
// Функция для получения текущего языка
function getCurrentLanguage() {
return currentLanguage;
}
// Функция для получения всех доступных языков
function getAvailableLanguages() {
return Object.keys(translations);
}