Skip to content

Instantly share code, notes, and snippets.

@amatgil

amatgil/mockup.css

Created May 18, 2025 03:48
Show Gist options
  • Save amatgil/db935700698bbf70512a6f627369102a to your computer and use it in GitHub Desktop.
Save amatgil/db935700698bbf70512a6f627369102a to your computer and use it in GitHub Desktop.
Download ZIP
Mockup to uiuapp
Raw
mockup.css
.wrapper {
max-inline-size: 300px;
margin-inline: auto;
border: solid;
}
img {
display: block;
max-inline-size: 100%;
}
.code-zone {
border: 2px solid;
block-size: 200px;
}
.code-display-zone {
display: flex;
justify-content: space-between;
}
.code-scrollbackbuffer {
}
.code-textarea-zone {
display: flex;
justify-content: center;
}
.uiua-input {
margin: auto;
}
.input-zone {
border: 2px solid;
}
.special-buttons {
display: flex;
justify-content: space-evenly; /* flex-end;*/
gap: 0.3rem;
}
.input-grid-buttons {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.uiua-char-input {
aspect-ratio: 1 / 1;
}
Raw
mockup.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>uiuapp</title>
<link rel="stylesheet" href="mockup.css">
</head>
<body>
<div class="wrapper">
<div class="code-zone">
<div class="code-display-zone">
<div class="code-scrollbackbuffer">
<p>&#9;+ 1 1</p>
<p>2</p>
<p>˙⊞=⇡3</p>
<p>1 0 0<br>0 1 0<br>0 0 1</p>
<p>˙⊞=⇡3</p>
<p>1 0 0<br>0 1 0<br>0 0 1</p>
<p>˙⊞=⇡3</p>
<p>1 0 0<br>0 1 0<br>0 0 1</p>
<p>˙⊞=⇡3</p>
<p>1 0 0<br>0 1 0<br>0 0 1</p>
</div>
<div class="code-buttons">
<button>Settings</button>
<button>Run</button>
</div>
</div>
<div class="code-textarea-zone">
<input class="uiua-input"></input>
</div>
</div>
<div class="input-zone">
<div class="special-buttons">
<button>Return</button>
<button>;</button>
<button>&#x2190;</button>
<button>&#x2193;</button>
<button>&#x2191;</button>
<button>&#x2192;</button>
</div>
<div class="input-grid-buttons">
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
<button class="uiua-char-input">A</button>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment