Шаблон:recipe

Вернуться

Строка 1: Строка 1:
<includeonly>
<includeonly>
<div style="
<td style="
     display:flex;
     vertical-align: top;
    flex-direction:column;
     background: #171B22;
     background:#171B22;
     border: 1px solid #FFFFFF;
     border:1px solid #FFFFFF;
     box-sizing: border-box;
     box-sizing:border-box;
     overflow: hidden;
     overflow:hidden;
     color: #FFFFFF;
     color:#FFFFFF;
     font-family: Arial, sans-serif;
     font-family:Arial,sans-serif;
    padding: 12px;
    margin: 0;
">
">


     <!-- НАЗВАНИЕ -->
     <!-- НАЗВАНИЕ -->
     <div style="
     <div style="
         min-height:28px;
         min-height: 28px;
         background:#202632;
         background: #202632;
         display:flex;
         display: flex;
         align-items:center;
         align-items: center;
         justify-content:center;
         justify-content: center;
         padding:3px 10px;
         padding: 3px 10px;
         box-sizing:border-box;
         box-sizing: border-box;
         border-bottom:1px solid #FFFFFF;
         border-bottom: 1px solid #FFFFFF;
        margin: -12px -12px 12px -12px; /* компенсация отступов ячейки */
     ">
     ">
         <div style="
         <div style="
             font-size:14px;
             font-size: 14px;
             font-weight:bold;
             font-weight: bold;
             color:#FFFFFF;
             color: #FFFFFF;
             text-align:center;
             text-align: center;
             line-height:18px;
             line-height: 18px;
         ">{{{title|Рецепт}}}</div>
         ">{{{title|Рецепт}}}</div>
     </div>
     </div>


     <!-- ДВЕ КОЛОНКИ -->
     <!-- ОСНОВНАЯ ЧАСТЬ: ингредиенты + метод + результат -->
     <div style="
     <div style="
         display:flex;
         display: flex;
         align-items:flex-start;
         align-items: center;
         gap:12px;
         justify-content: center;
         padding:12px;
         gap: 15px;
         box-sizing:border-box;
         box-sizing: border-box;
     ">
     ">


         <!-- ЛЕВАЯ КОЛОНКА: ИНГРЕДИЕНТЫ (сетка 2 колонки) -->
         <!-- ИНГРЕДИЕНТЫ -->
         <div style="
         <div style="
             display:grid;
             display: flex;
             grid-template-columns: repeat(2, minmax(0, 1fr)); /* ровно 2 колонки */
             align-items: flex-start;
             gap:8px;
            justify-content: center;
             flex:1;
             gap: 8px;
             align-items:start;
             flex-wrap: wrap;
             min-width: 0;
         ">
         ">
            <!-- ИНГРЕДИЕНТ 1 -->
             {{#if:{{{ingredient1_name|}}}|<div style="display:flex; flex-direction:column; align-items:center; width:70px;">
             {{#if:{{{ingredient1_name|}}}|
                 <div style="width:58px;height:58px;display:flex;align-items:center;justify-content:center;overflow:hidden;">[[File:{{{ingredient1_img}}}|46px]]</div>
            <div style="
                 <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>
                display:flex;
             </div>|}}
                flex-direction:column;
            <!-- Аналогично для ingredient2_... ingredient5_... -->
                align-items:center;
        </div>
                width:100%;
            ">
                 <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="
            <div style="
            display: flex;
                display:flex;
            flex-direction: column;
                flex-direction:column;
            align-items: center;
                align-items:center;
             justify-content: center;
                width:100%;
            flex-shrink: 0;
             ">
            min-width: 80px;
                <div style="
            border-left: 1px solid #FFFFFF;
                    width:58px;
             padding-left: 15px;
                    height:58px;
        ">
                    display:flex;
            <div style="width:60px;height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
                    align-items:center;
                 {{#switch:{{{method_name|}}}
                    justify-content:center;
                |Микроволновка=[[File:Microwave.gif|60px]]
                    overflow:hidden;
                |Смешивание=[[File:Beaker.png|60px]]
                ">[[File:{{{ingredient2_img}}}|46px]]</div>
                 |Нож=[[File:Knife.png|60px]]
                <div style="
                 |Скалка=[[File:RollingPin.png|60px]]
                    font-size:12px;
                |#default=[[File:Microwave.gif|60px]]
                    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:100%;
            ">
                <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:100%;
            ">
                <div style="
                    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>
            |}}
 
            <!-- ИНГРЕДИЕНТ 5 -->
            {{#if:{{{ingredient5_name|}}}|
            <div style="
                display:flex;
                flex-direction:column;
                align-items:center;
                width:100%;
            ">
                <div style="
                    width:58px;
                    height:58px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    overflow:hidden;
                ">[[File:{{{ingredient5_img}}}|46px]]</div>
                 <div style="
                    font-size:12px;
                    color:#FFFFFF;
                    text-align:center;
                    margin-top:5px;
                    line-height:16px;
                ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}</div>
             </div>
             </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;
             display: flex;
            flex-direction:column;
             align-items: flex-start;
             align-items:center;
             justify-content: center;
            justify-content:flex-start;
             border-left: 1px solid #FFFFFF;
             flex-shrink:0;
             padding-left: 15px;
            min-width:80px;
             border-left:1px solid #FFFFFF;
             padding-left:15px;
            gap:12px;
         ">
         ">
            <!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
             <div style="display:flex; flex-direction:column; align-items:center; width:75px;">
             <div style="
                 <div style="width:58px;height:58px;display:flex;align-items:center;justify-content:center;overflow:hidden;">[[File:{{{result_img}}}|46px]]</div>
                display:flex;
                 <div style="font-size:12px;color:#FFFFFF;text-align:center;margin-top:5px;line-height:16px;">{{{result_name|Результат}}}</div>
                flex-direction:column;
                align-items:center;
            ">
                <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 style="
                display:flex;
                flex-direction:column;
                align-items:center;
            ">
                 <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>
</includeonly>
</includeonly>