Orbit Kalkulator

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate a responsive single-screen calculator web app titled “Orbit Kalkulator,” matching the provided visual design and behavior. It is not an action game: the core interaction is entering arithmetic expressions, calculating them, copying the result, and viewing calculation history.

Layout and camera: show a centered tall calculator panel on a dark navy page, with a subtle blue radial glow in the upper-left and purple glow in the lower-right. The app panel is a translucent very dark blue card, about 430px wide maximum and up to 820px tall, with a thin semi-transparent white border, large rounded corners, deep shadow, and a slightly glassy/blurred appearance. On small screens it should fit the viewport; on short screens reduce the screen/key sizes and panel corner radius. Keep the page from scrolling.

Header: at the top of the card place a brand row. On the left is a small rounded-square logo with a cyan-to-violet diagonal gradient, a dark sigma “∑” symbol, and a soft cyan glow. Beside it show the title “Orbit Kalkulator” in white and the subtitle “Cepat · rapi · pintar” in muted blue-gray. On the right place a rounded dark translucent history button showing a clock/history glyph “◷”.

Calculator display: beneath the header, create a large rounded rectangular screen with a faint translucent light gradient, subtle border, and a very soft cyan wash from the left. Align all text to the right. Show the current expression on the upper line in muted gray-blue, defaulting to “0”; render typed multiplication, division, and minus with the display symbols ×, ÷, and −. Show the last result below in large bold white text, defaulting to “0.” Beneath it show the hint “Tekan Enter untuk menghitung · Backspace untuk menghapus” in small muted text, right aligned and allowed to wrap.

Tool tabs: below the display, place three equal-width rounded buttons: “Dasar,” “Scientific,” and “Salin hasil.” The Basic tab is initially active with a translucent cyan background and cyan text; Scientific is initially inactive. Clicking Scientific switches into scientific mode and reveals the additional scientific keys; clicking Dasar hides them. Clicking Salin hasil attempts to copy the current result to the clipboard and shows a small temporary toast reading “Hasil disalin”; if clipboard access fails, show “Salin: [result]”.

Keypad: use a four-column grid with rounded dark navy keys, small inset highlights, and consistent gaps. Keys should visually depress/scale slightly when clicked. In the initial basic view, show these rows:
- AC, (, ), and a backspace key “⌫”. AC is pink/red; parentheses are pale violet; backspace is pink/red.
- ÷, 7, 8, 9, with the operator cyan.
- ×, 4, 5, 6, with the operator cyan.
- −, 1, 2, 3, with the operator cyan.
- +, a wide 0 key spanning two columns and left padded, and a decimal “.” key.
- A final “=” key at the lower left with a bright cyan-to-blue gradient and dark text; it is visually larger/bolder than ordinary keys.
The actual DOM/grid can place the equals key after the final row so it appears in the next grid slot at bottom-left, as in the reference. In scientific mode reveal three extra pale-violet keys labeled “sin”, “cos”, and “√” near the top of the keypad, while keeping the operator and number keys available. Scientific input uses sin(, cos(, and sqrt( expressions; trigonometric functions interpret angles in degrees.

Functionality: maintain an expression string, a last result string, scientific-mode boolean, and up to the latest 30 history entries. Number, decimal, operator, and parenthesis buttons append their values to the expression and reset the displayed last result to “0.” AC clears the expression and resets the result to “0.” Backspace removes the final character from the expression. Equals evaluates the expression only when nonempty. Support +, −, ×, ÷, decimal numbers, parentheses, and scientific sin, cos, and square root. Convert the visible ×/÷/− to JavaScript-style operators internally, convert ^ to exponentiation if entered, use degree-based sin/cos, reject invalid or non-finite calculations, and show “Error” for invalid expressions. Round successful results to 10 decimal places and display the resulting number as text. After every successful calculation prepend {expression, result} to history and cap it at 30 entries.

Keyboard controls: Enter calculates, Escape clears, Backspace deletes the last expression character, and number/decimal/basic operator/parenthesis keys append input. The visible helper text should accurately communicate Enter and Backspace. Clicking the history icon opens an opaque dark overlay inside the app card with the heading “Riwayat perhitungan,” a “Tutup” button, and a right-aligned list of saved calculations. Each history row shows the formatted expression in small muted text and the answer beneath/in larger white text; newest entries appear first. If there is no history, show “Belum ada riwayat.” Closing returns to the calculator.

Use Indonesian UI labels exactly as shown. Use a clean modern system/Inter-like sans-serif, white primary text, muted blue-gray secondary text, cyan primary accent, violet scientific accent, and pink danger accent. Preserve the polished glassmorphism aesthetic, rounded geometry, dark navy palette, responsive touch-friendly controls, and the compact portrait composition visible in the screenshot. Add a temporary bottom-centered light toast with dark text and rounded corners for copy feedback.