simplify buttons in config/index,

include form.css in login
This commit is contained in:
Arthur Lu 2024-08-12 17:11:44 +00:00
parent 58007a38b2
commit 7ec72a7443
3 changed files with 19 additions and 6 deletions

View File

@ -40,22 +40,34 @@
<legend>Disks</legend>
<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
<div class="w3-container w3-center">
<svg id="disk-add" class="clickable" role="img" aria-label="Add New Disk"><use xlink:href="images/actions/disk/add-disk.svg#symb"></use></svg>
<svg id="cd-add" class="clickable none" role="img" aria-label="Add New CDROM"><use xlink:href="images/actions/disk/add-cd.svg#symb"></use></svg>
<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
<span class="large" style="margin: 0;">Add Disk</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
</button>
<button type="button" id="cd-add" class="w3-button none" aria-label="Add New CD">
<span class="large" style="margin: 0;">Add CD</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
</button>
</div>
</fieldset>
<fieldset class="w3-card w3-padding">
<legend>Network Interfaces</legend>
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
<div class="w3-container w3-center">
<svg id="network-add" class="clickable" role="img" aria-label="Add New Network Interface"><use xlink:href="images/actions/network/add.svg#symb"></use></svg>
<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
<span class="large" style="margin: 0;">Add Network</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
</button>
</div>
</fieldset>
<fieldset class="w3-card w3-padding none" id="devices-card">
<legend>PCIe Devices</legend>
<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div>
<div class="w3-container w3-center">
<svg id="device-add" class="clickable" role="img" aria-label="Add New PCIe Device"><use xlink:href="images/actions/device/add.svg#symb"></use></svg>
<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
<span class="large" style="margin: 0;">Add Device</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
</button>
</div>
</fieldset>
<fieldset class="w3-card w3-padding none" id="boot-card">

View File

@ -50,12 +50,12 @@
<div class="w3-card w3-padding">
<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
<form id="vm-search" role="search" class="flex row nowrap">
<svg role="img" aria-label="Search Instances"><use xlink:href="images/static/search.svg#symb"></use></svg>
<svg role="img" aria-label="Search Instances"><use href="images/static/search.svg#symb"></use></svg>
<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
</form>
<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
<span class="large" style="margin: 0;">Create Instance</span>
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Instance"><use xlink:href="images/actions/instance/add.svg#symb"></use></svg>
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Instance"><use href="images/actions/instance/add.svg#symb"></use></svg>
</button>
</div>
<div>

View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
<script src="scripts/login.js" type="module"></script>
</head>
<body>