Skip to content

Commit

Permalink
Template for web UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@kvg
kvg committed Apr 15, 2024
1 parent e4ceda0 commit b928160
Show file tree
Hide file tree
Showing 2 changed files with 819 additions and 14 deletions.
261 changes: 261 additions & 0 deletions html/template.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>genomeshader</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"main main aside"
"footer footer aside";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr auto;
height: 100vh;
margin: 0;
padding: 0;
}
header {
grid-area: header;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 24px;
padding: 6px 3px;
background: #eeeeee;
}
.header-left {
display: flex;
align-items: center;
justify-content: flex-start;
}
.header-center {
display: flex;
align-items: center;
justify-content: center;
}
.header-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.header-left i, .header-right i {
padding-left: 5px;
padding-right: 5px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
height: calc(100vh - 24px - 40px);
}
aside {
display: hidden;
grid-area: aside;
transition: width 0.3s;
background-color: #cccccc;
border-left: 1px solid #bbbbbb;
max-width: 300px;
width: 0;
overflow: hidden;
}
.menu-icon {
cursor: pointer;
}
.sidebar-icon-close {
display: none;
cursor: pointer;
}
.sidebar-icon-open {
cursor: pointer;
}
.report-bug-icon {
cursor: pointer;
}
.gear-icon {
cursor: pointer;
}
footer {
position: fixed;
bottom: 10px;
left: 10px;
right: 210px;
height: 20px;
padding: 6px 3px;
display: flex;
align-items: center;
justify-content: left;
color: #989898;
font-family: Helvetica;
font-size: 10pt;
}
.tab-bar {
height: 22px;
color: #ffffff;
font-family: Helvetica;
font-size: 9pt;
font-weight: bold;
background-color: #888888;
display: flex;
align-items: flex-end;
}
.tab-name {
color: #ffffff;
padding: 3px 3px;
margin: 2px 2px;
font-family: Helvetica;
font-size: 9pt;
font-weight: bold;
}
.tab-content-viewer {
color: #ffffff;
padding: 4px;
margin: 0px;
color: #a8a8a8;
background-color: #ffffff;
font-family: Helvetica;
font-size: 9pt;
font-weight: bold;
}
.tab-content-info {
color: #ffffff;
padding: 20px 8px;
margin: 0px;
color: #585858;
font-family: Helvetica;
font-size: 9pt;
}
</style>
</head>

<body>

<header>
<div class="header-left">
<i class="menu-icon" onclick="alert('Not yet implemented.')">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18" height="18" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<path d="M4 6H20M4 12H20M4 18H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</i>
</div>
<div class="header-center">
<!-- genomeshader -->
</div>
<div class="header-right">
<i class="sidebar-icon-close" onclick="closeSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18" height="18" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<path fill-rule="evenodd" d="M7.22 14.47L9.69 12 7.22 9.53a.75.75 0 111.06-1.06l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 01-1.06-1.06z"></path>
<path fill-rule="evenodd" d="M3.75 2A1.75 1.75 0 002 3.75v16.5c0 .966.784 1.75 1.75 1.75h16.5A1.75 1.75 0 0022 20.25V3.75A1.75 1.75 0 0020.25 2H3.75zM3.5 3.75a.25.25 0 01.25-.25H15v17H3.75a.25.25 0 01-.25-.25V3.75zm13 16.75v-17h3.75a.25.25 0 01.25.25v16.5a.25.25 0 01-.25.25H16.5z"></path>
</g>
</svg>
</i>
<i class="sidebar-icon-open" onclick="openSidebar()">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18" height="18" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<path fill-rule="evenodd" d="M11.28 9.53L8.81 12l2.47 2.47a.75.75 0 11-1.06 1.06l-3-3a.75.75 0 010-1.06l3-3a.75.75 0 111.06 1.06z"></path>
<path fill-rule="evenodd" d="M3.75 2A1.75 1.75 0 002 3.75v16.5c0 .966.784 1.75 1.75 1.75h16.5A1.75 1.75 0 0022 20.25V3.75A1.75 1.75 0 0020.25 2H3.75zM3.5 3.75a.25.25 0 01.25-.25H15v17H3.75a.25.25 0 01-.25-.25V3.75zm13 16.75v-17h3.75a.25.25 0 01.25.25v16.5a.25.25 0 01-.25.25H16.5z"></path>
</g>
</svg>
</i>
<a href="https://github.com/broadinstitute/genomeshader/issues" target="_blank">
<i class="report-bug-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18" height="18" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<path fill-rule="evenodd" d="M3.25 4a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 01.75.75v3.19l3.427-3.427A1.75 1.75 0 0111.164 17h9.586a.25.25 0 00.25-.25V4.25a.25.25 0 00-.25-.25H3.25zm-1.75.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 01-1.75 1.75h-9.586a.25.25 0 00-.177.073l-3.5 3.5A1.457 1.457 0 015 21.043V18.5H3.25a1.75 1.75 0 01-1.75-1.75V4.25zM12 6a.75.75 0 01.75.75v4a.75.75 0 01-1.5 0v-4A.75.75 0 0112 6zm0 9a1 1 0 100-2 1 1 0 000 2z"></path>
</g>
</svg>
</i>
</a>
<i class="gear-icon" onclick="alert('Not yet implemented.')">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18" height="18" viewBox="0 0 24 24">
<g transform="translate(0, 0)">
<path fill-rule="evenodd" d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-1.5 0a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path><path fill-rule="evenodd" d="M12 1c-.268 0-.534.01-.797.028-.763.055-1.345.617-1.512 1.304l-.352 1.45c-.02.078-.09.172-.225.22a8.45 8.45 0 00-.728.303c-.13.06-.246.044-.315.002l-1.274-.776c-.604-.368-1.412-.354-1.99.147-.403.348-.78.726-1.129 1.128-.5.579-.515 1.387-.147 1.99l.776 1.275c.042.069.059.185-.002.315-.112.237-.213.48-.302.728-.05.135-.143.206-.221.225l-1.45.352c-.687.167-1.249.749-1.304 1.512a11.149 11.149 0 000 1.594c.055.763.617 1.345 1.304 1.512l1.45.352c.078.02.172.09.22.225.09.248.191.491.303.729.06.129.044.245.002.314l-.776 1.274c-.368.604-.354 1.412.147 1.99.348.403.726.78 1.128 1.129.579.5 1.387.515 1.99.147l1.275-.776c.069-.042.185-.059.315.002.237.112.48.213.728.302.135.05.206.143.225.221l.352 1.45c.167.687.749 1.249 1.512 1.303a11.125 11.125 0 001.594 0c.763-.054 1.345-.616 1.512-1.303l.352-1.45c.02-.078.09-.172.225-.22.248-.09.491-.191.729-.303.129-.06.245-.044.314-.002l1.274.776c.604.368 1.412.354 1.99-.147.403-.348.78-.726 1.129-1.128.5-.579.515-1.387.147-1.99l-.776-1.275c-.042-.069-.059-.185.002-.315.112-.237.213-.48.302-.728.05-.135.143-.206.221-.225l1.45-.352c.687-.167 1.249-.749 1.303-1.512a11.125 11.125 0 000-1.594c-.054-.763-.616-1.345-1.303-1.512l-1.45-.352c-.078-.02-.172-.09-.22-.225a8.469 8.469 0 00-.303-.728c-.06-.13-.044-.246-.002-.315l.776-1.274c.368-.604.354-1.412-.147-1.99-.348-.403-.726-.78-1.128-1.129-.579-.5-1.387-.515-1.99-.147l-1.275.776c-.069.042-.185.059-.315-.002a8.465 8.465 0 00-.728-.302c-.135-.05-.206-.143-.225-.221l-.352-1.45c-.167-.687-.749-1.249-1.512-1.304A11.149 11.149 0 0012 1zm-.69 1.525a9.648 9.648 0 011.38 0c.055.004.135.05.162.16l.351 1.45c.153.628.626 1.08 1.173 1.278.205.074.405.157.6.249a1.832 1.832 0 001.733-.074l1.275-.776c.097-.06.186-.036.228 0 .348.302.674.628.976.976.036.042.06.13 0 .228l-.776 1.274a1.832 1.832 0 00-.074 1.734c.092.195.175.395.248.6.198.547.652 1.02 1.278 1.172l1.45.353c.111.026.157.106.161.161a9.653 9.653 0 010 1.38c-.004.055-.05.135-.16.162l-1.45.351a1.833 1.833 0 00-1.278 1.173 6.926 6.926 0 01-.25.6 1.832 1.832 0 00.075 1.733l.776 1.275c.06.097.036.186 0 .228a9.555 9.555 0 01-.976.976c-.042.036-.13.06-.228 0l-1.275-.776a1.832 1.832 0 00-1.733-.074 6.926 6.926 0 01-.6.248 1.833 1.833 0 00-1.172 1.278l-.353 1.45c-.026.111-.106.157-.161.161a9.653 9.653 0 01-1.38 0c-.055-.004-.135-.05-.162-.16l-.351-1.45a1.833 1.833 0 00-1.173-1.278 6.928 6.928 0 01-.6-.25 1.832 1.832 0 00-1.734.075l-1.274.776c-.097.06-.186.036-.228 0a9.56 9.56 0 01-.976-.976c-.036-.042-.06-.13 0-.228l.776-1.275a1.832 1.832 0 00.074-1.733 6.948 6.948 0 01-.249-.6 1.833 1.833 0 00-1.277-1.172l-1.45-.353c-.111-.026-.157-.106-.161-.161a9.648 9.648 0 010-1.38c.004-.055.05-.135.16-.162l1.45-.351a1.833 1.833 0 001.278-1.173 6.95 6.95 0 01.249-.6 1.832 1.832 0 00-.074-1.734l-.776-1.274c-.06-.097-.036-.186 0-.228.302-.348.628-.674.976-.976.042-.036.13-.06.228 0l1.274.776a1.832 1.832 0 001.734.074 6.95 6.95 0 01.6-.249 1.833 1.833 0 001.172-1.277l.353-1.45c.026-.111.106-.157.161-.161z"></path>
</g>
</svg>
</i>
</div>
</header>

<main style="width: 100%;">
<div class="tab-bar">
<span class="tab-name">
<i class="tab-viewer-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12" height="12" viewBox="0 -3 24 24">
<g transform="translate(0, 0)">
<path fill="#ffffff" stroke="#ffffff" fill-rule="evenodd" d="M19.25 4.5H4.75a.25.25 0 00-.25.25v14.5c0 .138.112.25.25.25h.19l9.823-9.823a1.75 1.75 0 012.475 0l2.262 2.262V4.75a.25.25 0 00-.25-.25zm.25 9.56l-3.323-3.323a.25.25 0 00-.354 0L7.061 19.5H19.25a.25.25 0 00.25-.25v-5.19zM4.75 3A1.75 1.75 0 003 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0021 19.25V4.75A1.75 1.75 0 0019.25 3H4.75zM8.5 9.5a1 1 0 100-2 1 1 0 000 2zm0 1.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path>
</g>
</svg>
</i>
Viewer
</span>
</div>

<footer>Status</footer>

</main>

<aside>
<div class="tab-bar">
<span class="tab-name">
<i class="tab-info-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12" height="12" viewBox="0 -3 24 24">
<g transform="translate(0, 0)">
<path fill="#ffffff" stroke="#ffffff" fill-rule="evenodd" d="M0 4.75C0 3.784.784 3 1.75 3h20.5c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0122.25 21H1.75A1.75 1.75 0 010 19.25V4.75zm1.75-.25a.25.25 0 00-.25.25v14.5c0 .138.112.25.25.25h20.5a.25.25 0 00.25-.25V4.75a.25.25 0 00-.25-.25H1.75z"></path>
<path fill="#ffffff" stroke="#ffffff" fill-rule="evenodd" d="M5 8.75A.75.75 0 015.75 8h11.5a.75.75 0 010 1.5H5.75A.75.75 0 015 8.75zm0 4a.75.75 0 01.75-.75h5.5a.75.75 0 010 1.5h-5.5a.75.75 0 01-.75-.75z"></path>
</g>
</svg>
</i>
Information
</span>
</div>
<div class="tab-content-info">
Hello
</div>
</aside>

<script>
function closeSidebar() {
document.querySelector('.sidebar-icon-close').style.display = 'none';
document.querySelector('.sidebar-icon-open').style.display = 'block';
document.querySelector('aside').style.width = '0';
}

function openSidebar() {
document.querySelector('.sidebar-icon-open').style.display = 'none';
document.querySelector('.sidebar-icon-close').style.display = 'block';
document.querySelector('aside').style.width = '300px';
}
</script>

<script type="module">
import { Application } from 'https://cdn.skypack.dev/[email protected]';

// Asynchronous IIFE
(async () =>
{
// Get main HTMLElement.
var main = document.querySelector('main');
// var main = document.querySelector('#viewer');

// Create a PixiJS application.
const app = new Application();

// Intialize the application.
await app.init({
antialias: true,
backgroundColor: '#3985ff',
resizeTo: main,
});

// Then adding the application's canvas to the DOM body.
main.appendChild(app.canvas);
})();
</script>

</body>

</html>
Loading

0 comments on commit b928160

Please sign in to comment.