105 lines
3.4 KiB
HTML
105 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=1480">
|
|
<title>Akefin Mobile</title>
|
|
<link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="../../colors_and_type.css">
|
|
<link rel="stylesheet" href="mobile.css">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; min-height: 100vh; }
|
|
body {
|
|
background: #DCD7CC;
|
|
background-image:
|
|
linear-gradient(to right, rgba(26,24,20,0.045) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(26,24,20,0.045) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
font-family: var(--font-sans);
|
|
color: var(--fg);
|
|
padding: 48px 32px 64px;
|
|
overflow-x: auto;
|
|
}
|
|
.stage {
|
|
display: flex;
|
|
gap: 40px;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
max-width: 1480px;
|
|
margin: 0 auto;
|
|
}
|
|
.frame-wrap {
|
|
display: flex; flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.frame-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--fg-muted);
|
|
}
|
|
.stage-title {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
.stage-title .display {
|
|
font-family: var(--font-display);
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
font-size: 36px;
|
|
color: var(--fg-strong);
|
|
line-height: 1.1;
|
|
}
|
|
.stage-title .sub {
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
color: var(--fg-muted);
|
|
margin-top: 6px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stage-title">
|
|
<div class="display">Akefin Mobile</div>
|
|
<div class="sub">Review queue · Transaction detail · Account picker sheet — tap any device to interact</div>
|
|
</div>
|
|
<div class="stage" id="stage"></div>
|
|
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
|
|
<script src="../web/data.js"></script>
|
|
<script type="text/babel" src="ios-frame.jsx"></script>
|
|
<script type="text/babel" src="MobileAtoms.jsx"></script>
|
|
<script type="text/babel" src="MobileScreens.jsx"></script>
|
|
<script type="text/babel" src="MobileApp.jsx"></script>
|
|
|
|
<script type="text/babel">
|
|
function Stage() {
|
|
const frames = [
|
|
{ id: "queue", label: "01 · Review queue", props: { initial: "queue" } },
|
|
{ id: "detail", label: "02 · Transaction detail", props: { initial: "detail", initialTx: "t02" } },
|
|
{ id: "picker", label: "03 · Account picker", props: { initial: "detail", initialTx: "t02", initialPickerOpen: true } },
|
|
];
|
|
return (
|
|
<React.Fragment>
|
|
{frames.map(f => (
|
|
<div key={f.id} className="frame-wrap">
|
|
<IOSDevice width={402} height={874}>
|
|
<MobileApp {...f.props} />
|
|
</IOSDevice>
|
|
<div className="frame-label">{f.label}</div>
|
|
</div>
|
|
))}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
ReactDOM.createRoot(document.getElementById("stage")).render(<Stage />);
|
|
</script>
|
|
</body>
|
|
</html>
|