html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Farm Network Documentation</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”>
<style>
:root {
–primary: #1a3a5f;
–secondary: #2c5282;
–accent: #38b2ac;
–light: #f0f7ff;
–dark: #0d1b2a;
–success: #48bb78;
–warning: #ed8936;
–danger: #e53e3e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: var(–light);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
padding: 30px 20px;
background: rgba(13, 27, 42, 0.8);
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(56, 178, 172, 0.3);
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
color: var(–accent);
text-shadow: 0 0 10px rgba(56, 178, 172, 0.4);
}
.subtitle {
font-size: 1.2rem;
color: #a0aec0;
max-width: 800px;
margin: 0 auto 25px;
line-height: 1.6;
}
.timestamp {
background: rgba(26, 58, 95, 0.6);
display: inline-block;
padding: 8px 20px;
border-radius: 30px;
font-size: 0.9rem;
color: #cbd5e0;
}
.content-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 30px;
}
.diagram-container {
background: rgba(13, 27, 42, 0.8);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(56, 178, 172, 0.3);
position: relative;
overflow: hidden;
}
.diagram-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(56, 178, 172, 0.3);
}
.diagram-title h2 {
font-size: 1.8rem;
color: var(–accent);
}
.legend {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
}
.color-box {
width: 15px;
height: 15px;
border-radius: 3px;
}
.router { background: #38b2ac; }
.bridge { background: #ed8936; }
.lan { background: #48bb78; }
.wan { background: #4299e1; }
.network-diagram {
position: relative;
height: 600px;
background: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” width=”100″ height=”100″ viewBox=”0 0 100 100″><rect width=”100″ height=”100″ fill=”%231a3a5f”/><path d=”M0 0L100 100M100 0L0 100″ stroke=”%232c5282″ stroke-width=”0.5″/></svg>’);
background-size: 100px;
border-radius: 10px;
overflow: hidden;
}
.device {
position: absolute;
width: 180px;
height: 180px;
background: rgba(26, 58, 95, 0.9);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid var(–secondary);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
z-index: 10;
overflow: hidden;
}
.device:hover {
transform: translateY(-5px);
border-color: var(–accent);
box-shadow: 0 8px 25px rgba(56, 178, 172, 0.4);
}
.device::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(–accent);
}
.device-icon {
font-size: 3rem;
margin-bottom: 15px;
color: var(–accent);
}
.device h3 {
font-size: 1.2rem;
margin-bottom: 8px;
color: white;
}
.device p {
font-size: 0.9rem;
color: #cbd5e0;
}
.connection {
position: absolute;
background: rgba(56, 178, 172, 0.5);
z-index: 5;
}
.wireless {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: var(–accent);
font-size: 1.5rem;
z-index: 6;
}
.tp-link { top: 50px; left: 100px; }
.house-rv { top: 50px; left: 350px; }
.house-eoco { top: 50px; left: 600px; }
.barn-eoco { top: 50px; left: 900px; }
.barn-rv { top: 50px; left: 1150px; }
.conn-1 { top: 270px; left: 240px; width: 110px; height: 5px; }
.conn-2 { top: 270px; left: 490px; width: 110px; height: 5px; }
.wireless-conn { top: 125px; left: 750px; width: 200px; }
.conn-3 { top: 270px; left: 790px; width: 110px; height: 5px; }
.conn-4 { top: 270px; left: 1040px; width: 110px; height: 5px; }
.ip-table-container {
background: rgba(13, 27, 42, 0.8);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(56, 178, 172, 0.3);
height: fit-content;
}
.ip-table-title {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(56, 178, 172, 0.3);
}
.ip-table-title h2 {
font-size: 1.8rem;
color: var(–accent);
}
table {
width: 100%;
border-collapse: collapse;
background: rgba(26, 58, 95, 0.5);
border-radius: 10px;
overflow: hidden;
}
th {
background: var(–secondary);
padding: 15px;
text-align: left;
font-weight: 600;
color: var(–accent);
}
td {
padding: 12px 15px;
border-bottom: 1px solid rgba(56, 178, 172, 0.2);
}
tr:last-child td {
border-bottom: none;
}
tr:hover {
background: rgba(56, 178, 172, 0.1);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(13, 27, 42, 0.95);
z-index: 1000;
overflow-y: auto;
padding: 20px;
}
.modal-content {
background: linear-gradient(145deg, #0d1b2a, #1a3a5f);
max-width: 1000px;
margin: 40px auto;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(56, 178, 172, 0.5);
}
.modal-header {
background: rgba(26, 58, 95, 0.8);
padding: 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(56, 178, 172, 0.3);
}
.modal-header h2 {
font-size: 1.8rem;
color: var(–accent);
display: flex;
align-items: center;
gap: 15px;
}
.close-modal {
background: transparent;
border: none;
color: #cbd5e0;
font-size: 1.8rem;
cursor: pointer;
transition: color 0.3s;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.close-modal:hover {
color: var(–accent);
background: rgba(56, 178, 172, 0.1);
}
.modal-body {
padding: 30px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.config-section {
margin-bottom: 30px;
}
.config-section h3 {
font-size: 1.4rem;
color: var(–accent);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(56, 178, 172, 0.3);
display: flex;
align-items: center;
gap: 10px;
}
.config-section h3 i {
font-size: 1.2rem;
}
.config-box {
background: rgba(13, 27, 42, 0.6);
border-radius: 10px;
padding: 20px;
border: 1px solid rgba(56, 178, 172, 0.2);
font-family: ‘Courier New’, monospace;
font-size: 0.95rem;
line-height: 1.6;
color: #cbd5e0;
overflow-x: auto;
white-space: pre-wrap;
}
.config-box .highlight {
color: var(–accent);
font-weight: bold;
}
.explanation {
background: rgba(26, 58, 95, 0.4);
border-radius: 10px;
padding: 20px;
border-left: 4px solid var(–accent);
}
.explanation p {
margin-bottom: 15px;
line-height: 1.6;
}
.login-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(–secondary);
color: white;
padding: 12px 25px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
margin-top: 15px;
}
.login-btn:hover {
background: var(–accent);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(56, 178, 172, 0.4);
}
.footer {
text-align: center;
padding: 30px 20px;
color: #a0aec0;
font-size: 0.9rem;
border-top: 1px solid rgba(56, 178, 172, 0.2);
margin-top: 40px;
}
@media (max-width: 1200px) {
.content-grid {
grid-template-columns: 1fr;
}
.network-diagram {
height: 500px;
transform: scale(0.9);
transform-origin: top left;
}
.tp-link { top: 50px; left: 50px; }
.house-rv { top: 50px; left: 250px; }
.house-eoco { top: 50px; left: 450px; }
.barn-eoco { top: 50px; left: 650px; }
.barn-rv { top: 50px; left: 850px; }
.conn-1 { top: 270px; left: 150px; width: 100px; }
.conn-2 { top: 270px; left: 350px; width: 100px; }
.wireless-conn { top: 125px; left: 550px; width: 100px; }
.conn-3 { top: 270px; left: 550px; width: 100px; }
.conn-4 { top: 270px; left: 750px; width: 100px; }
}
@media (max-width: 768px) {
.modal-body {
grid-template-columns: 1fr;
}
.network-diagram {
transform: scale(0.7);
height: 400px;
}
.tp-link { top: 30px; left: 20px; }
.house-rv { top: 30px; left: 170px; }
.house-eoco { top: 30px; left: 320px; }
.barn-eoco { top: 30px; left: 470px; }
.barn-rv { top: 30px; left: 620px; }
.conn-1 { top: 210px; left: 110px; width: 60px; }
.conn-2 { top: 210px; left: 245px; width: 75px; }
.wireless-conn { top: 100px; left: 395px; width: 75px; }
.conn-3 { top: 210px; left: 395px; width: 75px; }
.conn-4 { top: 210px; left: 545px; width: 75px; }
}
</style>
</head>
<body>
<div class=”container”>
<header>
<h1><i class=”fas fa-network-wired”></i> Farm Network Documentation</h1>
<p class=”subtitle”>Complete configuration for the farm network including TP-Link router, Cisco RV320 devices, and EOCO CPE520 wireless bridge. Click on any device in the diagram for detailed configuration information and direct access links.</p>
<div class=”timestamp”>Documentation Updated: July 10, 2023</div>
</header>
<div class=”content-grid”>
<div class=”diagram-container”>
<div class=”diagram-title”>
<h2>Network Diagram</h2>
<div class=”legend”>
<div class=”legend-item”>
<div class=”color-box router”></div>
<span>Router</span>
</div>
<div class=”legend-item”>
<div class=”color-box bridge”></div>
<span>Wireless Bridge</span>
</div>
<div class=”legend-item”>
<div class=”color-box lan”></div>
<span>LAN Network</span>
</div>
<div class=”legend-item”>
<div class=”color-box wan”></div>
<span>WAN Connection</span>
</div>
</div>
</div>
<div class=”network-diagram”>
<!– Devices –>
<div class=”device tp-link” onclick=”openModal(‘tp-link-modal’)”>
<div class=”device-icon”><i class=”fas fa-wifi”></i></div>
<h3>TP-Link Router</h3>
<p>Main House Router</p>
<p>192.168.0.1</p>
</div>
<div class=”device house-rv” onclick=”openModal(‘house-rv-modal’)”>
<div class=”device-icon”><i class=”fas fa-router”></i></div>
<h3>House RV320</h3>
<p>Cisco Router</p>
<p>192.168.0.254</p>
</div>
<div class=”device house-eoco” onclick=”openModal(‘house-eoco-modal’)”>
<div class=”device-icon”><i class=”fas fa-signal”></i></div>
<h3>House EOCO CPE520</h3>
<p>Wireless Bridge</p>
<p>172.16.0.3</p>
</div>
<div class=”device barn-eoco” onclick=”openModal(‘barn-eoco-modal’)”>
<div class=”device-icon”><i class=”fas fa-signal”></i></div>
<h3>Barn EOCO CPE520</h3>
<p>Wireless Bridge</p>
<p>172.16.0.4</p>
</div>
<div class=”device barn-rv” onclick=”openModal(‘barn-rv-modal’)”>
<div class=”device-icon”><i class=”fas fa-router”></i></div>
<h3>Barn RV320</h3>
<p>Cisco Router</p>
<p>172.16.0.2</p>
</div>
<!– Connections –>
<div class=”connection conn-1″></div>
<div class=”connection conn-2″></div>
<div class=”wireless wireless-conn”><i class=”fas fa-wifi”></i></div>
<div class=”connection conn-3″></div>
<div class=”connection conn-4″></div>
</div>
</div>
<div class=”ip-table-container”>
<div class=”ip-table-title”>
<h2>IP Address Allocation</h2>
</div>
<table>
<thead>
<tr>
<th>Network Segment</th>
<th>Subnet</th>
<th>Gateway</th>
<th>Device Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>House Main LAN</td>
<td>192.168.0.0/24</td>
<td>192.168.0.1</td>
<td>150 devices</td>
</tr>
<tr>
<td>Barn LAN</td>
<td>192.168.1.0/25</td>
<td>192.168.1.1</td>
<td>50 devices</td>
</tr>
<tr>
<td>P2P Bridge</td>
<td>172.16.0.0/28</td>
<td>N/A</td>
<td>4 devices</td>
</tr>
</tbody>
</table>
<div style=”margin-top: 30px;”>
<h3 style=”color: var(–accent); margin-bottom: 15px;”>Key Address Assignments</h3>
<table>
<thead>
<tr>
<th>Device</th>
<th>IP Address</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>TP-Link Router</td>
<td>192.168.0.1</td>
<td>Primary Gateway</td>
</tr>
<tr>
<td>House RV320 WAN</td>
<td>192.168.0.254</td>
<td>Secondary Router</td>
</tr>
<tr>
<td>House RV320 LAN</td>
<td>172.16.0.1</td>
<td>P2P Endpoint</td>
</tr>
<tr>
<td>House EOCO</td>
<td>172.16.0.3</td>
<td>Wireless Bridge</td>
</tr>
<tr>
<td>Barn EOCO</td>
<td>172.16.0.4</td>
<td>Wireless Bridge</td>
</tr>
<tr>
<td>Barn RV320</td>
<td>172.16.0.2</td>
<td>Barn Router</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!– Footer –>
<div class=”footer”>
<p>Farm Network Documentation | Designed for WordPress Integration</p>
<p>Network configuration optimized for EOCO CPE520 wireless bridge and Cisco RV320 routers</p>
</div>
</div>
<!– Modals –>
<div id=”tp-link-modal” class=”modal”>
<div class=”modal-content”>
<div class=”modal-header”>
<h2><i class=”fas fa-wifi”></i> TP-Link Router Configuration</h2>
<button class=”close-modal” onclick=”closeModal(‘tp-link-modal’)”>×</button>
</div>
<div class=”modal-body”>
<div>
<div class=”config-section”>
<h3><i class=”fas fa-cog”></i> Configuration</h3>
<div class=”config-box”>
LAN IP: <span class=”highlight”>192.168.0.1</span>
Subnet Mask: <span class=”highlight”>255.255.255.0</span>
DHCP Server: <span class=”highlight”>Enabled</span>
– Range: <span class=”highlight”>192.168.0.100 – 192.168.0.200</span>
– Gateway: <span class=”highlight”>192.168.0.1</span>
– DNS: <span class=”highlight”>8.8.8.8, 8.8.4.4</span>
Static Routes:
Destination: <span class=”highlight”>192.168.1.0</span>
Netmask: <span class=”highlight”>255.255.255.128</span>
Gateway: <span class=”highlight”>192.168.0.254</span>
</div>
</div>
<a href=”http://192.168.0.1″ target=”_blank” class=”login-btn”>
<i class=”fas fa-sign-in-alt”></i> Login to TP-Link
</a>
</div>
<div class=”explanation”>
<h3><i class=”fas fa-info-circle”></i> Configuration Explanation</h3>
<p><strong>LAN IP:</strong> This is the primary gateway for all house devices. The address 192.168.0.1 is standard for home routers and easy to remember.</p>
<p><strong>DHCP Range:</strong> The range 192.168.0.100-200 provides 101 IP addresses for dynamic assignment, leaving .2-.99 for static devices and .201-.254 for future expansion.</p>
<p><strong>Static Route:</strong> This route tells the TP-Link how to reach the barn network (192.168.1.0/25). All traffic for this subnet is forwarded to the House RV320 at 192.168.0.254.</p>
<p><strong>DNS Settings:</strong> Using Google’s public DNS (8.8.8.8 and 8.8.4.4) provides reliable and fast DNS resolution independent of your ISP’s DNS servers.</p>
</div>
</div>
</div>
</div>
<!– Additional modals for other devices would follow the same pattern –>
<!– House RV320 Modal –>
<div id=”house-rv-modal” class=”modal”>
<div class=”modal-content”>
<div class=”modal-header”>
<h2><i class=”fas fa-router”></i> House Cisco RV320 Configuration</h2>
<button class=”close-modal” onclick=”closeModal(‘house-rv-modal’)”>×</button>
</div>
<div class=”modal-body”>
<div>
<div class=”config-section”>
<h3><i class=”fas fa-cog”></i> Configuration</h3>
<div class=”config-box”>
WAN Interface:
IP: <span class=”highlight”>192.168.0.254</span>
Subnet: <span class=”highlight”>255.255.255.0</span>
Gateway: <span class=”highlight”>192.168.0.1</span>
P2P Interface:
IP: <span class=”highlight”>172.16.0.1</span>
Subnet: <span class=”highlight”>255.255.255.240</span>
Static Routes:
Destination: <span class=”highlight”>0.0.0.0</span>
Mask: <span class=”highlight”>0.0.0.0</span>
Gateway: <span class=”highlight”>192.168.0.1</span>
Destination: <span class=”highlight”>192.168.1.0</span>
Mask: <span class=”highlight”>255.255.255.128</span>
Gateway: <span class=”highlight”>172.16.0.2</span>
</div>
</div>
<a href=”http://192.168.0.254″ target=”_blank” class=”login-btn”>
<i class=”fas fa-sign-in-alt”></i> Login to House RV320
</a>
</div>
<div class=”explanation”>
<h3><i class=”fas fa-info-circle”></i> Configuration Explanation</h3>
<p><strong>WAN Configuration:</strong> The WAN interface connects to the TP-Link router. The IP 192.168.0.254 is in the same subnet as the TP-Link but outside the DHCP range.</p>
<p><strong>P2P Interface:</strong> This interface connects to the House EOCO device. The 172.16.0.0/28 subnet is used for point-to-point connections between routers.</p>
<p><strong>Default Route:</strong> Routes all non-local traffic to the TP-Link gateway (192.168.0.1) for internet access.</p>
<p><strong>Barn Network Route:</strong> Directs all traffic for the barn network (192.168.1.0/25) to the Barn RV320 at 172.16.0.2 via the wireless bridge.</p>
</div>
</div>
</div>
</div>
<!– House EOCO Modal –>
<div id=”house-eoco-modal” class=”modal”>
<div class=”modal-content”>
<div class=”modal-header”>
<h2><i class=”fas fa-signal”></i> House EOCO CPE520 Configuration</h2>
<button class=”close-modal” onclick=”closeModal(‘house-eoco-modal’)”>×</button>
</div>
<div class=”modal-body”>
<div>
<div class=”config-section”>
<h3><i class=”fas fa-cog”></i> Configuration</h3>
<div class=”config-box”>
IP Address: <span class=”highlight”>172.16.0.3</span>
Subnet Mask: <span class=”highlight”>255.255.255.240</span>
Gateway: <span class=”highlight”>0.0.0.0</span> (none)
Operation Mode: <span class=”highlight”>WDS/Repeater (bridge + AP)</span>
– AP Mode: <span class=”highlight”>Disabled</span>
– WDS Mode: <span class=”highlight”>Enabled</span>
– WDS Peers: <span class=”highlight”>[Barn CPE520 MAC]</span>
Wireless Settings:
Frequency: <span class=”highlight”>5GHz (Ch 149)</span>
Channel Width: <span class=”highlight”>40MHz</span>
Security: <span class=”highlight”>WPA2-PSK AES</span>
Advanced:
VLAN Mode: <span class=”highlight”>Transparent</span>
AMPDU: <span class=”highlight”>Disabled</span>
</div>
</div>
<a href=”http://172.16.0.3″ target=”_blank” class=”login-btn”>
<i class=”fas fa-sign-in-alt”></i> Login to House EOCO
</a>
</div>
<div class=”explanation”>
<h3><i class=”fas fa-info-circle”></i> Configuration Explanation</h3>
<p><strong>IP Address:</strong> The management IP is on the P2P subnet but doesn’t require a gateway since it’s a bridge device. 172.16.0.3 is easily memorable as the third device in this subnet.</p>
<p><strong>Operation Mode:</strong> WDS/Repeater mode with AP disabled creates a pure bridge connection. This prevents the EOCO from broadcasting an additional Wi-Fi network.</p>
<p><strong>Wireless Settings:</strong> Channel 149 is in the UNII-3 band which has less interference. 40MHz channel width balances bandwidth and reliability.</p>
<p><strong>Advanced Settings:</strong> VLAN transparency ensures tagged traffic passes through the bridge. Disabling AMPDU prevents issues with VLAN tags in wireless transmission.</p>
</div>
</div>
</div>
</div>
<!– Barn EOCO Modal –>
<div id=”barn-eoco-modal” class=”modal”>
<div class=”modal-content”>
<div class=”modal-header”>
<h2><i class=”fas fa-signal”></i> Barn EOCO CPE520 Configuration</h2>
<button class=”close-modal” onclick=”closeModal(‘barn-eoco-modal’)”>×</button>
</div>
<div class=”modal-body”>
<div>
<div class=”config-section”>
<h3><i class=”fas fa-cog”></i> Configuration</h3>
<div class=”config-box”>
IP Address: <span class=”highlight”>172.16.0.4</span>
Subnet Mask: <span class=”highlight”>255.255.255.240</span>
Gateway: <span class=”highlight”>0.0.0.0</span> (none)
Operation Mode: <span class=”highlight”>AP-Client (AP disabled)</span>
– Connect to SSID: <span class=”highlight”>[House CPE520 SSID]</span>
– Security: <span class=”highlight”>Match House settings</span>
Wireless Settings:
Same as House EOCO
Advanced:
VLAN Mode: <span class=”highlight”>Transparent</span>
AMPDU: <span class=”highlight”>Disabled</span>
Beacon Interval: <span class=”highlight”>200ms</span>
</div>
</div>
<a href=”http://172.16.0.4″ target=”_blank” class=”login-btn”>
<i class=”fas fa-sign-in-alt”></i> Login to Barn EOCO
</a>
</div>
<div class=”explanation”>
<h3><i class=”fas fa-info-circle”></i> Configuration Explanation</h3>
<p><strong>IP Address:</strong> 172.16.0.4 completes the addressing for the bridge devices. No gateway is needed as it’s a layer 2 device.</p>
<p><strong>Operation Mode:</strong> AP-Client mode allows this device to connect to the House EOCO as a client. Disabling AP prevents it from broadcasting its own network.</p>
<p><strong>Wireless Settings:</strong> Must exactly match the House EOCO settings for frequency, channel width, and security to establish a connection.</p>
<p><strong>Beacon Interval:</strong> Increasing to 200ms reduces overhead and improves performance for the bridge connection, which doesn’t need frequent beacons.</p>
</div>
</div>
</div>
</div>
<!– Barn RV320 Modal –>
<div id=”barn-rv-modal” class=”modal”>
<div class=”modal-content”>
<div class=”modal-header”>
<h2><i class=”fas fa-router”></i> Barn Cisco RV320 Configuration</h2>
<button class=”close-modal” onclick=”closeModal(‘barn-rv-modal’)”>×</button>
</div>
<div class=”modal-body”>
<div>
<div class=”config-section”>
<h3><i class=”fas fa-cog”></i> Configuration</h3>
<div class=”config-box”>
WAN Interface:
IP: <span class=”highlight”>172.16.0.2</span>
Subnet: <span class=”highlight”>255.255.255.240</span>
Gateway: <span class=”highlight”>172.16.0.1</span>
LAN Interface:
IP: <span class=”highlight”>192.168.1.1</span>
Subnet: <span class=”highlight”>255.255.255.128</span>
DHCP Server:
Range: <span class=”highlight”>192.168.1.10 – 192.168.1.60</span>
Gateway: <span class=”highlight”>192.168.1.1</span>
DNS: <span class=”highlight”>192.168.0.1</span>
Static Routes:
Destination: <span class=”highlight”>0.0.0.0</span>
Mask: <span class=”highlight”>0.0.0.0</span>
Gateway: <span class=”highlight”>172.16.0.1</span>
</div>
</div>
<a href=”http://172.16.0.2″ target=”_blank” class=”login-btn”>
<i class=”fas fa-sign-in-alt”></i> Login to Barn RV320
</a>
</div>
<div class=”explanation”>
<h3><i class=”fas fa-info-circle”></i> Configuration Explanation</h3>
<p><strong>WAN Configuration:</strong> Connects to the Barn EOCO device. The gateway points to the House RV320 (172.16.0.1) for all non-barn traffic.</p>
<p><strong>LAN Configuration:</strong> Uses a /25 subnet (192.168.1.0/25) providing 126 usable IPs, more than enough for barn devices while conserving IP space.</p>
<p><strong>DHCP Settings:</strong> The range 192.168.1.10-60 provides 51 dynamic IPs. Using the TP-Link (192.168.0.1) for DNS ensures consistent resolution.</p>
<p><strong>Default Route:</strong> Routes all internet-bound traffic through the House RV320 and ultimately to the TP-Link for internet access.</p>
</div>
</div>
</div>
</div>
<script>
// Modal functions
function openModal(modalId) {
document.getElementById(modalId).style.display = ‘block’;
document.body.style.overflow = ‘hidden’;
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = ‘none’;
document.body.style.overflow = ‘auto’;
}
// Close modal when clicking outside content
window.onclick = function(event) {
document.querySelectorAll(‘.modal’).forEach(modal => {
if (event.target === modal) {
modal.style.display = ‘none’;
document.body.style.overflow = ‘auto’;
}
});
};
</script>
</body>
</html>