Шаблон:recipe
| Строка 1: | Строка 1: | ||
<includeonly> | <includeonly> | ||
<div style="display: | <div style=" | ||
display:flex; | |||
flex-direction:column; | |||
width:100%; | |||
max-width:760px; | |||
margin:12px auto; | |||
background:#171b22; | |||
border:1px solid #8995a8; | |||
border-radius:6px; | |||
box-shadow:0 2px 8px rgba(0,0,0,0.45); | |||
overflow:hidden; | |||
color:#e8edf5; | |||
font-family:Arial,sans-serif; | |||
box-sizing:border-box; | |||
"> | |||
<!-- НАЗВАНИЕ --> | <!-- НАЗВАНИЕ --> | ||
<div style="background:# | <div style=" | ||
background:#202632; | |||
border-bottom:1px solid #7d899c; | |||
padding:10px 14px; | |||
text-align:center; | |||
box-sizing:border-box; | |||
"> | |||
<div style="font-size: | <div style=" | ||
font-size:20px; | |||
font-weight:bold; | |||
color:#e8edf5; | |||
line-height:24px; | |||
"> | |||
{{{title|Рецепт}}} | {{{title|Рецепт}}} | ||
</div> | </div> | ||
| Строка 11: | Строка 36: | ||
</div> | </div> | ||
<!-- ИНГРЕДИЕНТЫ --> | <!-- ИНГРЕДИЕНТЫ --> | ||
<div style=" | <div style=" | ||
padding:14px; | |||
box-sizing:border-box; | |||
"> | |||
<div style=" | |||
font-size:15px; | |||
font-weight:bold; | |||
color:#b8c7dc; | |||
margin-bottom:10px; | |||
padding-bottom:6px; | |||
border-bottom:1px solid #414b5b; | |||
"> | |||
Ингредиенты | |||
</div> | |||
<!-- СЕТКА --> | |||
<div style=" | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); | |||
gap:8px; | |||
width:100%; | |||
box-sizing:border-box; | |||
"> | |||
<!-- ИНГРЕДИЕНТ 1 --> | <!-- ИНГРЕДИЕНТ 1 --> | ||
{{#if:{{{ingredient1_name|}}}| | {{#if:{{{ingredient1_name|}}}| | ||
<div style=" | <div style=" | ||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style="width: | <div style=" | ||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
border:1px solid #667386; | |||
border-radius:4px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
box-sizing:border-box; | |||
"> | |||
[[File:{{{ingredient1_img}}}|48px]] | [[File:{{{ingredient1_img}}}|48px]] | ||
</div> | </div> | ||
<div style="font-size: | <div style=" | ||
{{{ingredient1_name}}}{{#if:{{{ingredient1_amount|}}}| | font-size:13px; | ||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient1_name}}} | |||
{{#if:{{{ingredient1_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient1_amount}}}</span>|}} | |||
</div> | </div> | ||
</div> | </div> | ||
|}} | |}} | ||
<!-- ИНГРЕДИЕНТ 2 --> | <!-- ИНГРЕДИЕНТ 2 --> | ||
{{#if:{{{ingredient2_name|}}}| | {{#if:{{{ingredient2_name|}}}| | ||
<div style=" | <div style=" | ||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style="width: | <div style=" | ||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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]] | [[File:{{{ingredient2_img}}}|48px]] | ||
</div> | </div> | ||
<div style="font-size: | <div style=" | ||
{{{ingredient2_name}}}{{#if:{{{ingredient2_amount|}}}| | font-size:13px; | ||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient2_name}}} | |||
{{#if:{{{ingredient2_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient2_amount}}}</span>|}} | |||
</div> | </div> | ||
</div> | </div> | ||
|}} | |}} | ||
<!-- ИНГРЕДИЕНТ 3 --> | <!-- ИНГРЕДИЕНТ 3 --> | ||
{{#if:{{{ingredient3_name|}}}| | {{#if:{{{ingredient3_name|}}}| | ||
<div style=" | <div style=" | ||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style="width: | <div style=" | ||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
border:1px solid #667386; | |||
border-radius:4px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
box-sizing:border-box; | |||
"> | |||
[[File:{{{ingredient3_img}}}|48px]] | [[File:{{{ingredient3_img}}}|48px]] | ||
</div> | </div> | ||
<div style="font-size: | <div style=" | ||
{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}| | font-size:13px; | ||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient3_name}}} | |||
{{#if:{{{ingredient3_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient3_amount}}}</span>|}} | |||
</div> | </div> | ||
</div> | </div> | ||
|}} | |}} | ||
<!-- ИНГРЕДИЕНТ 4 --> | <!-- ИНГРЕДИЕНТ 4 --> | ||
{{#if:{{{ingredient4_name|}}}| | {{#if:{{{ingredient4_name|}}}| | ||
<div style=" | <div style=" | ||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style="width: | <div style=" | ||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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]] | [[File:{{{ingredient4_img}}}|48px]] | ||
</div> | </div> | ||
<div style="font-size: | <div style=" | ||
{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}| | font-size:13px; | ||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient4_name}}} | |||
{{#if:{{{ingredient4_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient4_amount}}}</span>|}} | |||
</div> | </div> | ||
</div> | </div> | ||
|}} | |}} | ||
<!-- ИНГРЕДИЕНТ 5 --> | <!-- ИНГРЕДИЕНТ 5 --> | ||
{{#if:{{{ingredient5_name|}}}| | {{#if:{{{ingredient5_name|}}}| | ||
<div style=" | <div style=" | ||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style="width: | <div style=" | ||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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]] | [[File:{{{ingredient5_img}}}|48px]] | ||
</div> | </div> | ||
<div style="font-size: | <div style=" | ||
{{{ | font-size:13px; | ||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient5_name}}} | |||
{{#if:{{{ingredient5_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient5_amount}}}</span>|}} | |||
</div> | |||
</div> | |||
|}} | |||
<!-- ИНГРЕДИЕНТ 6 --> | |||
{{#if:{{{ingredient6_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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:13px; | |||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient6_name}}} | |||
{{#if:{{{ingredient6_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient6_amount}}}</span>|}} | |||
</div> | |||
</div> | |||
|}} | |||
<!-- ИНГРЕДИЕНТ 7 --> | |||
{{#if:{{{ingredient7_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
border:1px solid #667386; | |||
border-radius:4px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
box-sizing:border-box; | |||
"> | |||
[[File:{{{ingredient7_img}}}|48px]] | |||
</div> | |||
<div style=" | |||
font-size:13px; | |||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient7_name}}} | |||
{{#if:{{{ingredient7_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient7_amount}}}</span>|}} | |||
</div> | |||
</div> | |||
|}} | |||
<!-- ИНГРЕДИЕНТ 8 --> | |||
{{#if:{{{ingredient8_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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:13px; | |||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient8_name}}} | |||
{{#if:{{{ingredient8_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient8_amount}}}</span>|}} | |||
</div> | |||
</div> | |||
|}} | |||
<!-- ИНГРЕДИЕНТ 9 --> | |||
{{#if:{{{ingredient9_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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:13px; | |||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient9_name}}} | |||
{{#if:{{{ingredient9_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient9_amount}}}</span>|}} | |||
</div> | |||
</div> | |||
|}} | |||
<!-- ИНГРЕДИЕНТ 10 --> | |||
{{#if:{{{ingredient10_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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:13px; | |||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient10_name}}} | |||
{{#if:{{{ingredient10_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient10_amount}}}</span>|}} | |||
</div> | |||
</div> | |||
|}} | |||
<!-- ИНГРЕДИЕНТ 11 --> | |||
{{#if:{{{ingredient11_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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:13px; | |||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient11_name}}} | |||
{{#if:{{{ingredient11_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient11_amount}}}</span>|}} | |||
</div> | </div> | ||
| Строка 92: | Строка 526: | ||
|}} | |}} | ||
<!-- ИНГРЕДИЕНТ 12 --> | |||
{{#if:{{{ingredient12_name|}}}| | |||
<div style=" | |||
background:#202632; | |||
border:1px solid #5f6b7d; | |||
border-radius:4px; | |||
padding:8px 6px; | |||
box-sizing:border-box; | |||
text-align:center; | |||
"> | |||
<div style=" | |||
width:64px; | |||
height:64px; | |||
margin:0 auto; | |||
background:#151a21; | |||
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> | ||
<div style=" | |||
<div style=" | font-size:13px; | ||
color:#e2e7ef; | |||
line-height:17px; | |||
margin-top:7px; | |||
word-break:break-word; | |||
"> | |||
{{{ingredient12_name}}} | |||
{{#if:{{{ingredient12_amount|}}}|<br><span style="color:#9eabc0;">× {{{ingredient12_amount}}}</span>|}} | |||
</div> | |||
<div | </div> | ||
|}} | |||
</div> | |||
</div> | </div> | ||
<div style="font-size: | |||
{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|< | <!-- СПОСОБ + РЕЗУЛЬТАТ --> | ||
<div style=" | |||
border-top:1px solid #414b5b; | |||
background:#1d222b; | |||
padding:12px 14px; | |||
box-sizing:border-box; | |||
"> | |||
<div style=" | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:18px; | |||
flex-wrap:wrap; | |||
"> | |||
<!-- СПОСОБ --> | |||
<div style=" | |||
display:flex; | |||
align-items:center; | |||
gap:10px; | |||
min-width:170px; | |||
"> | |||
<div style=" | |||
width:58px; | |||
height:58px; | |||
background:#151a21; | |||
border:1px solid #667386; | |||
border-radius:4px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
flex-shrink:0; | |||
"> | |||
[[File:{{{method_img|Microwave.gif}}}|48px]] | |||
</div> | |||
<div style="text-align:left;"> | |||
<div style=" | |||
font-size:12px; | |||
color:#8f9bae; | |||
line-height:16px; | |||
"> | |||
Способ приготовления | |||
</div> | |||
<div style=" | |||
font-size:15px; | |||
font-weight:bold; | |||
color:#e8edf5; | |||
line-height:19px; | |||
"> | |||
{{{method_name|Приготовление}}} | |||
</div> | |||
{{#if:{{{method_time|}}}| | |||
<div style=" | |||
font-size:13px; | |||
color:#aeb9ca; | |||
line-height:17px; | |||
margin-top:2px; | |||
"> | |||
{{{method_time}}} | |||
</div> | </div> | ||
|}} | |||
</div> | </div> | ||
</div> | |||
<!-- РАЗДЕЛИТЕЛЬ --> | |||
<div style=" | |||
font-size:22px; | |||
color:#68758a; | |||
"> | |||
→ | |||
</div> | |||
<!-- РЕЗУЛЬТАТ --> | <!-- РЕЗУЛЬТАТ --> | ||
<div style="display:flex; align-items:flex- | <div style=" | ||
display:flex; | |||
align-items:center; | |||
gap:10px; | |||
min-width:170px; | |||
"> | |||
<div style=" | |||
width:58px; | |||
height:58px; | |||
background:#151a21; | |||
border:1px solid #667386; | |||
border-radius:4px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
flex-shrink:0; | |||
"> | |||
[[File:{{{result_img}}}|48px]] | |||
</div> | |||
<div style=" | <div style="text-align:left;"> | ||
<div style=" | <div style=" | ||
font-size:12px; | |||
color:#8f9bae; | |||
line-height:16px; | |||
"> | |||
Результат | |||
</div> | </div> | ||
<div style="font-size: | <div style=" | ||
font-size:15px; | |||
font-weight:bold; | |||
color:#e8edf5; | |||
line-height:19px; | |||
"> | |||
{{{result_name|Результат}}} | {{{result_name|Результат}}} | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | |||
</div> | |||
</div> | </div> | ||
</div> | </div> | ||
</includeonly> | </includeonly> | ||
<noinclude> | <noinclude> | ||
| Строка 135: | Строка 714: | ||
== Recipe — шаблон рецепта == | == Recipe — шаблон рецепта == | ||
Шаблон для отображения рецептов в стиле интерфейса вики. | |||
Ингредиенты автоматически размещаются в адаптивной сетке. В зависимости от доступной ширины помещается примерно 2–3 карточки в ряд. | |||
=== Параметры === | === Параметры === | ||
| Строка 144: | Строка 725: | ||
| <code>title</code> || Название рецепта || Да | | <code>title</code> || Название рецепта || Да | ||
|- | |- | ||
| <code>ingredient1_name</code> | | <code>ingredient1_name</code> ... <code>ingredient12_name</code> || Названия ингредиентов || Да для используемых ингредиентов | ||
|- | |- | ||
| <code> | | <code>ingredient1_img</code> ... <code>ingredient12_img</code> || Изображения ингредиентов || Да для используемых ингредиентов | ||
|- | |- | ||
| <code> | | <code>ingredient1_amount</code> ... <code>ingredient12_amount</code> || Количество ингредиентов || Нет | ||
|- | |- | ||
| <code>method_name</code> || Способ приготовления || Да | | <code>method_name</code> || Способ приготовления || Да | ||
| Строка 187: | Строка 744: | ||
=== Способ приготовления === | === Способ приготовления === | ||
Если <code>method_img</code> не указан, | Если <code>method_img</code> не указан, используется: | ||
<code>Microwave.gif</code> | <code>Microwave.gif</code> | ||
Пример: | |||
<pre> | <pre> | ||
| Строка 198: | Строка 755: | ||
</pre> | </pre> | ||
Другой способ: | |||
<pre> | <pre> | ||
|method_name=Нож | |method_name=Нож | ||
|method_img=Knife.png | |method_img=Knife.png | ||
</pre> | </pre> | ||
| Строка 216: | Строка 766: | ||
<pre> | <pre> | ||
{{Recipe | {{Recipe | ||
|title= | |title=Пельмени | ||
|ingredient1_name= | |ingredient1_name=Тесто | ||
|ingredient1_img= | |ingredient1_img=FoodDough.png | ||
|ingredient1_amount= | |ingredient1_amount=2 | ||
|ingredient2_name= | |ingredient2_name=Мясо | ||
|ingredient2_img= | |ingredient2_img=FoodMeat.png | ||
|ingredient2_amount= | |ingredient2_amount=2 | ||
|ingredient3_name= | |ingredient3_name=Лук | ||
|ingredient3_img= | |ingredient3_img=FoodOnion.png | ||
|ingredient3_amount=1 | |ingredient3_amount=1 | ||
|ingredient4_name=Соль | |||
|ingredient4_img=FoodSalt.png | |||
|ingredient4_amount=1 | |||
|ingredient5_name=Перец | |||
|ingredient5_img=FoodPepper.png | |||
|ingredient5_amount=1 | |||
|ingredient6_name=Вода | |||
|ingredient6_img=FoodWater.png | |||
|ingredient6_amount=1 | |||
|method_name=Микроволновка | |method_name=Микроволновка | ||
|method_img=Microwave.gif | |||
|method_time=10 сек. | |method_time=10 сек. | ||
|result_name= | |result_name=Пельмени | ||
|result_img= | |result_img=FoodDumplings.png | ||
}} | }} | ||
</pre> | </pre> | ||