[hideprofile]
игра: в погоне за силой
в погоне за силой
Рады приветствовать всех богов, богинь, людей и тех, кто ещё не определился на нашей первой, скажем так, разминочной, настольной бродилке!
В чём суть: каждый желающий может поучаствовать в этой игре, чтобы заработать приятные призы
Как играть: нужно бросить 1 кубик 10 граней и дождаться своего задания. Они простые, не пугайтесь, заставлять вас писать посты никто не будет.
За выполнение задания вы получаете баллы, которые суммируются, а как только вы дойдёте до отметки "100" на карте, то получите один или несколько призов, зависящих от количества набранных баллов.Как часто можно кидать кубик: карта будет обновляться, показывая вашу позицию, в 11:00 и 21:00 по мск. В это же время будут выдаваться задания. Соответственно в промежутках между этими часами можно выполнить задание и кинуть кубик!
Кто может участвовать: ВСЕ! Да-да, даже те, кто ещеё не подал анкету. Но есть большое и жирное НО. Те, кто ещё не прошёл увлекательную процедуру написания и принятия анкеты, смогут получить призы только при оформлении профиля.
Когда закончится игра: думаю. минимум неделя у вас есть, а то и больше) Всё зависит от вашей же активности!
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>в погоне за силой</title>
<style>
body {
background: url('parchment-texture.jpg') no-repeat center center fixed;
background-size: cover;
font-family: 'Segoe UI', sans-serif;
color: white;
margin: 0;
padding: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, 60px);
grid-gap: 6px;
justify-content: center;
margin: 40px auto;
padding: 20px;
background-color: rgba(20, 20, 20, 0.6);
border: 4px solid #014D4E; /* тёмная морская волна */
border-radius: 12px;
box-shadow: 0 0 20px rgba(1, 77, 78, 0.6); /* свечение того же цвета */
}
.grid-container::before {
content: "";
position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; */
background: url('https://upforme.ru/uploads/001c/85/42/7/168484.jpg') center/cover no-repeat;
opacity: 0.35; /* сила фона — подберите значение */
z-index: 0;
filter: contrast(0.95) saturate(0.9); /* опционально для настроек */
}
.grid-item {
position: relative;
z-index: 1;
background-color: rgba(44,44,44,0.85);
border: 2px solid #555;
border-radius: 6px;
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 10px 6px;
box-shadow: inset 0 0 5px #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 54px;
}
.grid-item:nth-child(even) {
background-color: #1f3b3b;
}
.grid-item:nth-child(odd) {
background-color: #3b1f1f;
}
h1 {
text-align: center;
color: #013220;
font-size: 50px;
text-shadow: 1px 1px 4px #000;
}
/* Контейнер для иконок */
.icons {
display: flex;
gap: 4px;
justify-content: center;
align-items: center;
flex-wrap: nowrap; /* не переносить, если хотите переносить — поставить wrap */
max-width: calc(10px * 3 + 4px * 2); /* ограничение ширины, чтобы в строке максимум 3 иконки */
overflow: hidden; /* обрезать лишнее, если случайно вставят больше иконок */
}
/* Самая маленькая иконка 10x10 */
.icons img,
.icons .icon {
width: 20px;
height: 20px;
display: inline-block;
object-fit: cover; /* для <img> */
border-radius: 2px; /* опционально, сглаживание */
}
/* Опционально: если хотите показать пустое место для нетипичных случаев */
.icons.empty {
min-height: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<!-- Генерация чисел от 1 до 72 -->
<!-- Можно расширить до 100, если нужно -->
<!-- Каждая клетка — .grid-item -->
<!-- Ниже пример с 72 клетками -->
<!-- Можно сгенерировать автоматически через JS -->
<!-- Здесь вручную для наглядности -->
<!-- Начало -->
<div class="grid-item">
<div>1</div>
</div>
<div class="grid-item">
<div>2</div>
</div>
<div class="grid-item">
<div>3</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/4-1758040335.png" alt="иконка 2">
</div>
</div>
<div class="grid-item">4</div>
<div class="grid-item">
<div>5</div>
</div>
<div class="grid-item">
<div>6</div>
</div>
<div class="grid-item">
<div>7</div>
</div>
<div class="grid-item">
<div>8</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/10-1757957969.png" alt="иконка 1">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/27-1757956421.png" alt="иконка 1">
</div>
</div>
<div class="grid-item">
<div>9</div>
</div>
<div class="grid-item">
<div>10</div>
</div>
<div class="grid-item">
<div>11</div>
</div>
<div class="grid-item">
<div>12</div>
</div>
<div class="grid-item">
<div>13</div>
</div>
<div class="grid-item">14</div>
<div class="grid-item">
<div>15</div>
</div>
<div class="grid-item">
<div>16</div>
</div>
<div class="grid-item">
<div>17</div>
</div>
<div class="grid-item">
<div>18</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/26-1758011442.jpg" alt="иконка 1">
</div>
</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
<div class="grid-item">
<div>21</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/20-1757785240.png" alt="иконка 1">
</div>
</div>
<div class="grid-item">
<div>22</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/13-1757770749.jpg" alt="иконка 1">
</div>
</div>
<div class="grid-item">
<div>23</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/12-1758013008.png" alt="иконка 1">
</div>
</div>
<div class="grid-item">
<div>24</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/18-1757782693.jpg" alt="иконка 2">
</div>
</div>
<div class="grid-item">25</div>
<div class="grid-item">
<div>26</div>
</div>
<div class="grid-item">27</div>
<div class="grid-item">
<div>28</div>
</div>
<div class="grid-item">29</div>
<div class="grid-item">30</div>
<div class="grid-item">31</div>
<div class="grid-item">32</div>
<div class="grid-item">33</div>
<div class="grid-item">
<div>34</div>
</div>
<div class="grid-item">
<div>35</div>
</div>
<div class="grid-item">
<div>36</div>
</div>
<div class="grid-item">37</div>
<div class="grid-item">38</div>
<div class="grid-item">39</div>
<div class="grid-item">
<div>40</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/13-1757770749.jpg" alt="иконка 1">
</div>
</div>
<div class="grid-item">
<div>41</div>
<div class="icons">
<img src="https://forumavatars.ru/img/avatars/001c/85/42/24-1757879784.png" alt="иконка 1">
</div>
</div>
<div class="grid-item">42</div>
<div class="grid-item">43</div>
<div class="grid-item">44</div>
<div class="grid-item">45</div>
<div class="grid-item">46</div>
<div class="grid-item">47</div>
<div class="grid-item">48</div>
<div class="grid-item">49</div>
<div class="grid-item">50</div>
<div class="grid-item">51</div>
<div class="grid-item">52</div>
<div class="grid-item">53</div>
<div class="grid-item">54</div>
<div class="grid-item">55</div>
<div class="grid-item">56</div>
<div class="grid-item">57</div>
<div class="grid-item">58</div>
<div class="grid-item">59</div>
<div class="grid-item">60</div>
<div class="grid-item">61</div>
<div class="grid-item">62</div>
<div class="grid-item">63</div>
<div class="grid-item">64</div>
<div class="grid-item">65</div>
<div class="grid-item">66</div>
<div class="grid-item">67</div>
<div class="grid-item">68</div>
<div class="grid-item">69</div>
<div class="grid-item">70</div>
<div class="grid-item">71</div>
<div class="grid-item">72</div>
<div class="grid-item">73</div>
<div class="grid-item">74</div>
<div class="grid-item">75</div>
<div class="grid-item">76</div>
<div class="grid-item">77</div>
<div class="grid-item">78</div>
<div class="grid-item">79</div>
<div class="grid-item">80</div>
<div class="grid-item">81</div>
<div class="grid-item">82</div>
<div class="grid-item">83</div>
<div class="grid-item">84</div>
<div class="grid-item">85</div>
<div class="grid-item">86</div>
<div class="grid-item">87</div>
<div class="grid-item">88</div>
<div class="grid-item">89</div>
<div class="grid-item">90</div>
<div class="grid-item">91</div>
<div class="grid-item">92</div>
<div class="grid-item">93</div>
<div class="grid-item">94</div>
<div class="grid-item">95</div>
<div class="grid-item">96</div>
<div class="grid-item">97</div>
<div class="grid-item">98</div>
<div class="grid-item">99</div>
<div class="grid-item">100
<!-- ... продолжай до 72 -->
<!-- Можно вставить генератор через JS -->
<!-- Конец -->
</div>
</body>
</html>[/html][hideprofile]
