Starting to look usable

sendalo.html.tpl

@@ -33,6 +33,10 @@
                 color: white;
             }
 
+            form {
+                text-align: center;
+            }
+            
             #w {
                 text-align: center;
             }
@@ -41,10 +45,37 @@
                 display: none;
             }
 
+            input#url {
+                width: 300px;
+                max-width: 90%;
+            }
+            
+            input#upload {
+                width: 300px;
+                max-width: 90%;
+                text-align: left;
+            }
+            
             footer {
                 margin-top: 2em;
                 font-size: 0.8em;
             }
+            
+            #audiopad {
+                display: block;
+                width: 100%;
+                max-width: 300px;
+                margin: 0 auto;
+                padding-top: 2em;
+                text-align: center;
+            }
+            
+            #playbutton {
+                width: 10em;
+                height: 2em;
+                font-size: inherit;
+            }
+            
         </style>
 
         <script>
@@ -76,7 +107,13 @@
             }
 
             function downloadComplete(what) {
-				FS.writeFile('/tmp/c2t.dsk', new Uint8Array(what));
+                var dt = new Uint8Array(what);
+                if (!dt || dt.length !== 143360) {
+                    displayError();
+                    return;
+                }
+                
+                FS.writeFile('/tmp/c2t.dsk', dt);
                 var opts = document.getElementById('format').checked ? '-8' : '-n8';
                 Module.callMain([opts, '/tmp/c2t.dsk', '/tmp/c2t.wav']);
                 fd = FS.readFile('/tmp/c2t.wav', {encoding: 'binary'});
@@ -88,6 +125,10 @@
                 audio.load();
                 audio.play();
             }
+            
+            function displayError() {
+                alert('Error: only 140K DOS-order images are supported for now. That doesn\'t look like one.');
+            }
         </script>
     </head>
 
@@ -99,16 +140,18 @@
 
         <main>
             <form>
-				<input type="text" placeholder="https://www.apple.asimov.net/images/masters/Apple%20DOS%203.3%20January%201983.dsk" id="url"/>
-				<input type="file" id="upload" />
-				<input type="button" onclick="downloadFile()"/>
-				<label for="format">Format disk?</label><input id="format" type="checkbox">
+                <input type="text" placeholder="https://www.apple.asimov.net/images/masters/Apple%20DOS%203.3%20January%201983.dsk" id="url"/><br/>
+                <input type="file" id="upload" /><br/>
+                <input id="format" type="checkbox"><label for="format"><small>Format disk?</small></label><br/><br/>
+                <input type="button" id="playbutton" value="Play!" onclick="downloadFile()"/><br/>
                 
+            </form>
+            
+            <div id="audiopad">
                 <audio controls="controls" id="audio">
                     <source id="source" src="" type="audio/wav" />
                 </audio>
-
-			</form>
+            </div>
 
             <p id="w"><a href="#" onclick="document.getElementById('expl').style.display='block'">
                 <small>What's this?</small>

sendalo.php.tpl

@@ -1,6 +1,11 @@
 <?php
 	if (isset($_REQUEST["url"])) {
-		echo("TODO");
+        $url = $_REQUEST["url"];
+        
+        header('Content-type: application/octet-stream');
+        $data = file_get_contents($url, $maxlen=150000);
+        file_put_contents("php://output", $data);
+        
 		die();
 	}
 ?>