index.html fileHTML markup (with CSS styling) should produce a page with 4 parts:
article and aside should be grouped together in a main, each one wrapped in a section. With vertical splitter between them, splitting the space 50/50.
The header should have 4 elements (left to right):
Search input should take up most of the width, leave some space for the title to take.
If page width is too small, elements should wrap to the next line, but first pair should stay together, as well as the second pair. Also second pair should be at the top in that case.
header should also include a hidden invisible datalist of the node names for the search input.
Normally article should present one node at a time, that node considered “current”. There should be a heading with the node name and a description below. Floating to the right there should be a vertical group of three buttons: “Edit Node”, “Delete Node” and “Add Link”.
Below the description there should be a list of links to other nodes. Each link should be represented by a button (label with hidden radio button) with the node name prefixed with direction (incoming/outgoing/two-way) shown with arrows. Arrows should be added based on the corresponding class (incoming, outgoing, two-way) Buttons should be placed next to each other, but should wrap to the next line if there is not enough space. They should be aligned to the right. If there are no linked nodes at the moment there should be a paragraph with a message “No links to other nodes yet”. List/paragraph display mode should be controlled with a hidden invisible checkbox before it.
Alternatively (if no node is currently selected) there should be a vertical list of nodes represented with list items holding a header with the node name, followed by a description. Each node item should have a vertically stacked block floating to the right with a “Go to Node” button and counters for incoming/outgoing links shown with arrows next to the numbers.
Lastly (if there’s no nodes at all) article should show a paragraph with a message “No nodes in the graph. Add some using the ‘Add Node’ button in the top left corner”.
Article display mode should be controlled with the hidden invisible radio buttons before it, and there should be three modes: current, many, message.
Normally aside should present a list of all links to and from the current node. Each link should be represented by a list item with a heading with the linked node name (prefixed with direction shown with an arrow based on the class incoming or outgoing), a link description and a vertically stacked button group floating to the right with “Edit Link” and “Delete Link” buttons.
Heading, paragraph and button group should be wrapped in a summary element with details showing the linked node description paragraph if expanded. There also should be a “Go to Node” button floating to the left of that paragraph.
Alternatively (if no node is currently selected) there should be a list of all the links. Each link should be represented by a list item with a heading with “From” node name, an arrow right and “To” node name. Every link item should have outgoing class. There should also be a paragraph with the link description below with a button “Go to Link” floating to the right of that paragraph.
Alternatively (if there’s no links to show) aside should show a paragraph with a message “No links” or “No links from/to the current node yet. Add some with the ‘Add Link’ button on the left”. The last one should appear is a node is currently selected and there is at least one other node existing in the graph. Which one is to be decided by the hidden invisible checkbox before it.
Aside display mode should be controlled with the hidden invisible radio buttons before it, and there should be three modes: related, unrelated, message.
There should be dialogs for:
All dialogs should be positioned in the middle of the page, have width set as minimum of 1000px and 85vw, have height set as 70vh (with exceptions: splash screen, delete dialogs, and informer should have height max-content), be scrollable if needed, have a heading with the dialog title, buttons grouped horizontally at the bottom, and have a gray semi-transparent bluring backdrop.
Dialog should have a title “New Node” and a form with the following fields:
and buttons “Add” and “Cancel” (class “close”).
Dialog should have a title “New Link” and a form with the following fields:
and buttons “Add” and “Cancel” (class “close”).
There also should be a switch direction button positioned between the inputs, with two-way arrows.
Dialog should have a title “Edit Node” and a form with the following fields:
and buttons “Save” and “Cancel” (class “close”).
Dialog should have a title “Edit Link” and a form with the following fields:
and buttons “Save” and “Cancel” (class “close”).
There also should be a switch direction button positioned between the inputs, with two-way arrows.
Dialog should have a title “Delete Node” and a form with a paragraph warning about the non-recoverable deletion of the node and all of its links. Node name and the number of links should be shown with output elements in bold.
Buttons should be “Delete” and “Cancel” (class “close”).
Dialog should have a title “Delete Link” and a form with a paragraph warning about the non-recoverable deletion of the link. From-node name, and To-node name should be shown with output element in bold.
Buttons should be “Delete” and “Cancel” (class “close”).
Dialog should have a title and a paragraph (both will be provided elsewhere).
Single “OK” button (class “close”).
Dialog should have a vertical list of buttons with the menu items:
“About”
Single “Cancel” button (class “close”).
Dialog should have a title “Stats” and a table with two columns:
Stat rows should be:
Single “OK” button (class “close”).
Splash screen should have a logo of GRAPH app, version numbers, and copyright notice.
Single “Continue” button (class “close”).