@gleb.askerko/componentkit-js
Version:
Lightweight, framework-agnostic JavaScript component library with progress gift components
287 lines (261 loc) • 8.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComponentKit.js - Examples</title>
<link rel="stylesheet" href="../dist/componentkit.css">
<style>
body {
font-family: ui-sans-serif, system-ui, sans-serif;
margin: 0;
padding: 2rem;
background-color: #f8fafc;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section {
background: white;
border-radius: 0.5rem;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.section h2 {
margin-top: 0;
color: #1e293b;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 0.5rem;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.demo-item {
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #f8fafc;
}
.code-block {
background: #1e293b;
color: white;
padding: 1rem;
border-radius: 0.5rem;
font-family: monospace;
font-size: 0.875rem;
overflow-x: auto;
margin: 1rem 0;
}
</style>
</head>
<body>
<div class="container">
<header style="text-align: center; margin-bottom: 3rem;">
<h1 style="color: #1e293b; margin-bottom: 0.5rem;">ComponentKit.js Examples</h1>
<p style="color: #64748b; font-size: 1.125rem;">Interactive examples of all components</p>
</header>
<!-- Button Examples -->
<section class="section">
<h2>Button Component</h2>
<div class="demo-grid">
<div class="demo-item">
<h4>Primary Buttons</h4>
<div id="button-primary-demo"></div>
</div>
<div class="demo-item">
<h4>Secondary Buttons</h4>
<div id="button-secondary-demo"></div>
</div>
<div class="demo-item">
<h4>Outline Buttons</h4>
<div id="button-outline-demo"></div>
</div>
<div class="demo-item">
<h4>Different Sizes</h4>
<div id="button-sizes-demo"></div>
</div>
</div>
<div class="code-block">
const primaryButton = new ComponentKit.Button({
text: 'Primary Button',
variant: 'primary',
onClick: () => alert('Primary clicked!')
});
primaryButton.render('#container');
</div>
</section>
<!-- Input Examples -->
<section class="section">
<h2>Input Component</h2>
<div class="demo-grid">
<div class="demo-item">
<h4>Text Input</h4>
<div id="input-text-demo"></div>
</div>
<div class="demo-item">
<h4>Email Input with Validation</h4>
<div id="input-email-demo"></div>
</div>
<div class="demo-item">
<h4>Password Input</h4>
<div id="input-password-demo"></div>
</div>
<div class="demo-item">
<h4>Required Input</h4>
<div id="input-required-demo"></div>
</div>
</div>
<div class="code-block">
const emailInput = new ComponentKit.Input({
type: 'email',
label: 'Email Address',
placeholder: 'user@example.com',
required: true,
validation: { email: true }
});
emailInput.render('#container');
</div>
</section>
<!-- Card Examples -->
<section class="section">
<h2>Card Component</h2>
<div class="demo-grid">
<div class="demo-item">
<h4>Basic Card</h4>
<div id="card-basic-demo"></div>
</div>
<div class="demo-item">
<h4>Card with Actions</h4>
<div id="card-actions-demo"></div>
</div>
<div class="demo-item">
<h4>Elevated Card</h4>
<div id="card-elevated-demo"></div>
</div>
<div class="demo-item">
<h4>Outlined Card</h4>
<div id="card-outlined-demo"></div>
</div>
</div>
<div class="code-block">
const card = new ComponentKit.Card({
title: 'Card Title',
content: 'This is the card content.',
variant: 'elevated',
actions: [
{ text: 'Action 1', onClick: () => alert('Action 1!') },
{ text: 'Action 2', variant: 'secondary' }
]
});
card.render('#container');
</div>
</section>
<!-- Progress Gift Examples -->
<section class="section">
<h2>ProgressGift Component</h2>
<div class="demo-grid">
<div class="demo-item">
<h4>Basic Progress Gift</h4>
<div id="progress-gift-basic-demo"></div>
</div>
<div class="demo-item">
<h4>Custom Gift Icon</h4>
<div id="progress-gift-custom-demo"></div>
</div>
<div class="demo-item">
<h4>High Score Progress</h4>
<div id="progress-gift-score-demo"></div>
</div>
<div class="demo-item">
<h4>Control Buttons</h4>
<div id="progress-gift-controls-demo"></div>
</div>
</div>
<div class="code-block">
const progressGift = new ComponentKit.ProgressGift({
maxPoints: 100,
giftIcon: '🎁',
onGiftEarned: (gifts, points) => {
console.log(`Поздравляем! Подарок #${gifts} получен!`);
console.log(`Осталось очков: ${points}`);
}
});
// Добавить очки
progressGift.addPoints(25);
// Рендер
progressGift.render('#container');
</div>
</section>
<!-- Modal Examples -->
<section class="section">
<h2>Modal Component</h2>
<div class="demo-grid">
<div class="demo-item">
<h4>Basic Modal</h4>
<div id="modal-basic-demo"></div>
</div>
<div class="demo-item">
<h4>Confirmation Modal</h4>
<div id="modal-confirm-demo"></div>
</div>
<div class="demo-item">
<h4>Large Modal</h4>
<div id="modal-large-demo"></div>
</div>
<div class="demo-item">
<h4>Custom Modal</h4>
<div id="modal-custom-demo"></div>
</div>
</div>
<div class="code-block">
const modal = new ComponentKit.Modal({
title: 'Confirm Action',
content: 'Are you sure you want to proceed?',
size: 'medium',
actions: [
{ text: 'Cancel', variant: 'secondary' },
{ text: 'Confirm', variant: 'primary', onClick: () => alert('Confirmed!') }
]
});
modal.open();
</div>
</section>
<!-- Integration Example -->
<section class="section">
<h2>Complete Form Example</h2>
<div id="complete-form-demo"></div>
<div class="code-block">
// Create a complete form with validation
const form = document.createElement('form');
const nameInput = new ComponentKit.Input({
label: 'Full Name',
placeholder: 'Enter your name',
required: true
});
const emailInput = new ComponentKit.Input({
type: 'email',
label: 'Email',
placeholder: 'user@example.com',
validation: { email: true }
});
const submitButton = new ComponentKit.Button({
text: 'Submit Form',
variant: 'primary',
onClick: () => validateAndSubmit()
});
// Render components
nameInput.render(form);
emailInput.render(form);
submitButton.render(form);
</div>
</section>
</div>
<script src="../dist/componentkit.umd.js"></script>
<script src="script.js"></script>
</body>
</html>