mobile fixes

This commit is contained in:
2026-04-20 22:21:07 +05:00
parent e6c0c57b1f
commit 3d851a2087
14 changed files with 217 additions and 144 deletions

View File

@@ -209,7 +209,7 @@ final class index extends core
'marketplace' => 'Маркетплейс, магазин, витрина', 'marketplace' => 'Маркетплейс, магазин, витрина',
'saas' => 'SaaS проект', 'saas' => 'SaaS проект',
'search' => 'Поиск и анализ', 'search' => 'Поиск и анализ',
'calculate' => 'Автоматизированное вычисление (калькулятор)', 'calculate' => 'Вычисления (калькулятор)',
'individual' => 'Индивидуальная разработка', 'individual' => 'Индивидуальная разработка',
], ],
'integrations' => [ 'integrations' => [

View File

@@ -86,7 +86,7 @@ final class project extends core
$mail->Host = MAIL_SERVER['host']; $mail->Host = MAIL_SERVER['host'];
$mail->SMTPAuth = true; $mail->SMTPAuth = true;
$mail->Username = MAIL_SERVER['sender']['mail']; $mail->Username = MAIL_SERVER['sender']['mail'];
$mail->Password = MAIL_SERVER['password']; $mail->Password = MAIL_SERVER['sender']['password'];
$mail->SMTPSecure = mail::ENCRYPTION_SMTPS; $mail->SMTPSecure = mail::ENCRYPTION_SMTPS;
$mail->Port = 465; $mail->Port = 465;
$mail->setFrom(MAIL_SERVER['sender']['mail'], MAIL_SERVER['sender']['name']); $mail->setFrom(MAIL_SERVER['sender']['mail'], MAIL_SERVER['sender']['name']);

View File

@@ -514,6 +514,22 @@ export default class project {
]), ]),
coefficient: 8 coefficient: 8
}, },
saas: {
symbol: Symbol("saas"),
integrations: new Set([
this.services.telegram,
this.services.max,
this.services.vk,
this.services.one_c,
this.services.moy_sklad,
this.services.excel,
this.services.ozon,
this.services.wildberries,
this.services.avito,
this.services.yandex_market,
]),
coefficient: 8
},
search: { search: {
symbol: Symbol("search"), symbol: Symbol("search"),
integrations: new Set([ integrations: new Set([

View File

@@ -4,8 +4,10 @@
:root { :root {
--text-color: #fff; --text-color: #fff;
--text-color-inverted: #000; --text-color-inverted: #000;
--button-background-color-inverted: #fff; --button-background-color: #fff;
--button-background-color: #000; --button-background-color-inverted: #000;
--button-hover-background-color: #abc7c6;
--button-active-background-color: #8fa3a2;
--section-background-color-inverted: #fff; --section-background-color-inverted: #fff;
--section-background-color: #000; --section-background-color: #000;
--background-color: #fbfaf6; --background-color: #fbfaf6;
@@ -21,9 +23,6 @@
--blue: #0ea5e9; --blue: #0ea5e9;
--paper: var(--white); --paper: var(--white);
--button-plain-hover-background-color: #bdd2c8;
--button-plain-active-background-color: #7d9f8f;
} }
/* } */ /* } */
@@ -56,8 +55,10 @@
:root { :root {
--text-color: #fff; --text-color: #fff;
--text-color-inverted: #000; --text-color-inverted: #000;
--button-background-color-inverted: #fff; --button-background-color: #fff;
--button-background-color: #000; --button-background-color-inverted: #000;
--button-hover-background-color: #abc7c6;
--button-active-background-color: #8fa3a2;
--section-background-color-inverted: #fff; --section-background-color-inverted: #fff;
--section-background-color: #000; --section-background-color: #000;
--background-color: #fbfaf6; --background-color: #fbfaf6;
@@ -72,8 +73,5 @@
--white: #fff; --white: #fff;
--paper: var(--white); --paper: var(--white);
--button-plain-hover-background-color: #bdd2c8;
--button-plain-active-background-color: #7d9f8f;
} }
} }

View File

@@ -30,11 +30,12 @@ section#cookies {
} }
>div { >div {
padding: 0.8rem 1.2rem 0.7rem; padding: 0.9rem 1.2rem 0.8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 0.3rem;
>p { >p {
margin: unset; margin: unset;
@@ -43,6 +44,8 @@ section#cookies {
} }
>small { >small {
line-height: 1rem;
text-align: center;
font-family: Nunito; font-family: Nunito;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;

View File

@@ -125,8 +125,8 @@ section#project {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.8em; gap: 0.8em;
overflow: hidden; /* overflow: hidden;
border-radius: 1.125rem; border-radius: 1.125rem; */
/* border: 2px solid; /* border: 2px solid;
background-color: #fff; background-color: #fff;
box-shadow: var(--shadow); box-shadow: var(--shadow);
@@ -185,6 +185,8 @@ section#project {
>:is(input, select, textarea) { >:is(input, select, textarea) {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
width: 100%;
border-radius: 0;
} }
>small.guide { >small.guide {
@@ -266,7 +268,7 @@ section#project {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-flow: row wrap; justify-content: space-between;
gap: 0.6em 1em; gap: 0.6em 1em;
/* border-radius: 0.75rem; */ /* border-radius: 0.75rem; */
border: 1px solid #000; border: 1px solid #000;
@@ -278,45 +280,39 @@ section#project {
font-weight: 400; font-weight: 400;
} }
>div.row { >label {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center;
gap: 0.3rem;
>label { >input[type="number"] {
width: 100%; appearance: textfield;
display: flex; -moz-appearance: textfield;
flex-direction: column; width: 80%;
align-items: center; /* padding: 0.4em 0.6em 0.4em 1.2em; */
gap: 0.3rem; padding: 0.4em 0.6em;
box-sizing: border-box;
text-align: center;
font-family: Nunito;
font-weight: 400;
font-size: 1em;
outline: unset;
border: unset;
border-bottom: 1px solid #000;
background: unset;
>input[type="number"] { &::-webkit-outer-spin-button,
appearance: textfield; &::-webkit-inner-spin-button {
-moz-appearance: textfield; -webkit-appearance: none;
width: 80%; display: none;
/* padding: 0.4em 0.6em 0.4em 1.2em; */
padding: 0.4em 0.6em;
box-sizing: border-box;
text-align: center;
font-family: Nunito;
font-weight: 400;
font-size: 1em;
outline: unset;
border: unset;
border-bottom: 1px solid #000;
background: unset;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
} }
}
>span { >span {
font-size: 0.9em; font-size: 0.9em;
cursor: pointer; cursor: pointer;
}
} }
} }
} }
@@ -703,11 +699,9 @@ section#project {
gap: unset; gap: unset;
>label#requester_personal { >label#requester_personal {
padding: 1em 0.8em; padding: 0.6em 0.8em;
box-sizing: border-box; box-sizing: border-box;
display: grid; display: flex;
grid-template-columns: 3ch auto;
grid-template-rows: 2ch;
align-items: center; align-items: center;
gap: 0.7ch; gap: 0.7ch;
font-size: 0.9rem; font-size: 0.9rem;
@@ -725,8 +719,7 @@ section#project {
} }
>div { >div {
grid-column: 1; scale: 0.8;
scale: 0.7;
>input { >input {
position: absolute; position: absolute;
@@ -762,7 +755,6 @@ section#project {
} }
>span { >span {
grid-column: 2;
margin-top: 0.15ch; margin-top: 0.15ch;
} }
} }
@@ -858,7 +850,7 @@ section#project {
display: contents; display: contents;
>button#back { >button#back {
--diameter: 6ch; --diameter: 7ch;
--radius: calc(var(--diameter, 4ch) / 2); --radius: calc(var(--diameter, 4ch) / 2);
position: absolute; position: absolute;
left: calc(-1.2rem - var(--diameter, 4ch)); left: calc(-1.2rem - var(--diameter, 4ch));
@@ -870,14 +862,14 @@ section#project {
align-items: center; align-items: center;
border-radius: 100%; border-radius: 100%;
border: unset; border: unset;
background-color: #fff; background-color: var(--button-background-color, #fff);
&:is(:hover, :focus) { &:is(:hover, :focus) {
background-color: var(--button-plain-hover-background-color, #bdd2c8); background-color: var(--button-hover-background-color, #abc7c6);
} }
&:active { &:active {
background-color: var(--button-plain-active-background-color, #7d9f8f); background-color: var(--button-active-background-color, #8fa3a2);
} }
>img { >img {
@@ -894,20 +886,33 @@ section#project {
/* padding: 1.05em 1.3em 1em; /* padding: 1.05em 1.3em 1em;
border-radius: 0.75rem; */ border-radius: 0.75rem; */
box-sizing: border-box; box-sizing: border-box;
padding: 1.55em 1.3em 1.5em; padding: 1.25em 1.3em 1.2em;
font-size: 1rem;
border-radius: 1.25rem; border-radius: 1.25rem;
border: unset; border: unset;
background-color: #fff; background-color: var(--button-background-color, #fff);
&:is(:hover, :focus) {
background-color: var(--button-hover-background-color, #abc7c6);
}
&:active {
background-color: var(--button-active-background-color, #8fa3a2);
}
&:is(#send) { &:is(#send) {
--shadow: 0 4px 5px -4px rgba(0, 0, 0, 0.5); --shadow: 0 4px 5px -4px rgba(0, 0, 0, 0.5);
/* padding: 2.3ch 4.5ch 2.5ch; */ /* padding: 2.3ch 4.5ch 2.5ch; */
line-height: 0.9em; font-weight: 600;
font-size: 1rem;
color: #fff;
text-shadow: 0 0 4px #000, 0 3px 1.4rem #0009;
border: unset; border: unset;
background: #ff5c5c; background: hsl(var(--button-send-background-color, 120deg) 40% 50%);
box-shadow: var(--shadow); box-shadow: var(--shadow);
-webkit-box-shadow: var(--shadow); -webkit-box-shadow: var(--shadow);
-moz-box-shadow: var(--shadow); -moz-box-shadow: var(--shadow);
transition: background 1.2s ease-out;
&:not(:disabled) { &:not(:disabled) {
filter: contrast(1.1); filter: contrast(1.1);
@@ -934,16 +939,6 @@ section#project {
filter: grayscale(1) brightness(0.8); filter: grayscale(1) brightness(0.8);
} }
} }
>span {
line-height: 1rem;
font-family: Geologica;
font-weight: 600;
font-size: 1rem;
color: #fff;
text-shadow: 0 0 4px #00000070;
/* mix-blend-mode: overlay; */
}
} }
} }
@@ -965,6 +960,10 @@ section#project {
font-size: 0.8em; font-size: 0.8em;
color: #fff; color: #fff;
text-shadow: 0px 1px 3px #000C, 0px 1px 1px #000B; text-shadow: 0px 1px 3px #000C, 0px 1px 1px #000B;
>b {
display: block;
}
} }
>section#contacts_shortcut { >section#contacts_shortcut {
@@ -1022,7 +1021,22 @@ section#project {
margin: unset; margin: unset;
min-width: var(--diameter, 4ch); min-width: var(--diameter, 4ch);
width: 30%; width: 30%;
border-radius: 0.75rem; height: auto;
border-radius: 1.25rem;
}
}
}
}
@media (width < 480px) {
section#project {
>article {
>section[data-paginator-page] {
>section#team {
>fieldset {
flex-flow: row wrap;
}
}
} }
} }
} }

View File

@@ -167,12 +167,23 @@ footer {
text-align: right; text-align: right;
gap: 0.2em; gap: 0.2em;
font-size: 0.8rem; font-size: 0.8rem;
color: grey; color: #a3a396;
::selection {
color: #FFF;
background: #12A;
}
::-moz-selection {
color: #FFF;
background: #12A;
}
>span.row { >span.row {
display: inline-flex; display: inline-flex;
justify-content: end; justify-content: end;
font-weight: 400; font-weight: 400;
gap: 0.6em;
&:before { &:before {
margin-right: auto; margin-right: auto;
@@ -247,3 +258,23 @@ footer {
} }
} }
} }
@media (width < 520px) {
footer {
>div.sector {
&:is(.company) {
flex-direction: column;
gap: 3rem;
>article#contacts {
width: 100%;
align-items: center;
}
>article#company {
width: 100%;
}
}
}
}
}

View File

@@ -78,16 +78,16 @@ body {
--dot-size: 23px; --dot-size: 23px;
--dot-space: 24px; --dot-space: 24px;
z-index: -50; z-index: -50;
position: fixed;top: -200%; position: fixed;
left: -200vw; top: 0;
top: -200%; left: min(-30vw, -300px);
justify-self: center; justify-self: center;
align-self: center; align-self: center;
width: 400vw; width: max(250vw, 600px);
min-height: 1000px; height: 200vh;
height: 800%;
rotate: -16deg; rotate: -16deg;
pointer-events: none; pointer-events: none;
background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color); background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
transform-origin: top left;
} }
} }

View File

@@ -68,16 +68,15 @@ body {
--dot-space: 24px; --dot-space: 24px;
z-index: -50; z-index: -50;
position: fixed; position: fixed;
top: -200%; top: 0;
left: -200vw; left: min(-30vw, -300px);
top: -200%;
justify-self: center; justify-self: center;
align-self: center; align-self: center;
width: 400vw; width: max(250vw, 600px);
min-height: 1000px; height: 200vh;
height: 800%;
rotate: -16deg; rotate: -16deg;
pointer-events: none; pointer-events: none;
background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color); background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
transform-origin: top left;
} }
} }

View File

@@ -34,12 +34,25 @@
transition: 0.1s ease-out; transition: 0.1s ease-out;
} }
::selection {
color: #000;
background: #FF2;
text-shadow: none;
}
::-moz-selection {
color: #000;
background: #FF2;
text-shadow: none;
}
body { body {
margin: unset; margin: unset;
width: 100vw; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
background: var(--background-color, #fff); /* background: var(--background-color, #fff);
background: var(--background-gradient); background: var(--background-gradient); */
background-color: #020c13;
} }
.unselectable { .unselectable {
@@ -67,6 +80,7 @@ input:not([type="range"]) {
outline: unset; outline: unset;
border: unset; border: unset;
border-bottom: 1px solid; border-bottom: 1px solid;
border-radius: unset;
background: unset; background: unset;
} }
@@ -130,6 +144,6 @@ button {
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: #08111d17; background-color: #08111d17;
filter: grayscale(1) brightness(0.8); filter: grayscale(1) brightness(0.55);
} }
} }

View File

@@ -13,7 +13,7 @@
{% block css %} {% block css %}
{% endblock %} {% endblock %}
{% include '/elements/yandex.html' %} {% include '/metrics/yandex.html' %}
</head> </head>
<body> <body>

View File

@@ -30,7 +30,7 @@
autocomplete="off" autocomplete="off"
oninput="core.project.architecture = this.value" oninput="core.project.architecture = this.value"
> >
<option value="" selected="true" disabled="true" hidden="true" data-paginator-select-title="true">Выберите архитектуру</option> <option value="" selected="true" disabled="true" hidden="true" data-project-select-title="true">Выберите архитектуру</option>
{% for value, label in project.architectures %} {% for value, label in project.architectures %}
<option value="{{ value }}">{{ label }}</option> <option value="{{ value }}">{{ label }}</option>
{% endfor %} {% endfor %}
@@ -47,7 +47,7 @@
autocomplete="off" autocomplete="off"
oninput="core.project.purpose = this.value" oninput="core.project.purpose = this.value"
> >
<option value="" selected="true" disabled="true" hidden="true" data-paginator-select-title="true">Выберите назначение</option> <option value="" selected="true" disabled="true" hidden="true" data-project-select-title="true">Выберите назначение</option>
{% for value, label in project.purposes %} {% for value, label in project.purposes %}
<option value="{{ value }}">{{ label }}</option> <option value="{{ value }}">{{ label }}</option>
{% endfor %} {% endfor %}
@@ -80,47 +80,45 @@
<section id="team" class="row" style="display: none;"> <section id="team" class="row" style="display: none;">
<fieldset> <fieldset>
<legend>Команда</legend> <legend>Команда</legend>
<div class="row"> <label for="programmers">
<label for="programmers"> <input
<input id="programmers"
id="programmers" class="input"
class="input" type="number"
type="number" min="0"
min="0" max="3"
max="3" value="0"
value="0" autocomplete="off"
autocomplete="off" onkeyup="core.project.programmers = this.value"
onkeyup="core.project.programmers = this.value" />
/> <span>Программисты</span>
<span>Программисты</span> </label>
</label> <label for="designers">
<label for="designers"> <input
<input id="designers"
id="designers" class="input"
class="input" type="number"
type="number" min="0"
min="0" max="4"
max="4" value="0"
value="0" autocomplete="off"
autocomplete="off" onkeyup="core.project.designers = this.value"
onkeyup="core.project.designers = this.value" />
/> <span>Дизайнеры</span>
<span>Дизайнеры</span> </label>
</label> <label for="boosters">
<label for="boosters"> <input
<input id="boosters"
id="boosters" class="input"
class="input" type="number"
type="number" min="0"
min="0" max="2"
max="2" value="0"
value="0" autocomplete="off"
autocomplete="off" onkeyup="core.project.boosters = this.value"
onkeyup="core.project.boosters = this.value" />
/> <span>Бустеры</span>
<span>Бустеры</span> </label>
</label>
</div>
</fieldset> </fieldset>
<small class="guide">Соберите команду разработчиков проекта</small> <small class="guide">Соберите команду разработчиков проекта</small>
</section> </section>
@@ -317,21 +315,21 @@
<button onclick="core.paginator.relative(1)" style="display: none" data-paginator-page-button="2" disabled="true">ПРОДОЛЖИТЬ</button> <button onclick="core.paginator.relative(1)" style="display: none" data-paginator-page-button="2" disabled="true">ПРОДОЛЖИТЬ</button>
<button <button
id="send" id="send"
class="gradient"
style="display: none" style="display: none"
onclick="core.project.send();" onclick="core.project.send();"
data-paginator-page-button="3" data-paginator-page-button="3"
disabled="true" disabled="true"
> >ОТПРАВИТЬ</button>
<span>НАЧАТЬ РАЗРАБОТКУ</span>
<div class="color yellow"></div>
<div class="color green"></div>
<div class="color blue"></div>
</button>
</section> </section>
<script>
const send = document.getElementById('send');
let deg = 120;
setInterval(() => send.style.setProperty('--button-send-background-color', (deg += 43) + 'deg'), 1200);
</script>
</div> </div>
<small class="offer unselectable">Создан для удобства и <b>не является публичной офертой</b></br>Точная стоимость после изучения задания</small> <small class="offer unselectable">Создан для удобного планирования и <b>не является публичной офертой</b></small>
<section id="contacts_shortcut"> <section id="contacts_shortcut">
<p class="sim"><span class="country">7</span><span class="operator">901</span><span>592</span><span>4211</span></p> <p class="sim"><span class="country">7</span><span class="operator">901</span><span>592</span><span>4211</span></p>

View File

@@ -7,7 +7,7 @@
<meta name="author" content="Арсен Мирзаев Татьяно-Мурадович" /> <meta name="author" content="Арсен Мирзаев Татьяно-Мурадович" />
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<meta name="HandheldFriendly" content="true" /> <meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" /> <meta name="MobileOptimized" content="width" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />