index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://bank.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Horizon Bank | Modern Digital Banking
+ style.css
+
+ header
+ class bank-header
+ div
+ class header-container
+ div Horizon Bank
+ class logo
+ nav
+ class main-nav
+ a Accounts
+ href #accounts
+ a Transfer
+ href #transfer
+ a Payments
+ href #payments
+ a Support
+ href #support
+ div
+ class user-menu
+ div JS
+ class user-avatar
+ span John Smith
+ class user-name
+ main
+ section
+ class dashboard
+ div
+ class welcome-banner
+ h1 Welcome back, John
+ p Last login: Today at 9:42 AM
+ div
+ class accounts-summary
+ h2 Your Accounts
+ div
+ class account-cards
+ div
+ class account-card primary
+ h3 Checking
+ p $12,450.89
+ div
+ class account-number
+ p ****4582
+ div
+ class account-card
+ h3 Savings
+ p $28,720.15
+ div
+ class account-number
+ p ****3716
+ div
+ class account-card
+ h3 Credit Card
+ p $1,245.00
+ div
+ class account-number
+ p ****9821
+ section
+ class quick-actions
+ h2 Quick Actions
+ div
+ class action-grid
+ div
+ class action-card
+ div
+ class action-icon transfer
+ h3 Transfer
+ p Move money between accounts
+ div
+ class action-card
+ div
+ class action-icon pay
+ h3 Pay Bills
+ p Schedule payments
+ div
+ class action-card
+ div
+ class action-icon deposit
+ h3 Deposit
+ p Mobile check deposit
+ div
+ class action-card
+ div
+ class action-icon card
+ h3 Card Controls
+ p Manage debit card
+ section
+ class recent-transactions
+ h2 Recent Transactions
+ div
+ class transactions-list
+ div
+ class transaction-item
+ div
+ class transaction-icon grocery
+ div
+ class transaction-details
+ h3 Whole Foods Market
+ p May 15, 2023
+ div
+ class transaction-amount
+ p -$86.42
+ div
+ class transaction-item
+ div
+ class transaction-icon salary
+ div
+ class transaction-details
+ h3 Acme Corp - Salary
+ p May 1, 2023
+ div
+ class transaction-amount positive
+ p +$4,250.00
+ div
+ class transaction-item
+ div
+ class transaction-icon utility
+ div
+ class transaction-details
+ h3 Electric Company
+ p April 28, 2023
+ div
+ class transaction-amount
+ p -$120.75
+ footer
+ class bank-footer
+ div
+ class footer-container
+ div
+ class footer-links
+ a Security
+ href #security
+ a Privacy
+ href #privacy
+ a Terms
+ href #terms
+ div
+ class bank-info
+ p Member FDIC. Equal Housing Lender.
+
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "9d3e27d5-5bbf-4a3a-8d2a-086d200dd32a",
+ "object": "chat.completion",
+ "created": 1744312418,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "Here's a professional bank interface website using Scroll:\n\n---domain---\nbank.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://bank.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Horizon Bank | Modern Digital Banking\nstyle.css\n\nheader\n class bank-header\n div\n class header-container\n div Horizon Bank\n class logo\n nav\n class main-nav\n a Accounts\n href #accounts\n a Transfer\n href #transfer\n a Payments\n href #payments\n a Support\n href #support\n div\n class user-menu\n div JS\n class user-avatar\n span John Smith\n class user-name\nmain\n section\n class dashboard\n div\n class welcome-banner\n h1 Welcome back, John\n p Last login: Today at 9:42 AM\n div\n class accounts-summary\n h2 Your Accounts\n div\n class account-cards\n div\n class account-card primary\n h3 Checking\n p $12,450.89\n div\n class account-number\n p ****4582\n div\n class account-card\n h3 Savings\n p $28,720.15\n div\n class account-number\n p ****3716\n div\n class account-card\n h3 Credit Card\n p $1,245.00\n div\n class account-number\n p ****9821\n section\n class quick-actions\n h2 Quick Actions\n div\n class action-grid\n div\n class action-card\n div\n class action-icon transfer\n h3 Transfer\n p Move money between accounts\n div\n class action-card\n div\n class action-icon pay\n h3 Pay Bills\n p Schedule payments\n div\n class action-card\n div\n class action-icon deposit\n h3 Deposit\n p Mobile check deposit\n div\n class action-card\n div\n class action-icon card\n h3 Card Controls\n p Manage debit card\n section\n class recent-transactions\n h2 Recent Transactions\n div\n class transactions-list\n div\n class transaction-item\n div\n class transaction-icon grocery\n div\n class transaction-details\n h3 Whole Foods Market\n p May 15, 2023\n div\n class transaction-amount\n p -$86.42\n div\n class transaction-item\n div\n class transaction-icon salary\n div\n class transaction-details\n h3 Acme Corp - Salary\n p May 1, 2023\n div\n class transaction-amount positive\n p +$4,250.00\n div\n class transaction-item\n div\n class transaction-icon utility\n div\n class transaction-details\n h3 Electric Company\n p April 28, 2023\n div\n class transaction-amount\n p -$120.75\nfooter\n class bank-footer\n div\n class footer-container\n div\n class footer-links\n a Security\n href #security\n a Privacy\n href #privacy\n a Terms\n href #terms\n div\n class bank-info\n p Member FDIC. Equal Housing Lender.\n\nscript.js\n---style.css---\n:root {\n --primary: #0056b3;\n --primary-light: #e6f0ff;\n --secondary: #4a4a4a;\n --success: #28a745;\n --danger: #dc3545;\n --light: #f8f9fa;\n --dark: #343a40;\n --border-radius: 8px;\n --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', system-ui, sans-serif;\n}\n\nbody {\n background-color: #f5f7fa;\n color: var(--secondary);\n line-height: 1.6;\n}\n\n.bank-header {\n background: white;\n box-shadow: var(--shadow);\n position: sticky;\n top: 0;\n z-index: 100;\n}\n\n.header-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary);\n}\n\n.main-nav {\n display: flex;\n gap: 1.5rem;\n}\n\n.main-nav a {\n text-decoration: none;\n color: var(--secondary);\n font-weight: 500;\n transition: color 0.2s;\n}\n\n.main-nav a:hover {\n color: var(--primary);\n}\n\n.user-menu {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n}\n\n.user-avatar {\n width: 32px;\n height: 32px;\n background-color: var(--primary);\n color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n}\n\nmain {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n}\n\n.dashboard {\n margin-bottom: 2rem;\n}\n\n.welcome-banner {\n margin-bottom: 2rem;\n}\n\n.welcome-banner h1 {\n font-size: 2rem;\n color: var(--dark);\n margin-bottom: 0.5rem;\n}\n\n.welcome-banner p {\n color: #6c757d;\n}\n\n.accounts-summary h2 {\n margin-bottom: 1rem;\n font-size: 1.5rem;\n}\n\n.account-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n\n.account-card {\n background: white;\n border-radius: var(--border-radius);\n padding: 1.5rem;\n box-shadow: var(--shadow);\n transition: transform 0.2s;\n}\n\n.account-card:hover {\n transform: translateY(-5px);\n}\n\n.account-card.primary {\n border-top: 4px solid var(--primary);\n}\n\n.account-card h3 {\n color: var(--secondary);\n margin-bottom: 0.5rem;\n}\n\n.account-card p {\n font-size: 1.75rem;\n font-weight: 600;\n margin-bottom: 1rem;\n}\n\n.account-number p {\n font-size: 0.9rem;\n color: #6c757d;\n font-weight: normal;\n}\n\n.quick-actions {\n margin: 3rem 0;\n}\n\n.quick-actions h2 {\n margin-bottom: 1.5rem;\n font-size: 1.5rem;\n}\n\n.action-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n}\n\n.action-card {\n background: white;\n border-radius: var(--border-radius);\n padding: 1.5rem;\n box-shadow: var(--shadow);\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.action-card:hover {\n background: var(--primary-light);\n}\n\n.action-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 1rem;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--primary-light);\n color: var(--primary);\n font-size: 1.5rem;\n}\n\n.action-card h3 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n}\n\n.action-card p {\n color: #6c757d;\n font-size: 0.9rem;\n}\n\n.recent-transactions h2 {\n margin-bottom: 1.5rem;\n font-size: 1.5rem;\n}\n\n.transactions-list {\n background: white;\n border-radius: var(--border-radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n}\n\n.transaction-item {\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n border-bottom: 1px solid #eee;\n}\n\n.transaction-item:last-child {\n border-bottom: none;\n}\n\n.transaction-icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--primary-light);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n}\n\n.transaction-details h3 {\n font-size: 1rem;\n margin-bottom: 0.25rem;\n}\n\n.transaction-details p {\n font-size: 0.85rem;\n color: #6c757d;\n}\n\n.transaction-amount {\n margin-left: auto;\n font-weight: 600;\n}\n\n.transaction-amount.positive {\n color: var(--success);\n}\n\n.bank-footer {\n background: var(--dark);\n color: white;\n padding: 2rem 0;\n margin-top: 3rem;\n}\n\n.footer-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.footer-links {\n display: flex;\n gap: 1.5rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n opacity: 0.8;\n transition: opacity 0.2s;\n}\n\n.footer-links a:hover {\n opacity: 1;\n}\n\n.bank-info {\n opacity: 0.7;\n font-size: 0.9rem;\n}\n\n@media (max-width: 768px) {\n .header-container {\n flex-direction: column;\n gap: 1rem;\n }\n \n .main-nav {\n flex-wrap: wrap;\n justify-content: center;\n }\n \n .footer-container {\n flex-direction: column;\n gap: 1.5rem;\n text-align: center;\n }\n \n .footer-links {\n flex-wrap: wrap;\n justify-content: center;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Simulate loading accounts data\n setTimeout(() => {\n const accountCards = document.querySelectorAll('.account-card');\n accountCards.forEach(card => {\n card.style.opacity = '1';\n card.style.transform = 'translateY(0)';\n });\n }, 300);\n\n // Add click handlers for action cards\n const actionCards = document.querySelectorAll('.action-card');\n actionCards.forEach(card => {\n card.addEventListener('click', function() {\n const action = this.querySelector('h3').textContent;\n alert(`${action} feature would open here`);\n });\n });\n\n // User menu interaction\n const userMenu = document.querySelector('.user-menu');\n if (userMenu) {\n userMenu.addEventListener('click', function() {\n alert('User menu would open here');\n });\n }\n\n // Transaction item interaction\n const transactionItems = document.querySelectorAll('.transaction-item');\n transactionItems.forEach(item => {\n item.addEventListener('click', function() {\n const merchant = this.querySelector('h3').textContent;\n alert(`Details for ${merchant} transaction would show here`);\n });\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 719,
+ "completion_tokens": 2589,
+ "total_tokens": 3308,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 719
+ },
+ "system_fingerprint": "fp_3d5141a69a_prod0225"
+ }
readme.scroll
Changed around line 1
+ # bank.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ a bank interface
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "a bank interface"
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+ // Simulate loading accounts data
+ setTimeout(() => {
+ const accountCards = document.querySelectorAll('.account-card');
+ accountCards.forEach(card => {
+ card.style.opacity = '1';
+ card.style.transform = 'translateY(0)';
+ });
+ }, 300);
+
+ // Add click handlers for action cards
+ const actionCards = document.querySelectorAll('.action-card');
+ actionCards.forEach(card => {
+ card.addEventListener('click', function() {
+ const action = this.querySelector('h3').textContent;
+ alert(`${action} feature would open here`);
+ });
+ });
+
+ // User menu interaction
+ const userMenu = document.querySelector('.user-menu');
+ if (userMenu) {
+ userMenu.addEventListener('click', function() {
+ alert('User menu would open here');
+ });
+ }
+
+ // Transaction item interaction
+ const transactionItems = document.querySelectorAll('.transaction-item');
+ transactionItems.forEach(item => {
+ item.addEventListener('click', function() {
+ const merchant = this.querySelector('h3').textContent;
+ alert(`Details for ${merchant} transaction would show here`);
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #0056b3;
+ --primary-light: #e6f0ff;
+ --secondary: #4a4a4a;
+ --success: #28a745;
+ --danger: #dc3545;
+ --light: #f8f9fa;
+ --dark: #343a40;
+ --border-radius: 8px;
+ --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ }
+
+ body {
+ background-color: #f5f7fa;
+ color: var(--secondary);
+ line-height: 1.6;
+ }
+
+ .bank-header {
+ background: white;
+ box-shadow: var(--shadow);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ }
+
+ .header-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--primary);
+ }
+
+ .main-nav {
+ display: flex;
+ gap: 1.5rem;
+ }
+
+ .main-nav a {
+ text-decoration: none;
+ color: var(--secondary);
+ font-weight: 500;
+ transition: color 0.2s;
+ }
+
+ .main-nav a:hover {
+ color: var(--primary);
+ }
+
+ .user-menu {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ }
+
+ .user-avatar {
+ width: 32px;
+ height: 32px;
+ background-color: var(--primary);
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .dashboard {
+ margin-bottom: 2rem;
+ }
+
+ .welcome-banner {
+ margin-bottom: 2rem;
+ }
+
+ .welcome-banner h1 {
+ font-size: 2rem;
+ color: var(--dark);
+ margin-bottom: 0.5rem;
+ }
+
+ .welcome-banner p {
+ color: #6c757d;
+ }
+
+ .accounts-summary h2 {
+ margin-bottom: 1rem;
+ font-size: 1.5rem;
+ }
+
+ .account-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .account-card {
+ background: white;
+ border-radius: var(--border-radius);
+ padding: 1.5rem;
+ box-shadow: var(--shadow);
+ transition: transform 0.2s;
+ }
+
+ .account-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .account-card.primary {
+ border-top: 4px solid var(--primary);
+ }
+
+ .account-card h3 {
+ color: var(--secondary);
+ margin-bottom: 0.5rem;
+ }
+
+ .account-card p {
+ font-size: 1.75rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ }
+
+ .account-number p {
+ font-size: 0.9rem;
+ color: #6c757d;
+ font-weight: normal;
+ }
+
+ .quick-actions {
+ margin: 3rem 0;
+ }
+
+ .quick-actions h2 {
+ margin-bottom: 1.5rem;
+ font-size: 1.5rem;
+ }
+
+ .action-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .action-card {
+ background: white;
+ border-radius: var(--border-radius);
+ padding: 1.5rem;
+ box-shadow: var(--shadow);
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.2s;
+ }
+
+ .action-card:hover {
+ background: var(--primary-light);
+ }
+
+ .action-icon {
+ width: 60px;
+ height: 60px;
+ margin: 0 auto 1rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--primary-light);
+ color: var(--primary);
+ font-size: 1.5rem;
+ }
+
+ .action-card h3 {
+ margin-bottom: 0.5rem;
+ font-size: 1.1rem;
+ }
+
+ .action-card p {
+ color: #6c757d;
+ font-size: 0.9rem;
+ }
+
+ .recent-transactions h2 {
+ margin-bottom: 1.5rem;
+ font-size: 1.5rem;
+ }
+
+ .transactions-list {
+ background: white;
+ border-radius: var(--border-radius);
+ box-shadow: var(--shadow);
+ overflow: hidden;
+ }
+
+ .transaction-item {
+ display: flex;
+ align-items: center;
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid #eee;
+ }
+
+ .transaction-item:last-child {
+ border-bottom: none;
+ }
+
+ .transaction-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: var(--primary-light);
+ color: var(--primary);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 1rem;
+ }
+
+ .transaction-details h3 {
+ font-size: 1rem;
+ margin-bottom: 0.25rem;
+ }
+
+ .transaction-details p {
+ font-size: 0.85rem;
+ color: #6c757d;
+ }
+
+ .transaction-amount {
+ margin-left: auto;
+ font-weight: 600;
+ }
+
+ .transaction-amount.positive {
+ color: var(--success);
+ }
+
+ .bank-footer {
+ background: var(--dark);
+ color: white;
+ padding: 2rem 0;
+ margin-top: 3rem;
+ }
+
+ .footer-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .footer-links {
+ display: flex;
+ gap: 1.5rem;
+ }
+
+ .footer-links a {
+ color: white;
+ text-decoration: none;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+ }
+
+ .footer-links a:hover {
+ opacity: 1;
+ }
+
+ .bank-info {
+ opacity: 0.7;
+ font-size: 0.9rem;
+ }
+
+ @media (max-width: 768px) {
+ .header-container {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .main-nav {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .footer-container {
+ flex-direction: column;
+ gap: 1.5rem;
+ text-align: center;
+ }
+
+ .footer-links {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ }