Line-Coding-Waves/index.html at master · malivinayak/Line-Coding-Waves · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:image" content="./logo.png" />
    <meta property="og:title" content="Line Coding by @malivinayak" />
    <link rel="icon" href="./logo.png" />
    <title>Line Coding Waves</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1 class="heading">Line Coding Waves</h1>
        <div class="lines">
            <p>Line encoding is the process of converting digital data into analog signals suitable for transmission
                over communication channels. </p>
            <p>We will be generating waveforms for Unipolar NRZ, Polar NRZ-L, Polar NRZ-I, Polar RZ, Manchester,
                Differential Manchester, AMI, and Pseudoternary line encoding techniques.</p>
        </div>
        <div class="input-button-container">
            <input type="text" class="input-box" placeholder="Enter Digital Bit Sequence [0's and 1's]..." autofocus>
            <button class="generate-btn">Generate</button>
        </div>

        <div id="output-container">
            <div>Wave form are as follows</div>
            <!-- <div id="input-bits"></div> -->
            <div id="unipolar-nrz">
                Unipolar NRZ Line wave
                <svg width="100%" height="100%" id="unipolar-nrz-svg">
                </svg>
            </div>
            <div id="polar-nrz-l">
                Polar NRZ-L Line wave
                <svg width="100%" height="100%" id="polar-nrz-l-svg">
                </svg>
            </div>
            <div id="polar-nrz-i">
                Polar NRZ-I Line wave
                <svg width="100%" height="100%" id="polar-nrz-i-svg">
                </svg>
            </div>
            <div id="polar-rz">
                Polar RZ Line wave
                <svg width="100%" height="100%" id="polar-rz-svg">
                </svg>
            </div>
            <div id="manchester">
                Manchester Line wave
                <svg width="100%" height="100%" id="manchester-svg">
                </svg>
            </div>
            <div id="diff-manchester">
                Diff-Manchester Line wave
                <svg width="100%" height="100%" id="diff-manchester-svg">
                </svg>
            </div>
            <div id="ami">
                AMI Line wave
                <svg width="100%" height="100%" id="ami-svg">
                </svg>
            </div>
            <div id="pseudoternary">
                Pseudoternary Line wave
                <svg width="100%" height="100%" id="pseudoternary-svg">
                </svg>
            </div>
        </div>
        <br>
        <br>
        <div style="text-align: right;">
            Developed by <a href="https://github.com/malivinayak" target="_blank">@malivinayak</a>
        </div>
    </div>
    <script src="./script.js"></script>
</body>

</html>