jamie/ipam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

style: Changed buttons to use a sensible theme

Browse Source
This commit is contained in:
Jamie
2025-06-27 21:37:56 +00:00
parent 8873fc332b
commit b6fda05c20
15 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/add_device.html
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 max-w-md pt-20"> <div class="container py-8 max-w-md pt-20">
<div class="flex items-center mb-6 relative"> <div class="flex items-center mb-6 relative">
<a href="javascript:window.history.back()" class="absolute left-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="javascript:window.history.back()" class="absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full">Add Device</h1> <h1 class="text-3xl font-bold text-center w-full">Add Device</h1>
</div> </div>
<form action="/add_device" method="POST" class="flex flex-col space-y-4"> <form action="/add_device" method="POST" class="flex flex-col space-y-4">
@@ -24,7 +24,7 @@
<option value="{{ dtype[0] }}">{{ dtype[1] }}</option> <option value="{{ dtype[0] }}">{{ dtype[1] }}</option>
{% endfor %} {% endfor %}
</select> </select>
<button type="submit" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg">Add Device</button> <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Add Device</button>
</form> </form>
</div> </div>
</div> </div>
templates/add_rack.html
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 max-w-md pt-20"> <div class="container py-8 max-w-md pt-20">
<div class="flex items-center mb-6 relative"> <div class="flex items-center mb-6 relative">
<a href="/racks" class="absolute left-0 bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="/racks" class="absolute left-0 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full">Add Rack</h1> <h1 class="text-3xl font-bold text-center w-full">Add Rack</h1>
</div> </div>
<form action="/rack/add" method="POST" class="space-y-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-6"> <form action="/rack/add" method="POST" class="space-y-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-6">
@@ -29,7 +29,7 @@
<label for="height_u" class="block font-medium mb-1">Height (U)</label> <label for="height_u" class="block font-medium mb-1">Height (U)</label>
<input type="number" id="height_u" name="height_u" min="1" max="60" class="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border border-gray-600 w-full" required> <input type="number" id="height_u" name="height_u" min="1" max="60" class="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border border-gray-600 w-full" required>
</div> </div>
<button type="submit" class="bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg w-full">Add Rack</button> <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg w-full">Add Rack</button>
</form> </form>
</div> </div>
</div> </div>
templates/admin.html
+3 -3
View File
@@ -15,8 +15,8 @@
<div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-lg p-8"> <div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-lg p-8">
<h1 class="text-3xl font-bold mb-6 text-center">Admin</h1> <h1 class="text-3xl font-bold mb-6 text-center">Admin</h1>
<div class="flex justify-center gap-4 mb-6"> <div class="flex justify-center gap-4 mb-6">
<a href="/audit" class="bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg shadow text-center w-40">Audit Log</a> <a href="/audit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg shadow text-center w-40">Audit Log</a>
<a href="/users" class="bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg shadow text-center w-40">Users</a> <a href="/users" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg shadow text-center w-40">Users</a>
</div> </div>
<hr class="border-t-2 border-gray-600 rounded-lg mb-4"> <hr class="border-t-2 border-gray-600 rounded-lg mb-4">
<h1 class="text-2xl font-bold mb-6 text-center">Add Subnet</h1> <h1 class="text-2xl font-bold mb-6 text-center">Add Subnet</h1>
@@ -28,7 +28,7 @@
<input type="text" name="name" placeholder="Subnet Name" class="border p-3 rounded-lg bg-gray-300 dark:bg-gray-900 border-gray-600" required> <input type="text" name="name" placeholder="Subnet Name" class="border p-3 rounded-lg bg-gray-300 dark:bg-gray-900 border-gray-600" required>
<input type="text" name="cidr" id="cidr-input" placeholder="CIDR (e.g., 192.168.1.0/24)" class="border p-3 rounded-lg bg-gray-300 dark:bg-gray-900 border-gray-600" required> <input type="text" name="cidr" id="cidr-input" placeholder="CIDR (e.g., 192.168.1.0/24)" class="border p-3 rounded-lg bg-gray-300 dark:bg-gray-900 border-gray-600" required>
<input type="text" name="site" placeholder="Site/Location" class="border p-3 rounded-lg bg-gray-300 dark:bg-gray-900 border-gray-600" required> <input type="text" name="site" placeholder="Site/Location" class="border p-3 rounded-lg bg-gray-300 dark:bg-gray-900 border-gray-600" required>
<button type="submit" class="bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg">Add Subnet</button> <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Add Subnet</button>
<span id="cidr-error" class="text-red-500 text-sm hidden"></span> <span id="cidr-error" class="text-red-500 text-sm hidden"></span>
</div> </div>
</form> </form>
templates/audit.html
+1 -1
View File
@@ -38,7 +38,7 @@
<option value="{{ device[0] }}" {% if request.args.get('device_name') == device[0] %}selected{% endif %}>{{ device[0] }}</option> <option value="{{ device[0] }}" {% if request.args.get('device_name') == device[0] %}selected{% endif %}>{{ device[0] }}</option>
{% endfor %} {% endfor %}
</select> </select>
<button type="submit" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg flex items-center gap-2"> <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<span>Filter</span> <span>Filter</span>
</button> </button>
templates/device.html
+4 -4
View File
@@ -13,7 +13,7 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 w-auto min-w-[20rem] max-w-2xl pt-20"> <div class="container py-8 w-auto min-w-[20rem] max-w-2xl pt-20">
<div class="flex items-center mb-8 relative justify-between gap-4"> <div class="flex items-center mb-8 relative justify-between gap-4">
<a href="javascript:window.history.back()" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 flex items-center justify-center rounded-full w-11 h-11 shrink-0"><i class="fas fa-arrow-left"></i></a> <a href="javascript:window.history.back()" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center rounded-full w-11 h-11 shrink-0"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center flex-1 min-w-0 truncate">{{ device.name }}</h1> <h1 class="text-3xl font-bold text-center flex-1 min-w-0 truncate">{{ device.name }}</h1>
<form action="/update_device_type" method="POST" class="hidden md:inline ml-2"> <form action="/update_device_type" method="POST" class="hidden md:inline ml-2">
<input type="hidden" name="device_id" value="{{ device.id }}"> <input type="hidden" name="device_id" value="{{ device.id }}">
@@ -57,7 +57,7 @@
<select name="ip_id" id="ip-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border-gray-600 w-full" required> <select name="ip_id" id="ip-select" class="border p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border-gray-600 w-full" required>
<option value="" disabled selected>Select IP...</option> <option value="" disabled selected>Select IP...</option>
</select> </select>
<button type="submit" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg w-full">Add IP</button> <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg w-full">Add IP</button>
</div> </div>
</form> </form>
<div class="allocated-ips"> <div class="allocated-ips">
@@ -68,7 +68,7 @@
<span class="allocated-ip">{{ ip.ip }}</span> <span class="allocated-ip">{{ ip.ip }}</span>
<form action="/device/{{ device.id }}/delete_ip" method="POST" class="inline"> <form action="/device/{{ device.id }}/delete_ip" method="POST" class="inline">
<input type="hidden" name="device_ip_id" value="{{ ip.device_ip_id }}"> <input type="hidden" name="device_ip_id" value="{{ ip.device_ip_id }}">
<button type="submit" class="bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 text-white px-2 py-1 rounded-lg">Delete</button> <button type="submit" class="text-red-500 hover:text-red-600 py-1 mr-2 text-lg"><i class="fas fa-trash"></i></button>
</form> </form>
</li> </li>
{% endfor %} {% endfor %}
@@ -78,7 +78,7 @@
<input type="hidden" name="device_id" value="{{ device.id }}"> <input type="hidden" name="device_id" value="{{ device.id }}">
<label for="description" class="block mb-2 text-lg font-bold">Description</label> <label for="description" class="block mb-2 text-lg font-bold">Description</label>
<textarea id="description" name="description" rows="3" class="border p-2 rounded-lg bg-gray-200 dark:bg-gray-800 border-gray-600 w-full resize-y" placeholder="Enter device description...">{{ device.description or '' }}</textarea> <textarea id="description" name="description" rows="3" class="border p-2 rounded-lg bg-gray-200 dark:bg-gray-800 border-gray-600 w-full resize-y" placeholder="Enter device description...">{{ device.description or '' }}</textarea>
<button type="submit" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg w-full mt-2">Save Description</button> <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg w-full mt-2">Save Description</button>
</form> </form>
</div> </div>
</div> </div>
templates/device_type_stats.html
+1 -1
View File
@@ -13,7 +13,7 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 max-w-2xl pt-20"> <div class="container py-8 max-w-2xl pt-20">
<div class="flex items-center mb-6 relative"> <div class="flex items-center mb-6 relative">
<a href="/devices" class="hidden sm:flex absolute left-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="/devices" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full">Device Stats</h1> <h1 class="text-3xl font-bold text-center w-full">Device Stats</h1>
</div> </div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-6"> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-6">
templates/devices.html
+2 -2
View File
@@ -15,8 +15,8 @@
<div class="container py-8 max-w-4xl pt-20"> <div class="container py-8 max-w-4xl pt-20">
<h1 class="text-3xl font-bold mb-6 text-center">Device Manager</h1> <h1 class="text-3xl font-bold mb-6 text-center">Device Manager</h1>
<div class="flex flex-row justify-center gap-4 mb-6"> <div class="flex flex-row justify-center gap-4 mb-6">
<a href="/add_device" class="text-center bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg">Add New Device</a> <a href="/add_device" class="text-center bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Add New Device</a>
<a href="/device_type_stats" class="text-center bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg">View Device Stats</a> <a href="/device_type_stats" class="text-center bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">View Device Stats</a>
</div> </div>
<div class="mb-6"> <div class="mb-6">
<input type="text" id="search" placeholder="Search devices or IPs..." class="border p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border-gray-600 w-full"> <input type="text" id="search" placeholder="Search devices or IPs..." class="border p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border-gray-600 w-full">
templates/devices_by_type.html
+2 -2
View File
@@ -13,9 +13,9 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 max-w-3xl pt-20"> <div class="container py-8 max-w-3xl pt-20">
<div class="flex items-center mb-6 relative"> <div class="flex items-center mb-6 relative">
<a href="/device_type_stats" class="absolute left-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="/device_type_stats" class="absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full"> <h1 class="text-3xl font-bold text-center w-full">
<i class="fas {{ icon_class }} dark:text-blue-300"></i> {{ device_type }} Devices <i class="fas {{ icon_class }}"></i> {{ device_type }} Devices
</h1> </h1>
</div> </div>
{% for site, devices in site_devices.items() %} {% for site, devices in site_devices.items() %}
templates/dhcp.html
+3 -3
View File
@@ -13,7 +13,7 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 w-full sm:max-w-3/4 pt-20"> <div class="container py-8 w-full sm:max-w-3/4 pt-20">
<div class="flex items-center mb-6 relative"> <div class="flex items-center mb-6 relative">
<a href="/subnet/{{ subnet.id }}" class="absolute left-0 bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="/subnet/{{ subnet.id }}" class="absolute left-0 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full">DHCP Pool for {{ subnet.name }}</h1> <h1 class="text-3xl font-bold text-center w-full">DHCP Pool for {{ subnet.name }}</h1>
</div> </div>
{% if error %} {% if error %}
@@ -27,9 +27,9 @@
<label for="excluded_ips" class="font-medium">Exclude IPs (comma separated)</label> <label for="excluded_ips" class="font-medium">Exclude IPs (comma separated)</label>
<input type="text" id="excluded_ips" name="excluded_ips" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600" placeholder="e.g. 192.168.1.105,192.168.1.110" value="{{ dhcp_pool.excluded_ips if dhcp_pool and dhcp_pool.excluded_ips else '' }}"> <input type="text" id="excluded_ips" name="excluded_ips" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600" placeholder="e.g. 192.168.1.105,192.168.1.110" value="{{ dhcp_pool.excluded_ips if dhcp_pool and dhcp_pool.excluded_ips else '' }}">
<div class="flex gap-4 mt-4"> <div class="flex gap-4 mt-4">
<button type="submit" class="bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Save DHCP Pool</button> <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Save DHCP Pool</button>
{% if dhcp_pool %} {% if dhcp_pool %}
<button type="submit" name="remove" value="1" class="bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Remove DHCP Pool</button> <button type="submit" name="remove" value="1" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Remove DHCP Pool</button>
{% endif %} {% endif %}
</div> </div>
</form> </form>
templates/index.html
+1 -1
View File
@@ -29,7 +29,7 @@
<p class="text-gray-900 dark:text-blue-400 text-lg font-medium">{{ subnet.name }}</p> <p class="text-gray-900 dark:text-blue-400 text-lg font-medium">{{ subnet.name }}</p>
<p class="text-sm text-gray-800 dark:text-gray-400">{{ subnet.cidr }}</p> <p class="text-sm text-gray-800 dark:text-gray-400">{{ subnet.cidr }}</p>
</a> </a>
<button type="button" class="export-csv-btn ml-2 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 flex items-center justify-center rounded-full w-9 h-9" title="Export as CSV" data-subnet-id="{{ subnet.id }}"> <button type="button" class="export-csv-btn ml-2 bg-gray-200 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 flex items-center justify-center rounded-full w-9 h-9" title="Export as CSV" data-subnet-id="{{ subnet.id }}">
<i class="fas fa-file-csv"></i> <i class="fas fa-file-csv"></i>
</button> </button>
</li> </li>
templates/login.html
+1 -1
View File
@@ -16,7 +16,7 @@
<form action="/login" method="POST" class="flex flex-col space-y-4"> <form action="/login" method="POST" class="flex flex-col space-y-4">
<input type="email" name="email" placeholder="Email Address" class="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border border-gray-600" required> <input type="email" name="email" placeholder="Email Address" class="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border border-gray-600" required>
<input type="password" name="password" placeholder="Password" class="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border border-gray-600" required> <input type="password" name="password" placeholder="Password" class="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 border border-gray-600" required>
<button type="submit" class="bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 hover: px-4 py-2 rounded-lg">Login</button> <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Login</button>
</form> </form>
{% if error %} {% if error %}
<p class="text-red-500 text-center mt-4">{{ error }}</p> <p class="text-red-500 text-center mt-4">{{ error }}</p>
templates/rack.html
+11 -11
View File
@@ -13,15 +13,15 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 max-w-2xl pt-20"> <div class="container py-8 max-w-2xl pt-20">
<div class="flex flex-col items-center mb-6 relative min-h-[3.5rem]"> <div class="flex flex-col items-center mb-6 relative min-h-[3.5rem]">
<a href="/racks" class="hidden sm:flex absolute left-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="/racks" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full mb-0">{{ rack.name }}</h1> <h1 class="text-3xl font-bold text-center w-full mb-0">{{ rack.name }}</h1>
<span class="text-base mt-1">({{ rack.height_u }}U, {{ rack.site }})</span> <span class="text-base mt-1">({{ rack.height_u }}U, {{ rack.site }})</span>
<form action="/rack/{{ rack.id }}/delete" method="POST" onsubmit="return confirm('Delete this rack?');" class="hidden sm:flex absolute right-0 mr-14"> <form action="/rack/{{ rack.id }}/delete" method="POST" onsubmit="return confirm('Delete this rack?');" class="hidden sm:flex absolute right-0 mr-14">
<button type="submit" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 items-center justify-center rounded-full w-11 h-11 flex" title="Delete Rack"> <button type="submit" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 items-center justify-center rounded-full w-11 h-11 flex" title="Delete Rack">
<i class="fas fa-times fa-lg"></i> <i class="fas fa-times fa-lg"></i>
</button> </button>
</form> </form>
<button type="button" id="export-csv" class="hidden sm:flex absolute right-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 items-center justify-center rounded-full w-11 h-11 export-csv-btn" title="Export as CSV" data-rack-id="{{ rack.id }}"> <button type="button" id="export-csv" class="hidden sm:flex absolute right-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 items-center justify-center rounded-full w-11 h-11 export-csv-btn" title="Export as CSV" data-rack-id="{{ rack.id }}">
<i class="fas fa-file-csv fa-lg"></i> <i class="fas fa-file-csv fa-lg"></i>
</button> </button>
<script> <script>
@@ -37,12 +37,12 @@
</div> </div>
<div class="flex flex-col gap-4 mb-6 items-stretch"> <div class="flex flex-col gap-4 mb-6 items-stretch">
<div class="flex gap-4 w-full justify-center"> <div class="flex gap-4 w-full justify-center">
<a href="?side=front" id="front-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 {% if current_side == 'front' %}ring-2 ring-gray-400{% endif %}">Front</a> <a href="?side=front" id="front-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 {% if current_side == 'front' %}ring-2 ring-gray-400{% endif %}">Front</a>
<a href="?side=back" id="back-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 {% if current_side == 'back' %}ring-2 ring-gray-400{% endif %}">Back</a> <a href="?side=back" id="back-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 {% if current_side == 'back' %}ring-2 ring-gray-400{% endif %}">Back</a>
</div> </div>
<div class="flex flex-wrap gap-4 w-full justify-center"> <div class="flex flex-wrap gap-4 w-full justify-center">
<button id="show-add-device-form" type="button" class="flex-1 min-w-[12rem] max-w-[16rem] bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg flex-shrink-0 whitespace-nowrap"> <i class="fas fa-plus"></i> Add Device</button> <button id="show-add-device-form" type="button" class="flex-1 min-w-[12rem] max-w-[16rem] bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg flex-shrink-0 whitespace-nowrap"> <i class="fas fa-plus"></i> Add Device</button>
<button id="show-nonnet-form" type="button" class="flex-[1.5_1.5_0%] min-w-[16rem] max-w-[28rem] bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg flex-shrink-0 whitespace-nowrap"> <i class="fas fa-plus"></i> Add Non-Networked Device</button> <button id="show-nonnet-form" type="button" class="flex-[1.5_1.5_0%] min-w-[16rem] max-w-[28rem] bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg flex-shrink-0 whitespace-nowrap"> <i class="fas fa-plus"></i> Add Non-Networked Device</button>
</div> </div>
</div> </div>
<form id="add-device-form" action="/rack/{{ rack.id }}/add_device" method="POST" class="hidden mb-6 bg-gray-200 dark:bg-gray-800 rounded-lg p-4"> <form id="add-device-form" action="/rack/{{ rack.id }}/add_device" method="POST" class="hidden mb-6 bg-gray-200 dark:bg-gray-800 rounded-lg p-4">
@@ -60,8 +60,8 @@
<option value="front">Front</option> <option value="front">Front</option>
<option value="back">Back</option> <option value="back">Back</option>
</select> </select>
<button type="submit" class="w-full md:w-auto bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Add Device</button> <button type="submit" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Add Device</button>
<button id="hide-add-device-form" type="button" class="w-full md:w-auto bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg md:ml-0.5 mt-2 md:mt-0 flex-shrink-0"><i class="fas fa-times"></i></button> <button id="hide-add-device-form" type="button" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg md:ml-0.5 mt-2 md:mt-0 flex-shrink-0"><i class="fas fa-times"></i></button>
</div> </div>
<div class="text-xs dark:text-gray-400">To add a multi-U device, repeat for each U position.</div> <div class="text-xs dark:text-gray-400">To add a multi-U device, repeat for each U position.</div>
</form> </form>
@@ -73,8 +73,8 @@
<option value="front">Front</option> <option value="front">Front</option>
<option value="back">Back</option> <option value="back">Back</option>
</select> </select>
<button type="submit" class="w-full md:w-auto bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Add</button> <button type="submit" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg">Add</button>
<button id="hide-nonnet-form" type="button" class="w-full md:w-auto bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg md:ml-0.5 mt-2 md:mt-0 flex-shrink-0"><i class="fas fa-times"></i></button> <button id="hide-nonnet-form" type="button" class="w-full md:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg md:ml-0.5 mt-2 md:mt-0 flex-shrink-0"><i class="fas fa-times"></i></button>
</div> </div>
<div class="text-xs dark:text-gray-400 mt-2">Add a non-networked device.</div> <div class="text-xs dark:text-gray-400 mt-2">Add a non-networked device.</div>
</form> </form>
templates/racks.html
+1 -1
View File
@@ -14,7 +14,7 @@
<div class="container py-8 max-w-md pt-20"> <div class="container py-8 max-w-md pt-20">
<h1 class="text-3xl font-bold mb-8 text-center">Racks</h1> <h1 class="text-3xl font-bold mb-8 text-center">Racks</h1>
<div class="flex justify-center mb-6"> <div class="flex justify-center mb-6">
<a href="/rack/add" class="bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg inline-block"><i class="fas fa-plus"></i> Add Rack</a> <a href="/rack/add" class="bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg inline-block"><i class="fas fa-plus"></i> Add Rack</a>
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
{% for rack in racks %} {% for rack in racks %}
templates/subnet.html
+4 -4
View File
@@ -14,18 +14,18 @@
<div class="flex-1 flex items-center justify-center mx-4"> <div class="flex-1 flex items-center justify-center mx-4">
<div class="container py-8 w-full sm:max-w-3/4 pt-20"> <div class="container py-8 w-full sm:max-w-3/4 pt-20">
<div class="flex items-center mb-6 relative"> <div class="flex items-center mb-6 relative">
<a href="javascript:window.history.back()" class="hidden sm:flex absolute left-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a> <a href="javascript:window.history.back()" class="hidden sm:flex absolute left-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 items-center justify-center rounded-full w-11 h-11"><i class="fas fa-arrow-left"></i></a>
<h1 class="text-3xl font-bold text-center w-full">{{ subnet.name }} ({{ subnet.cidr }})</h1> <h1 class="text-3xl font-bold text-center w-full">{{ subnet.name }} ({{ subnet.cidr }})</h1>
<button type="button" id="export-csv" class="hidden sm:flex absolute right-0 bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 items-center justify-center rounded-full w-11 h-11 export-csv-btn" title="Export as CSV" data-subnet-id="{{ subnet.id }}"> <button type="button" id="export-csv" class="hidden sm:flex absolute right-0 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 items-center justify-center rounded-full w-11 h-11 export-csv-btn" title="Export as CSV" data-subnet-id="{{ subnet.id }}">
<i class="fas fa-file-csv fa-lg"></i> <i class="fas fa-file-csv fa-lg"></i>
</button> </button>
</div> </div>
<div class="flex justify-center mb-4"> <div class="flex justify-center mb-4">
<a href="/subnet/{{ subnet.id }}/dhcp" class="hidden sm:flex bg-gradient-to-r bg-gray-200 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg shadow items-center gap-2"> <a href="/subnet/{{ subnet.id }}/dhcp" class="hidden sm:flex bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg shadow items-center gap-2">
<i class="fas fa-network-wired"></i> Define DHCP Pool <i class="fas fa-network-wired"></i> Define DHCP Pool
</a> </a>
</div> </div>
<button id="toggle-desc" class="sm:hidden bg-gradient-to-r bg-gray-300 hover:bg-gray-400 dark:from-gray-500 dark:to-gray-700 hover:dark:from-gray-700 hover:dark:to-gray-500 px-4 py-2 rounded-lg mb-4 w-full">Show Descriptions</button> <button id="toggle-desc" class="sm:hidden bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg mb-4 w-full">Show Descriptions</button>
<form action="" method="POST"> <form action="" method="POST">
<table class="table-auto w-full mb-6"> <table class="table-auto w-full mb-6">
<thead> <thead>
templates/users.html
+2 -2
View File
@@ -19,7 +19,7 @@
<input type="text" name="name" placeholder="Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-full" required> <input type="text" name="name" placeholder="Name" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-full" required>
<input type="email" name="email" placeholder="Email Address" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-full" required> <input type="email" name="email" placeholder="Email Address" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-full" required>
<input type="password" name="password" placeholder="Password" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-full" required> <input type="password" name="password" placeholder="Password" class="border p-3 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-full" required>
<button type="submit" class="bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg max-w-md w-full sm:w-auto">Add User</button> <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded-lg max-w-md w-full sm:w-auto">Add User</button>
</div> </div>
</form> </form>
<h2 class="text-xl font-bold mb-4">Existing Users</h2> <h2 class="text-xl font-bold mb-4">Existing Users</h2>
@@ -32,7 +32,7 @@
<input type="text" name="name" value="{{ user[1] }}" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-52"> <input type="text" name="name" value="{{ user[1] }}" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-52">
<input type="email" name="email" value="{{ user[2] }}" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-80"> <input type="email" name="email" value="{{ user[2] }}" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-80">
<input type="password" name="password" placeholder="New Password (leave blank to keep)" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-80"> <input type="password" name="password" placeholder="New Password (leave blank to keep)" class="border p-2 rounded-lg bg-gray-300 text-gray-900 dark:bg-gray-900 dark:text-gray-100 border-gray-600 w-80">
<button type="submit" class="bg-gradient-to-r from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-3 py-1 rounded-lg">Save</button> <button type="submit" class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 px-3 py-1 rounded-lg">Save</button>
</form> </form>
<form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');"> <form action="/users" method="POST" onsubmit="return confirm('Are you sure you want to delete this user?');">
<input type="hidden" name="action" value="delete"> <input type="hidden" name="action" value="delete">