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

Материал из МК14 | Space Station 14 Wiki
Нет описания правки
Нет описания правки
 
Строка 1: Строка 1:
<includeonly>
<includeonly>
<td style="
<div style="
     vertical-align: top;
    display:inline-flex;
     background: #171B22;
     vertical-align:top;
     border: 1px solid #FFFFFF;
    flex-direction:column;
     box-sizing: border-box;
     background:#171B22;
     overflow: hidden;
     border:1px solid #FFFFFF;
     color: #FFFFFF;
     box-sizing:border-box;
     font-family: Arial, sans-serif;
     overflow:hidden;
     padding: 12px;
     color:#FFFFFF;
     margin: 0;
     font-family:Arial,sans-serif;
     margin:4px;
    width:auto;
     max-width:350px;
">
">


     <!-- НАЗВАНИЕ -->
<!-- НАЗВАНИЕ -->
<div style="
    min-height:28px;
    background:#202632;
    display:flex;
    align-items: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="
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:12px;
    box-sizing:border-box;
    flex-wrap:nowrap;
">
 
<!-- ИНГРЕДИЕНТЫ -->
<div style="
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
    max-width:200px;
">
 
<!-- ИНГРЕДИЕНТ 1 -->
{{#if:{{{ingredient1_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
    <div style="
        width:58px;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    ">[[File:{{{ingredient1_img}}}|46px]]
    </div>
    <div style="
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        margin-top:5px;
        line-height:16px;
    ">{{{ingredient1_name}}}{{#if:{{{ingredient1_amount|}}}|&nbsp;[{{{ingredient1_amount}}}]|}}
    </div>
</div>
|}}
 
<!-- ИНГРЕДИЕНТ 2 -->
{{#if:{{{ingredient2_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
    <div style="
        width:58px;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    ">[[File:{{{ingredient2_img}}}|46px]]
    </div>
    <div style="
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        margin-top:5px;
        line-height:16px;
    ">{{{ingredient2_name}}}{{#if:{{{ingredient2_amount|}}}|&nbsp;[{{{ingredient2_amount}}}]|}}
    </div>
</div>
|}}
 
<!-- ИНГРЕДИЕНТ 3 -->
{{#if:{{{ingredient3_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
    <div style="
        width:58px;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    ">[[File:{{{ingredient3_img}}}|46px]]
    </div>
    <div style="
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        margin-top:5px;
        line-height:16px;
    ">{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}|&nbsp;[{{{ingredient3_amount}}}]|}}
     </div>
</div>
|}}
 
<!-- ИНГРЕДИЕНТ 4 -->
{{#if:{{{ingredient4_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
    <div style="
        width:58px;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    ">[[File:{{{ingredient4_img}}}|46px]]
    </div>
     <div style="
     <div style="
         min-height: 28px;
         font-size:12px;
         background: #202632;
         color:#FFFFFF;
        display: flex;
         text-align:center;
         align-items: center;
         margin-top:5px;
         justify-content: center;
         line-height:16px;
         padding: 3px 10px;
     ">{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}|&nbsp;[{{{ingredient4_amount}}}]|}}
        box-sizing: border-box;
        border-bottom: 1px solid #FFFFFF;
        margin: -12px -12px 12px -12px; /* компенсация отступов ячейки */
     ">
        <div style="
            font-size: 14px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            line-height: 18px;
        ">{{{title|Рецепт}}}</div>
     </div>
     </div>
</div>
|}}


    <!-- ОСНОВНАЯ ЧАСТЬ: ингредиенты + метод + результат -->
<!-- ИНГРЕДИЕНТ 5 -->
{{#if:{{{ingredient5_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
    <div style="
        width:58px;
        height:58px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    ">[[File:{{{ingredient5_img}}}|46px]]
    </div>
     <div style="
     <div style="
         display: flex;
         font-size:12px;
        align-items: center;
        color:#FFFFFF;
        justify-content: center;
        text-align:center;
        gap: 15px;
        margin-top:5px;
        box-sizing: border-box;
        line-height:16px;
     ">
    ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}
    </div>
</div>
|}}
 
</div>
 
<!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    min-width:70px;
    border-left:1px solid #FFFFFF;
    padding-left:10px;
">
 
<!-- АВТОМАТИЧЕСКАЯ КАРТИНКА МЕТОДА (с fallback) -->
<div style="
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    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]]}}
|Скалка={{#ifexist:File:RollingPin.png|[[File:RollingPin.png|60px]]|[[File:RollingPin.gif|60px]]}}
|#default=[[File:Microwave.gif|60px]]
}}
</div>
 
<div style="
    font-size:13px;
    font-weight:bold;
    line-height:17px;
    text-align:center;
    color:#FFFFFF;
     margin-top:4px;
">{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|<br>{{{method_time}}}|}}
</div>


        <!-- ИНГРЕДИЕНТЫ -->
</div>
        <div style="
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            min-width: 0;
        ">
            {{#if:{{{ingredient1_name|}}}|<div style="display:flex; flex-direction:column; align-items:center; width:70px;">
                <div style="width:58px;height:58px;display:flex;align-items:center;justify-content:center;overflow:hidden;">[[File:{{{ingredient1_img}}}|46px]]</div>
                <div style="font-size:12px;color:#FFFFFF;text-align:center;margin-top:5px;line-height:16px;">{{{ingredient1_name}}}{{#if:{{{ingredient1_amount|}}}|&nbsp;[{{{ingredient1_amount}}}]|}}</div>
            </div>|}}
            <!-- Аналогично для ingredient2_... ingredient5_... -->
        </div>


        <!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
<!-- РЕЗУЛЬТАТ -->
<div style="
    display:flex;
    align-items:flex-start;
    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="
         <div style="
             display: flex;
             width:58px;
             flex-direction: column;
             height:58px;
             align-items: center;
             display:flex;
            justify-content: center;
             align-items:center;
            flex-shrink: 0;
            justify-content:center;
             min-width: 80px;
            overflow:hidden;
            border-left: 1px solid #FFFFFF;
        ">[[File:{{{result_img}}}|46px]]
            padding-left: 15px;
        ">
            <div style="width:60px;height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
                {{#switch:{{{method_name|}}}
                |Микроволновка=[[File:Microwave.gif|60px]]
                |Смешивание=[[File:Beaker.png|60px]]
                |Нож=[[File:Knife.png|60px]]
                |Скалка=[[File:RollingPin.png|60px]]
                |#default=[[File:Microwave.gif|60px]]
                }}
            </div>
            <div style="font-size:13px;font-weight:bold;line-height:17px;text-align:center;color:#FFFFFF;margin-top:4px;">{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|<br>{{{method_time}}}|}}</div>
         </div>
         </div>


        <!-- РЕЗУЛЬТАТ -->
         <div style="
         <div style="
             display: flex;
             font-size:12px;
            align-items: flex-start;
             color:#FFFFFF;
             justify-content: center;
             text-align:center;
            border-left: 1px solid #FFFFFF;
            margin-top:5px;
             padding-left: 15px;
            line-height:16px;
        ">
        ">{{{result_name|Результат}}}
            <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="font-size:12px;color:#FFFFFF;text-align:center;margin-top:5px;line-height:16px;">{{{result_name|Результат}}}</div>
            </div>
         </div>
         </div>
    </div>
</div>


    </div>
</div>
</td>
</div>
</includeonly>
</includeonly>

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