0
USELESS#6eb66f26
Tip Calculator
@Owner·deposited 1mo ago·updated 3w ago·48 views
USELESS#6eb66f26
Tip Calculator
OW
@Owner
48Views
0Comments
0Forks
0Saves
SHARE · REMIX
Tip Calculator — a HTML useless widget by @Owner.
CONTROLS
No comments yet. Be the first!
✦ Remix with AI
SDK in this widgetNo Vibes SDK features detected yet
Generated prompt
You are helping me modify a vibe-coded widget from itjustvibes.com.
[VIBE CODE: "Tip Calculator" by @Owner]
Source: https://itjustvibes.com/Owner/tip-calculator
Type: HTML
--- SOURCE CODE ---
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0a0b10;
color: #ebecf2;
font-family: Inter, system-ui, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.card {
background: #12141d;
border: 1px solid #232739;
border-radius: 16px;
padding: 32px;
width: 100%;
max-width: 400px;
}
h1 { font-size: 20px; font-weight: 600; margin-bottom: 24px; color: #4cc9f0; }
label { display: block; font-size: 13px; color: #8d92a6; margin-bottom: 6px; }
input {
width: 100%;
background: #1e2231;
border: 1px solid #232739;
border-radius: 8px;
color: #ebecf2;
font-size: 16px;
padding: 10px 14px;
outline: none;
margin-bottom: 16px;
transition: border-color 0.15s;
}
input:focus { border-color: #4cc9f0; }
.tip-presets { display: flex; gap: 8px; margin-bottom: 16px; }
.preset {
flex: 1;
background: #1e2231;
border: 1px solid #232739;
border-radius: 8px;
color: #8d92a6;
cursor: pointer;
font-size: 13px;
padding: 8px 4px;
text-align: center;
transition: all 0.15s;
}
.preset:hover { border-color: #4cc9f0; color: #4cc9f0; }
.preset.active { background: #4cc9f0; border-color: #4cc9f0; color: #0a0b10; font-weight: 600; }
.results {
background: #181b27;
border: 1px solid #232739;
border-radius: 12px;
margin-top: 8px;
overflow: hidden;
}
.result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid #232739;
}
.result-row:last-child { border-bottom: none; }
.result-label { font-size: 13px; color: #8d92a6; }
.result-value { font-size: 18px; font-weight: 600; color: #ebecf2; }
.result-value.accent { color: #4cc9f0; }
.result-value.highlight { color: #6df0a4; font-size: 22px; }
</style>
</head>
<body>
<div class="card">
<h1>Tip Calculator</h1>
<label>Bill Amount ($)</label>
<input type="number" id="bill" placeholder="0.00" min="0" step="0.01">
<label>Tip Percentage</label>
<div class="tip-presets">
<div class="preset" data-tip="10">10%</div>
<div class="preset" data-tip="15">15%</div>
<div class="preset active" data-tip="18">18%</div>
<div class="preset" data-tip="20">20%</div>
<div class="preset" data-tip="25">25%</div>
</div>
<input type="number" id="tip" value="18" min="0" max="100" step="1">
<label>Number of People</label>
<input type="number" id="people" value="1" min="1" step="1">
<div class="results">
<div class="result-row">
<span class="result-label">Tip per person</span>
<span class="result-value accent" id="tip-per">$0.00</span>
</div>
<div class="result-row">
<span class="result-label">Total per person</span>
<span class="result-value highlight" id="total-per">$0.00</span>
</div>
<div class="result-row">
<span class="result-label">Total tip</span>
<span class="result-value" id="tip-total">$0.00</span>
</div>
<div class="result-row">
<span class="result-label">Grand total</span>
<span class="result-value" id="grand-total">$0.00</span>
</div>
</div>
</div>
<script>
var billEl = document.getElementById('bill')
var tipEl = document.getElementById('tip')
var peopleEl = document.getElementById('people')
var presets = document.querySelectorAll('.preset')
function fmt(n) { return '$' + n.toFixed(2) }
function calc() {
var bill = parseFloat(billEl.value) || 0
var tipPct = parseFloat(tipEl.value) || 0
var people = Math.max(1, parseInt(peopleEl.value) || 1)
var tipTotal = bill * (tipPct / 100)
var grandTotal = bill + tipTotal
document.getElementById('tip-per').textContent = fmt(tipTotal / people)
document.getElementById('total-per').textContent = fmt(grandTotal / people)
document.getElementById('tip-total').textContent = fmt(tipTotal)
document.getElementById('grand-total').textContent = fmt(grandTotal)
}
presets.forEach(function(p) {
p.addEventListener('click', function() {
presets.forEach(function(x) { x.classList.remove('active') })
p.classList.add('active')
tipEl.value = p.dataset.tip
calc()
})
})
tipEl.addEventListener('input', function() {
presets.forEach(function(x) { x.classList.remove('active') })
var match = Array.from(presets).find(function(p) { return p.dataset.tip === tipEl.value })
if (match) match.classList.add('active')
calc()
})
billEl.addEventListener('input', calc)
peopleEl.addEventListener('input', calc)
calc()
</script>
</body>
</html>
```
[REQUESTED CHANGES]
(no specific request — apply your best judgment)
--- HOW TO RESPOND (READ FIRST) ---
Before writing any code, follow this exact process:
1. **ANALYZE** the widget source code provided above and identify:
a. Which Vibes SDK features it already uses (vibes.save, vibes.load, vibes.shared.join, etc.)
b. Which SDK features would genuinely benefit THIS specific widget — tailored to what it does, not a dump of everything available.
2. **PRESENT A NUMBERED LIST** covering:
- SDK features currently active in this widget
- New SDK features that would concretely improve this widget (be specific: why this widget, what it enables)
3. **WAIT** — do not write any code yet. Reply with your analysis and numbered list, then stop and ask the user which numbered items they want.
4. **IMPLEMENT ONLY** the items the user confirms, plus any explicit change they requested. Do not add unrequested features.
**IMPORTANT — Shared state room names:**
If you add vibes.shared.join(), do NOT use a hardcoded string literal as the room name (e.g. vibes.shared.join("lobby")) unless the user explicitly wants ALL viewers to share one single global state. A hardcoded room name means every person who visits this widget reads and writes the same shared state — it is a global room. For per-user or per-session isolation, derive the room name from a variable (e.g. a user ID, session token, or random value). When in doubt, use vibes.save/vibes.load for per-user persistence instead.
--- VIBES SDK CONTEXT ---
## Vibes SDK Reference
You are building an HTML widget for It Just Vibes (itjustvibes.com). The Vibes SDK is auto-injected — do NOT add a script tag. Just use `window.vibes` (or just `vibes`).
### Setup
Wrap your startup code in `vibes.onReady`:
```js
vibes.onReady(async () => {
const saved = await vibes.load("myKey");
// your widget logic here
});
```
### State (Per-User Persistence)
Every user gets their own isolated state per widget. All methods return Promises.
| Method | Description |
|--------|-------------|
| `await vibes.save(key, value)` | Save JSON-serializable data |
| `await vibes.load(key)` | Load saved data (returns `null` if not found) |
| `await vibes.delete(key)` | Delete a saved key |
| `await vibes.listKeys()` | Get array of all saved key names |
**Key rules:**
- Keys are strings, max 64 characters, alphanumeric + dashes/underscores
- Values must be JSON-serializable (objects, arrays, strings, numbers, booleans)
- Max 100KB per value, 500KB per widget per user, 5MB per user total
- Max 100 keys per widget per user
### Fetch Proxy
Use direct `fetch()` for APIs with permissive CORS headers (`Access-Control-Allow-Origin: *`). Use `vibes.fetch` for APIs without CORS headers (the proxy handles cross-origin requests):
```js
const resp = await vibes.fetch("https://api.example.com/data", {
method: "GET", // GET, POST, PUT, DELETE
headers: {}, // optional headers
body: null, // optional body (string)
timeout: null // optional timeout in ms
});
const data = await resp.json(); // or resp.text()
console.log(resp.status, resp.ok);
```
### Multiplayer (Shared State)
Real-time shared state across all users viewing the same widget.
```js
// Join a room (call once at startup)
await vibes.shared.join("lobby", { persistent: true });
// Set shared state (broadcasts to all users)
await vibes.shared.set("score", { player1: 10, player2: 7 });
// Read shared state (synchronous, returns last known value)
const score = vibes.shared.get("score");
// Listen for changes to a specific key
vibes.shared.onChange("score", (newValue) => {
console.log("Score updated:", newValue);
});
// Listen for any shared state change
vibes.shared.onAny((key, value) => {
console.log(key, "changed to", value);
});
// Get number of connected users
const count = await vibes.shared.getUserCount();
// Leave room
vibes.shared.leave();
// Clear all shared state for this room
await vibes.shared.clear();
```
**Shared state options:**
- `{ persistent: true }` — state survives page reloads (stored server-side)
- Default room name is "__default__" if omitted
### Agent-Accessible State (vibes.ai.*)
State written with the standard `vibes.save` / `vibes.load` methods is private to each user and is **NOT readable by AI agents**. To share state with an AI agent (via the MCP connector), use the `vibes.ai` sub-namespace:
| Method | Description |
|--------|-------------|
| `await vibes.ai.setState(key, value)` | Write agent-readable state. Key is stored internally as `ai/<key>`. |
| `await vibes.ai.getState(key)` | Read agent-readable state. Returns `null` if key absent. |
| `await vibes.ai.listKeys()` | List all agent-readable keys (without the `ai/` prefix). |
**Important rules:**
- Regular `vibes.save()` / `vibes.load()` is **NOT agent-accessible** — use `vibes.ai.*` for state you want agents to read.
- The widget **owner** must enable agent access in **Manage → Agent tab** before any agent can read or write `vibes.ai.*` state.
- Keys are auto-prefixed to `ai/` internally; you supply just the short key (e.g. `'context'`).
```js
vibes.onReady(async () => {
// Write state an AI agent can later read
await vibes.ai.setState('context', { currentLevel: 3, score: 1500 });
// Read it back (same auto-prefix applies)
const ctx = await vibes.ai.getState('context');
// List all agent-accessible keys for this widget
const keys = await vibes.ai.listKeys(); // e.g. ['context']
});
```
### Rules
1. **Do NOT use localStorage, sessionStorage, or window.storage** — they are blocked or undefined in the sandbox. Use `vibes.save`/`vibes.load` instead.
2. **Do NOT add a script tag to import the SDK** — it is auto-injected.
3. **Wrap startup code in `vibes.onReady()`** — the SDK may not be ready immediately.
4. **Await all SDK calls** — every method (except `vibes.shared.get`) returns a Promise.
5. **External JS libraries are allowed and encouraged** — load them via a `<script src>` tag from a reputable CDN (jsDelivr, unpkg, or cdnjs) with a pinned version, or inline the library source. The only exception: do NOT add a script tag for the Vibes SDK itself — it is auto-injected (see Rule 2).
6. **Keep total code under 100KB** — that is the default widget size limit (your account limit may be higher).
### Rate Limits
| Operation | Limit |
|-----------|-------|
| Writes (save + delete combined) | 30/min |
| Reads (load) | 60/min |
| List keys | 30/min |
| Fetch proxy | Rate limited per widget |
### Error Handling
All SDK methods can reject. Wrap in try/catch:
```js
try {
await vibes.save("key", value);
} catch (err) {
console.error("Save failed:", err.message);
}
```
Fetch proxy errors include `err.code`: `"RATE_LIMITED"`, `"BLOCKED"`, `"FETCH_ERROR"`.
### Data Export
Export rows of data as CSV or Excel directly from your widget.
```js
// Register dataset for the platform's "Export data" button
// AND optionally trigger an immediate download
vibes.exportData(rows, { filename: 'results.csv' })
// rows: Array of arrays (each inner array is one row; first row = headers)
// options.filename: sets the download filename and format (csv or xlsx)
// options.directDownload: false to only register without downloading (default: true)
```
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `filename` | string | `'data.csv'` | Download filename; extension determines format (`.csv` or `.xlsx`) |
| `directDownload` | boolean | `true` | Trigger immediate browser download in addition to registering the dataset |
**Notes:**
- First call registers the dataset so the widget chrome shows an "Export data" button
- Use `.csv` extension for CSV, `.xlsx` for Excel
- CSV injection safety is automatic (formula-starting cells prefixed with `'`)
- Data stays in the browser — no server round-trip
--- FORK & RESUBMIT INSTRUCTION ---
Return the complete, self-contained HTML file with all changes applied.
It should be ready to paste into itjustvibes.com/submit to create a new fork.
Include this comment at the top of the output:
/* Forked from: https://itjustvibes.com/Owner/tip-calculator */