14514f5e3Sopenharmony_ci<!DOCTYPE html> 24514f5e3Sopenharmony_ci<html> 34514f5e3Sopenharmony_ci 44514f5e3Sopenharmony_ci<head> 54514f5e3Sopenharmony_ci <meta charset="utf-8"> 64514f5e3Sopenharmony_ci <title>Circuit Viewer</title> 74514f5e3Sopenharmony_ci <style> 84514f5e3Sopenharmony_ci html, 94514f5e3Sopenharmony_ci body { 104514f5e3Sopenharmony_ci height: 100%; 114514f5e3Sopenharmony_ci } 124514f5e3Sopenharmony_ci 134514f5e3Sopenharmony_ci #visual_area { 144514f5e3Sopenharmony_ci background-color: #ffffff; 154514f5e3Sopenharmony_ci width: 100%; 164514f5e3Sopenharmony_ci height: 100%; 174514f5e3Sopenharmony_ci position: absolute; 184514f5e3Sopenharmony_ci left: 0px; 194514f5e3Sopenharmony_ci } 204514f5e3Sopenharmony_ci 214514f5e3Sopenharmony_ci #canvas_textarea { 224514f5e3Sopenharmony_ci border: 1px solid groove; 234514f5e3Sopenharmony_ci position: absolute; 244514f5e3Sopenharmony_ci margin-left: 8px; 254514f5e3Sopenharmony_ci margin-right: 8px; 264514f5e3Sopenharmony_ci width: 258px; 274514f5e3Sopenharmony_ci height: 32px; 284514f5e3Sopenharmony_ci border-style: none; 294514f5e3Sopenharmony_ci outline: none; 304514f5e3Sopenharmony_ci background-color: rgba(255, 255, 255, 0.1); 314514f5e3Sopenharmony_ci border-radius: 8px; 324514f5e3Sopenharmony_ci display: none; 334514f5e3Sopenharmony_ci color: #ffffff; 344514f5e3Sopenharmony_ci padding-left: 8px; 354514f5e3Sopenharmony_ci padding-right: 8px; 364514f5e3Sopenharmony_ci caret-color: #ffffff; 374514f5e3Sopenharmony_ci font-size: 14px; 384514f5e3Sopenharmony_ci resize: none; 394514f5e3Sopenharmony_ci line-height: 30px; 404514f5e3Sopenharmony_ci } 414514f5e3Sopenharmony_ci </style> 424514f5e3Sopenharmony_ci</head> 434514f5e3Sopenharmony_ci 444514f5e3Sopenharmony_ci<body style="margin:0"> 454514f5e3Sopenharmony_ci <canvas id="visual_area"></canvas> 464514f5e3Sopenharmony_ci <textarea id="canvas_textarea"></textarea> 474514f5e3Sopenharmony_ci <script src="./main.js"></script> 484514f5e3Sopenharmony_ci</body> 494514f5e3Sopenharmony_ci 504514f5e3Sopenharmony_ci</html>