net_modify/documentation.html at main · rendykml/net_modify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documentation - UDP Broadcast Simulation</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap"
    />
    <link rel="stylesheet" href="src/css/styles.css" />
    <link rel="stylesheet" href="src/css/documentation.css" />
  </head>
  <body>
    <!-- Background -->
    <div class="background">
      <div class="background-overlay"></div>
    </div>

    <!-- Navbar -->
    <nav class="navbar">
      <div class="nav-container">
        <a href="index.html" class="nav-logo">
          <img src="src/assets/network-icon.svg" alt="Network Icon" />
          <span>UDP Broadcast Simulator</span>
        </a>
        <ul class="nav-links">
          <li><a href="index.html">Simulation</a></li>
          <li><a href="documentation.html" class="active">Documentation</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </div>
    </nav>

    <!-- Main Content -->
    <div class="container documentation">
      <h1>Documentation</h1>

      <div class="doc-section">
        <h2>UDP Broadcast Overview</h2>
        <div class="doc-content">
          <div class="doc-image">
            <img
              src="src/assets/udp.png"
              alt="UDP Broadcast Diagram"
            />
          </div>
          <p>
            UDP (User Datagram Protocol) broadcasting is a method of network
            communication where data packets are sent to all devices within a
            network segment.
          </p>
        </div>
      </div>

      <div class="doc-section">
        <h2>How to Use the Simulator</h2>
        <div class="doc-content">
          <div class="doc-image">
            <img
              src="src/assets/guide.png"
              alt="Simulator Guide"
            />

          </div>
          <ol class="steps">
            <li>Select a source device from the dropdown menu</li>
            <li>Enter your broadcast message in the text field</li>
            <li>Click "Send Broadcast" to simulate the transmission</li>
            <li>Observe the network log for transmission details</li>
          </ol>
        </div>
      </div>

      <div class="doc-section">
        <h2>Network Topology</h2>
        <div class="doc-content">
          <div class="doc-image">
            <img
              src="src/assets/image.png"
              alt="Network Topology"
            />

          </div>
          <p>
            The simulator demonstrates a simple network with three devices
            connected to the same subnet, enabling broadcast communication
            between all nodes.
          </p>
        </div>
      </div>
    </div>

    <script type="module" src="src/js/documentation.js"></script>
  </body>
</html>