Различия

Показаны различия между двумя версиями страницы.

--- playground [2025/12/14 12:33] – [про] VladPolskiy
+++ playground [Дата неизвестна] (текущий) – удалено - внешнее изменение (Дата неизвестна) 127.0.0.1
@@ Строка 1: / Строка 1: @@
-<note blue>синяя заметка</note>
-{{fa>address-book?}}
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Набор ссылок, с помощью которых можно быстро поделиться материалом в социальных сетях</title>
-  <style>
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-    html {
-      font-family: sans-serif;
-      line-height: 1.15;
-      -webkit-text-size-adjust: 100%;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 1.5;
-      color: #212529;
-      text-align: left;
-      background-color: #fff;
-    }
-    /* social-share */
-    .social-share {
-      background-color: #f5f5f5;
-      text-align: center;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
-    .social-share__title {
-      margin-bottom: 8px;
-    }
-    .social-share__items {
-      display: inline-block;
-    }
-    .social-share__items a {
-      text-decoration: none;
-      color: #1976d2;
-      margin-left: 8px;
-      margin-right: 8px;
-    }
-    .social-share__items a:hover {
-      color: #0d47a1;
-    }
-  </style>
-</head>
-<body>
-  <div class="social-share">
-    <div class="social-share__title">
-      Блок «Поделиться» для главной страницы ИТ Шеф:
-    </div>
-    <div class="social-share__items">
-      <a href="https://twitter.com/intent/tweet?text="
-        target="_blank" rel="noopener">Twitter</a>
-      <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fitchief.ru%2F" target="_blank"
-        rel="noopener">Facebook</a>
-      <a href="https://vk.com/share.php?url=https%3A%2F%2Fitchief.ru%2F" target="_blank" rel="noopener">ВКонтакте</a>
-      <a href="https://t.me/share/url?url=https://wwoss.ru/doku.php?id=playground&text=Пожалуйста, редактируйте только в том случае, если планируете улучшить содержимое. Если вы просто хотите потестировать что-либо, воспользуйтесь"
-        target="_blank" rel="noopener">Telegram</a>
-    </div>
-  </div>
-</body>
-</html>
-<html>
-<iframe height="150" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/chromium/search.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-</iframe>
-</html>
-=====про====
-<code bash index.php>
-#!/bin/bash
-admin@user-new:/$ date
-Sat 25 Mar 2023 14 12:04:17 PM MSK
-</code>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Создание share-ссылок для социальных сетей с помощью JavaScript</title>
-  <style>
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-    html {
-      font-family: sans-serif;
-      line-height: 1.15;
-      -webkit-text-size-adjust: 100%;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 1.5;
-      color: #212529;
-      text-align: left;
-      background-color: #fff;
-    }
-    /* social-share */
-    .social-share {
-      background-color: #f5f5f5;
-      text-align: center;
-      padding-top: 1rem;
-      padding-bottom: 1rem;
-    }
-    .social-share__items {
-      display: inline-block;
-    }
-    .social-share__items a {
-      text-decoration: none;
-      color: #1976d2;
-      margin-left: 8px;
-      margin-right: 8px;
-    }
-    .social-share__items a:hover {
-      color: #0d47a1;
-    }
-  </style>
-</head>
-<body>
-  <div class="social-share"></div>
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      const createShareHtml = function (title, shareData) {
-        let anchorList = [];
-        const anchorTemplate = function (item) {
-          return '<a href="' + item.href + '" target="_blank" rel="noopener">' + item.title + '</a>';
-        }
-        const wrapperTemplate = function (title, anchorList) {
-          return '<div class="social-share__title">' + title + '</div><div class="social-share__items">' +
-            anchorList.join('') + '</div>';
-        }
-        shareData.forEach(function (item) {
-          anchorList.push(anchorTemplate(item));
-        })
-        return wrapperTemplate(title, anchorList);
-      }
-      const $socialShare = document.querySelector('.social-share');
-      if ($socialShare) {
-        const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
-        const title = encodeURIComponent(document.title);
-        const twitterUserName = 'itchief_ru';
-        const shareData = [{
-            title: 'Twitter',
-            href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName,
-          },
-          {
-            title: 'Facebook',
-            href: 'https://www.facebook.com/sharer/sharer.php?u=' + url,
-          },
-          {
-            title: 'ВКонтакте',
-            href: 'https://vk.com/share.php?url=' + url,
-          },
-          {
-            title: 'Telegram',
-            href: 'https://t.me/share/url?url=' + url + '&text=' + title,
-          }
-        ];
-        const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData);
-        $socialShare.innerHTML = $html;
-      }
-    });
-  </script>
-</body>
-</html>
-=====exsample=====
-{{:icons:16:exclamation-shield-frame.png?|exclamation-shield-frame.png.}}
-[[issue>issue]]
-<ff CyrillicGoth>Шрифт CyrillicGoth</ff>
-<html>
-<style>
-  body_new {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    margin: 0;
-    color: #212529;
-    background-color: #fff;
-    -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .container_new {
-    margin: 1rem;
-    padding: 1.5rem;
-    border: 1px solid #dee2e6;
-    border-radius: 0.375rem;
-  }
-  .tab_new {
-    display: flex;
-    flex-direction: column;
-  }
-  .tab-nav_new > input[type="radio"] {
-    display: none;
-  }
-  .tab-content_new {
-    display: none;
-  }
-  #content-1:has(~ .tab-nav_new > #tab-btn-1:checked),
-  #content-2:has(~ .tab-nav_new > #tab-btn-2:checked),
-  #content-3:has(~ .tab-nav_new > #tab-btn-3:checked) {
-    display: block;
-  }
-  .tab-nav_new {
-    display: flex;
-    flex-wrap: wrap;
-    border-bottom: 1px solid #dee2e6;
-    margin-bottom: 1rem;
-    order: -1;
-  }
-  .tab-nav_new > label {
-    display: block;
-    padding: 0.5rem 1rem;
-    color: #0d6efd;
-    text-decoration: none;
-    background: 0 0;
-    border: 1px solid transparent;
-    margin-bottom: -1px;
-    border-top-left-radius: 0.375rem;
-    border-top-right-radius: 0.375rem;
-    -webkit-appearance: button;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
-  }
-  .tab-nav_new > input[type="radio"]:checked + label {
-    color: #000;
-    background-color: #fff;
-    border-color: #dee2e6 #dee2e6 #fff;
-    cursor: default;
-  }
-</style>
-<body_new>
-<div class="container1_new">
-  <div class="tab_new">
-    <div class="tab-content_new" id="content-1">
-      Содержимое 1... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum,
-      vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum
-      sapiente ex.
-    </div>
-    <div class="tab-content_new" id="content-2">
-      Содержимое 2... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum,
-      vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum
-      sapiente ex.
-    </div>
-    <div class="tab-content_new" id="content-3">
-      Содержимое 3... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum,
-      vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum
-      sapiente ex.
-    </div>
-    <div class="tab-nav_new">
-      <input checked id="tab-btn-1" name="tab-btn" type="radio" value="">
-      <label for="tab-btn-1">Вкладка 1</label>
-      <input id="tab-btn-2" name="tab-btn" type="radio" value="">
-      <label for="tab-btn-2">Вкладка 2</label>
-      <input id="tab-btn-3" name="tab-btn" type="radio" value="">
-      <label for="tab-btn-3">Вкладка 3</label>
-    </div>
-  </div>
-</div>
-</body_new>
-</html>
-{{rating}}
-<note blue>
-<wrap left>← [[playground:playground|playground]]</wrap>
-<wrap right>[[playground:playground|playground]] →</wrap>
-</note>
-=====exsample=====
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta content="width=device-width, initial-scale=1" name="viewport">
-  <title>Вкладки на CSS с использованием радиокнопок и :checked – 05</title>
-</head>
-<style>
-  body {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    margin: 0;
-    color: #212529;
-    background-color: #fff;
-    -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .container_1 {
-    margin: 1rem;
-    padding: 1.5rem;
-    border: 1px solid #dee2e6;
-    border-radius: 0.375rem;
-  }
-  .tab {
-    display: flex;
-    flex-direction: column;
-  }
-  .tab-nav > input[type="radio"] {
-    display: none;
-  }
-  .tab-content {
-    display: none;
-  }
-  #content-1:has(~ .tab-nav > #tab-btn-1:checked),
-  #content-2:has(~ .tab-nav > #tab-btn-2:checked),
-  #content-3:has(~ .tab-nav > #tab-btn-3:checked) {
-    display: block;
-  }
-  .tab-nav {
-    display: flex;
-    flex-wrap: wrap;
-    border-bottom: 1px solid #dee2e6;
-    margin-bottom: 1rem;
-    order: -1;
-  }
-  .tab-nav > label {
-    display: block;
-    padding: 0.5rem 1rem;
-    color: #0d6efd;
-    text-decoration: none;
-    background: 0 0;
-    border: 1px solid transparent;
-    margin-bottom: -1px;
-    border-top-left-radius: 0.375rem;
-    border-top-right-radius: 0.375rem;
-    -webkit-appearance: button;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
-  }
-  .tab-nav > input[type="radio"]:checked + label {
-    color: #000;
-    background-color: #fff;
-    border-color: #dee2e6 #dee2e6 #fff;
-    cursor: default;
-  }
-</style>
-<body>
-<div class="container_1">
-  <div class="tab">
-    <div class="tab-content" id="content-1">
-      Содержимое 1... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum,
-      vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum
-      sapiente ex.
-    </div>
-    <div class="tab-content" id="content-2">
-      Содержимое 2... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum,
-      vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum
-      sapiente ex.
-    </div>
-    <div class="tab-content" id="content-3">
-      Содержимое 3... Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique eaque iure debitis nostrum,
-      vero ad totam ratione sequi! Suscipit, labore repellat cum soluta ullam dignissimos perspiciatis sequi rerum
-      sapiente ex.
-    </div>
-    <div class="tab-nav">
-      <input checked id="tab-btn-1" name="tab-btn" type="radio" value="">
-      <label for="tab-btn-1">Вкладка 1</label>
-      <input id="tab-btn-2" name="tab-btn" type="radio" value="">
-      <label for="tab-btn-2">Вкладка 2</label>
-      <input id="tab-btn-3" name="tab-btn" type="radio" value="">
-      <label for="tab-btn-3">Вкладка 3</label>
-    </div>
-  </div>
-</div>
-</body>
-</html>
-===ао===
-{{ :test.svg |}}
-{{icon>home?24&circle&padding=10px&background=#DDD&color=#CCC}}
-{{fa>home|My Home}}
-{{fugue>user?24}}
-{{silk>anchor}}
-{{flag>no}}
-[[:wiki:welcome|{{fa>home?24|Welcome to DokuWiki}}]]
-[[https://github.com/LotarProject/dokuwiki-plugin-icons|{{fa>github-square?24|Icons DokuWiki plugin on GitHub}}]]