some styling

templates/board.html

@@ -20,31 +20,47 @@
     </div>
 </nav>
 
-
+<!-- 
 <table class="pure-table-odd">
     <thead>
       <tr>
+        <th class="">пикча эта ваша</th>
         <th class="">номер треда</th>
         <th class="">номер поста</th>
         <th class="">автор(ка)</th> 
-        <th class="">пикча эта ваша</th>
         <th class="">текст</th>
       </tr>
     </thead>
     <tbody id="thread-results">
         {% for thread in board_threads %}
             <tr class="">
+                <td class="">
+                    <a  href="https://static.vdk2ch.ru/thread-pics/{{thread.pic_links}}" target=”_blank”>
+                        <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                            <defs>
+                                <pattern id="img-{{thread.post_num}}" patternUnits="userSpaceOnUse" width="100" height="100">
+                                    <image xlink:href="https://static.vdk2ch.ru/thread-pics/{{thread.pic_links}}" x="-25" width="150" height="100" />
+                                </pattern>
+                            </defs>
+                            <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img-{{thread.post_num}})"/>
+                        </svg>
+                    </a>
+                     <img src="https://static.vdk2ch.ru/thread-pics/{{thread.pic_links}}" alt="" width="200" height="200"> 
+                </td> 
                 <td class="">{{thread.thread_num}}</td> 
                 <td class="">{{thread.post_num}}</td>
                 <td class="">{{thread.name}}</td>  
-                <td class="">
-                    <img src="https://static.vdk2ch.ru/thread-pics/{{thread.pic_link}}" alt="" width="200" height="200">
-                </td> 
                 <td class="">{{thread.txt}}</td> 
             
             </tr>
         {% endfor %}
     </tbody>
-</table>
+</table> 
+-->
+
+
+<li>
+
+{% include 'posts.html' %}
 
 {% endblock content %}

templates/main-page.html

@@ -2,6 +2,7 @@
 
 {% block content %} 
 
+<div id="multi-bg">
 <div class="host-id">Вас закинуло сюда: {{host_id}}</div>
 <div class="content">
     Dobro pozhalovat. AGAIN. 
@@ -23,6 +24,19 @@
     </div>
 </nav>
 <img src="https://static.vdk2ch.ru/test-public/sin.jpg">
-
-
+ </div>
+<style>
+   #multi-bg{
+      height: 300px;
+      display: block;
+      background-color: #808;
+      background-image:
+         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc3f47' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23b3373e' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23c8364e' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b02f44' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23c22f55' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23ab294b' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23bb285c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23a52351' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23b32362' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239f1f57' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa2068' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23971c5d' points='943 900 1210 900 971 687'/%3E%3C/svg%3E"),
+         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23FFF' fill-opacity='0.2'%3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E"),         
+         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23740074' points='1600 160 0 460 0 350 1600 50'/%3E%3Cpolygon fill='%235f005f' points='1600 260 0 560 0 450 1600 150'/%3E%3Cpolygon fill='%234b004b' points='1600 360 0 660 0 550 1600 250'/%3E%3Cpolygon fill='%23360036' points='1600 460 0 760 0 650 1600 350'/%3E%3Cpolygon fill='%23220022' points='1600 800 0 800 0 750 1600 450'/%3E%3C/g%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: bottom center, 50%, 50%;
+   }
+</style>
 {% endblock content %}

templates/posts.html

@@ -0,0 +1,81 @@
+{% if board_threads|length>0 %}
+  {% for thread in board_threads %}
+<div class="post post_type_reply  post_withimg" id="post-15135655" data-num="15135655">
+    <div class="post__details" id="post-details-15135655">
+    <input type="checkbox" name="delete" class="turnmeoff" value="15135655">
+    <span class="post__detailpart">
+    <span class="post__anon">{{thread.name}}</span>
+    </span>
+    <span class="post__detailpart">
+    <span class="post__time">05/07/23 Срд 14:53:58</span>
+    </span>
+    <span class="post__detailpart">
+    <a href="/news/res/15135633.html#15135655" id="15135655" class="post__reflink">№</a>
+    <a href="/news/res/15135633.html#15135655" class="js-post-reply-btn post__reflink" data-num="15135655">{{thread.post_num}}</a>
+    <span class="post__number">2</span></span>
+    <span class="post__detailpart">
+    <svg xmlns="http://www.w3.org/2000/svg" class="post__btn post__btn_type_menu icon desktop" data-num="15135655"><use xlink:href="#icon__addmenu"></use></svg>
+    <span data-num="15135655" onclick="addAdminMenu(this); return false;" onmouseout="removeAdminMenu(event); return false;" style="display: flex;">
+    <svg xmlns="http://www.w3.org/2000/svg" class="post__btn post__btn_type_adm icon"><use xlink:href="#icon__report"></use></svg>
+    </span>
+    </span>
+    </div>
+    <div class="post__images  post__images_type_multi"> 
+        {% for pic in thread.pic_links %}
+        <!-- <div class="post__images">
+            <svg class="post__file-preview   " data-width="954" data-height="960" data-type="2" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584"  data-title="image.png" viewBox="0 0 100 100" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <pattern id="img-{{thread.post_num}}" patternUnits="userSpaceOnUse" width="100" height="100">
+                        <image xlink:href="https://static.vdk2ch.ru/thread-pics/{{pic}}" x="-25" width="150" height="100" />
+                    </pattern>
+                </defs>
+                <use>
+                    <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img-{{thread.post_num}})"/>
+                </use>
+            </svg> 
+        </div> -->
+        <figure class="post__image">
+            <figcaption class="post__file-attr">
+                <a class="desktop" target="_blank" href="https://static.vdk2ch.ru/thread-pics/{{pic}}" title="image.png">{{pic}}</a>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" class="icon js-post-findimg desktop"><use xlink:href="#icon__findimg"></use></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon js-post-saveimg desktop" data-url="https://static.vdk2ch.ru/thread-pics/{{pic}}" data-name="image.png"><use xlink:href="#icon__saveimg"></use></svg> -->
+            </figcaption>
+            <a href="https://static.vdk2ch.ru/thread-pics/{{pic}}" class="post__image-link" target="_blank" onclick="return false;"> 
+                <!-- <svg visibility="visible"  class="post__file-preview   " data-width="954" data-height="960" data-type="2" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584"  data-title="image.png" viewBox="0 0 100 100" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <defs>
+                        <pattern id="img-{{thread.post_num}}" patternUnits="userSpaceOnUse" width="100" height="100">
+                            <image xlink:href="https://static.vdk2ch.ru/thread-pics/{{pic}}" x="-25" width="150" height="100" />
+                        </pattern>
+                    </defs>
+                    <use>
+                        <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img-{{thread.post_num}})"/>
+                    </use>
+                </svg>  -->
+                
+                <img src="https://static.vdk2ch.ru/thread-pics/{{pic}}" alt="954x960" id="img-15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" class="post__file-preview   " data-type="2" data-title="image.png" data-width="954" data-height="960" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170">
+            </a>
+        </figure>
+        {% endfor %}
+    </div>
+    <article id="m15135655" class="post__message ">
+    <a href="/news/res/15135633.html#15135633" class="post-reply-link" data-thread="15135633" data-num="15135633">&gt;&gt;15135633 (OP)</a><br>
+<!--     
+    
+    {% for pic in thread.pic_links %} 
+        <svg class="post__file-preview   " data-width="954" data-height="960" data-type="2" data-md5="15135655-d39bd5b1ed6c40e9a1d1eb2971a57584"  data-title="image.png" viewBox="0 0 100 100" data-src="https://static.vdk2ch.ru/thread-pics/{{pic}}" width="168" height="170" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <pattern id="img-{{thread.post_num}}" patternUnits="userSpaceOnUse" width="100" height="100">
+                    <image xlink:href="https://static.vdk2ch.ru/thread-pics/{{pic}}" x="-25" width="150" height="100" />
+                </pattern>
+            </defs>
+            <use>
+                <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img-{{thread.post_num}})"/>
+            </use>
+        </svg>  
+    {% endfor %} -->
+    {{thread.txt}}
+    </article>
+    <div id="refmap-15135655" class="post__refmap" style="display: none;"></div>
+    </div>
+    {% endfor %}
+{% endif %}

threads_with_posts.py

@@ -1,44 +1,44 @@
-# <id>: {<post_num>, <pic_link>, <texto>, <name>}
+# <id>: {<post_num>, <pic_links>, <texto>, <name>}
 open_threads = {
     '123': {
         'thread_num': '123',
         'post_num': '9999',
-        'pic_link': '16216445863900.jpg',
+        'pic_links': ['16216445863900.jpg'],
         'txt': 'фыва',
         'name': 'anonius'
     },
     '124': {
         'thread_num': '124',
         'post_num': '456',
-        'pic_link': '16672846165910.png',
+        'pic_linkss': ['16672846165910.png'],
         'txt': 'Test',
         'name': 'anonius'
     },
     '1': {
         'thread_num': '123',
         'post_num': '1',
-        'pic_link': '16211265989190.jpg',
+        'pic_links': ['16211265989190.jpg'],
         'txt': 'фыва',
         'name': 'anonius' 
     },
     '44': {
         'thread_num': '44',
         'post_num': '12',
-        'pic_link': '15937598937440.png',
+        'pic_links': ['15937598937440.png'],
         'txt': 'I hate my brother-nation..',
         'name': 'Владимир Владимирович' 
     },
     '99': {
         'thread_num': '99',
         'post_num': '55',
-        'pic_link': 'Экран-смерти.jpg',
+        'pic_links': ['Экран-смерти.jpg'],
         'txt': 'фыва',
         'name': 'anonius'
     },
     '1230': {
         'thread_num': '1230',
         'post_num': '1234',
-        'pic_link': '15906018690140.png',
+        'pic_links': ['15906018690140.png'],
         'txt': '33333!',
         'name': 'SIRNA'
     }