Skip to content

UI improvements #652

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
praveenax wants to merge 2 commits into
base: master
Choose a base branch
from
Open

UI improvements #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbde76d
Polish UI: theming, layout, accessibility
praveenax Mar 13, 2026
7f3fabe
Refactor workflow.html styles and UI classes
praveenax Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 94 additions & 18 deletions create.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@

<title>WoofJS</title>
<link rel="shortcut icon" type="image/png" href="./favicon.png"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">


<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Expand Down Expand Up @@ -77,11 +80,27 @@
<script src="https://rawcdn.githack.com/beautify-web/js-beautify/1b52eb1f90daaefa6ff0fa7736f97fbfc58093c1/js/lib/beautify.js"></script>
<style>

:root {
--bg-0: #f4f8ff;
--bg-1: #e8f1ff;
--ink: #16314a;
--nav-start: #1f6fb2;
--nav-end: #2ea9a1;
--panel: #ffffff;
--line: #c6d8ee;
--preview: #3f6ecf;
--docs: #6a58c0;
--tutorials: #9648b3;
--code: #1f87ba;
--shadow: 0 10px 26px rgba(21, 57, 95, 0.16);
}

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: radial-gradient(circle at 0% 0%, var(--bg-1) 0%, var(--bg-0) 45%, #f9fcff 100%);
}

#page {
Expand All @@ -91,11 +110,12 @@
align-items: stretch;
align-content: stretch;
height: 100%;
overflow: hidden;
}

body {
background-color: #fff;
font-family: sans-serif;
font-family: "Space Grotesk", "Trebuchet MS", "Segoe UI", sans-serif;
color: var(--ink);
}

h1 {
Expand Down Expand Up @@ -130,7 +150,7 @@
}

#navbar {
background-color: #6DC0F2;
background: linear-gradient(110deg, var(--nav-start), var(--nav-end));
position: absolute;
width: 100%;
z-index: 1;
Expand All @@ -139,6 +159,8 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: var(--shadow);
}

#clean-up {
Expand All @@ -153,11 +175,31 @@
color: white;
}

#navbar .btn,
#code-status {
border-radius: 8px;
letter-spacing: 0.15px;
transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

#navbar .btn:hover,
#code-status:hover {
transform: translateY(-1px);
filter: brightness(1.02);
box-shadow: 0 4px 12px rgba(15, 35, 58, 0.22);
}

#navbar img {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

#container {
width: 100%;
display: flex;
flex-direction: row;
margin-top: 55px;
height: calc(100% - 55px);
min-height: 0;
}

#previewbar, #docsbar, #projectbar, #codebar {
Expand All @@ -173,11 +215,16 @@
flex-flow: column wrap;
resize: none;
flex: 10 1 25%;
min-width: 0;
min-height: 0;
background-color: var(--panel);
border-right: 1px solid var(--line);
}

#code {
word-wrap: break-word;
width: 25%;
border-right: none;
}

#PreviewNav, #DocsNav, #ProjectsNav, #CodeNav {
Expand All @@ -187,22 +234,26 @@
font-size: 1.1em;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
}

#previewbar, #PreviewNav {
background-color:#4875D1;
background-color: var(--preview);
}

#docsbar, #DocsNav {
background-color: #7F68D5;
background-color: var(--docs);
}

#projectbar, #ProjectsNav {
background-color: #AD5FC2;
background-color: var(--tutorials);
}

#codebar, #CodeNav {
background-color: #49A6DF;
background-color: var(--code);
}

@media all and (max-width: 600px) {
Expand All @@ -211,6 +262,27 @@
}
}

@media all and (max-width: 1024px) {
#container {
flex-direction: column;
}

#output, #docs, #projects, #code {
width: 100%;
flex: 1 1 auto;
border-right: none;
border-bottom: 1px solid var(--line);
}

#code {
border-bottom: none;
}

#previewbar, #docsbar, #projectbar, #codebar {
display: none !important;
}
}

#pop {
cursor: pointer;
}
Expand All @@ -237,7 +309,10 @@
}

kbd{
background-color: #ababab;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
font-size: 11px;
}

.caret-right {
Expand All @@ -247,12 +322,13 @@
}

#code-status {
background-color: #4390bf;
background-color: rgba(20, 47, 70, 0.35);
padding: 0px 4px;
margin-top: 1px;
margin-bottom: 4px;
font-size: 12px;
border-radius: 3px;
color: #fff;
}

#error-block {
Expand Down Expand Up @@ -362,7 +438,7 @@
</ul>
</div>

<img style= "width:160px; height: 40px;" src="./images/logowhite.png">
<img style="width:160px; height: 40px;" src="./images/logowhite.png" alt="WoofJS logo">
<span style="margin:8px" id="save">
<span id="saveDescription" v-bind:class="{ redText: ((status == 'DIRTY') && !getID()), whiteText: ((status != 'DIRTY') || getID())}">{{saveMessage}}</span>
<div class="dropdown" style="display:inline;">
Expand All @@ -386,8 +462,8 @@
<li class='disabled'><a @click="cleanCode()" :style="{display: canClean ? 'none' : 'block'}" data-toggle="popover" data-trigger="hover" data-content="You can't clean when there's an error." data-placement="top"><span class="glyphicon glyphicon-align-left"></span> Clean Code <span><kbd>{{shortcut}}</kbd>+<kbd>B</kbd></span></a></li>
<li><a @click="comment()"><span class="fa fa-code"></span> Comment Code <span><kbd>{{shortcut}}</kbd>+<kbd>/</kbd></span></a></li>
<li role="separator" class="divider"></li>
<li><a><input onclick="autoRunClicked()" type="checkbox" id="checkbox" v-model="autoRunChecked"></span> Auto Run</a></li>
<li><a><input type="checkbox" id="checkbox" v-model="autoSaveChecked"></span> Auto Save</a></li>
<li><a><input onclick="autoRunClicked()" type="checkbox" id="autoRunCheckbox" v-model="autoRunChecked"></span> Auto Run</a></li>
<li><a><input type="checkbox" id="autoSaveCheckbox" v-model="autoSaveChecked"></span> Auto Save</a></li>
<li><a @click="share()"><span class="glyphicon glyphicon-share-alt"></span> Share</a></li>
</ul>
</div>
Expand Down Expand Up @@ -573,9 +649,9 @@ <h5>If there is an account associated with that email address, we have sent it a
<span style="margin-right:8px">
<span style="display: none; font-family: monospace; font-size: 11px" :style="{display: status ? 'inline-block' : 'none'}">mouseX: {{mouseX}}</span>
<span style="display: none; font-family: monospace; font-size: 11px" :style="{display: status ? 'inline-block' : 'none'}">mouseY: {{mouseY}}</span>
<img onclick="createRunCode(); focusPreview()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/refresh.png" title="Reload">
<img onclick="popout()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/pop.png" title="Open in new tab">
<img @click="previewbar = !previewbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
<img onclick="createRunCode(); focusPreview()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/refresh.png" title="Reload" alt="Reload preview">
<img onclick="popout()" id="pop" style="margin: 2px; width: 17px; height:17px" src="./images/pop.png" title="Open in new tab" alt="Open preview in a new tab">
<img @click="previewbar = !previewbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize preview pane">
</span>
</div>
<iframe scrolling="no" id="preview"></iframe>
Expand Down Expand Up @@ -616,7 +692,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
<div id="DocsNav">
<span style="margin-left:8px; margin-top:4px">Documentation</span>
<span style="margin-right:8px">
<img @click="docsbar = !docsbar" style="margin-left:5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
<img @click="docsbar = !docsbar" style="margin-left:5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize documentation pane">
</span>
</div>
<iframe src="./docs/index.html" id="scratch"></iframe>
Expand All @@ -630,7 +706,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
<div id="ProjectsNav">
<span style="margin-left:8px; margin-top:4px">Tutorials</span>
<span style="margin-right:8px">
<img @click="projectbar = !projectbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
<img @click="projectbar = !projectbar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize tutorials pane">
</span>
</div>
<iframe id="projectsIframe" src="//coding.space/woof/index.html"></iframe>
Expand Down Expand Up @@ -664,7 +740,7 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
<button id="code-status" class="btn" :style="{animation: error ? 'glowing 1200ms infinite' : 'none'}" @click="errorReport = !errorReport">{{error ? "Error " : "Running "}}<span class="caret" v-if="errorReport"></span><span class="caret caret-right" v-else></span></button>
</span>
<span style="margin-right:8px">
<img @click="codebar = !codebar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize">
<img @click="codebar = !codebar" style="margin: 5px; width: 16px; height:18px; cursor:pointer" src="./images/minimize.png" title="Minimize" alt="Minimize code pane">
</span>
</div>
</div>
Expand Down
Loading