Улучшенная вёрстка

src/app/Controllers/HomeController.php

@@ -21,17 +21,26 @@ class HomeController extends Controller
     /**
      * @throws Exception
      */
-    public function index()
+    public function index(int $page = 1)
     {
         if (Flight::request()->query->count() > 0) {
             $id = Flight::request()->query->keys()[0];
-            Flight::redirect(base_url("$id"));
+            Flight::redirect(base_url($id));
             die;
         }
+        $per_page = 10;
+        $list = $this->ini->playlists
+            ->where('redirect_id', null)
+            // ->sortBy('id')
+            ->forPage($page, $per_page);
         view('list', [
             'updated_at' => $this->ini->updatedAt(),
             'count' => $this->ini->playlists->count(),
-            'playlists' => $this->ini->playlists->where('redirect_id', null)->toArray(),
+            'pages' => [
+                'count' => (int)($this->ini->playlists->count() / $per_page),
+                'current' => $page,
+            ],
+            'playlists' => $list->toArray(),
         ]);
     }
 

src/app/Core/Bootstrapper.php

@@ -53,6 +53,10 @@ final class Bootstrapper
             'GET /',
             fn() => (new HomeController())->index()
         );
+        Flight::route(
+            'GET /page/@page:[0-9]+',
+            fn($page) => (new HomeController())->index((int)$page)
+        );
         Flight::route(
             'GET /faq',
             fn() => (new HomeController())->faq()

src/config/playlists.ini

@@ -463,7 +463,7 @@ desc = ''
 pls = 'https://www.digitaltv.ru/upload/iblock/034/tvlist.m3u'
 src = 'https://www.digitaltv.ru/news/iptv_pleylisty.html'
 
-[r1]
+[rf]
 name='Российские'
 desc=''
 pls = "https://m3url.ru/880750.m3u"

src/public/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/public/favicon/safari-pinned-tab.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3500 4603 c-33 -40 -171 -195 -253 -286 -38 -42 -78 -88 -89 -102
+-10 -13 -31 -37 -46 -52 -15 -16 -52 -57 -82 -92 -30 -35 -64 -73 -75 -85 -67
+-74 -226 -253 -257 -288 -17 -20 -29 -22 -134 -25 l-115 -2 -37 41 c-20 23
+-41 46 -47 52 -5 6 -41 47 -79 91 -39 44 -75 85 -80 90 -6 6 -42 46 -81 90
+-38 44 -86 98 -106 120 -20 22 -78 87 -129 145 -51 58 -123 139 -160 180 -37
+41 -79 90 -94 108 -30 34 -70 43 -80 16 -9 -23 -8 -31 7 -46 7 -7 64 -78 127
+-158 63 -80 120 -152 127 -160 18 -22 151 -189 208 -261 28 -35 57 -73 67 -84
+9 -11 48 -60 87 -110 40 -49 78 -97 85 -105 16 -20 32 -47 22 -38 -22 19 -283
+-80 -322 -123 -17 -18 -46 -19 -838 -19 -775 0 -823 -1 -861 -19 -22 -10 -48
+-28 -58 -39 -48 -53 -46 -3 -47 -1607 0 -1009 4 -1522 10 -1547 15 -52 53 -94
+103 -113 38 -14 254 -15 2303 -13 l2260 3 43 28 c27 18 50 44 62 70 18 41 19
+90 18 1562 0 1615 2 1564 -46 1617 -10 11 -36 29 -58 39 -38 18 -85 19 -821
+19 l-781 0 -22 24 c-19 20 -118 72 -156 83 -5 1 -50 12 -100 24 -141 34 -136
+22 -53 124 171 210 645 801 652 813 4 7 5 24 2 38 -9 33 -46 32 -76 -3z"/>
+</g>
+</svg>

src/public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/views/details.twig

@@ -3,7 +3,6 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block header %}
-    <a href="{{ base_url() }}" class="btn btn-outline-light mb-3"><< Назад</a>
     <h2>{{ name }}</h2>
     {% if (encoding.alert) %}
         <div class="alert alert-warning small" role="alert">
@@ -23,7 +22,7 @@
                 <tr>
                     <td class="w-25">ID</td>
                     <td>
-                        {{ id }}&nbsp;{% if status == 'online' %}
+                        <code>{{ id }}</code>&nbsp;{% if status == 'online' %}
                         <span class="badge small text-dark bg-success">online</span>
                     {% elseif status == 'offline' %}
                         <span class="badge small text-dark bg-danger">offline</span>
@@ -39,7 +38,7 @@
                     <td><p>{{ desc }}</p></td>
                 </tr>
                 <tr>
-                    <td title="Нажми на ссылку, чтобы скопировать её в буфер обмена"><b>Ccылка для ТВ</b></td>
+                    <td><b>Ccылка для ТВ</b></td>
                     <td><b onclick="prompt('Скопируй адрес плейлиста', '{{ url }}')"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"

src/views/faq.twig

@@ -1,7 +1,6 @@
 {% extends "layouts/default.twig" %}
 
 {% block header %}
-    <a href="{{ base_url() }}" class="btn btn-outline-light mb-3"><< Назад</a>
     <h2>FAQ</h2>
 {% endblock %}
 

src/views/layouts/default.twig

@@ -6,38 +6,66 @@
     <meta name="description" content="Самообновляемые бесплатные IPTV-плейлисты для домашнего просмотра по коротким ссылкам, списки каналов, проверка доступности">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link href="{{ base_url('css/bootstrap.min.css') }}" rel="stylesheet">
+
     <style>.cursor-pointer{cursor:pointer}</style>
-    {% block head %}{% endblock %}
+    <link href="{{ base_url('css/bootstrap.min.css') }}" rel="stylesheet">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ base_url('/favicon/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ base_url('/favicon/favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ base_url('/favicon/favicon-16x16.png') }}">
+    <link rel="manifest" href="{{ base_url('/favicon/site.webmanifest') }}">
+    <link rel="mask-icon" href="{{ base_url('/favicon/safari-pinned-tab.svg') }}" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#00aba9">
+    <meta name="msapplication-TileImage" content="{{ base_url('/favicon/mstile-144x144.png') }}">
+    <meta name="theme-color" content="#212529">
+
+
 </head>
 <body class="bg-dark text-light">
-    <div class="col-lg-8 mx-auto p-3 pt-md-5 pb-0">
-        <header class="mb-3">
-            <h1 data-bs-toggle="tooltip" data-bs-placement="top" title="На главную">
-                <a href="{{ base_url() }}" class="text-light text-decoration-none">
+    <div class="container col-lg-8 mx-auto">
+        <header>
+            <nav class="navbar navbar-expand-lg navbar-dark">
+                <img src="{{ base_url('/favicon/favicon-32x32.png') }}" class="d-inline-block align-text-top px-lg-1" alt=""/>
+                <a class="navbar-brand" href="{{ base_url() }}" title="На главную">
                     {{ config('app.title') }}
                 </a>
-            </h1>
-            <p class="text-muted">
-                <a href="{{ base_url('faq') }}">FAQ</a>&nbsp;|&nbsp;<a
-                    href="https://github.com/anthonyaxenov/iptv">GitHub</a>&nbsp;|&nbsp;<a
-                    href="https://git.axenov.dev/anthony/iptv">Gitea</a>&nbsp;|&nbsp;<a
-                    href="https://axenov.dev">axenov.dev</a>
-            </p>
-            {% block header %}{% endblock %}
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarNav">
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ base_url() }}">Главная</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ base_url('faq') }}">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="https://git.axenov.dev/anthony/iptv">Gitea</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="https://github.com/anthonyaxenov/iptv">GitHub</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="https://axenov.dev">axenov.dev</a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
         </header>
-        <div class="container mx-auto">
+
+        <div class="pt-lg-3 px-0 pb-0">
+            {% block header %}{% endblock %}
             {% block content %}{% endblock %}
         </div>
-    </div>
 
-    <footer class="py-4 text-center">
-        <script src="{{ base_url('js/bootstrap.bundle.min.js') }}"></script>
-        {% block footer %}{% endblock %}
-        <a href="{{ base_url('faq') }}">FAQ</a>&nbsp;|&nbsp;<a
-            href="https://github.com/anthonyaxenov/iptv">GitHub</a>&nbsp;|&nbsp;<a
-            href="https://git.axenov.dev/anthony/iptv">Gitea</a>&nbsp;|&nbsp;<a
-            href="https://axenov.dev">axenov.dev</a>
-    </footer>
+        <footer class="py-4 text-center">
+            <script src="{{ base_url('js/bootstrap.bundle.min.js') }}"></script>
+            {% block footer %}{% endblock %}
+            <a href="{{ base_url('faq') }}">FAQ</a>&nbsp;|&nbsp;<a
+                href="https://github.com/anthonyaxenov/iptv">GitHub</a>&nbsp;|&nbsp;<a
+                href="https://git.axenov.dev/anthony/iptv">Gitea</a>&nbsp;|&nbsp;<a
+                href="https://axenov.dev">axenov.dev</a>
+        </footer>
+    </div>
 </body>
 </html>

src/views/list.twig

@@ -1,7 +1,5 @@
 {% extends "layouts/default.twig" %}
 
-{% block title %}{{ title }}{% endblock %}
-
 {% block header %}
     <p class="text-muted small">
         Обновлено:&nbsp;{{ updated_at }}&nbsp;МСК<br/>
@@ -11,13 +9,14 @@
 {% endblock %}
 
 {% block content %}
-    <table class="table table-dark table-hover small">
+<div class="table-responsive">
+    <table class="table table-responsive table-dark table-hover small">
         <thead>
         <tr>
             <th>ID</th>
             <th>Информация о плейлисте</th>
             <th>Каналов</th>
-            <th title="Нажми на ссылку, чтобы скопировать её в буфер обмена">Ссылка для ТВ</th>
+            <th class="d-none d-sm-table-cell">Ссылка для ТВ</th>
         </tr>
         </thead>
         <tbody>
@@ -29,11 +28,12 @@
                 <td class="info">
                     <strong>{{ playlist.name }}</strong>
                     <span class="badge small bg-secondary text-dark status">loading</span>
-                    <div class="small">
+                    <div class="small mt-2">
                         {% if playlist.desc|length > 0 %}
-                            <p class="my-1">{{ playlist.desc }}</p>
+                            <p class="my-1 d-none d-lg-block">{{ playlist.desc }}</p>
                         {% endif %}
                         <a href="{{ base_url(id ~ '/details') }}">Подробнее...</a>
+{#                        <a class="btn btn-sm btn-outline-light" href="{{ base_url(id ~ '/details') }}">Подробнее...</a>#}
                     </div>
                 </td>
                 <td class="text-center count">
@@ -41,7 +41,7 @@
                         <span class="visually-hidden">загрузка...</span>
                     </div>
                 </td>
-                <td class="col-3">
+                <td class="col-3 d-none d-sm-table-cell">
                     <span onclick="prompt('Скопируй адрес плейлиста', '{{ playlist.url }}')"
                           data-bs-toggle="tooltip"
                           data-bs-placement="top"
@@ -54,6 +54,24 @@
         {% endfor %}
         </tbody>
     </table>
+    {% if pages.count > 0 %}
+    <div aria-label="pages">
+        <ul class="pagination justify-content-center">
+            {% for page in range(1, pages.count) %}
+                {% if page == pages.current %}
+                    <li class="page-item active" aria-current="page">
+                        <span class="page-link">{{ page }}</span>
+                    </li>
+                {% else %}
+                    <li class="page-item">
+                        <a class="page-link bg-dark border-secondary text-light" href="{{ base_url('page/' ~ page) }}">{{ page }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
+    {% endif %}
+</div>
 {% endblock %}
 
 {% block footer %}