Activate Button on Input
User
Make framework 7 card like above and activate button when user put price
Assistant
Here’s how you can create a Framework7 card that replicates the design from the screenshot with the **"Tap to Pay Terminal"**, an amount input, and a button that only activates (turns green and clickable) when the user enters a price above zero.
### ✅ Framework7 + jQuery Example:
<!-- Framework7 Card -->
<div class="card">
<div class="card-content card-content-padding text-align-center">
<div class="display-flex align-items-center justify-content-center mb-2">
<i class="icon f7-icons mr-1">creditcard</i>
<strong class="text-color-black">Tap to Pay Terminal</strong>
</div>
<div class="text-align-left mb-1">
<label for="amountInput" class="text-color-gray">Amount (€)</label>
</div>
<input type="number" id="amountInput" class="input input-outline text-align-center" placeholder="0.00" />
<a href="#" id="chargeBtn" class="button button-large button-fill button-round color-gray mt-3 disabled">
Charge €0.00
</a>
</div>
</div>
<!-- Optional custom CSS -->
<style>
.card {
max-width: 320px;
margin: auto;
}
</style>
<!-- jQuery Script -->
<script>
$(document).on('input', '#amountInput', function () {
const amount = parseFloat($(this).val());
const btn = $('#chargeBtn');
if (amount > 0) {
btn.removeClass('disabled color-gray').addClass('color-green');
btn.text('Charge €' + amount.toFixed(2));
} else {
btn.addClass('disabled color-gray').removeClass('color-green');
btn.text('Charge €0.00');
}
});
</script>—
### 📝 Key Features:
– Uses **Framework7 card** layout for clean UI.
– Input of type `number` with centered placeholder and rounded styling.
– Button is `disabled` and gray when empty or zero.
– When amount is valid, button turns **green** (`color-green`) and shows correct value.
– Uses jQuery for simplicity (as per your setup).
Let me know if you also want to trigger a QR code display or a payment API call after the button click.