index.pug

doctype html
html
	head
		meta(charset='UTF-8')
		title PokaPlayer
		link(href='https://cdnjs.cloudflare.com/ajax/libs/mdui/0.4.1/css/mdui.min.css', rel='stylesheet')
		link(href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', rel='stylesheet')
		style.
			body, input, textarea, select, button{
				font-family: 'Noto Sans TC',"微軟正黑體", "Microsoft JhengHei", sans-serif !important;
			}
			body {
				margin: 0;
				font-weight: normal !important;
				background-color: #fff;
				background-image: linear-gradient(45deg, #0000000d 50%, transparent 0);
				background-size: 40px 40px;
			}
			#poka {
				width: 100%;
				height: calc(100vh);
			}
	body
		#app.mdui-theme-primary-purple.mdui-theme-accent-blue
			.mdui-valign(style='margin-top:20vh;')
				.mdui-center.mdui-color-white(style='width: 300px;box-shadow: 0 6px 20px #0000001f;overflow: hidden;border-radius: 8px;opacity: 0;')
					img.mdui-img-fluid(src='./assets/imgs/PokaPlayerTransparent.png', style='width: 150px;margin:20px auto;')
					.mdui-divider
					.mdui-textfield.mdui-textfield-floating-label.mdui-textfield-not-empty(style='padding:5px;margin:10px 0;')
						i.mdui-icon.material-icons developer_board
						label.mdui-textfield-label Server URL
						input#server.mdui-textfield-input(type='text', name='server', placeholder='https://example.com', required='')
					button#login.mdui-btn.mdui-btn-block(style='border-radius: 0 0 8px 8px;border-top: 1px solid rgba(0,0,0,.12);') 連接至伺服器
			webview#poka(style='opacity:0;height:0;')
		script.
			// You can also require other files to run in this process
			window.$ = window.jQuery = require('./jquery-3.3.1.min.js');
			require('./renderer.js')