aa:I[903690,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/1t6tgnbe013qf.js","/chat-static/_next/static/immutable/chunks/263b0wh6fc7vv.js","/chat-static/_next/static/immutable/chunks/2bgu79hhhqcry.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/2j5almabhex5i.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/2h1e8frandnla.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/1oznss6s7d7gf.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/34plql7k-5zln.js","/chat-static/_next/static/immutable/chunks/2u412yj4g70a6.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1kms4qb1b1e4i.js","/chat-static/_next/static/immutable/chunks/14xqre5n_-5om.js","/chat-static/_next/static/immutable/chunks/3_fsao_b89s35.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/06gm8aj13bwx1.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2oakf9cjtyb2q.js"],"ExplicitChatIdProvider"] ab:I[838238,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/1t6tgnbe013qf.js","/chat-static/_next/static/immutable/chunks/263b0wh6fc7vv.js","/chat-static/_next/static/immutable/chunks/2bgu79hhhqcry.js","/chat-static/_next/static/immutable/chunks/1ukuldvl_7ewm.js","/chat-static/_next/static/immutable/chunks/2j5almabhex5i.js","/chat-static/_next/static/immutable/chunks/3all0vilnb92m.js","/chat-static/_next/static/immutable/chunks/2h1e8frandnla.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/2ktsmvnrpabs_.js","/chat-static/_next/static/immutable/chunks/29mrkgtzx_4wp.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/1oznss6s7d7gf.js","/chat-static/_next/static/immutable/chunks/3ozgp_g2qonep.js","/chat-static/_next/static/immutable/chunks/34plql7k-5zln.js","/chat-static/_next/static/immutable/chunks/2u412yj4g70a6.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/1kms4qb1b1e4i.js","/chat-static/_next/static/immutable/chunks/14xqre5n_-5om.js","/chat-static/_next/static/immutable/chunks/3_fsao_b89s35.js","/chat-static/_next/static/immutable/chunks/0h3zc71pdnjom.js","/chat-static/_next/static/immutable/chunks/06gm8aj13bwx1.js","/chat-static/_next/static/immutable/chunks/1erht42aiso18.js","/chat-static/_next/static/immutable/chunks/30mwco_q1oioj.js","/chat-static/_next/static/immutable/chunks/2oakf9cjtyb2q.js"],"SWRDataProvider"] ad:T1186f7,Haramm — Aggressive Arabic Soundboard

THE SOUND OF REBELLION / 001

MAKE
NOISE.

اصنع صوتك. لا تعتذر.

Record the raw. Upload the forbidden. Build a soundboard that sounds like you.

H
حَرَام

YOUR ARSENAL

THE SOUNDBOARD 04

NO RULES / NO FILTERS

UPLOAD YOUR
OWN FREQUENCY.

ae:[] af:[["b_ABS3X4uqvAo",null],["b_71cWUcz1rhp",null]] b0:[["b_ABS3X4uqvAo",{"templateVersionId":null,"templateCanonId":null}],["b_71cWUcz1rhp",{"templateVersionId":null,"templateCanonId":null}]] b1:[["b_0OsT81ecyke","$D2026-08-10T10:23:51.611Z"],["b_0uNQpqheiOc","$D2026-08-10T10:24:06.300Z"],["b_H6v0zPcuidp","$D2026-08-10T10:24:21.185Z"],["b_1MKzkS2OYWl","$D2026-08-10T10:24:41.802Z"],["b_IkglcjwtN1A","$D2026-08-10T10:26:31.700Z"],["b_Fm9oVcn39Zb","$D2026-08-10T10:26:34.632Z"],["b_aEEz8IEvIKl","$D2026-08-10T10:26:51.149Z"],["b_euWdaUZ1L0z","$D2026-08-10T10:28:19.642Z"],["b_koMm9RHg0m0","$D2026-08-11T10:12:13.574Z"],["b_XkXTOcwncp8","$D2026-08-11T10:12:45.070Z"],["b_NdwkgPvjmKH","$D2026-08-11T10:12:49.834Z"],["b_rDUBP3BMQKw","$D2026-08-11T10:13:10.501Z"],["b_LdprcVOSETM","$D2026-08-11T10:13:38.132Z"],["b_kRgS1Y7p86z","$D2026-08-11T10:13:41.574Z"],["b_PD5yOgXb8mt","$D2026-08-11T10:13:46.033Z"],["b_ABS3X4uqvAo","$D2026-08-11T10:31:27.774Z"],["b_71cWUcz1rhp","$D2026-08-11T10:31:39.197Z"]] b2:[["b_ABS3X4uqvAo",false],["b_71cWUcz1rhp",false]] b3:[["b_ABS3X4uqvAo",{"git":{"ref":"main","sha":"102139dfcebd868549c7a7f11a79dce015c23b07","type":"github","repoId":0,"repoName":"v0-1-team_0VP9c5MGvTMsvE8iJWn0OkAF-b72XYlx2cYr","ownerName":"v0-git-s3-storage","commitMessage":"feat: add background image and gradient to Haramm app"}}],["b_71cWUcz1rhp",{"git":{"ref":"main","sha":"102139dfcebd868549c7a7f11a79dce015c23b07","type":"github","repoId":0,"repoName":"v0-1-team_0VP9c5MGvTMsvE8iJWn0OkAF-b72XYlx2cYr","ownerName":"v0-git-s3-storage","commitMessage":"feat: add background image and gradient to Haramm app"}}]] b4:[["b_ABS3X4uqvAo",null],["b_71cWUcz1rhp",null]] b5:[["b_ABS3X4uqvAo",true],["b_71cWUcz1rhp",true]] b6:[["b_ABS3X4uqvAo",true],["b_71cWUcz1rhp",true]] b7:[] b8:T4dd8,[V0_FILE]css:file="/app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @import 'shadcn/tailwind.css'; @custom-variant dark (&:is(.dark *)); @theme inline { --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); } :root { color-scheme: light; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @media (prefers-color-scheme: dark) { :root:not(.light) { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; margin: 0; } } :root { --ink: #eee4db; --paper: #080707; --sage: #2c1115; --coral: #d7192e; --mist: #1d1214; --gold: #b99b62; } * { box-sizing: border-box; } body { background: var(--paper) url('/haramm-background.gif') center top / cover fixed no-repeat; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; } .sound-app { background: radial-gradient(circle at 50% -10%, #261113 0%, var(--paper) 42%); } .haramm-app { background-image: linear-gradient(rgba(8, 7, 7, .78), rgba(8, 7, 7, .9)), url('/haramm-background.gif'); background-position: center top; background-size: cover; background-attachment: fixed; } .brand, h1, h2, h3, .record-time { font-family: Georgia, 'Times New Roman', serif; } .brand { text-transform: uppercase; letter-spacing: .08em; } .brand-mark { border-radius: 4px; background: var(--coral); color: var(--paper); } .session-pill { color: #8f8580; } .count, .library h2 span { background: var(--mist); color: #d8c9c1; } .eyebrow, .section-kicker { color: #9d7772; } .hero-copy { color: #9f9490; } .capture-card { border-color: #352426; background: #100d0d; box-shadow: 0 20px 60px #0008; } .capture-heading h2, .library h2 { text-transform: uppercase; letter-spacing: .04em; } .mic-orb, .tips-icon { background: var(--sage); color: #efdad4; } .record-zone { background: #1b1112; box-shadow: inset 0 0 0 1px #4e2024; } .record-zone.recording { background: #2b1013; } .record-ring { border-color: #713035; } .record-button { background: #e8e0d7; color: #170d0e; } .save-button { color: #d38b86; } .or-divider { color: #765a59; } .or-divider::before, .or-divider::after { background: #392426; } .upload-button { border-color: #713035; color: #d6bdb7; } .upload-button span { color: #856d69; } .tips-card { background: #291214; border: 1px solid #542329; } .tips-icon { background: #42191d; } .tips-card > p:not(.section-kicker), .tip-footer { color: #b4938e; } .tip-line { background: #8a4448; } .new-button, .play-button { background: var(--coral); color: #fff0eb; } .empty-library, .sound-list { border-color: #352426; } .empty-library { color: #746966; } .empty-library h3 { color: #c5aba5; } .sound-row { border-color: #352426; } .sound-title span, .duration, .created { color: #877875; } .mini-waveform i { background: #563538; } .icon-button { color: #806b68; } footer { color: #6d5c59; } footer button { color: #947975; } button, a { font: inherit; } button { cursor: pointer; } .sound-app { max-width: 1120px; margin: auto; padding: 26px 34px 30px; } .topbar, .library-header, footer, .capture-heading, .sound-row { display: flex; align-items: center; justify-content: space-between; } .topbar { padding-bottom: 48px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.05em; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--paper); } .brand-mark svg { width: 18px; } .session-pill { display: flex; align-items: center; gap: 9px; color: #66716c; font-size: 12px; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } .count, .library h2 span { padding: 3px 7px; border-radius: 99px; background: var(--mist); color: var(--ink); font-size: 11px; } .hero { max-width: 700px; padding-bottom: 55px; } .eyebrow, .section-kicker { margin: 0 0 14px; color: #7c8780; font-size: 10px; font-weight: 800; letter-spacing: .16em; } h1 { margin: 0; font-size: clamp(54px, 8vw, 92px); line-height: .91; letter-spacing: -.085em; } h1 em { color: var(--coral); font-style: normal; } .hero-copy { max-width: 405px; margin: 28px 0 0; color: #66716c; font-size: 15px; line-height: 1.55; } .workspace { display: grid; grid-template-columns: 1.45fr .75fr; gap: 18px; } .capture-card { padding: 29px; border: 1px solid #d9ddd5; border-radius: 20px; background: #fafaf6; } .capture-heading h2, .library h2 { margin: 0; font-size: 23px; letter-spacing: -.05em; } .mic-orb, .tips-icon { display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--ink); } .mic-orb { width: 42px; height: 42px; } .mic-orb svg { width: 19px; } .record-zone { display: flex; flex-direction: column; align-items: center; margin-top: 25px; padding: 27px 16px 23px; border-radius: 15px; background: var(--ink); color: var(--paper); } .record-zone.recording { background: #223d37; } .record-ring { display: grid; place-items: center; width: 90px; height: 90px; margin-bottom: 13px; border: 1px solid #53645d; border-radius: 50%; } .record-ring span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--coral); } .record-ring svg { width: 22px; } .stop-icon { width: 17px; height: 17px; border-radius: 3px; background: var(--paper); } .record-status { color: #aebbb2; font-size: 12px; } .record-time { margin: 7px 0 17px; font-family: monospace; font-size: 24px; letter-spacing: .04em; } .record-button, .save-button, .upload-button, .new-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; } .record-button { padding: 12px 18px; background: var(--paper); color: var(--ink); } .record-button svg, .upload-button svg, .new-button svg { width: 15px; } .save-button { margin-top: 9px; padding: 9px 16px; background: transparent; color: var(--sage); } .or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9ba39b; font-size: 9px; letter-spacing: .1em; } .or-divider::before, .or-divider::after { width: 100px; height: 1px; background: #dfe3dc; content: ''; } .upload-button { width: 100%; padding: 13px; border: 1px dashed #bbc5b9; background: transparent; color: #4c5c53; } .upload-button span { color: #9ca79e; font-size: 10px; font-weight: 400; } .tips-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 29px; border-radius: 20px; background: var(--sage); } .tips-icon { width: 43px; height: 43px; margin-bottom: auto; background: #e0e9db; } .tips-icon svg { width: 20px; } .tips-card h3 { max-width: 220px; margin: 0 0 12px; font-size: 25px; line-height: 1.02; letter-spacing: -.06em; } .tips-card > p:not(.section-kicker) { max-width: 220px; margin: 0; color: #5f7066; font-size: 13px; line-height: 1.55; } .tip-footer { display: flex; align-items: center; gap: 9px; margin-top: 34px; color: #65776b; font-size: 10px; } .tip-line { width: 27px; height: 1px; background: #819682; } .library { margin-top: 72px; } .library-header { margin-bottom: 20px; } .library h2 span { margin-left: 5px; vertical-align: middle; } .new-button { padding: 10px 13px; background: var(--ink); color: var(--paper); } .empty-library { display: flex; flex-direction: column; align-items: center; padding: 55px 20px; border-top: 1px solid #d9ddd5; color: #9aa49a; text-align: center; } .empty-library svg { width: 27px; height: 27px; margin-bottom: 13px; } .empty-library h3 { margin: 0 0 5px; color: #53625a; font-size: 15px; } .empty-library p { margin: 0; font-size: 12px; } .sound-list { border-top: 1px solid #d9ddd5; } .sound-row { gap: 18px; padding: 16px 2px; border-bottom: 1px solid #d9ddd5; } .play-button { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); } .play-button svg { width: 14px; } .sound-info { min-width: 150px; flex: 1; } .sound-title { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .sound-title strong { font-size: 13px; } .sound-title span { color: #9aa49a; font-size: 10px; } .mini-waveform { display: flex; align-items: center; gap: 2px; height: 20px; } .mini-waveform i { width: 2px; min-height: 4px; background: #b9c5b8; } .mini-waveform.is-active i { background: var(--coral); } .duration, .created { color: #89948b; font-family: monospace; font-size: 11px; } .created { width: 65px; font-family: Arial, sans-serif; } .icon-button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: #8b968d; } .icon-button svg { width: 15px; } .icon-button.danger:hover { color: var(--coral); } footer { margin-top: 65px; color: #98a198; font-size: 10px; } footer span, footer button { display: inline-flex; align-items: center; gap: 6px; } footer svg { width: 13px; } footer button { border: 0; background: transparent; color: #87928a; } .haramm-app { max-width: 1180px; min-height: 100vh; margin: auto; padding: 28px 38px 30px; background: radial-gradient(ellipse at 65% 0%, #321116 0%, transparent 45%), var(--paper); color: var(--ink); font-family: Arial, sans-serif; } .haramm-topbar, .haramm-hero, .board-header, footer { display: flex; align-items: center; justify-content: space-between; } .haramm-topbar { border-bottom: 1px solid #321b1f; padding-bottom: 22px; } .haramm-brand { display: flex; align-items: center; gap: 10px; font: 900 22px Georgia, serif; letter-spacing: .08em; } .haramm-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 2px; background: var(--coral); color: var(--paper); } .haramm-mark svg, .live-state svg { width: 18px; } .arabic-label, .tile-arabic, .hero-arabic { color: var(--gold); font-family: var(--font-arabic), Arial, sans-serif; direction: rtl; } .arabic-label { font-size: 15px; letter-spacing: .06em; } .live-state { display: flex; align-items: center; gap: 8px; color: #8e7778; font: 10px monospace; letter-spacing: .12em; } .live-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); } .live-state b { padding: 5px 7px; color: var(--ink); background: var(--mist); } .haramm-hero { align-items: flex-end; padding: 78px 0 72px; } .hero-kicker { margin: 0 0 15px; color: #956f72; font: 10px monospace; letter-spacing: .18em; } .haramm-hero h1 { margin: 0; font: 900 clamp(70px, 13vw, 150px)/.78 Arial, sans-serif; letter-spacing: -.11em; } .haramm-hero h1 em, .capture-strip em { color: var(--coral); font-style: normal; } .hero-arabic { margin: 25px 0 0; font-size: 23px; } .hero-copy { max-width: 350px; margin: 10px 0 0; color: #9a8986; font: 13px/1.6 Arial, sans-serif; } .hero-stamp { display: grid; place-items: center; width: 132px; height: 132px; border: 1px solid #704048; border-radius: 50%; color: var(--coral); font: 900 52px/.75 Georgia, serif; text-align: center; transform: rotate(12deg); } .hero-stamp span { font-size: 15px; color: var(--gold); } .board-header { border-top: 1px solid #321b1f; padding: 28px 0 18px; } .board-header h2, .capture-strip h2 { margin: 0; font: 800 27px Arial, sans-serif; letter-spacing: -.06em; } .board-header h2 span { color: var(--coral); font: 14px monospace; vertical-align: top; } .add-sound, .upload-action { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--coral); background: transparent; color: var(--ink); font: 700 11px monospace; letter-spacing: .08em; } .add-sound { padding: 12px 14px; } .add-sound svg, .upload-action svg { width: 15px; } .soundboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .sound-tile, .record-tile { position: relative; min-height: 200px; padding: 18px; border: 1px solid #492329; color: var(--ink); text-align: left; transition: transform .2s, border-color .2s; } .sound-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: #130c0e; } .sound-tile:hover, .record-tile:hover { transform: translateY(-3px); border-color: var(--coral); } .sound-tile.crimson { background: #3a1017; } .sound-tile.ember { background: #271415; } .sound-tile.plum { background: #21121c; } .sound-tile.rust { background: #321916; } .tile-index { align-self: flex-start; color: #aa7478; font: 10px monospace; letter-spacing: .14em; } .tile-glyph { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #7f3c46; border-radius: 50%; color: var(--coral); } .tile-glyph svg, .record-glyph svg, .tile-play svg, .delete-sound svg { width: 17px; } .tile-name { font: 800 16px Arial, sans-serif; letter-spacing: .03em; } .tile-arabic { font-size: 14px; } .tile-play { position: absolute; right: 17px; bottom: 17px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #78404a; border-radius: 50%; color: var(--ink); } .record-tile { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; border: 1px dashed #8a424b; background: #17090c; color: var(--ink); text-align: left; } .record-glyph { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--coral); color: #fff; } .record-tile strong { font: 800 15px Arial, sans-serif; } .record-tile > span:last-child { color: var(--gold); font: 13px Georgia, serif; } .uploaded .tile-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; border: 0; background: transparent; color: inherit; text-align: left; } .uploaded { background: #171011; } .uploaded .tile-duration { color: #987e7f; font: 11px monospace; } .delete-sound { position: absolute; top: 14px; right: 12px; border: 0; background: transparent; color: #89666a; } .capture-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 65px; padding: 29px 0; border-top: 1px solid #321b1f; border-bottom: 1px solid #321b1f; } .capture-strip h2 { font-size: 35px; } .upload-action { padding: 16px 18px; background: var(--coral); color: white; } .upload-action span { color: #f6b4b9; font-size: 9px; } footer { padding-top: 27px; color: #745d61; font: 10px monospace; letter-spacing: .1em; } footer span { display: flex; align-items: center; gap: 7px; } footer svg { width: 14px; } @media (max-width: 700px) { .haramm-app { padding: 20px 18px; } .arabic-label { display: none; } .haramm-hero { padding: 60px 0 55px; } .hero-stamp { width: 88px; height: 88px; font-size: 35px; } .soundboard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .sound-tile, .record-tile { min-height: 165px; padding: 13px; } .tile-name { font-size: 12px; } .tile-arabic { font-size: 12px; } .capture-strip { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .capture-strip h2 { font-size: 27px; } footer { gap: 14px; font-size: 8px; } }b9:T4dd8,[V0_FILE]css:file="/app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @import 'shadcn/tailwind.css'; @custom-variant dark (&:is(.dark *)); @theme inline { --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); } :root { color-scheme: light; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @media (prefers-color-scheme: dark) { :root:not(.light) { color-scheme: dark; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; margin: 0; } } :root { --ink: #eee4db; --paper: #080707; --sage: #2c1115; --coral: #d7192e; --mist: #1d1214; --gold: #b99b62; } * { box-sizing: border-box; } body { background: var(--paper) url('/haramm-background.gif') center top / cover fixed no-repeat; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; } .sound-app { background: radial-gradient(circle at 50% -10%, #261113 0%, var(--paper) 42%); } .haramm-app { background-image: linear-gradient(rgba(8, 7, 7, .78), rgba(8, 7, 7, .9)), url('/haramm-background.gif'); background-position: center top; background-size: cover; background-attachment: fixed; } .brand, h1, h2, h3, .record-time { font-family: Georgia, 'Times New Roman', serif; } .brand { text-transform: uppercase; letter-spacing: .08em; } .brand-mark { border-radius: 4px; background: var(--coral); color: var(--paper); } .session-pill { color: #8f8580; } .count, .library h2 span { background: var(--mist); color: #d8c9c1; } .eyebrow, .section-kicker { color: #9d7772; } .hero-copy { color: #9f9490; } .capture-card { border-color: #352426; background: #100d0d; box-shadow: 0 20px 60px #0008; } .capture-heading h2, .library h2 { text-transform: uppercase; letter-spacing: .04em; } .mic-orb, .tips-icon { background: var(--sage); color: #efdad4; } .record-zone { background: #1b1112; box-shadow: inset 0 0 0 1px #4e2024; } .record-zone.recording { background: #2b1013; } .record-ring { border-color: #713035; } .record-button { background: #e8e0d7; color: #170d0e; } .save-button { color: #d38b86; } .or-divider { color: #765a59; } .or-divider::before, .or-divider::after { background: #392426; } .upload-button { border-color: #713035; color: #d6bdb7; } .upload-button span { color: #856d69; } .tips-card { background: #291214; border: 1px solid #542329; } .tips-icon { background: #42191d; } .tips-card > p:not(.section-kicker), .tip-footer { color: #b4938e; } .tip-line { background: #8a4448; } .new-button, .play-button { background: var(--coral); color: #fff0eb; } .empty-library, .sound-list { border-color: #352426; } .empty-library { color: #746966; } .empty-library h3 { color: #c5aba5; } .sound-row { border-color: #352426; } .sound-title span, .duration, .created { color: #877875; } .mini-waveform i { background: #563538; } .icon-button { color: #806b68; } footer { color: #6d5c59; } footer button { color: #947975; } button, a { font: inherit; } button { cursor: pointer; } .sound-app { max-width: 1120px; margin: auto; padding: 26px 34px 30px; } .topbar, .library-header, footer, .capture-heading, .sound-row { display: flex; align-items: center; justify-content: space-between; } .topbar { padding-bottom: 48px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.05em; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--paper); } .brand-mark svg { width: 18px; } .session-pill { display: flex; align-items: center; gap: 9px; color: #66716c; font-size: 12px; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } .count, .library h2 span { padding: 3px 7px; border-radius: 99px; background: var(--mist); color: var(--ink); font-size: 11px; } .hero { max-width: 700px; padding-bottom: 55px; } .eyebrow, .section-kicker { margin: 0 0 14px; color: #7c8780; font-size: 10px; font-weight: 800; letter-spacing: .16em; } h1 { margin: 0; font-size: clamp(54px, 8vw, 92px); line-height: .91; letter-spacing: -.085em; } h1 em { color: var(--coral); font-style: normal; } .hero-copy { max-width: 405px; margin: 28px 0 0; color: #66716c; font-size: 15px; line-height: 1.55; } .workspace { display: grid; grid-template-columns: 1.45fr .75fr; gap: 18px; } .capture-card { padding: 29px; border: 1px solid #d9ddd5; border-radius: 20px; background: #fafaf6; } .capture-heading h2, .library h2 { margin: 0; font-size: 23px; letter-spacing: -.05em; } .mic-orb, .tips-icon { display: grid; place-items: center; border-radius: 50%; background: var(--sage); color: var(--ink); } .mic-orb { width: 42px; height: 42px; } .mic-orb svg { width: 19px; } .record-zone { display: flex; flex-direction: column; align-items: center; margin-top: 25px; padding: 27px 16px 23px; border-radius: 15px; background: var(--ink); color: var(--paper); } .record-zone.recording { background: #223d37; } .record-ring { display: grid; place-items: center; width: 90px; height: 90px; margin-bottom: 13px; border: 1px solid #53645d; border-radius: 50%; } .record-ring span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--coral); } .record-ring svg { width: 22px; } .stop-icon { width: 17px; height: 17px; border-radius: 3px; background: var(--paper); } .record-status { color: #aebbb2; font-size: 12px; } .record-time { margin: 7px 0 17px; font-family: monospace; font-size: 24px; letter-spacing: .04em; } .record-button, .save-button, .upload-button, .new-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; } .record-button { padding: 12px 18px; background: var(--paper); color: var(--ink); } .record-button svg, .upload-button svg, .new-button svg { width: 15px; } .save-button { margin-top: 9px; padding: 9px 16px; background: transparent; color: var(--sage); } .or-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9ba39b; font-size: 9px; letter-spacing: .1em; } .or-divider::before, .or-divider::after { width: 100px; height: 1px; background: #dfe3dc; content: ''; } .upload-button { width: 100%; padding: 13px; border: 1px dashed #bbc5b9; background: transparent; color: #4c5c53; } .upload-button span { color: #9ca79e; font-size: 10px; font-weight: 400; } .tips-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; padding: 29px; border-radius: 20px; background: var(--sage); } .tips-icon { width: 43px; height: 43px; margin-bottom: auto; background: #e0e9db; } .tips-icon svg { width: 20px; } .tips-card h3 { max-width: 220px; margin: 0 0 12px; font-size: 25px; line-height: 1.02; letter-spacing: -.06em; } .tips-card > p:not(.section-kicker) { max-width: 220px; margin: 0; color: #5f7066; font-size: 13px; line-height: 1.55; } .tip-footer { display: flex; align-items: center; gap: 9px; margin-top: 34px; color: #65776b; font-size: 10px; } .tip-line { width: 27px; height: 1px; background: #819682; } .library { margin-top: 72px; } .library-header { margin-bottom: 20px; } .library h2 span { margin-left: 5px; vertical-align: middle; } .new-button { padding: 10px 13px; background: var(--ink); color: var(--paper); } .empty-library { display: flex; flex-direction: column; align-items: center; padding: 55px 20px; border-top: 1px solid #d9ddd5; color: #9aa49a; text-align: center; } .empty-library svg { width: 27px; height: 27px; margin-bottom: 13px; } .empty-library h3 { margin: 0 0 5px; color: #53625a; font-size: 15px; } .empty-library p { margin: 0; font-size: 12px; } .sound-list { border-top: 1px solid #d9ddd5; } .sound-row { gap: 18px; padding: 16px 2px; border-bottom: 1px solid #d9ddd5; } .play-button { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); } .play-button svg { width: 14px; } .sound-info { min-width: 150px; flex: 1; } .sound-title { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; } .sound-title strong { font-size: 13px; } .sound-title span { color: #9aa49a; font-size: 10px; } .mini-waveform { display: flex; align-items: center; gap: 2px; height: 20px; } .mini-waveform i { width: 2px; min-height: 4px; background: #b9c5b8; } .mini-waveform.is-active i { background: var(--coral); } .duration, .created { color: #89948b; font-family: monospace; font-size: 11px; } .created { width: 65px; font-family: Arial, sans-serif; } .icon-button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: transparent; color: #8b968d; } .icon-button svg { width: 15px; } .icon-button.danger:hover { color: var(--coral); } footer { margin-top: 65px; color: #98a198; font-size: 10px; } footer span, footer button { display: inline-flex; align-items: center; gap: 6px; } footer svg { width: 13px; } footer button { border: 0; background: transparent; color: #87928a; } .haramm-app { max-width: 1180px; min-height: 100vh; margin: auto; padding: 28px 38px 30px; background: radial-gradient(ellipse at 65% 0%, #321116 0%, transparent 45%), var(--paper); color: var(--ink); font-family: Arial, sans-serif; } .haramm-topbar, .haramm-hero, .board-header, footer { display: flex; align-items: center; justify-content: space-between; } .haramm-topbar { border-bottom: 1px solid #321b1f; padding-bottom: 22px; } .haramm-brand { display: flex; align-items: center; gap: 10px; font: 900 22px Georgia, serif; letter-spacing: .08em; } .haramm-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 2px; background: var(--coral); color: var(--paper); } .haramm-mark svg, .live-state svg { width: 18px; } .arabic-label, .tile-arabic, .hero-arabic { color: var(--gold); font-family: var(--font-arabic), Arial, sans-serif; direction: rtl; } .arabic-label { font-size: 15px; letter-spacing: .06em; } .live-state { display: flex; align-items: center; gap: 8px; color: #8e7778; font: 10px monospace; letter-spacing: .12em; } .live-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); } .live-state b { padding: 5px 7px; color: var(--ink); background: var(--mist); } .haramm-hero { align-items: flex-end; padding: 78px 0 72px; } .hero-kicker { margin: 0 0 15px; color: #956f72; font: 10px monospace; letter-spacing: .18em; } .haramm-hero h1 { margin: 0; font: 900 clamp(70px, 13vw, 150px)/.78 Arial, sans-serif; letter-spacing: -.11em; } .haramm-hero h1 em, .capture-strip em { color: var(--coral); font-style: normal; } .hero-arabic { margin: 25px 0 0; font-size: 23px; } .hero-copy { max-width: 350px; margin: 10px 0 0; color: #9a8986; font: 13px/1.6 Arial, sans-serif; } .hero-stamp { display: grid; place-items: center; width: 132px; height: 132px; border: 1px solid #704048; border-radius: 50%; color: var(--coral); font: 900 52px/.75 Georgia, serif; text-align: center; transform: rotate(12deg); } .hero-stamp span { font-size: 15px; color: var(--gold); } .board-header { border-top: 1px solid #321b1f; padding: 28px 0 18px; } .board-header h2, .capture-strip h2 { margin: 0; font: 800 27px Arial, sans-serif; letter-spacing: -.06em; } .board-header h2 span { color: var(--coral); font: 14px monospace; vertical-align: top; } .add-sound, .upload-action { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--coral); background: transparent; color: var(--ink); font: 700 11px monospace; letter-spacing: .08em; } .add-sound { padding: 12px 14px; } .add-sound svg, .upload-action svg { width: 15px; } .soundboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .sound-tile, .record-tile { position: relative; min-height: 200px; padding: 18px; border: 1px solid #492329; color: var(--ink); text-align: left; transition: transform .2s, border-color .2s; } .sound-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: #130c0e; } .sound-tile:hover, .record-tile:hover { transform: translateY(-3px); border-color: var(--coral); } .sound-tile.crimson { background: #3a1017; } .sound-tile.ember { background: #271415; } .sound-tile.plum { background: #21121c; } .sound-tile.rust { background: #321916; } .tile-index { align-self: flex-start; color: #aa7478; font: 10px monospace; letter-spacing: .14em; } .tile-glyph { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #7f3c46; border-radius: 50%; color: var(--coral); } .tile-glyph svg, .record-glyph svg, .tile-play svg, .delete-sound svg { width: 17px; } .tile-name { font: 800 16px Arial, sans-serif; letter-spacing: .03em; } .tile-arabic { font-size: 14px; } .tile-play { position: absolute; right: 17px; bottom: 17px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #78404a; border-radius: 50%; color: var(--ink); } .record-tile { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; border: 1px dashed #8a424b; background: #17090c; color: var(--ink); text-align: left; } .record-glyph { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--coral); color: #fff; } .record-tile strong { font: 800 15px Arial, sans-serif; } .record-tile > span:last-child { color: var(--gold); font: 13px Georgia, serif; } .uploaded .tile-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; border: 0; background: transparent; color: inherit; text-align: left; } .uploaded { background: #171011; } .uploaded .tile-duration { color: #987e7f; font: 11px monospace; } .delete-sound { position: absolute; top: 14px; right: 12px; border: 0; background: transparent; color: #89666a; } .capture-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 65px; padding: 29px 0; border-top: 1px solid #321b1f; border-bottom: 1px solid #321b1f; } .capture-strip h2 { font-size: 35px; } .upload-action { padding: 16px 18px; background: var(--coral); color: white; } .upload-action span { color: #f6b4b9; font-size: 9px; } footer { padding-top: 27px; color: #745d61; font: 10px monospace; letter-spacing: .1em; } footer span { display: flex; align-items: center; gap: 7px; } footer svg { width: 14px; } @media (max-width: 700px) { .haramm-app { padding: 20px 18px; } .arabic-label { display: none; } .haramm-hero { padding: 60px 0 55px; } .hero-stamp { width: 88px; height: 88px; font-size: 35px; } .soundboard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .sound-tile, .record-tile { min-height: 165px; padding: 13px; } .tile-name { font-size: 12px; } .tile-arabic { font-size: 12px; } .capture-strip { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .capture-strip h2 { font-size: 27px; } footer { gap: 14px; font-size: 8px; } }4d:["$","$L99",null,{"params":{"chatId":"b72XYlx2cYr"},"promises":{"attributes":"$@a3","externalMeta":"$@a4","latest":"$@a5","messagesRange":"$@a6","messages":"$@a7","template":"$@a8","gitStatus":"$@a9"},"children":["$","$Laa",null,{"chatId":"b72XYlx2cYr","children":["$","$Lab",null,{"seedOnlyKeys":["@\"chat:state\",\"b72XYlx2cYr\","],"data":{"block:output:initial":{"id":"b_71cWUcz1rhp","result":"$@ac"},"/chat/api/snapshots/proxy?chatId=b72XYlx2cYr&messageId=VcHKuVryvCsmf4GOTBEING1ukE8AhNpc&v=v2":"$ad","@\"block:mappings\",\"b72XYlx2cYr\",":{"sqlBlockExecutionStates":"$Qae","blocksForkedFrom":"$Qaf","blocksTemplateIds":"$Qb0","blocksCreatedAt":"$Qb1","blocksShared":"$Qb2","blocksDeployed":"$Qb3","blocksSubdomains":"$Qb4","brandedBlocks":"$Qb5","unlistedBlocks":"$Qb6","blockOutputs":"$Qb7"},"@\"chat:state\",\"b72XYlx2cYr\",":{"messages":[{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"il7PdpxuDb2j7L3cwnaosFIdgIuwdTIq","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-10T10:21:58.541Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"GRFmSxrvc1iJklIJ3R0FKQGLPtI1ncrH","gitRevision":{"headSha":"6685c0765894af1ef6a599d16e17138f3558ffdb","readyAt":"2026-08-10T10:22:27.884Z","version":1},"streaming":false,"finishReason":"stop","parentId":"il7PdpxuDb2j7L3cwnaosFIdgIuwdTIq","type":"message","createdAt":"$D2026-08-10T10:21:58.542Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"HNPx9YxceLAxTFQyH9peXDfoIJXbBay5","parentId":"GRFmSxrvc1iJklIJ3R0FKQGLPtI1ncrH","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-10T10:23:13.632Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"lNM4JFzi3LVpGN0ivddYv9TkRmNhzzhK","gitRevision":{"baseSha":"6685c0765894af1ef6a599d16e17138f3558ffdb","headSha":"6685c0765894af1ef6a599d16e17138f3558ffdb","readyAt":"2026-08-10T10:23:31.196Z","version":1},"streaming":false,"finishReason":"stop","parentId":"HNPx9YxceLAxTFQyH9peXDfoIJXbBay5","type":"message","createdAt":"$D2026-08-10T10:23:13.633Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"un3MbRTbzwvrrwS8foqqagKQlziwcJw8","parentId":"lNM4JFzi3LVpGN0ivddYv9TkRmNhzzhK","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-10T10:23:39.981Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_0OsT81ecyke","type":"code-project","isVersioned":false},{"blockId":"b_0uNQpqheiOc","type":"code-project","isVersioned":false},{"blockId":"b_H6v0zPcuidp","type":"code-project","isVersioned":false},{"blockId":"b_1MKzkS2OYWl","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"HbAHOEvI7UsE8Vzty4cgnJ37S6rWsa9z","gitRevision":{"baseSha":"6685c0765894af1ef6a599d16e17138f3558ffdb","headSha":"c83d939d715bb272089c23f48486ebc4f17fd5c7","readyAt":"2026-08-10T10:25:11.794Z","version":1},"streaming":false,"finishReason":"stop","parentId":"un3MbRTbzwvrrwS8foqqagKQlziwcJw8","type":"message","createdAt":"$D2026-08-10T10:23:39.982Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"Sv6KYXA3XHACDRuPQRKJfBoodAVxUWI8","parentId":"HbAHOEvI7UsE8Vzty4cgnJ37S6rWsa9z","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-10T10:26:18.192Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_IkglcjwtN1A","type":"code-project","isVersioned":false},{"blockId":"b_Fm9oVcn39Zb","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"paqBpklDCLmkLWGwIBz3209lsA1DS6MB","gitRevision":{"baseSha":"c83d939d715bb272089c23f48486ebc4f17fd5c7","headSha":"41fd8f3e176a83fe4b4549b7652adf65ce49beca","readyAt":"2026-08-10T10:26:42.054Z","version":1},"streaming":false,"finishReason":"stop","parentId":"Sv6KYXA3XHACDRuPQRKJfBoodAVxUWI8","type":"message","createdAt":"$D2026-08-10T10:26:18.193Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"iqYd7EA3QYt8ACnTEKBz1EMSKbZm2bYI","parentId":"paqBpklDCLmkLWGwIBz3209lsA1DS6MB","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-10T10:26:42.413Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_aEEz8IEvIKl","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"6lge5SDEWmqMIGUxmXEFcoP7IrJ21rd6","gitRevision":{"baseSha":"41fd8f3e176a83fe4b4549b7652adf65ce49beca","headSha":"a11e130ceacbea21a09b31512874581fc7675859","readyAt":"2026-08-10T10:26:58.565Z","version":1},"streaming":false,"finishReason":"stop","parentId":"iqYd7EA3QYt8ACnTEKBz1EMSKbZm2bYI","type":"message","createdAt":"$D2026-08-10T10:26:42.414Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"g5SnxIuqS2DKWdVEmA6TuKHQcnSMKFXs","parentId":"6lge5SDEWmqMIGUxmXEFcoP7IrJ21rd6","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-10T10:28:08.941Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_euWdaUZ1L0z","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"QxLFkz9za7D4Cik4lENvFVEatnM2EEDD","gitRevision":{"baseSha":"a11e130ceacbea21a09b31512874581fc7675859","headSha":"8f4c95a689c550f99deec891f086e708f53932e7","readyAt":"2026-08-10T10:28:34.248Z","version":1},"streaming":false,"finishReason":"stop","parentId":"g5SnxIuqS2DKWdVEmA6TuKHQcnSMKFXs","type":"message","createdAt":"$D2026-08-10T10:28:08.942Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"0rlgKAmu4jCbh8Z9YWEaJDydrolsAkoi","parentId":"QxLFkz9za7D4Cik4lENvFVEatnM2EEDD","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-11T10:11:48.263Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[{"blockId":"b_koMm9RHg0m0","type":"code-project","isVersioned":false},{"blockId":"b_XkXTOcwncp8","type":"code-project","isVersioned":false},{"blockId":"b_NdwkgPvjmKH","type":"code-project","isVersioned":false},{"blockId":"b_rDUBP3BMQKw","type":"code-project","isVersioned":false},{"blockId":"b_LdprcVOSETM","type":"code-project","isVersioned":false},{"blockId":"b_kRgS1Y7p86z","type":"code-project","isVersioned":false},{"blockId":"b_PD5yOgXb8mt","type":"code-project","isVersioned":true}],"isContentLoading":true,"role":"assistant","id":"SECzoYkyM5qOkmufdpYhEEaA4RLFszRE","gitRevision":{"baseSha":"8f4c95a689c550f99deec891f086e708f53932e7","headSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","readyAt":"2026-08-11T10:13:55.457Z","version":1},"streaming":false,"finishReason":"stop","parentId":"0rlgKAmu4jCbh8Z9YWEaJDydrolsAkoi","type":"message","createdAt":"$D2026-08-11T10:11:48.264Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"oigbYL6i3XDzDxaIrtvP94XsXLWs2MEW","parentId":"SECzoYkyM5qOkmufdpYhEEaA4RLFszRE","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-11T10:13:54.899Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"Ti1I1jbsO9nLepUHg53obmMzMIZqI6Wc","gitRevision":{"baseSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","headSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","readyAt":"2026-08-11T10:14:04.569Z","version":1},"streaming":false,"finishReason":"stop","parentId":"oigbYL6i3XDzDxaIrtvP94XsXLWs2MEW","type":"message","createdAt":"$D2026-08-11T10:13:54.900Z"},{"content":{"type":"parts","parts":[],"version":1},"role":"user","id":"OQGtXQ0mrspp2sxh5Z4MFzGT4sy7X0Ud","parentId":"Ti1I1jbsO9nLepUHg53obmMzMIZqI6Wc","type":"message","isContentLoading":true,"authorId":"","createdAt":"$D2026-08-11T10:14:04.311Z"},{"content":{"type":"message-binary-format","value":[[0,[["p",{},["text",{},"Loading..."]]]],[1,{"title":"Loading message"}]]},"loadingBlocks":[],"isContentLoading":true,"role":"assistant","id":"Ft8roCiFeoJCtZwMjj9JGee6BclWBzT1","gitRevision":{"baseSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","headSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","readyAt":"2026-08-11T10:14:12.397Z","version":1},"streaming":false,"finishReason":"stop","parentId":"OQGtXQ0mrspp2sxh5Z4MFzGT4sy7X0Ud","type":"message","createdAt":"$D2026-08-11T10:14:04.312Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"So give me this app download link please"}],"version":1},"role":"user","id":"gunYxT2NGf42N6JuB8psjADzBMvIj67Y","attachments":[],"parentId":"Ft8roCiFeoJCtZwMjj9JGee6BclWBzT1","type":"message","authorId":"qyoYCyecD3xM6cfktHgBbSgn","createdAt":"$D2026-08-11T10:17:55.323Z"},{"v0ModelId":"v0-mini","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1786443477796,"finishedAt":1786443479396,"lastPartSentAt":1786443479396,"taskNameActive":"Explaining download options","id":"M8TuCy9dW2eDmY2t","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":2,"thought":"I need to clarify how to download via the UI since no link was generated. I should mention the three-dot icon for downloading a ZIP file or accessing GitHub. It’s important to keep the explanation concise so the user can easily understand where to look for these options. I'll make sure to clearly present this so the user knows exactly what to do!"}]}}],["p",{},["text",{},"To download the app, click the "],["strong",{},["text",{},"three dots"]],["text",{}," in the top-right of the code block, then choose "],["strong",{},["text",{},"Download ZIP"]],["text",{},"."]],["p",{},["text",{},"You can also connect GitHub from project settings and clone the repository."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"MC8ZJNPt4hNDezwtpm5R7qa0KrFv7itI","gitRevision":{"baseSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","headSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","readyAt":"2026-08-11T10:18:03.073Z","version":1},"streaming":false,"finishReason":"stop","parentId":"gunYxT2NGf42N6JuB8psjADzBMvIj67Y","type":"message","creditCost":0.0063481,"workMetrics":{"diffMap":{}},"createdAt":"$D2026-08-11T10:17:55.324Z","updatedAt":"$D2026-08-11T10:18:03.087Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"Put this photo on the app background. "},{"type":"attachment","url":"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/RDT_20260810_1601576663548993137976354-OZxZitlSf1p4uCOxGgJnSKnnNyumhf.gif","name":"RDT_20260810_1601576663548993137976354.gif","contentType":"image/gif","size":229426}],"version":1},"role":"user","id":"giCCo0juIPygzS7OcuSIE7hQN1MqLwWs","attachments":[{"url":"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/RDT_20260810_1601576663548993137976354-OZxZitlSf1p4uCOxGgJnSKnnNyumhf.gif","name":"RDT_20260810_1601576663548993137976354.gif","size":229426,"contentType":"image/gif"}],"parentId":"MC8ZJNPt4hNDezwtpm5R7qa0KrFv7itI","type":"message","authorId":"qyoYCyecD3xM6cfktHgBbSgn","createdAt":"$D2026-08-11T10:31:22.510Z"},{"v0ModelId":"v0-mini","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1786444285381,"finishedAt":1786444287443,"lastPartSentAt":1786444287443,"taskNameActive":"Considering image editing process","id":"AUJIkvvEJGYUVHU5","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":2,"thought":"I need to use the provided image as a background, which means I should write a blob URL to a local path before editing. I might need to read the files first before making any changes. Also, should my thought process be concise and not visible to the user? I'll keep that in mind! Additionally, I need to ensure to attach the source URL for the image and write the binary with the blob URL."}]}}],["p",{},["text",{},"The provided image is a monochrome, high-contrast portrait with Arabic calligraphy across the face, giving the app a stark, intense atmosphere. I’ll use it as the full-page background while preserving readability with a dark overlay."]],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_ABS3X4uqvAo","parts":[{"type":"code-project","isVersioned":false,"isSourceless":false,"changedFiles":[{"fileName":"/public/haramm-background.gif","baseName":"haramm-background.gif","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"[V0_FILE]gif:file=\"/public/haramm-background.gif\" url=\"https://hebbkx1anhila5yf.public.blob.vercel-storage.com/RDT_20260810_1601576663548993137976354-OZxZitlSf1p4uCOxGgJnSKnnNyumhf.gif\"\n","latestDeploymentInfo":"$b3:0:1","lastDeployedAt":"2026-08-11T10:31:47.332Z","sourceVersionKey":"v_1_nlvpg_s3","needsBlockSource":true,"isAllImages":true,"blockId":"b_ABS3X4uqvAo","meta":{"taskNameActive":"Saving background image","taskNameComplete":"Saved background image","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Saving background image","taskNameComplete":"Saved background image"},"id":"block-b_ABS3X4uqvAo"}],["AssistantMessageContentPart",{"part":{"createdAt":1786444291637,"finishedAt":1786444292110,"lastPartSentAt":1786444292075,"taskNameActive":"Reading background styles","taskNameComplete":"Read background styles","toolCallId":"call_Yp7q2MuOKkNMZEQxtKq6DXxh","agentTurnId":"turn_uOtZQ4obegyElQvX","filePath":null,"id":"tMJGJN9h6M5aEtI0","type":"task-read-file-v1","parts":[{"type":"reading-file","filePath":"/vercel/share/v0-project/app/globals.css"},{"type":"reading-file","filePath":"/vercel/share/v0-project/app/globals.css","offset":149,"limit":168}]}}],["AssistantMessageContentPart",{"part":{"createdAt":1786444294813,"finishedAt":1786444298945,"lastPartSentAt":1786444298945,"taskNameActive":"Editing backgrounds for app","id":"8Ji9H5KsgSnNA05v","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":4,"thought":"I need to edit both the body background and the background image for the .haramm-app. It looks like the current page is probably the haramm-app, so I want to add a background image overlay using pseudo-elements. I'll set the CSS for .haramm-app to use a linear-gradient along with the URL for the image. It's important to ensure that the full app background is covered. Also, the old sound-app details seem irrelevant, so I’ll just focus on the necessary edits."}]}}],["AssistantMessageContentPart",{"part":{"type":"task-coding-v1","id":"block-b_71cWUcz1rhp","parts":[{"type":"code-project","isVersioned":true,"isSourceless":false,"changedFiles":[{"fileName":"/public/haramm-background.gif","baseName":"haramm-background.gif","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false},{"fileName":"/app/globals.css","baseName":"globals.css","isActive":false,"isTerminated":false,"isDeleted":false,"isMoved":false}],"source":"$b8","latestDeploymentInfo":"$b3:1:1","lastDeployedAt":"2026-08-11T10:31:47.332Z","sourceVersionKey":"v_1_v8qo1_s3","needsBlockSource":false,"isAllImages":false,"blockId":"b_71cWUcz1rhp","meta":{"taskNameActive":"Applying photo background","taskNameComplete":"Applied photo background","type":"code-project","id":"Code"},"closed":true,"lang":"typescriptreact"}],"createdAt":0,"finishedAt":1,"lastPartSentAt":1,"taskNameActive":"Applying photo background","taskNameComplete":"Applied photo background"},"id":"block-b_71cWUcz1rhp"}],["p",{},["text",{},"Added the provided portrait as the app’s background with a dark overlay so the Haramm soundboard remains readable. The image is saved locally as "],["code",{},"/haramm-background.gif"],["text",{}," and applied across the page."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"xHfiXOROMJxNwSFbBPLp60IVaOV4FX9N","gitRevision":{"baseSha":"1bb37024b9a017262f09c251c6f074f71ae0d9b2","headSha":"102139dfcebd868549c7a7f11a79dce015c23b07","readyAt":"2026-08-11T10:31:47.256Z","version":1},"streaming":false,"finishReason":"stop","parentId":"giCCo0juIPygzS7OcuSIE7hQN1MqLwWs","type":"message","creditCost":0.01876622,"workMetrics":{"diffMap":{},"linesRead":168,"agentActions":3},"createdAt":"$D2026-08-11T10:31:22.511Z","updatedAt":"$D2026-08-11T10:31:47.296Z"},{"content":{"type":"parts","parts":[{"type":"mdx","content":"I'm uploading the other two audios that will be permanently installed. Then."}],"version":1},"role":"user","id":"AgP7Vz9tClzt95IqM2JdhyRZ03fZpArr","attachments":[],"parentId":"xHfiXOROMJxNwSFbBPLp60IVaOV4FX9N","type":"message","authorId":"qyoYCyecD3xM6cfktHgBbSgn","createdAt":"$D2026-08-11T10:32:14.175Z"},{"v0ModelId":"v0-mini","content":{"type":"message-binary-format","value":[[0,[["AssistantMessageContentPart",{"part":{"createdAt":1786444336999,"finishedAt":1786444338981,"lastPartSentAt":1786444338981,"taskNameActive":"Clarifying audio uploads","id":"1D7SIy8qWdEcottK","type":"task-thinking-v1","parts":[{"type":"thinking-end","duration":2,"thought":"I feel like there’s some confusion about the audio uploads. They mentioned that two audios are permanently installed, but I’m wondering if we need to implement persistence for those files. It could be that they’re telling us to wait for the attachments. I think the best response would be to ask them to upload those files so we can bundle them as assets since I can’t see any visible attachments right now."}]}}],["p",{},["text",{},"Please attach the two audio files. I’ll add them as permanent built-in sounds in the Haramm soundboard, separate from temporary session uploads."]]]],[1,{}]]},"context":[],"isContentLoading":false,"role":"assistant","id":"VcHKuVryvCsmf4GOTBEING1ukE8AhNpc","gitRevision":{"baseSha":"102139dfcebd868549c7a7f11a79dce015c23b07","headSha":"102139dfcebd868549c7a7f11a79dce015c23b07","readyAt":"2026-08-11T10:32:23.940Z","version":1},"streaming":false,"finishReason":"stop","parentId":"AgP7Vz9tClzt95IqM2JdhyRZ03fZpArr","type":"message","creditCost":0.00660231,"workMetrics":{"diffMap":{}},"createdAt":"$D2026-08-11T10:32:14.176Z","updatedAt":"$D2026-08-11T10:32:23.954Z"}],"lastSyncedAt":1788750321997,"undo":null,"activeForkKey":["il7PdpxuDb2j7L3cwnaosFIdgIuwdTIq","GRFmSxrvc1iJklIJ3R0FKQGLPtI1ncrH","HNPx9YxceLAxTFQyH9peXDfoIJXbBay5","lNM4JFzi3LVpGN0ivddYv9TkRmNhzzhK","un3MbRTbzwvrrwS8foqqagKQlziwcJw8","HbAHOEvI7UsE8Vzty4cgnJ37S6rWsa9z","Sv6KYXA3XHACDRuPQRKJfBoodAVxUWI8","paqBpklDCLmkLWGwIBz3209lsA1DS6MB","iqYd7EA3QYt8ACnTEKBz1EMSKbZm2bYI","6lge5SDEWmqMIGUxmXEFcoP7IrJ21rd6","g5SnxIuqS2DKWdVEmA6TuKHQcnSMKFXs","QxLFkz9za7D4Cik4lENvFVEatnM2EEDD","0rlgKAmu4jCbh8Z9YWEaJDydrolsAkoi","SECzoYkyM5qOkmufdpYhEEaA4RLFszRE","oigbYL6i3XDzDxaIrtvP94XsXLWs2MEW","Ti1I1jbsO9nLepUHg53obmMzMIZqI6Wc","OQGtXQ0mrspp2sxh5Z4MFzGT4sy7X0Ud","Ft8roCiFeoJCtZwMjj9JGee6BclWBzT1","gunYxT2NGf42N6JuB8psjADzBMvIj67Y","MC8ZJNPt4hNDezwtpm5R7qa0KrFv7itI","giCCo0juIPygzS7OcuSIE7hQN1MqLwWs","xHfiXOROMJxNwSFbBPLp60IVaOV4FX9N","AgP7Vz9tClzt95IqM2JdhyRZ03fZpArr","VcHKuVryvCsmf4GOTBEING1ukE8AhNpc"],"lifecycle":{"phase":"idle","persistence":"persisted"},"isAuthor":false,"isRestoring":false,"hashMessageId":null},"@\"active-block\",\"b72XYlx2cYr\",":{"id":"b_71cWUcz1rhp","meta":{"taskNameActive":"Applying photo background","taskNameComplete":"Applied photo background","type":"code-project","id":"Code"},"initial":true,"type":"code-project","messageId":"xHfiXOROMJxNwSFbBPLp60IVaOV4FX9N","language":"typescriptreact","source":"$b9","closed":true,"hasSourceBeenEdited":false,"lastDeployedAt":"2026-08-11T10:31:47.332Z","latestDeploymentInfo":"$b3:1:1","isLoading":false,"needsBlockSource":false},"@\"chat:meta\",\"b72XYlx2cYr\",":{"title":"Custom sound library","authorId":"qyoYCyecD3xM6cfktHgBbSgn","ownerId":"team_0VP9c5MGvTMsvE8iJWn0OkAF","storageEntityType":"v0-git-s3-storage","storageEntityId":"v0-1-team_0VP9c5MGvTMsvE8iJWn0OkAF-b72XYlx2cYr","tailwindV4Default":true,"vercelProjectId":"prj_RcloIdNIPmVAWKE3rraTC98U82C1","canWriteToChat":false,"nextVersionDefault":16},"@\"chat:vm-mode\",\"b72XYlx2cYr\",":true,"@\"chat:vercel-project\",\"b72XYlx2cYr\",":"$@ba","@\"team:sensitive-environment-variable-policy\",\"b72XYlx2cYr\",":"$@bb","@\"block-view\",\"b72XYlx2cYr\",":true,"integrations:figma":"$@bc"},"children":["$Lbd","$Lbe","$Lbf","$Lc0","$Lc1"]}]}]}]

MAKENOISE.

THE SOUNDBOARD 04

UPLOAD YOUROWN FREQUENCY.

MAKE
NOISE.

UPLOAD YOUR
OWN FREQUENCY.