.
test
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться22025-11-23 16:10:32
[html]<div class="collage-shop-wrapper">
<div class="shop-tabs">
<div class="shop-tab-btn active" data-tab="shop-items">Покупки</div>
<div class="shop-tab-btn" data-tab="shop-profile">Профиль</div>
<div class="shop-tab-btn" data-tab="shop-lottery">Лотерея</div>
</div>
<div class="shop-content-area">
<div id="shop-items" class="shop-content-block active">
<h3>Витрина</h3>
<p>Здесь можно разместить картинки товаров...</p>
</div>
<div id="shop-profile" class="shop-content-block">
<h3>Мой кошелек</h3>
<p>Тут информация о валюте игрока...</p>
</div>
<div id="shop-lottery" class="shop-content-block">
<h3>Испытай удачу</h3>
<p>Крутим колесо фортуны...</p>
</div>
</div>
</div>
<style>
/* --- Обертка всего магазина --- */
.collage-shop-wrapper {
position: relative;
width: 700px; /* Ширина магазина */
margin: 20px auto;
background: #f4f1ea; /* Цвет бумаги */
border: 1px solid #ccc;
padding: 20px;
box-shadow: 5px 5px 0px #e0d8c5; /* Жесткая тень как у карточки */
font-family: 'Arial', sans-serif; /* Замени на свой шрифт */
}
/* --- Меню вкладок --- */
.shop-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
/* --- Кнопки (табы) --- */
.shop-tab-btn {
background: #fff;
padding: 10px 20px;
border: 1px dashed #bfaea6; /* Пунктирная рамка */
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
color: #887872;
transition: 0.3s;
position: relative;
}
/* Эффект при наведении и активная кнопка */
.shop-tab-btn:hover,
.shop-tab-btn.active {
background: #e8dcd6;
color: #5e4e48;
top: -2px; /* Чуть подпрыгивает */
}
/* Добавим "скотч" сверху активной кнопки для стиля */
.shop-tab-btn.active::after {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 15px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #ddd;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* --- Блоки с контентом --- */
.shop-content-block {
display: none; /* Скрываем все по умолчанию */
background: #fff;
padding: 20px;
border: 1px solid #eee;
min-height: 200px;
/* Анимация появления */
animation: fadeIn 0.5s;
}
/* Показываем активный блок */
.shop-content-block.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// При клике на кнопку с классом .shop-tab-btn
$('.shop-tab-btn').click(function(){
// 1. Убираем класс 'active' у всех кнопок и контента
$('.shop-tab-btn').removeClass('active');
$('.shop-content-block').removeClass('active');
// 2. Добавляем класс 'active' нажатой кнопке
$(this).addClass('active');
// 3. Получаем ID нужного блока из атрибута data-tab
var tabID = $(this).attr('data-tab');
// 4. Показываем нужный блок
$('#' + tabID).addClass('active');
});
});
</script>
[/html]
Поделиться32025-11-23 16:18:23
[html]<div class="receipt-calculator">
<div class="receipt-header">
<h3>SANSARA STORE</h3>
<p>official receipt</p>
<div class="dashed-line"></div>
</div>
<div class="receipt-items">
<div class="receipt-row">
<div class="item-name">Смена статуса</div>
<div class="item-price">200 @</div>
<div class="item-input">
<input type="number" min="0" value="0" class="shop-input price-200" title="Смена статуса">
</div>
</div>
<div class="receipt-row">
<div class="item-name">Выкуп внешности</div>
<div class="item-price">500 @</div>
<div class="item-input">
<input type="number" min="0" value="0" class="shop-input price-500" title="Выкуп внешности">
</div>
</div>
<div class="receipt-row">
<div class="item-name">Личный эпизод</div>
<div class="item-price">1000 @</div>
<div class="item-input">
<input type="number" min="0" value="0" class="shop-input price-1000" title="Личный эпизод">
</div>
</div>
</div>
<div class="dashed-line"></div>
<div class="receipt-total">
<span>TOTAL:</span>
<span id="final-sum">0</span> @
</div>
<div class="dashed-line"></div>
<div class="receipt-footer">
<button id="generate-code-btn" type="button">Оформить покупку</button>
</div>
<textarea id="result-code-area" style="display:none;"></textarea>
</div>
<style>
/* Обертка чека */
.receipt-calculator {
width: 350px;
margin: 0 auto;
background: #fff; /* Белая бумага */
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
font-family: 'Courier New', Courier, monospace; /* Шрифт чека */
border-top: 5px solid #333; /* Акцент сверху */
position: relative;
}
/* Зубчатый край снизу (эффект отрыва) */
.receipt-calculator::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 10px;
background: radial-gradient(circle, transparent 70%, #fff 75%) 0 0,
radial-gradient(circle, transparent 70%, #fff 75%) 10px 10px;
background-size: 20px 20px;
}
.receipt-header {
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
}
.dashed-line {
border-bottom: 2px dashed #ccc;
margin: 15px 0;
}
/* Строка товара */
.receipt-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 13px;
}
.item-name { width: 50%; }
.item-price { width: 20%; text-align: right; color: #777; }
.item-input { width: 20%; text-align: right; }
/* Поле ввода */
.shop-input {
width: 40px;
padding: 3px;
border: 1px solid #ccc;
font-family: inherit;
text-align: center;
}
/* Итого */
.receipt-total {
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
}
/* Кнопка */
#generate-code-btn {
width: 100%;
padding: 10px;
background: #333;
color: #fff;
border: none;
font-family: inherit;
cursor: pointer;
text-transform: uppercase;
transition: 0.3s;
}
#generate-code-btn:hover {
background: #555;
}
/* Поле с готовым кодом */
#result-code-area {
width: 100%;
height: 100px;
margin-top: 15px;
font-size: 11px;
border: 1px solid #ccc;
background: #f9f9f9;
padding: 5px;
box-sizing: border-box;
}
</style>
[/html]
Страница: 1
