Различия

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

--- playground [2025/03/27 20:39] – vladpolskiy
+++ playground [2025/07/20 21:08] (текущий) – vladpolskiy
@@ Строка 1: / Строка 1: @@
-<note yellow>====== желтая заметка ======</note>
+<code bash index.php>
-<note blue>
+#!/bin/bash
-<wrap left>◀ [[playground:playground|playground]]</wrap>
+admin@user-new:/$ date
-<wrap right>[[playground:playground|playground]] ▶</wrap>
+Sat 25 Mar 2023 14 12:04:17 PM MSK
-</note>
+</code>
+=====exsample=====
+<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}}
-{{rating|startdate=2014-07-01}}
-{{rating|lang=en}}
-{{rating|startdate=2014-07-01,lang=en}}
 <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>