task 17075 | сделал блоки для блога
This commit is contained in:
1 parent
73a51cf6f4
commit
6edf5d69bd
10 files changed
+888
-20
No files matched your search
@@ -4138,6 +4138,9 @@ h4 {
|
||||
.article-main {
|
||||
min-width: 0;
|
||||
}
|
||||
.article-main .article-content:not(:first-child){
|
||||
margin-top: clamp(30px, 17.5691px + 3.3149vw, 60px);
|
||||
}
|
||||
.article-sidebar {
|
||||
position: sticky;
|
||||
top: 112px;
|
||||
@@ -5947,14 +5950,14 @@ h4 {
|
||||
|
||||
/* новые */
|
||||
|
||||
.h-article-hero {
|
||||
--h-hero-accent: #d52d49;
|
||||
--h-hero-text: #202b35;
|
||||
--h-hero-muted: #68747f;
|
||||
--h-hero-line: #e7eaf0;
|
||||
--h-hero-bg: #f7f8fa;
|
||||
--h-hero-radius: 26px;
|
||||
|
||||
.h-article-hero {
|
||||
--h-hero-accent: var(--color-red);
|
||||
--h-hero-text: var(--color-dark);
|
||||
--h-hero-muted: var(--color-grey-dark);
|
||||
--h-hero-line: var(--color-grey);
|
||||
--h-hero-bg: var(--color-light);
|
||||
--h-hero-radius: 26px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 1100px;
|
||||
@@ -5981,7 +5984,7 @@ h4 {
|
||||
min-height: 600px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--h-hero-radius);
|
||||
background: #e4e8ec;
|
||||
background: var(--color-grey);
|
||||
}
|
||||
|
||||
.h-article-hero__image {
|
||||
@@ -6003,7 +6006,7 @@ h4 {
|
||||
|
||||
.h-article-hero__breadcrumb-divider {
|
||||
flex: none;
|
||||
color: #a9b0b8;
|
||||
color: var(--color-grey-light);
|
||||
}
|
||||
|
||||
.h-article-hero__breadcrumb-current {
|
||||
@@ -6024,9 +6027,9 @@ h4 {
|
||||
align-items: center;
|
||||
min-height: 29px;
|
||||
padding: 5px 12px;
|
||||
border: 1px solid rgba(213, 45, 73, .17);
|
||||
border: 1px solid color-mix(in srgb, var(--color-red) 17%, transparent);
|
||||
border-radius: 100px;
|
||||
background: #fff0f3;
|
||||
background: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
||||
color: var(--h-hero-accent);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
@@ -6045,7 +6048,11 @@ h4 {
|
||||
}
|
||||
|
||||
.h-article-hero__title > span {
|
||||
background: linear-gradient(98deg, #f05d6b 0%, #bc203f 100%);
|
||||
background: linear-gradient(
|
||||
98deg,
|
||||
var(--color-red) 0%,
|
||||
var(--color-red-dark) 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -6054,7 +6061,7 @@ h4 {
|
||||
.h-article-hero__description {
|
||||
max-width: 710px;
|
||||
margin: 24px 0 34px;
|
||||
color: #535f6c;
|
||||
color: var(--color-text);
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
@@ -6068,7 +6075,7 @@ h4 {
|
||||
margin-top: auto;
|
||||
padding-top: 25px;
|
||||
border-top: 1px solid var(--h-hero-line);
|
||||
color: #4e5a65;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.h-article-hero__meta-item {
|
||||
@@ -6088,7 +6095,7 @@ h4 {
|
||||
}
|
||||
|
||||
.h-article-hero__meta-item + .h-article-hero__meta-item {
|
||||
border-left: 1px solid #d7dce3;
|
||||
border-left: 1px solid var(--color-grey);
|
||||
}
|
||||
|
||||
.h-article-hero__meta-item svg {
|
||||
@@ -6103,3 +6110,574 @@ h4 {
|
||||
color: var(--h-hero-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.h-attention {
|
||||
--attention-color: var(--color-red);
|
||||
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
||||
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 28px 0;
|
||||
padding: 24px 28px;
|
||||
border-radius: 16px;
|
||||
background: var(--attention-bg);
|
||||
}
|
||||
|
||||
.h-attention--warning {
|
||||
--attention-color: var(--color-red);
|
||||
--attention-bg: color-mix(in srgb, var(--color-red) 8%, var(--color-light));
|
||||
--attention-icon-bg: color-mix(in srgb, var(--color-red) 15%, var(--color-light));
|
||||
}
|
||||
|
||||
.h-attention--info {
|
||||
--attention-color: #a8740b;
|
||||
--attention-bg: #fff8e8;
|
||||
--attention-icon-bg: #f9ebc8;
|
||||
}
|
||||
|
||||
.h-attention--success {
|
||||
--attention-color: #277547;
|
||||
--attention-bg: #eff8f2;
|
||||
--attention-icon-bg: #dceee2;
|
||||
}
|
||||
|
||||
.h-attention__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: var(--attention-icon-bg);
|
||||
color: var(--attention-color);
|
||||
}
|
||||
|
||||
.h-attention__icon span {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.h-attention__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.h-attention__content p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.h-attention__content p + p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.h-attention__content a {
|
||||
color: var(--attention-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.h-attention__content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-attention{
|
||||
padding: 12px 14px;
|
||||
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-quote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 30px 0;
|
||||
padding: 28px 16px;
|
||||
border-radius: 14px;
|
||||
background: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__avatar {
|
||||
display: block;
|
||||
flex: 0 0 90px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__author {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__text {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.3;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-quote{
|
||||
padding: 12px 14px;
|
||||
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.h-article-quote .h-article-quote__text{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 110px;
|
||||
padding: 20px 22px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--color-grey);
|
||||
border-radius: 10px;
|
||||
background: var(--color-light);
|
||||
box-shadow: 0 2px 12px color-mix(in srgb, var(--color-dark) 8%, transparent);
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item p + p {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.h-article-cards .h-article-cards__item p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30px 40px;
|
||||
margin: 30px 0;
|
||||
background: var(--color-dark);
|
||||
border-radius: 22px;
|
||||
color: var(--color-light);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__title {
|
||||
margin: 0 0 12px;
|
||||
padding: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 520px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--color-grey);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 245px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 20px;
|
||||
border-radius: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-grey-light);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--outline:hover {
|
||||
background: var(--color-light);
|
||||
border-color: var(--color-light);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--white {
|
||||
background: var(--color-light);
|
||||
border: 1px solid var(--color-light);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-article-cta .h-article-cta__btn--white:hover {
|
||||
background: var(--color-grey);
|
||||
border-color: var(--color-grey);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-app-cta,
|
||||
.h-article-cta{
|
||||
flex-direction: column;
|
||||
}
|
||||
.h-article-cta .h-article-cta__content{
|
||||
width: 100%;
|
||||
}
|
||||
.h-article-cta .h-article-cta__actions{
|
||||
width: 100%;
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.h-article-app-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
box-sizing: border-box;
|
||||
margin: 30px 0;
|
||||
padding: 18px 32px;
|
||||
border-radius: 16px;
|
||||
background: var(--color-red);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 145px;
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
border: 0;
|
||||
border-radius: 50px;
|
||||
background: var(--color-light);
|
||||
color: var(--color-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button:hover {
|
||||
background: var(--color-grey);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-article-app-cta .h-article-app-cta__title{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.h-article-app-cta .h-article-app-cta__button{
|
||||
width: 100%;
|
||||
|
||||
flex:auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.h-article-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 30px 0;
|
||||
padding: 20px 24px;
|
||||
border: 1px solid var(--color-grey);
|
||||
border-radius: 14px;
|
||||
background: var(--color-light);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.h-article-author__text {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: var(--color-grey-dark);
|
||||
}
|
||||
|
||||
.h-article-author__link {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: var(--color-red);
|
||||
text-decoration: none;
|
||||
transition: color .2s ease;
|
||||
}
|
||||
|
||||
.h-article-author__link:hover {
|
||||
color: var(--color-red-dark);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.h-app-steps {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 40px 0;
|
||||
padding: 40px 30px;
|
||||
background: var(--color-light);
|
||||
border-radius: 18px;
|
||||
font-family: inherit;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-app-steps *,
|
||||
.h-app-steps *::before,
|
||||
.h-app-steps *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__title {
|
||||
margin: 0 0 40px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(210px, 35%) minmax(0, 1fr);
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__phone img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: auto;
|
||||
max-height: 420px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 28px;
|
||||
row-gap: 40px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 44px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
background: var(--color-grey-light);
|
||||
border-radius: 12px;
|
||||
color: var(--color-light);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__step:first-child .h-app-steps__number {
|
||||
background: var(--color-red);
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__step-title {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--color-dark);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__description {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.55;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__qr {
|
||||
display: block;
|
||||
flex: 0 0 82px;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
max-width: none;
|
||||
object-fit: contain;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.h-app-steps .h-app-steps__layout{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.h-app-steps .h-app-steps__phone{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.h-app-steps .h-app-steps__title{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.h-app-steps .h-app-steps__grid{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -14,11 +14,21 @@
|
||||
|
||||
$parent_id = is_singular('news') ? 82 : 42;
|
||||
$terms = get_the_terms(get_the_ID(), 'article_category');
|
||||
$article_content = get_field('article_content');
|
||||
if ($article_content) :
|
||||
$generated = generate_toc($article_content);
|
||||
$article_blocks = get_field('new_blocks') ?: [];
|
||||
$article_content = get_field('article_content') ?: '';
|
||||
$generated = generate_toc($article_content, 'article-content');
|
||||
$content = $generated['content'];
|
||||
$toc_items = $generated['toc_items'];
|
||||
foreach ($article_blocks as $block_index => &$block) {
|
||||
if (($block['acf_fc_layout'] ?? '') !== 'text') {
|
||||
continue;
|
||||
}
|
||||
$generated = generate_toc($block['content'] ?? '', 'article-block-' . ($block_index + 1));
|
||||
$block['content'] = $generated['content'];
|
||||
$toc_items = array_merge($toc_items, $generated['toc_items']);
|
||||
}
|
||||
unset($block);
|
||||
if ($article_content || $article_blocks) :
|
||||
?>
|
||||
<section class="article">
|
||||
<div class="container">
|
||||
@@ -81,10 +91,44 @@
|
||||
|
||||
<div class="article-body<?php if (!$toc_items) echo ' no-toc'; ?>">
|
||||
<div class="article-main">
|
||||
<?php if ($content) : ?>
|
||||
<div class="article-content content"><?php echo wrap_tables($content); ?></div>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
if ($article_blocks) {
|
||||
foreach ($article_blocks as $block) {
|
||||
|
||||
$layout = $block['acf_fc_layout'] ?? '';
|
||||
if ($layout === 'attention_block') {
|
||||
$layout = 'attention_blocks';
|
||||
}
|
||||
|
||||
$allowedLayouts = [
|
||||
'attention_block',
|
||||
'attention_blocks',
|
||||
'text',
|
||||
'block_main',
|
||||
'quote',
|
||||
'cta_1',
|
||||
'cta_2',
|
||||
'plaque_authorship',
|
||||
];
|
||||
|
||||
if (in_array($layout, $allowedLayouts, true)) {
|
||||
get_template_part(
|
||||
'template-parts/article-blocks/' . $layout,
|
||||
null,
|
||||
[
|
||||
'fields' => $block,
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<?php if ($toc_items) : ?>
|
||||
<div class="article-sidebar">
|
||||
<?php if ($toc_items) : ?>
|
||||
<div class="article-toc">
|
||||
<div class="article-toc__title">Содержание</div>
|
||||
<ul class="article-toc__list">
|
||||
@@ -97,14 +141,15 @@
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php get_template_part('template-parts/faq'); ?>
|
||||
<?php get_template_part('template-parts/app-steps'); ?>
|
||||
<?php get_template_part('template-parts/related'); ?>
|
||||
<?php get_template_part('template-parts/socials'); ?>
|
||||
<?php get_template_part('template-parts/getapp'); ?>
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
<div class="articles articles--block">
|
||||
<div class="container">
|
||||
<section class="h-app-steps">
|
||||
<h2 class="h-app-steps__title">
|
||||
Начать работать — просто
|
||||
</h2>
|
||||
|
||||
<div class="h-app-steps__layout">
|
||||
|
||||
<div class="h-app-steps__phone">
|
||||
<img
|
||||
src="https://play-lh.googleusercontent.com/heeCPL3mSBl1ZW9hAS161lD-vwR57g3BYWmLYXSAS9Jrukcbq_-rMIMVozO5QVq1-TJ8BTJJ6y3hjr1PeZqs=w1052-h592-rw"
|
||||
alt="Приложение Hantico на смартфоне"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="h-app-steps__grid">
|
||||
|
||||
<div class="h-app-steps__step">
|
||||
<div class="h-app-steps__number">1</div>
|
||||
|
||||
<h3 class="h-app-steps__step-title">
|
||||
Скачайте приложение
|
||||
</h3>
|
||||
|
||||
<p class="h-app-steps__description">
|
||||
Установите Hantico на смартфон.
|
||||
</p>
|
||||
|
||||
<div class="h-app-steps__download">
|
||||
<img
|
||||
class="h-app-steps__qr"
|
||||
src="https://hantico.cp.good-production.xyz/wp-content/uploads/qrcode.svg"
|
||||
alt="QR-код для скачивания Hantico"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-app-steps__step">
|
||||
<div class="h-app-steps__number">2</div>
|
||||
|
||||
<h3 class="h-app-steps__step-title">
|
||||
Зарегистрируйтесь
|
||||
</h3>
|
||||
|
||||
<p class="h-app-steps__description">
|
||||
Создайте аккаунт и заполните
|
||||
необходимые данные.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="h-app-steps__step">
|
||||
<div class="h-app-steps__number">3</div>
|
||||
|
||||
<h3 class="h-app-steps__step-title">
|
||||
Выберите подходящий формат работы
|
||||
</h3>
|
||||
|
||||
<p class="h-app-steps__description">
|
||||
Найдите доступные варианты и условия,
|
||||
которые подходят именно вам.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="h-app-steps__step">
|
||||
<div class="h-app-steps__number">4</div>
|
||||
|
||||
<h3 class="h-app-steps__step-title">
|
||||
Начинайте работать
|
||||
</h3>
|
||||
|
||||
<p class="h-app-steps__description">
|
||||
Переходите к заказам и используйте
|
||||
Hantico в работе.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$attention = $fields['attention'] ?? 'red';
|
||||
if (is_array($attention)) {
|
||||
$attention = $attention['value'] ?? 'red';
|
||||
}
|
||||
$text = $fields['text'] ?? '';
|
||||
$variants = [
|
||||
'red' => ['class' => 'warning', 'icon' => '!', 'title' => 'Важно!'],
|
||||
'yellow' => ['class' => 'info', 'icon' => 'i', 'title' => 'Полезная информация'],
|
||||
'green' => ['class' => 'success', 'icon' => '✓', 'title' => 'Рекомендация'],
|
||||
];
|
||||
$variant = $variants[$attention] ?? $variants['red'];
|
||||
?>
|
||||
|
||||
<?php if ($text !== '') : ?>
|
||||
<div class="h-attention h-attention--<?php echo esc_attr($variant['class']); ?>">
|
||||
<div class="h-attention__icon">
|
||||
<span><?php echo esc_html($variant['icon']); ?></span>
|
||||
</div>
|
||||
<div class="h-attention__content">
|
||||
<?php echo wpautop(wp_kses_post($text)); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$cards = $fields['cards'] ?? [];
|
||||
?>
|
||||
|
||||
<?php if ($cards): ?>
|
||||
<div class="h-article-cards">
|
||||
<?php foreach ($cards as $card): ?>
|
||||
<div class="h-article-cards__item">
|
||||
<p><?php echo nl2br(esc_html($card['text_card'] ?? '')); ?></p>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$title = $fields['title'] ?? '';
|
||||
$text = $fields['text'] ?? '';
|
||||
$link_1 = $fields['link_1'] ?? [];
|
||||
$link_2 = $fields['link_2'] ?? [];
|
||||
?>
|
||||
|
||||
<div class="h-article-cta">
|
||||
<div class="h-article-cta__content">
|
||||
<?php if ($title): ?>
|
||||
<h2 class="h-article-cta__title"><?php echo esc_html($title); ?></h2>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($text): ?>
|
||||
<p class="h-article-cta__description"><?php echo nl2br(esc_html($text)); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="h-article-cta__actions">
|
||||
<?php if (!empty($link_1['link'])): ?>
|
||||
<a href="<?php echo esc_url($link_1['link']); ?>" class="h-article-cta__btn h-article-cta__btn--outline">
|
||||
<?php echo esc_html($link_1['text'] ?? ''); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($link_2['link'])): ?>
|
||||
<a href="<?php echo esc_url($link_2['link']); ?>" class="h-article-cta__btn h-article-cta__btn--white">
|
||||
<?php echo esc_html($link_2['text'] ?? ''); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$image = $fields['img'] ?? [];
|
||||
$text = $fields['text'] ?? '';
|
||||
$link = $fields['link'] ?? [];
|
||||
?>
|
||||
|
||||
<div class="h-article-app-cta">
|
||||
<?php if ($image): ?>
|
||||
<div class="h-article-app-cta__image">
|
||||
<img
|
||||
src="<?php echo esc_url($image['url']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
|
||||
width="90"
|
||||
height="90"
|
||||
>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($text): ?>
|
||||
<div class="h-article-app-cta__content">
|
||||
<p class="h-article-app-cta__title"><?php echo nl2br(esc_html($text)); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($link['link'])): ?>
|
||||
<a href="<?php echo esc_url($link['link']); ?>" class="h-article-app-cta__button">
|
||||
<?php echo esc_html($link['text'] ?? ''); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$text = $fields['text'] ?? '';
|
||||
$link = $fields['link'] ?? [];
|
||||
?>
|
||||
|
||||
<div class="h-article-author">
|
||||
<?php if ($text): ?>
|
||||
<span class="h-article-author__text"><?php echo nl2br(esc_html($text)); ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($link['link'])): ?>
|
||||
<a class="h-article-author__link" href="<?php echo esc_url($link['link']); ?>">
|
||||
<?php echo esc_html($link['name_link'] ?? ''); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
$image = $fields['img'] ?? [];
|
||||
$name = $fields['name'] ?? '';
|
||||
$text = $fields['text'] ?? '';
|
||||
?>
|
||||
|
||||
<div class="h-article-quote">
|
||||
<?php if ($image): ?>
|
||||
<img
|
||||
class="h-article-quote__avatar"
|
||||
src="<?php echo esc_url($image['url']); ?>"
|
||||
alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
|
||||
width="90"
|
||||
height="90"
|
||||
>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="h-article-quote__body">
|
||||
<?php if ($name): ?>
|
||||
<div class="h-article-quote__author">
|
||||
<?php echo esc_html($name); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($text): ?>
|
||||
<blockquote class="h-article-quote__text">
|
||||
<?php echo wp_kses_post($text); ?>
|
||||
</blockquote>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<?php
|
||||
$fields = $args['fields'] ?? [];
|
||||
|
||||
$content = $fields['content'] ?? '';
|
||||
?>
|
||||
|
||||
<?php if ($content): ?>
|
||||
<div class="article-content content"><?php echo wrap_tables($content); ?></div>
|
||||
<?php endif; ?>
|
||||
Reference in new issue
Block a user