Skip to content

Instantly share code, notes, and snippets.

@rynomad

rynomad/index.html

Created August 10, 2023 22:16
Show Gist options
  • Save rynomad/a6e31616f6f38ea5974242309b486e11 to your computer and use it in GitHub Desktop.
Save rynomad/a6e31616f6f38ea5974242309b486e11 to your computer and use it in GitHub Desktop.
Download ZIP
layout
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nodes Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh;
}
.column {
flex: 1;
border-left: 1px solid grey;
border-right: 1px solid grey;
position: relative;
padding: 10px;
}
.node-output.section {
display: flex;
flex-direction: column;
}
.section-content {
display: flex;
flex-direction: row;
}
.output-section-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.pallet {
flex: 0.5;
display: flex;
flex-direction: column;
}
.middle-column {
display: flex;
flex-direction: column;
flex: 2;
}
.configuration-panel {
display: flex;
flex-direction: column;
padding: 10px;
}
.configuration-panel label {
font-size: 14px;
color: #333;
margin: 5px 0;
display: block;
}
.name-field,
.description-field {
border: 2px solid #666; /* make the border more visible */
border-radius: 4px;
padding: 8px;
margin: 5px 0;
outline: none; /* remove the default outline */
transition: border-color 0.3s;
}
.description-field {
height: 100px;
resize: vertical; /* allows the user to resize vertically */
}
.section-label {
font-size: 16px;
color: #555;
margin-bottom: 10px;
}
.middle-column > div {
border-bottom: 1px solid grey;
position: relative;
padding: 10px;
}
.node-inputs, .node-consumers, .inputs-in-scope {
min-height: calc(100vh / 6);
display: flex;
flex-direction: column;
}
.node-output {
flex-grow: 1;
}
.name-field, .description-field {
background: transparent;
}
.name-field {
font-size: 16px;
font-weight: bold;
}
.description-field {
height: 100px;
resize: none;
}
.pill {
display: block;
background-color: #f0f0f0;
border-radius: 15px;
padding: 5px;
text-align: center;
margin: 3px 0;
}
.pallet-section {
margin-bottom: 10px;
}
.configuration-panel {
display: flex;
flex-direction: column;
}
thumbnail-element, output-element {
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
output-element {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="column pallet">
<div class="pallet-section">
<div >Inputs</div>
<div class="pill">Integer</div>
<div class="pill">Float</div>
</div>
<div class="pallet-section">
<div >Transforms</div>
<div class="pill">Sum</div>
<div class="pill">Difference</div>
<div class="pill">Multiplication</div>
<div class="pill">Division</div>
</div>
<div class="pallet-section">
<div >Links</div>
<div class="pill">f(x) - Sum</div>
<div class="pill">x - Integer</div>
<div class="pill">divisor - Integer</div>
<div class="pill">multiplier - Integer</div>
<div class="pill">Multiplication 1 - Mult</div>
<div class="pill">Division 1 - Div</div>
</div>
</div>
<div class="middle-column">
<div class="node-inputs section">
<p class="section-label">Node Inputs</p>
<div class="section-content">
<thumbnail-element name="Multiplication 1">45</thumbnail-element>
<thumbnail-element name="Division 1">5</thumbnail-element>
</div>
</div>
<div class="node-output section">
<p class="section-label">Node Output</p>
<div class="output-section-content">
<output-element name="f(x) - Sum">50</output-element>
</div>
</div>
<div class="node-consumers section">
<p class="section-label">Node Consumers</p>
</div>
<div class="inputs-in-scope section">
<p class="section-label">Inputs in Scope</p>
<div class="section-content">
<thumbnail-element name="x - Integer">15</thumbnail-element>
<thumbnail-element name="divisor - Integer">3</thumbnail-element>
<thumbnail-element name="multiplier - Integer">3</thumbnail-element>
</div>
</div>
</div>
<div class="column configuration-panel">
<p class="section-label">Configuration</p>
<label for="name-field">Name:</label>
<input class="name-field" id="name-field" type="text" value="f(x)" readonly>
<label for="description-field">Description:</label>
<textarea class="description-field" id="description-field"></textarea>
</div>
</div>
<!-- Thumbnail Web Component -->
<template id="thumbnail-template">
<div style="width: 100px; height: 100px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
<span style="position: absolute; top: 5px; left: 5px;"><slot name="name"></slot></span>
<span><slot></slot></span>
</div>
</template>
<script>
class ThumbnailElement extends HTMLElement {
constructor() {
super();
const template = document.getElementById('thumbnail-template').content;
const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
}
connectedCallback() {
const nameDiv = document.createElement('div');
nameDiv.style.position = 'absolute';
nameDiv.style.top = '5px';
nameDiv.style.left = '5px';
nameDiv.style.fontSize = '12px';
nameDiv.textContent = this.getAttribute('name');
this.appendChild(nameDiv);
}
}
customElements.define('thumbnail-element', ThumbnailElement);
</script>
<!-- Output Web Component -->
<template id="output-template">
<div style="width: 100%; height: 100%; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
<span style="position: absolute; top: 5px; left: 5px;"><slot name="name"></slot></span>
<span><slot></slot></span>
</div>
</template>
<script>
class OutputElement extends HTMLElement {
constructor() {
super();
const template = document.getElementById('output-template').content;
const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
}
connectedCallback() {
const nameDiv = document.createElement('div');
nameDiv.style.position = 'absolute';
nameDiv.style.top = '5px';
nameDiv.style.left = '5px';
nameDiv.style.fontSize = '12px';
nameDiv.textContent = this.getAttribute('name');
this.appendChild(nameDiv);
}
}
customElements.define('output-element', OutputElement);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment