|
|
| (не показано 10 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| <tabs> | | <tabs> |
| <tab name="Базовые знания"> | | <tab name="Тест"> |
| Космический ниндзя — один из героев популярное аниме сериала “Самурай Вамплу”, где он сражается с теми, кто хочет разрушить его деревню. Тайтл занимает лидирующий позиции в топе. Самый популярный косплей 2549 года
| | тест |
| </tab> | | </tab> |
| <tab name="Знания информированного персонала"> | | <tab name="супер тест"> |
| Вам известно, что космический ниндзя не выдумка, а настоящая угроза для станции. Кланы ниндзя не похожи на привычные централизованные корпорации, а больше напоминают разобщенные противоборствующие кланы наемников, которые готовы пойти на все ради денег и репутации.
| | мега тест<br> |
| Последний контакт нт с ними был примерно 300 лет назад, после чего о них не сообщалось. Достоверно известно, какие услуги предоставляли кланы:<br>
| | тестик</tab> |
| 1. Кража документов и убийствами высокопоставленных чинов с использованием технологий невидимости.<br>
| | <tab name="Жесть тест"> |
| 2. Создание всевозможных помех нормальному функционированию систем объекта, а также краже технологий.<br>
| | Нихуя себе |
| 3. Совершение терактов на космических станциях.<br>
| |
| | |
| '''Ниже приведены сохранившееся крупицы, которые могут помочь борьбе с противником''' <br>
| |
| Технологии кланов на момент их активности значительно превосходили существующие в галактике, но требовали огромных затрат энергии, прогнозируется сохранение данной тенденции. Аналитики нт, предполагают, что они могли уйти в подполье для сокрытия своей организации от чужих глаз и действуют по особым заказам. НТ уверено, что захват космических ниндзя возможен, но из-за повышенной угрозы — не обязателен.
| |
| </tab> | | </tab> |
| </tabs> | | </tabs> |
| Строка 20: |
Строка 16: |
| .tabs { | | .tabs { |
| position: relative; | | position: relative; |
| margin: 30px 0; | | margin: 20px 0; |
| } | | } |
|
| |
|
| Строка 32: |
Строка 28: |
| .tabs label { | | .tabs label { |
| display: inline-block; | | display: inline-block; |
| padding: 15px 30px; | | padding: 5px 5px; |
| margin: 0 10px; | | margin: 0 -2px; /* Убираем промежутки */ |
| cursor: pointer; | | cursor: pointer; |
| color: #fff; | | color: #fff; |
| background: linear-gradient(145deg, #8B0000, #6A0000); | | background: linear-gradient(145deg, #8B0000, #6A0000); |
| border: none; | | border: none; |
| border-radius: 50px;
| | transition: all 0.3s ease; |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| font-family: 'Arial Rounded MT', Arial, sans-serif; | | font-family: 'Arial Rounded MT', Arial, sans-serif; |
| font-size: 16px; | | font-size: 16px; |
| box-shadow: 0 4px 10px rgba(139, 0, 0, 0.2); | | position: relative; |
| transform: scale(0.95); | | z-index: 1; |
| } | | } |
|
| |
|
| /* Анимация для активной вкладки */ | | /* Активная вкладка */ |
| .tabs input:checked + label { | | .tabs input:checked + label { |
| background: linear-gradient(145deg, #6A0000, #8B0000); | | background: linear-gradient(145deg, #6A0000, #8B0000); |
| transform: scale(1.05);
| | z-index: 3; |
| box-shadow: 0 8px 20px rgba(139, 0, 0, 0.3);
| | transform: translateY(2px); |
| z-index: 2; | |
| }
| |
| | |
| /* Эффекты при наведении */
| |
| .tabs label:hover {
| |
| background: linear-gradient(145deg, #A60000, #8B0000);
| |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 15px rgba(139, 0, 0, 0.35);
| |
| } | | } |
|
| |
|
| /* Анимированный контент */ | | /* Содержимое вкладок */ |
| .tab-content { | | .tab-content { |
| opacity: 0; | | display: none; |
| max-height: 0;
| |
| overflow: hidden;
| |
| padding: 0 20px;
| |
| margin-top: 20px;
| |
| border-radius: 20px;
| |
| background: rgba(112, 46, 46, 0.95);
| |
| color: white;
| |
| transition: all 0.6s ease-in-out;
| |
| transform: translateY(-10px);
| |
| }
| |
| | |
| /* Анимация появления контента */
| |
| .tabs input:checked ~ .tab-content {
| |
| opacity: 1;
| |
| max-height: 1000px;
| |
| padding: 25px; | | padding: 25px; |
| margin-top: 15px; | | background: #2d0a0a; /* Темный фон */ |
| transform: translateY(0); | | border: 2px solid #630000; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | | margin-top: -2px; |
| | box-shadow: 0 10px 20px rgba(0,0,0,0.2); |
| | position: relative; |
| | z-index: 2; |
| } | | } |
|
| |
|
| /* Стили для таблиц с анимацией */ | | /* Текст внутри содержимого */ |
| .wikitable { | | .tab-content p, .tab-content div { |
| border: 2px solid rgba(255, 255, 255, 0.1); | | background: rgba(70, 25, 25, 0.9); /* Фон для текста */ |
| border-collapse: collapse; | | padding: 15px; |
| width: 100%; | | border-radius: 5px; |
| margin: 20px 0; | | margin: 10px 0; |
| background: rgba(70, 25, 25, 0.9); | | box-shadow: inset 0 0 8px rgba(0,0,0,0.3); |
| transform: scale(0.98);
| |
| transition: transform 0.3s ease;
| |
| } | | } |
|
| |
|
| .wikitable:hover { | | /* Активация вкладки */ |
| transform: scale(1); | | .tabs input:checked ~ .tab-content { |
| box-shadow: 0 0 20px rgba(139, 0, 0, 0.2); | | display: block; |
| | animation: fadeIn 0.4s ease; |
| } | | } |
|
| |
|
| .wikitable th,
| | @keyframes fadeIn { |
| .wikitable td {
| | from { opacity: 0; } |
| padding: 12px; | | to { opacity: 1; } |
| border: 1px solid rgba(255, 255, 255, 0.15);
| |
| transition: background 0.3s ease; | |
| } | | } |
|
| |
|
| .wikitable th { | | /* Эффекты при наведении */ |
| background: linear-gradient(145deg, #8B0000, #6A0000); | | .tabs label:hover { |
| color: #fff;
| | background: linear-gradient(145deg, #A60000, #8B0000); |
| font-weight: 600;
| |
| }
| |
| | |
| .wikitable tr:hover td {
| |
| background: rgba(139, 0, 0, 0.1);
| |
| }
| |
| | |
| /* Эффект свечения для активных элементов */
| |
| @keyframes glow {
| |
| 0% { box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
| |
| 50% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.5); }
| |
| 100% { box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
| |
| }
| |
| | |
| .tabs input:checked + label {
| |
| animation: glow 1.5s infinite;
| |
| } | | } |
| </style> | | </style> |
|
| |
| <div class="tabs">
| |
| <input type="radio" name="tabs" id="tab1" checked>
| |
| <label for="tab1">Первая вкладка</label>
| |
| <div class="tab-content">
| |
| <table class="wikitable">
| |
| <tr>
| |
| <th>Заголовок</th>
| |
| <th>Таблица</th>
| |
| </tr>
| |
| <tr>
| |
| <td>Анимированные</td>
| |
| <td>Элементы</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
|
| |
| <input type="radio" name="tabs" id="tab2">
| |
| <label for="tab2">Вторая вкладка</label>
| |
| <div class="tab-content">
| |
| Контент с плавным появлением
| |
| </div>
| |
| </div>
| |
| }} | | }} |
