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

style: Added hover to buttons

Browse Source
This commit is contained in:
Jamie
2025-06-10 21:08:01 +00:00
parent c433316742
commit 34b170a9d5
14 changed files with 41 additions and 38 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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Add Device</button> <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>
</form> </form>
</div> </div>
</div> </div>
templates/add_rack.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-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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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">
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 from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg shadow text-center w-40">Audit Log</a> <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="/users" 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 shadow text-center w-40">Users</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>
</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 from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Add Subnet</button> <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>
<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
+7 -4
View File
@@ -38,7 +38,10 @@
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Filter</button> <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">
<i class="fas fa-search"></i>
<span>Filter</span>
</button>
</form> </form>
<table class="w-full table-auto bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden"> <table class="w-full table-auto bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden">
<thead> <thead>
@@ -67,7 +70,7 @@
{% if page > 1 %} {% if page > 1 %}
{% set prev_args = query_args.copy() %} {% set prev_args = query_args.copy() %}
{% set _ = prev_args.update({'page': page-1}) %} {% set _ = prev_args.update({'page': page-1}) %}
<a href="{{ url_for('audit', **prev_args) }}" class="px-3 py-1 rounded bg-gray-400 dark:bg-gray-700 flex items-center gap-2"> <a href="{{ url_for('audit', **prev_args) }}" class="px-3 py-1 rounded bg-gray-400 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center gap-2">
<i class="fa fa-angle-left"></i> <i class="fa fa-angle-left"></i>
<span class="hidden sm:inline">Prev</span> <span class="hidden sm:inline">Prev</span>
</a> </a>
@@ -75,12 +78,12 @@
{% for p in range(1, total_pages+1) %} {% for p in range(1, total_pages+1) %}
{% set page_args = query_args.copy() %} {% set page_args = query_args.copy() %}
{% set _ = page_args.update({'page': p}) %} {% set _ = page_args.update({'page': p}) %}
<a href="{{ url_for('audit', **page_args) }}" class="px-3 py-1 rounded {{ 'bg-gray-200 dark:bg-gray-500' if p == page else 'bg-gray-400 dark:bg-gray-700' }}">{{ p }}</a> <a href="{{ url_for('audit', **page_args) }}" class="px-3 py-1 rounded {{ 'bg-gray-200 dark:bg-gray-500' if p == page else 'bg-gray-400 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600' }}">{{ p }}</a>
{% endfor %} {% endfor %}
{% if page < total_pages %} {% if page < total_pages %}
{% set next_args = query_args.copy() %} {% set next_args = query_args.copy() %}
{% set _ = next_args.update({'page': page+1}) %} {% set _ = next_args.update({'page': page+1}) %}
<a href="{{ url_for('audit', **next_args) }}" class="px-3 py-1 rounded bg-gray-400 dark:bg-gray-700 flex items-center gap-2"> <a href="{{ url_for('audit', **next_args) }}" class="px-3 py-1 rounded bg-gray-400 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 flex items-center gap-2">
<span class="hidden sm:inline">Next</span> <span class="hidden sm:inline">Next</span>
<i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i>
</a> </a>
templates/device.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-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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg w-full">Add IP</button> <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>
</div> </div>
</form> </form>
<div class="allocated-ips"> <div class="allocated-ips">
@@ -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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg w-full mt-2">Save Description</button> <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>
</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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Add New Device</a> <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="/device_type_stats" class="text-center bg-gradient-to-r from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">View Device Stats</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>
</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
+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-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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 }} dark:text-blue-300"></i> {{ device_type }} Devices
</h1> </h1>
templates/dhcp.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 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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 %}
templates/index.html
+6 -6
View File
@@ -18,18 +18,18 @@
<li class="site-group bg-gray-200 dark:bg-gray-800 rounded-xl shadow-lg"> <li class="site-group bg-gray-200 dark:bg-gray-800 rounded-xl shadow-lg">
<div class="flex flex-row items-center justify-between p-4 cursor-pointer site-header"> <div class="flex flex-row items-center justify-between p-4 cursor-pointer site-header">
<h2 class="text-xl font-bold mb-0 text-gray-900 dark:text-blue-300">{{ site }}</h2> <h2 class="text-xl font-bold mb-0 text-gray-900 dark:text-blue-300">{{ site }}</h2>
<button type="button" class="expand-btn text-gray-400 ml-2 flex items-center" aria-label="Expand site"> <button type="button" class="expand-btn ml-2 flex items-center" aria-label="Expand site">
<i class="fas fa-chevron-down"></i> <i class="fas fa-chevron-down"></i>
</button> </button>
</div> </div>
<ul class="subnet-list hidden space-y-4 px-2 pb-4"> <ul class="subnet-list hidden space-y-4 px-2 pb-4">
{% for subnet in subnets %} {% for subnet in subnets %}
<li class="p-4 bg-gray-300 dark:bg-gray-900 rounded-lg shadow-md flex items-center justify-between"> <li class="p-4 bg-gray-300 hover:bg-gray-100 dark:bg-gray-900 hover:dark:bg-gray-700 rounded-lg shadow-md flex items-center justify-between">
<div> <a href="/subnet/{{ subnet.id }}">
<a href="/subnet/{{ subnet.id }}" class="text-gray-900 hover:text-gray-700 dark:text-blue-400 dark:hover:text-blue-300 text-lg font-medium">{{ subnet.name }}</a> <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>
</div> </a>
<button type="button" class="export-csv-btn ml-2 bg-gradient-to-r from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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 }}">
<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 from-gray-300 to-gray-300 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg">Login</button> <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>
</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
+7 -7
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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 items-center justify-center rounded-full w-11 h-11 flex" title="Delete Rack"> <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">
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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 }}">
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 {% 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-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=back" id="back-btn" class="rack-side-btn px-4 py-2 rounded-lg font-semibold bg-gradient-to-r from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 {% 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-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>
</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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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-nonnet-form" type="button" class="flex-[1.5_1.5_0%] min-w-[16rem] max-w-[28rem] bg-gradient-to-r from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
</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">
templates/racks.html
+2 -2
View File
@@ -14,11 +14,11 @@
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg inline-block"><i class="fas fa-plus"></i> Add Rack</a> <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>
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
{% for rack in racks %} {% for rack in racks %}
<a href="/rack/{{ rack.id }}" class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md p-4 flex items-start justify-between hover:ring-2 hover:ring-gray-400 transition group"> <a href="/rack/{{ rack.id }}" class="bg-gray-200 hover:bg-gray-100 dark:bg-gray-800 hover:dark:bg-gray-700 rounded-lg shadow-md p-4 flex items-start justify-between hover:ring-2 hover:ring-gray-400 transition group">
<div> <div>
<h2 class="text-xl font-bold dark:text-blue-200 mb-1">{{ rack.name }}</h2> <h2 class="text-xl font-bold dark:text-blue-200 mb-1">{{ rack.name }}</h2>
<div class="dark:text-gray-400">Site: {{ rack.site }} | Height: {{ rack.height_u }}U</div> <div class="dark:text-gray-400">Site: {{ rack.site }} | Height: {{ rack.height_u }}U</div>
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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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>
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 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-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 }}">
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg shadow items-center gap-2"> <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">
<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 from-gray-200 to-gray-200 dark:from-gray-500 dark:to-gray-700 px-4 py-2 rounded-lg mb-4 w-full">Show Descriptions</button> <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>
<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>