Skip to content

Commit 061a4c9

Browse files
willwadewillwade
committed
Rearrange layout: text on right, controls below canvas
1 parent bfb7a67 commit 061a4c9

1 file changed

Lines changed: 51 additions & 61 deletions

File tree

‎wasm-build/demo.html‎

Lines changed: 51 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,6 @@
1212
padding: 20px;
1313
background-color: #f5f5f5;
1414
}
15-
.header { text-align: center; margin-bottom: 20px; }
16-
.header h1 { color: #333; margin: 0 0 10px 0; }
17-
.header p { color: #666; margin: 0; }
1815
.container { display: flex; gap: 20px; margin-bottom: 20px; }
1916
.canvas-container {
2017
flex: 1; background: white; border-radius: 8px; padding: 20px;
@@ -25,53 +22,46 @@
2522
margin: 0 auto; cursor: crosshair; touch-action: none;
2623
width: 100%; height: auto; aspect-ratio: 4 / 3;
2724
}
28-
.controls {
25+
.output-container {
2926
width: 280px; background: white; border-radius: 8px; padding: 20px;
3027
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
28+
display: flex; flex-direction: column;
29+
}
30+
.output-container h2 { margin-top: 0; color: #333; font-size: 18px; }
31+
#output-text {
32+
flex: 1; width: 100%; min-height: 100px; padding: 10px;
33+
border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: none;
34+
}
35+
.controls {
36+
display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
37+
background: white; border-radius: 8px; padding: 15px 20px;
38+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
3139
}
32-
.control-group { margin-bottom: 15px; }
40+
.control-group { margin-bottom: 0; }
3341
.control-group label {
3442
display: block; margin-bottom: 5px; font-weight: bold; color: #333;
3543
}
36-
.control-group select, .control-group input {
37-
width: 100%; padding: 8px; border: 1px solid #ddd;
38-
border-radius: 4px; font-size: 14px;
44+
.control-group select {
45+
padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
3946
}
4047
.control-group button {
41-
width: 100%; padding: 10px; background-color: #4CAF50; color: white;
48+
padding: 8px 16px; background-color: #4CAF50; color: white;
4249
border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
4350
}
4451
.control-group button:hover { background-color: #45a049; }
4552
.control-group button:disabled { background-color: #ccc; cursor: not-allowed; }
4653
.toggle-group {
47-
display: flex; align-items: center; gap: 8px; margin-bottom: 15px;
48-
}
49-
.toggle-group label { margin: 0; cursor: pointer; font-weight: normal; }
50-
.toggle-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
51-
.output-container {
52-
background: white; border-radius: 8px; padding: 20px;
53-
box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;
54-
}
55-
.output-container h2 { margin-top: 0; color: #333; }
56-
#output-text {
57-
width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd;
58-
border-radius: 4px; font-size: 16px; resize: vertical;
59-
}
60-
.status {
61-
background: white; border-radius: 8px; padding: 15px;
62-
box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;
63-
}
64-
.status.success { border-left: 4px solid #4CAF50; }
65-
.status.error { border-left: 4px solid #f44336; }
66-
.status.loading { border-left: 4px solid #ff9800; }
67-
.status-text { color: #333; margin: 0; }
68-
.instructions {
69-
background: #e3f2fd; border-radius: 8px; padding: 15px;
70-
border-left: 4px solid #2196F3; margin-bottom: 20px;
54+
display: flex; align-items: center; gap: 6px; margin-bottom: 0;
7155
}
72-
.instructions h3 { margin-top: 0; color: #1976D2; }
73-
.instructions p { color: #333; margin: 5px 0; }
56+
.toggle-group label { margin: 0; cursor: pointer; font-weight: normal; color: #333; }
57+
.toggle-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
58+
.speed-group { min-width: 200px; }
59+
.speed-group input[type="range"] { width: 100%; cursor: pointer; }
7460
.canvas-stats { text-align: center; margin-top: 10px; font-size: 12px; color: #666; }
61+
@media (max-width: 850px) {
62+
.container { flex-direction: column; }
63+
.output-container { width: 100%; }
64+
}
7565
</style>
7666
</head>
7767
<body>
@@ -83,35 +73,35 @@
8373
</div>
8474
</div>
8575

86-
<div class="controls">
87-
<div class="control-group">
88-
<label for="alphabet-select">Alphabet:</label>
89-
<select id="alphabet-select" disabled></select>
90-
</div>
91-
<div class="control-group">
92-
<label for="speed-slider">Speed: <span id="speed-value">100</span>%</label>
93-
<input type="range" id="speed-slider" min="20" max="400" value="100" disabled>
94-
</div>
95-
<div class="toggle-group">
96-
<input type="checkbox" id="autospeed-toggle" disabled>
97-
<label for="autospeed-toggle">Auto speed (adjusts to your input)</label>
98-
</div>
99-
<div class="toggle-group">
100-
<input type="checkbox" id="learning-toggle" disabled>
101-
<label for="learning-toggle">Learning (adapt language model)</label>
102-
</div>
103-
<div class="control-group">
104-
<button id="reset-btn" disabled>Clear Text</button>
105-
</div>
106-
<div class="control-group">
107-
<button id="full-reset-btn" disabled>Full Reset</button>
108-
</div>
76+
<div class="output-container">
77+
<h2>Output</h2>
78+
<textarea id="output-text" readonly placeholder="Text appears here..."></textarea>
10979
</div>
11080
</div>
11181

112-
<div class="output-container">
113-
<h2>Output Text</h2>
114-
<textarea id="output-text" readonly placeholder="Your text will appear here as you type..."></textarea>
82+
<div class="controls">
83+
<div class="control-group">
84+
<label for="alphabet-select">Alphabet</label>
85+
<select id="alphabet-select" disabled></select>
86+
</div>
87+
<div class="control-group speed-group">
88+
<label for="speed-slider">Speed: <span id="speed-value">100</span>%</label>
89+
<input type="range" id="speed-slider" min="20" max="400" value="100" disabled>
90+
</div>
91+
<div class="toggle-group">
92+
<input type="checkbox" id="autospeed-toggle" disabled>
93+
<label for="autospeed-toggle">Auto speed</label>
94+
</div>
95+
<div class="toggle-group">
96+
<input type="checkbox" id="learning-toggle" disabled>
97+
<label for="learning-toggle">Learning</label>
98+
</div>
99+
<div class="control-group">
100+
<button id="reset-btn" disabled>Clear Text</button>
101+
</div>
102+
<div class="control-group">
103+
<button id="full-reset-btn" disabled>Full Reset</button>
104+
</div>
115105
</div>
116106

117107
<script src="dasher-wasm-wrapper.js"></script>

0 commit comments

Comments
 (0)