77 lines
4.1 KiB
HTML
77 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="icon" href="/favicon.ico"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="在线编译并运行React, typescript, material-ui, tailwindcss"/>
|
|
<link rel="apple-touch-icon" href="/logo192.png"/>
|
|
<link rel="manifest" href="/manifest.json"/>
|
|
<title>React 在线测试</title>
|
|
<script defer="defer" src="/script/babel@7.23.6.min.js"></script>
|
|
<script defer="defer" src="/script/typescript@5.3.3.min.js"></script>
|
|
</head>
|
|
<body class="h-full w-full grid grid-cols-1 grid-rows-2 xl:grid-cols-2 xl:grid-rows-1">
|
|
<div id="loading" class="fixed z-10 h-full w-full flex justify-center items-center bg-sky-100 text-pink-500">
|
|
<div
|
|
class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
|
|
role="status">
|
|
<span
|
|
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="border-solid border-gray-100 xl:border-4 flex flex-col">
|
|
<div class="p-1 text-base flex flex-row justify-around items-center bg-gray-100">
|
|
<div class="p-1">
|
|
<label class="text-gray-500 font-bold">
|
|
<input id="check-material-ui" class="mr-2 leading-tight" type="checkbox">
|
|
<span>Material UI</span>
|
|
</label>
|
|
</div>
|
|
<div class="p-1">
|
|
<label class="text-gray-500 font-bold">
|
|
<input id="check-tailwind-css" class="mr-2 leading-tight" type="checkbox">
|
|
<span>Tailwind CSS</span>
|
|
</label>
|
|
</div>
|
|
<div class="p-1 self-end">
|
|
<button
|
|
class="shadow bg-pink-500 hover:bg-pink-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
|
|
type="button" id="click-run">
|
|
运行
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-2 flex-grow h-0">
|
|
<div aria-label="输入代码" id="input-code"
|
|
class="block flex-grow resize-none overflow-scroll shadow appearance-none border rounded w-full h-full leading-tight"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-2">
|
|
<div class="h-full w-full flex flex-col rounded-lg border-gray-100 border-4 border-solid shadow">
|
|
<div class="flex flex-row items-center px-4 py-2 bg-gray-100">
|
|
<div class="whitespace-nowrap">
|
|
<span class="mr-1.5 mt-1 h-3 w-3 rounded-full inline-block bg-rose-500"></span>
|
|
<span class="mr-1.5 mt-1 h-3 w-3 rounded-full inline-block bg-amber-500"></span>
|
|
<span class="mr-1.5 mt-1 h-3 w-3 rounded-full inline-block bg-lime-500"></span>
|
|
</div>
|
|
<div class="flex mr-4 ml-2 rounded-xl bg-white px-4 py-1 text-sm flex-grow">
|
|
React 在线测试
|
|
</div>
|
|
<div class="ml-auto">
|
|
<div>
|
|
<span class="w-5 h-1 bg-gray-400 my-0.5 block"></span>
|
|
<span class="w-5 h-1 bg-gray-400 my-0.5 block"></span>
|
|
<span class="w-5 h-1 bg-gray-400 my-0.5 block"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow overflow-y-auto">
|
|
<iframe id="iframe-page" class="border-none h-full w-full" src="about:blank"
|
|
frameborder="none"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|