From 949765a3b0311dea09c619080c6d8838ae585866 Mon Sep 17 00:00:00 2001
From: Semphris <[EMAIL REDACTED]>
Date: Mon, 29 Jul 2024 18:22:04 -0400
Subject: [PATCH] Stylize examples/template.html
---
examples/template.html | 155 +++++++++++++++++++++++++++++++----------
1 file changed, 120 insertions(+), 35 deletions(-)
diff --git a/examples/template.html b/examples/template.html
index c047d615b3199..f76a73e5f4611 100644
--- a/examples/template.html
+++ b/examples/template.html
@@ -5,63 +5,148 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>@project_name@ Example: @category_name@/@example_name@</title>
<style>
- body {
- font-family: arial;
+ html, body {
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ font-family: 'Liberation Sans', sans-serif;
+ }
+
+ .canvas-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background: black;
+ }
+
+ #canvas {
+ box-shadow: 0 0 0.5rem #7787;
+ }
+
+ #output-container {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ background-color: black;
+ border: none;
+ border-top: 1px solid #778;
margin: 0;
- padding: none;
+ padding: 1rem;
+
+ transition: top 0.25s;
}
- .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
- div.emscripten { text-align: center; }
- div.emscripten_border { border: 1px solid black; }
- /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
- canvas.emscripten { border: 0px none; background-color: black; }
+ #output-container::before {
+ position: absolute;
+ bottom: 100%;
+ right: 1rem;
- @-webkit-keyframes rotation {
- from {-webkit-transform: rotate(0deg);}
- to {-webkit-transform: rotate(360deg);}
+ content: 'Console';
+ font-size: 1.5rem;
+ color: white;
+ background: black;
+ border: 1px solid #778;
+ border-bottom: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem 0.5rem 0 0;
}
- @-moz-keyframes rotation {
- from {-moz-transform: rotate(0deg);}
- to {-moz-transform: rotate(360deg);}
+
+ #output-container:hover,
+ #output-container:focus-within {
+ top: 50%;
}
- @-o-keyframes rotation {
- from {-o-transform: rotate(0deg);}
- to {-o-transform: rotate(360deg);}
+
+ #output-container:focus-within {
+ border-top: 2px solid orange;
}
- @keyframes rotation {
- from {transform: rotate(0deg);}
- to {transform: rotate(360deg);}
+
+ #output-container:focus-within::before {
+ border: 2px solid orange;
+ border-bottom: none;
}
#output {
width: 100%;
- height: 200px;
- margin: 0 auto;
- margin-top: 10px;
- border-left: 0px;
- border-right: 0px;
- padding-left: 0px;
- padding-right: 0px;
- display: none;
- background-color: black;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+
+ border: none;
+ background: black;
color: white;
- font-family: 'Lucida Console', Monaco, monospace;
outline: none;
+ resize: none;
+
+ font-family: 'Lucida Console', Monaco, monospace;
+ }
+
+ #source-code {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ background: #e0eaee;
+ padding: 1rem;
+
+ transition: top 0.25s;
+ }
+
+ #source-code::before {
+ position: absolute;
+ bottom: 100%;
+ left: 1rem;
+
+ content: 'Source code';
+ font-size: 1.5rem;
+ background: linear-gradient(to bottom, #789, #e0eaee);
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem 0.5rem 0 0;
+ }
+
+ #source-code:hover,
+ #source-code:focus-within {
+ top: 50%;
+ }
+
+ #source-code:focus-within {
+ border-top: 2px solid orange;
}
- .source_code {
+ #source-code:focus-within::before {
+ border: 2px solid orange;
+ border-bottom: none;
+ }
+
+ #source-code-contents {
+ height: 100%;
+ overflow: scroll;
}
</style>
<link rel="stylesheet" type="text/css" href="highlight.css">
</head>
<body>
- <div class="emscripten_border">
- <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+ <div class="canvas-container">
+ <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
+ </div>
+ <div id="output-container">
+ <textarea id="output" rows="8" spellcheck="false" readonly></textarea>
</div>
- <textarea id="output" rows="8"></textarea>
- <div class="source_code">@htmlified_source_code@</div>
+ <div id="source-code" tabindex="1">
+ <div id="source-code-contents">@htmlified_source_code@</div>
+ </div>
<script type='text/javascript'>
var Module = {