Шаблон:Recipe: различия между версиями

Материал из МК14 | Space Station 14 Wiki
Нет описания правки
Нет описания правки
 
(не показано 13 промежуточных версий этого же участника)
Строка 1: Строка 1:
<includeonly>
<includeonly>
<div style="
<div style="
display:inline-flex;
    display:inline-flex;
flex-direction:column;
    vertical-align:top;
width:100%;
    flex-direction:column;
max-width:760px;
    background:#171B22;
background:#171b22;
    border:1px solid #FFFFFF;
border:1px solid #7d899c;
    box-sizing:border-box;
border-radius:5px;
    overflow:hidden;
overflow:hidden;
    color:#FFFFFF;
color:#fff;
    font-family:Arial,sans-serif;
font-family:Arial,sans-serif;
    margin:4px;
box-sizing:border-box;
    width:auto;
    max-width:350px;
">
">


<!-- ==================== -->
<!-- НАЗВАНИЕ -->
<!-- НАЗВАНИЕ -->
<!-- ==================== -->
<div style="
<div style="
background:#202632;
    min-height:28px;
padding:12px 16px;
    background:#202632;
border-bottom:1px solid #7d899c;
    display:flex;
box-sizing:border-box;
    align-items:center;
text-align:center;
    justify-content:center;
    padding:3px 10px;
    box-sizing:border-box;
    border-bottom:1px solid #FFFFFF;
">
">
    <div style="
        font-size:14px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        line-height:18px;
    ">{{{title|Рецепт}}}
    </div>
</div>


<!-- ОСНОВНАЯ ЧАСТЬ -->
<div style="
<div style="
font-size:20px;
    display:inline-flex;
font-weight:bold;
    align-items:center;
color:#e8edf5;
    justify-content:center;
line-height:24px;
    gap:15px;
    padding:12px;
    box-sizing:border-box;
    flex-wrap:nowrap;
">
">
{{{title|Рецепт}}}
</div>


</div>
<!-- ==================== -->
<!-- ИНГРЕДИЕНТЫ -->
<!-- ИНГРЕДИЕНТЫ -->
<!-- ==================== -->
<div style="
padding:14px;
box-sizing:border-box;
">
<div style="
<div style="
font-size:15px;
    display:flex;
font-weight:bold;
    align-items:flex-start;
color:#b9c9dd;
    justify-content:center;
padding-bottom:8px;
    gap:8px;
margin-bottom:14px;
    flex-wrap:wrap;
border-bottom:1px solid #414b59;
    min-width:0;
    max-width:200px;
">
">
Ингредиенты
</div>
<!-- СЕТКА ИНГРЕДИЕНТОВ -->
<div style="
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
justify-items:center;
align-items:start;
width:100%;
box-sizing:border-box;
">
<!-- ========= 1 ========= -->


<!-- ИНГРЕДИЕНТ 1 -->
{{#if:{{{ingredient1_name|}}}|
{{#if:{{{ingredient1_name|}}}|
<div style="
<div style="
width:105px;
    display:flex;
padding:8px 6px;
    flex-direction:column;
box-sizing:border-box;
    align-items:center;
text-align:center;
    width:70px;
">
">
 
    <div style="
<div style="
        width:58px;
width:63px;
        height:58px;
height:63px;
        display:flex;
margin:0 auto;
        align-items:center;
background:#242c38;
        justify-content:center;
border:1px solid #667386;
        overflow:hidden;
border-radius:4px;
    ">[[File:{{{ingredient1_img}}}|46px]]
display:flex;
    </div>
align-items:center;
    <div style="
justify-content:center;
        font-size:12px;
overflow:hidden;
        color:#FFFFFF;
box-sizing:border-box;
        text-align:center;
">
        margin-top:5px;
 
        line-height:16px;
[[File:{{{ingredient1_img}}}|48px]]
    ">{{{ingredient1_name}}}{{#if:{{{ingredient1_amount|}}}|&nbsp;[{{{ingredient1_amount}}}]|}}
 
    </div>
</div>
 
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient1_name}}}
</div>
 
{{#if:{{{ingredient1_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient1_amount}}}
</div>
</div>
|}}
|}}


</div>
<!-- ИНГРЕДИЕНТ 2 -->
|}}
 
 
<!-- ========= 2 ========= -->
 
{{#if:{{{ingredient2_name|}}}|
{{#if:{{{ingredient2_name|}}}|
<div style="
<div style="
width:105px;
    display:flex;
padding:8px 6px;
    flex-direction:column;
box-sizing:border-box;
    align-items:center;
text-align:center;
    width:70px;
">
 
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
 
[[File:{{{ingredient2_img}}}|48px]]
 
</div>
 
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
">
{{{ingredient2_name}}}
    <div style="
</div>
        width:58px;
 
        height:58px;
{{#if:{{{ingredient2_amount|}}}|
        display:flex;
<div style="
        align-items:center;
font-size:13px;
        justify-content:center;
color:#9eabc0;
        overflow:hidden;
line-height:16px;
    ">[[File:{{{ingredient2_img}}}|46px]]
margin-top:1px;
    </div>
">
    <div style="
× {{{ingredient2_amount}}}
        font-size:12px;
</div>
        color:#FFFFFF;
|}}
        text-align:center;
 
        margin-top:5px;
        line-height:16px;
    ">{{{ingredient2_name}}}{{#if:{{{ingredient2_amount|}}}|&nbsp;[{{{ingredient2_amount}}}]|}}
    </div>
</div>
</div>
|}}
|}}


 
<!-- ИНГРЕДИЕНТ 3 -->
<!-- ========= 3 ========= -->
 
{{#if:{{{ingredient3_name|}}}|
{{#if:{{{ingredient3_name|}}}|
<div style="
<div style="
width:105px;
    display:flex;
padding:8px 6px;
    flex-direction:column;
box-sizing:border-box;
    align-items:center;
text-align:center;
    width:70px;
">
 
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
">
 
    <div style="
[[File:{{{ingredient3_img}}}|48px]]
        width:58px;
 
        height:58px;
</div>
        display:flex;
 
        align-items:center;
<div style="
        justify-content:center;
font-size:14px;
        overflow:hidden;
color:#e2e7ef;
    ">[[File:{{{ingredient3_img}}}|46px]]
text-align:center;
    </div>
margin-top:8px;
    <div style="
line-height:17px;
        font-size:12px;
word-break:break-word;
        color:#FFFFFF;
">
        text-align:center;
{{{ingredient3_name}}}
        margin-top:5px;
</div>
        line-height:16px;
 
    ">{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}|&nbsp;[{{{ingredient3_amount}}}]|}}
{{#if:{{{ingredient3_amount|}}}|
    </div>
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient3_amount}}}
</div>
</div>
|}}
|}}


</div>
<!-- ИНГРЕДИЕНТ 4 -->
|}}
 
 
<!-- ========= 4 ========= -->
 
{{#if:{{{ingredient4_name|}}}|
{{#if:{{{ingredient4_name|}}}|
<div style="
<div style="
width:105px;
    display:flex;
padding:8px 6px;
    flex-direction:column;
box-sizing:border-box;
    align-items:center;
text-align:center;
    width:70px;
">
 
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
 
[[File:{{{ingredient4_img}}}|48px]]
 
</div>
 
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient4_name}}}
</div>
 
{{#if:{{{ingredient4_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
">
× {{{ingredient4_amount}}}
    <div style="
</div>
        width:58px;
|}}
        height:58px;
 
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    ">[[File:{{{ingredient4_img}}}|46px]]
    </div>
    <div style="
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        margin-top:5px;
        line-height:16px;
    ">{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}|&nbsp;[{{{ingredient4_amount}}}]|}}
    </div>
</div>
</div>
|}}
|}}


 
<!-- ИНГРЕДИЕНТ 5 -->
<!-- ========= 5 ========= -->
 
{{#if:{{{ingredient5_name|}}}|
{{#if:{{{ingredient5_name|}}}|
<div style="
<div style="
width:105px;
    display:flex;
padding:8px 6px;
    flex-direction:column;
box-sizing:border-box;
    align-items:center;
text-align:center;
    width:70px;
">
 
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
 
[[File:{{{ingredient5_img}}}|48px]]
 
</div>
 
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient5_name}}}
</div>
 
{{#if:{{{ingredient5_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient5_amount}}}
</div>
|}}
 
</div>
|}}
 
 
<!-- ========= 6 ========= -->
 
{{#if:{{{ingredient6_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
 
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
 
[[File:{{{ingredient6_img}}}|48px]]
 
</div>
 
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient6_name}}}
</div>
 
{{#if:{{{ingredient6_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient6_amount}}}
</div>
|}}
 
</div>
|}}
 
 
<!-- ========= 7 ========= -->
 
{{#if:{{{ingredient7_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
 
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
">
 
    <div style="
[[File:{{{ingredient7_img}}}|48px]]
        width:58px;
 
        height:58px;
</div>
        display:flex;
 
        align-items:center;
<div style="
        justify-content:center;
font-size:14px;
        overflow:hidden;
color:#e2e7ef;
    ">[[File:{{{ingredient5_img}}}|46px]]
text-align:center;
    </div>
margin-top:8px;
    <div style="
line-height:17px;
        font-size:12px;
word-break:break-word;
        color:#FFFFFF;
">
        text-align:center;
{{{ingredient7_name}}}
        margin-top:5px;
</div>
        line-height:16px;
 
    ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}
{{#if:{{{ingredient7_amount|}}}|
    </div>
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient7_amount}}}
</div>
</div>
|}}
|}}


</div>
</div>
|}}
<!-- ========= 8 ========= -->


{{#if:{{{ingredient8_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
[[File:{{{ingredient8_img}}}|48px]]
</div>
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient8_name}}}
</div>
{{#if:{{{ingredient8_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient8_amount}}}
</div>
|}}
</div>
|}}
<!-- ========= 9 ========= -->
{{#if:{{{ingredient9_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
[[File:{{{ingredient9_img}}}|48px]]
</div>
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient9_name}}}
</div>
{{#if:{{{ingredient9_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient9_amount}}}
</div>
|}}
</div>
|}}
<!-- ========= 10 ========= -->
{{#if:{{{ingredient10_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
[[File:{{{ingredient10_img}}}|48px]]
</div>
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient10_name}}}
</div>
{{#if:{{{ingredient10_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient10_amount}}}
</div>
|}}
</div>
|}}
<!-- ========= 11 ========= -->
{{#if:{{{ingredient11_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
[[File:{{{ingredient11_img}}}|48px]]
</div>
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient11_name}}}
</div>
{{#if:{{{ingredient11_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient11_amount}}}
</div>
|}}
</div>
|}}
<!-- ========= 12 ========= -->
{{#if:{{{ingredient12_name|}}}|
<div style="
width:105px;
padding:8px 6px;
box-sizing:border-box;
text-align:center;
">
<div style="
width:63px;
height:63px;
margin:0 auto;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
box-sizing:border-box;
">
[[File:{{{ingredient12_img}}}|48px]]
</div>
<div style="
font-size:14px;
color:#e2e7ef;
text-align:center;
margin-top:8px;
line-height:17px;
word-break:break-word;
">
{{{ingredient12_name}}}
</div>
{{#if:{{{ingredient12_amount|}}}|
<div style="
font-size:13px;
color:#9eabc0;
line-height:16px;
margin-top:1px;
">
× {{{ingredient12_amount}}}
</div>
|}}
</div>
|}}
</div>
</div>
<!-- ==================== -->
<!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
<!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
<!-- ==================== -->
<div style="
<div style="
background:#202632;
    display:flex;
border-top:1px solid #7d899c;
    flex-direction:column;
padding:12px 16px;
    align-items:center;
box-sizing:border-box;
    justify-content:center;
    flex-shrink:0;
    min-width:70px;
    border-left:1px solid #FFFFFF;
    padding-left:10px;
">
">


<!-- АВТОМАТИЧЕСКАЯ КАРТИНКА МЕТОДА (с fallback) -->
<div style="
<div style="
display:flex;
    width:60px;
align-items:center;
    height:60px;
justify-content:center;
    display:flex;
gap:20px;
    align-items:center;
flex-wrap:wrap;
    justify-content:center;
">
    overflow:hidden;
 
">{{#switch:{{{method_name|}}}
 
|Микроволновка={{#ifexist:File:Microwave.gif|[[File:Microwave.gif|60px]]|[[File:Microwave.png|60px]]}}
<!-- СПОСОБ -->
|Смешивание={{#ifexist:File:Beaker.png|[[File:Beaker.png|60px]]|[[File:Beaker.gif|60px]]}}
 
|Нож={{#ifexist:File:Knife.png|[[File:Knife.png|60px]]|[[File:Knife.gif|60px]]}}
<div style="
|Скалка={{#ifexist:File:RollingPin.png|[[File:RollingPin.png|60px]]|[[File:RollingPin.gif|60px]]}}
display:flex;
|#default=[[File:Microwave.gif|60px]]
align-items:center;
}}
gap:10px;
">
 
<div style="
width:60px;
height:60px;
background:#242c38;
border:1px solid #667386;
border-radius:4px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
">
 
[[File:{{{method_img|Microwave.gif}}}|48px]]
 
</div>
</div>
<div>


<div style="
<div style="
font-size:12px;
    font-size:13px;
color:#91a0b6;
    font-weight:bold;
line-height:16px;
    line-height:17px;
">
    text-align:center;
Способ приготовления
    color:#FFFFFF;
    margin-top:4px;
">{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|<br>{{{method_time}}}|}}
</div>
</div>


<div style="
font-size:15px;
font-weight:bold;
color:#e8edf5;
line-height:19px;
">
{{{method_name|Приготовление}}}
</div>
</div>
{{#if:{{{method_time|}}}|
<div style="
font-size:13px;
color:#aab6c8;
line-height:17px;
">
{{{method_time}}}
</div>
|}}
</div>
</div>
<!-- СТРЕЛКА -->
<div style="
font-size:22px;
color:#71829c;
">
</div>


<!-- РЕЗУЛЬТАТ -->
<!-- РЕЗУЛЬТАТ -->
<div style="
<div style="
display:flex;
    display:flex;
align-items:center;
    align-items:flex-start;
gap:10px;
    justify-content:center;
    border-left:1px solid #FFFFFF;
    padding-left:10px;
">
">
    <div style="
        display:flex;
        flex-direction:column;
        align-items:center;
        width:75px;
    ">
        <div style="
            width:58px;
            height:58px;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
        ">[[File:{{{result_img}}}|46px]]
        </div>


<div style="
        <div style="
width:60px;
            font-size:12px;
height:60px;
            color:#FFFFFF;
background:#242c38;
            text-align:center;
border:1px solid #667386;
            margin-top:5px;
border-radius:4px;
            line-height:16px;
display:flex;
        ">{{{result_name|Результат}}}
align-items:center;
        </div>
justify-content:center;
    </div>
overflow:hidden;
">
 
[[File:{{{result_img}}}|48px]]
 
</div>
 
<div>
 
<div style="
font-size:12px;
color:#91a0b6;
line-height:16px;
">
Результат
</div>
 
<div style="
font-size:15px;
font-weight:bold;
color:#e8edf5;
line-height:19px;
">
{{{result_name|Результат}}}
</div>
 
</div>
 
</div>
</div>


</div>
</div>
</div>
</div>
</div>
</includeonly>
</includeonly>
<noinclude>
__NOTOC__
== Recipe — шаблон рецепта ==
Универсальный шаблон рецептов.
Ингредиенты отображаются компактными карточками в сетке по три элемента в ряд.
=== Параметры ===
{| class="wikitable"
! Параметр !! Описание !! Обязательный
|-
| <code>title</code> || Название рецепта || Да
|-
| <code>ingredient1_name</code> ... <code>ingredient12_name</code> || Названия ингредиентов || Для используемых ингредиентов
|-
| <code>ingredient1_img</code> ... <code>ingredient12_img</code> || Изображения ингредиентов || Для используемых ингредиентов
|-
| <code>ingredient1_amount</code> ... <code>ingredient12_amount</code> || Количество ингредиентов || Нет
|-
| <code>method_name</code> || Способ приготовления || Да
|-
| <code>method_img</code> || Изображение способа приготовления || Нет
|-
| <code>method_time</code> || Время приготовления || Нет
|-
| <code>result_name</code> || Название результата || Да
|-
| <code>result_img</code> || Изображение результата || Да
|}
=== Пример ===
<pre>
{{Recipe
|title=Тесто
|ingredient1_name=Мука
|ingredient1_img=FoodFlour.png
|ingredient1_amount=15
|ingredient2_name=Вода
|ingredient2_img=FoodWater.png
|ingredient2_amount=10
|ingredient3_name=Соль
|ingredient3_img=FoodSalt.png
|ingredient3_amount=1
|method_name=Смешивание
|method_img=Mixing.png
|result_name=Тесто
|result_img=FoodDough.png
}}
</pre>
[[Категория:Шаблоны]]
</noinclude>

Текущая версия от 02:46, 14 августа 2026