trmnl/trmnl-picker
0
0
Fork 0
mirror of https://github.com/usetrmnl/trmnl-picker.git synced 2026-04-29 13:44:02 -07:00
Code Issues Packages Projects Releases Wiki Activity
Files
v0.1.2
trmnl-picker/example/index.html
T

547 lines
25 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRMNL Picker - Demo</title>
<link rel="stylesheet" href="https://usetrmnl.com/css/latest/plugins.css" />
<script src="https://usetrmnl.com/js/latest/plugins.js"></script>
<!-- Begin Inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<!-- End Inter font -->
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="container">
<h1>@trmnl/picker</h1>
<p class="description">
<a href="https://usetrmnl.github.io/trmnl-picker/doc/">API Reference</a> ::
<a href="https://github.com/usetrmnl/trmnl-picker">Source</a> ::
<a href="https://usetrmnl.com">About TRMNL</a>
</p>
<div class="panel">
<div id="loading-state" class="loading">
<div class="spinner"></div>
<div>Loading picker...</div>
</div>
<form id="picker-form" class="picker-form" style="display: none;">
<select data-model-select class="picker-select"></select>
<select data-palette-select class="picker-select"></select>
<div class="divider"></div>
<button type="button" data-orientation-toggle class="picker-button">
<span data-orientation-text>Landscape</span>
</button>
<button type="button" data-dark-mode-toggle class="picker-button">
<span data-dark-mode-text>Light Mode</span>
</button>
<div class="divider"></div>
<button type="button" data-reset-button class="picker-button">
Reset
</button>
</form>
</div>
<div class="screen-preview trmnl" id="screen-preview">
<div class="screen">
<div class="view view--full">
<div class="layout layout--col gap--space-between">
<div class="grid grid--cols-2">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums value--xxxlarge" data-value-fit="true" style="font-variation-settings: &quot;wght&quot; 350; font-size: 112px; font-weight: 350; line-height: 126px;">10004</span>
<span class="label">Contributions in last year</span>
</div>
</div>
<div class="flex flex--col gap--medium">
<div class="grid grid--cols-2" style="gap: 11px;">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">19</span>
<span class="label">Longest streak</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">3</span>
<span class="label">Current streak</span>
</div>
</div>
</div>
<div class="divider"></div>
<div class="grid grid--cols-2" style="gap: 11px;">
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">27</span>
<span class="label">Most in a day</span>
</div>
</div>
<div class="item">
<div class="meta"></div>
<div class="content">
<span class="value value--tnums">2.45</span>
<span class="label">Average per day</span>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div id="github_commit_graph">
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-25"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-25"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-20"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-15"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-55"></span>
<span class="day bg-black"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-40"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-25"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-10"></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-25"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg-black"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-40"></span>
<span class="day bg-black"></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-25"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-40"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-40"></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-25"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-15"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day bg--gray-40"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-25"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-40"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-40"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-15"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-35"></span>
<span class="day bg--gray-15"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-30"></span>
<span class="day "></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day "></span>
<span class="day bg--gray-20"></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day bg--gray-60"></span>
<span class="day "></span>
<span class="day bg--gray-30"></span>
<span class="day bg--gray-50"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-15"></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-45"></span>
<span class="day "></span>
<span class="day bg--gray-50"></span>
<span class="day "></span>
<span class="day bg--gray-45"></span>
<span class="day bg--gray-55"></span>
<span class="day bg--gray-55"></span>
<span class="day "></span>
<span class="day "></span>
</div>
</div>
<div class="title_bar">
<img class="image" alt="" src="https://usetrmnl.com/images/plugins/github--render.svg">
<span class="title">GitHub</span>
<span class="instance">@ryanckulp</span>
</div>
</div>
<link rel="stylesheet" href="https://usetrmnl.com/assets/plugins/github_commit_graph-950a773f8a8396624970f5decdf486d40299e22aa0c9bfa5acd2ca1dc3048b5f.css" media="all">
</div>
</div>
<div class="panel">
<h2>trmnl:change event</h2>
<pre id="event-output">Waiting for picker to load...</pre>
</div>
</div>
<script src="../dist/trmnl-picker.min.js"></script>
<script>
let picker = null
// Listen for changes (including initial state)
// Attach listener BEFORE creating picker to catch initial event
document.getElementById('picker-form').addEventListener('trmnl:change', (event) => {
// Display event data
document.getElementById('event-output').textContent = JSON.stringify(event.detail, null, 2)
// Apply classes to screen preview
const screen = document.querySelector('.screen')
screen.className = event.detail.screenClasses.join(' ')
console.log('Picker changed:', event.detail)
executeTerminalize()
})
// Initialize picker
async function initPicker() {
try {
// Create picker with localStorage persistence
picker = await TRMNLPicker.create('picker-form', {
localStorageKey: 'trmnl-picker-demo'
})
// Hide loading state, show form
document.getElementById('loading-state').style.display = 'none'
document.getElementById('picker-form').style.display = 'flex'
document.getElementById('screen-preview').classList.add('visible')
console.log('✓ Picker initialized successfully')
console.log('Models:', picker.models.length)
console.log('Palettes:', picker.palettes.length)
} catch (error) {
console.error('Failed to initialize picker:', error)
document.getElementById('loading-state').innerHTML = `
<div style="color: #ff4d4f;">
<strong>Error loading picker:</strong><br>
${error.message}
</div>
`
}
}
// Initialize on page load
initPicker()
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink