Skip to content

Rearrange layout: text on right, controls below canvas #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willwade merged 1 commit into from
Jun 16, 2026
Merged

Rearrange layout: text on right, controls below canvas #149

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 51 additions & 61 deletions wasm-build/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@
padding: 20px;
background-color: #f5f5f5;
}
.header { text-align: center; margin-bottom: 20px; }
.header h1 { color: #333; margin: 0 0 10px 0; }
.header p { color: #666; margin: 0; }
.container { display: flex; gap: 20px; margin-bottom: 20px; }
.canvas-container {
flex: 1; background: white; border-radius: 8px; padding: 20px;
Expand All @@ -25,53 +22,46 @@
margin: 0 auto; cursor: crosshair; touch-action: none;
width: 100%; height: auto; aspect-ratio: 4 / 3;
}
.controls {
.output-container {
width: 280px; background: white; border-radius: 8px; padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex; flex-direction: column;
}
.output-container h2 { margin-top: 0; color: #333; font-size: 18px; }
#output-text {
flex: 1; width: 100%; min-height: 100px; padding: 10px;
border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: none;
}
.controls {
display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
background: white; border-radius: 8px; padding: 15px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.control-group { margin-bottom: 15px; }
.control-group { margin-bottom: 0; }
.control-group label {
display: block; margin-bottom: 5px; font-weight: bold; color: #333;
}
.control-group select, .control-group input {
width: 100%; padding: 8px; border: 1px solid #ddd;
border-radius: 4px; font-size: 14px;
.control-group select {
padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
}
.control-group button {
width: 100%; padding: 10px; background-color: #4CAF50; color: white;
padding: 8px 16px; background-color: #4CAF50; color: white;
border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
}
.control-group button:hover { background-color: #45a049; }
.control-group button:disabled { background-color: #ccc; cursor: not-allowed; }
.toggle-group {
display: flex; align-items: center; gap: 8px; margin-bottom: 15px;
}
.toggle-group label { margin: 0; cursor: pointer; font-weight: normal; }
.toggle-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.output-container {
background: white; border-radius: 8px; padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;
}
.output-container h2 { margin-top: 0; color: #333; }
#output-text {
width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd;
border-radius: 4px; font-size: 16px; resize: vertical;
}
.status {
background: white; border-radius: 8px; padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;
}
.status.success { border-left: 4px solid #4CAF50; }
.status.error { border-left: 4px solid #f44336; }
.status.loading { border-left: 4px solid #ff9800; }
.status-text { color: #333; margin: 0; }
.instructions {
background: #e3f2fd; border-radius: 8px; padding: 15px;
border-left: 4px solid #2196F3; margin-bottom: 20px;
display: flex; align-items: center; gap: 6px; margin-bottom: 0;
}
.instructions h3 { margin-top: 0; color: #1976D2; }
.instructions p { color: #333; margin: 5px 0; }
.toggle-group label { margin: 0; cursor: pointer; font-weight: normal; color: #333; }
.toggle-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.speed-group { min-width: 200px; }
.speed-group input[type="range"] { width: 100%; cursor: pointer; }
.canvas-stats { text-align: center; margin-top: 10px; font-size: 12px; color: #666; }
@media (max-width: 850px) {
.container { flex-direction: column; }
.output-container { width: 100%; }
}
</style>
</head>
<body>
Expand All @@ -83,35 +73,35 @@
</div>
</div>

<div class="controls">
<div class="control-group">
<label for="alphabet-select">Alphabet:</label>
<select id="alphabet-select" disabled></select>
</div>
<div class="control-group">
<label for="speed-slider">Speed: <span id="speed-value">100</span>%</label>
<input type="range" id="speed-slider" min="20" max="400" value="100" disabled>
</div>
<div class="toggle-group">
<input type="checkbox" id="autospeed-toggle" disabled>
<label for="autospeed-toggle">Auto speed (adjusts to your input)</label>
</div>
<div class="toggle-group">
<input type="checkbox" id="learning-toggle" disabled>
<label for="learning-toggle">Learning (adapt language model)</label>
</div>
<div class="control-group">
<button id="reset-btn" disabled>Clear Text</button>
</div>
<div class="control-group">
<button id="full-reset-btn" disabled>Full Reset</button>
</div>
<div class="output-container">
<h2>Output</h2>
<textarea id="output-text" readonly placeholder="Text appears here..."></textarea>
</div>
</div>

<div class="output-container">
<h2>Output Text</h2>
<textarea id="output-text" readonly placeholder="Your text will appear here as you type..."></textarea>
<div class="controls">
<div class="control-group">
<label for="alphabet-select">Alphabet</label>
<select id="alphabet-select" disabled></select>
</div>
<div class="control-group speed-group">
<label for="speed-slider">Speed: <span id="speed-value">100</span>%</label>
<input type="range" id="speed-slider" min="20" max="400" value="100" disabled>
</div>
<div class="toggle-group">
<input type="checkbox" id="autospeed-toggle" disabled>
<label for="autospeed-toggle">Auto speed</label>
</div>
<div class="toggle-group">
<input type="checkbox" id="learning-toggle" disabled>
<label for="learning-toggle">Learning</label>
</div>
<div class="control-group">
<button id="reset-btn" disabled>Clear Text</button>
</div>
<div class="control-group">
<button id="full-reset-btn" disabled>Full Reset</button>
</div>
</div>

<script src="dasher-wasm-wrapper.js"></script>
Expand Down
Loading