zero-clone/front.html at main · viser9/zero-clone · 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
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
    <head>
        <title>Zerodha Clone</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav class="Navbar" >
                <img src="logo.svg" style="width: 120px">
                <div style="display: flex;justify-content: space-between;color:#666;font-size: .9rem;">
                    <div class="Navbar-right">Signup</div>
                    <div class="Navbar-right">About</div>
                    <div class="Navbar-right">Pricing</div>
                    <div class="Navbar-right">Support</div>
                    <div class="Navbar-right">Investments</div>
                </div>
        </nav>
        <main>
            <div style="font-family: sans-serif;padding-top: 20px;">
                <div style="display: flex;justify-content: center;padding-bottom: 25px;">
                    <img src="img.png">
                </div>
                <div style="display: flex;justify-content: center;font-size: 45px;font-weight: 500;color:#424242">
                    Invest in everything
                </div>
                <div style="display: flex;justify-content: center; margin-top:15px;margin-bottom: 25px;font-weight: 350;color:#424242">
                    Online platform to invest in stocks, derivatives, mutual funds, and more
                </div>
                <div style="display: flex;justify-content: center;padding-top: 20px;">
                    <button class="Button-sign-up">
                            Sign up now
                    </button>
                </div>
                <section style="padding-top: 150px;padding-bottom: 150px;margin-left: 200px;margin-right: 200px;">
                    <div style="display: flex;justify-content: center; gap: 5vw;">
                        <img src = "largest-broker.svg">
                        <div>
                            <header style="font-size: 30px;font-weight: 500;color:#424242;padding-bottom:2vw;">
                                Largest stock broker in India
                            </header>
                            <secondHeader style="font-size: 1rem;font-weight: 100;line-height: 1.8;margin-bottom: 15px;padding-bottom: 1vw;">
                                1+ Crore Zerodha clients contribute to over 15% of all retail order volumes in India daily by trading and investing in:
                            </secondHeader>
                            <div style="display: flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;padding-right: 10px;padding-top: 20px;padding-bottom: 20px;">
                                <div class="list">
                                    <ul>
                                        <li >Futures and Options</li>
                                        <li >Commodity derivatives</li>
                                        <li>Currency derivatives</li>
                                    </ul>
                                </div>
                                <div class="list">
                                    <ul>
                                        <li>Stocks & IPOs</li>
                                        <li>Direct mutual funds</li>
                                        <li>Bonds and Govt. Securities</li>
                                    </ul>
                                </div>
                            </div>
                            <div style="padding-top: 20px;">
                                <img src="press-logos.png">
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div style = "background-color:#f4f4f6;margin-left: 300px;margin-right: 300px;padding-left:150px;padding-right: 150px;font-size:  1.5vw;font-family: sans-serif;">
                <div style="display: flex;justify-content: center;padding-top: 1vw;padding-bottom: 1vw;">
                    Investment Return & Growth Calculator
                </div>
                <div style="display: flex;justify-content: space-around;padding-top: 15px;">
                    <input type="text" class = "inputBox" id ="Starting Amount" placeholder="Starting Amount">
                    <input type="text" class = "inputBox" id ="Additional contribution" placeholder="Additional contribution">
                    <input type="text" class = "inputBox" id ="Rate of Return" placeholder="Rate of Return">
                    <input type="text" class = "inputBox" id ="Time Period" placeholder="Time Period">
                </div>
                <div style="display: flex;justify-content: center;padding-top: 1vw;padding-bottom: 1vw;">
                    <button class="Button-sign-up" onclick="calculate()">
                        Calculate
                    </button>
                </div>
            </div>
            <div style = "background-color:#f4f4f6;margin-left: 300px;margin-right: 300px;margin-top: 5px;">
                <p id="return" style="display: flex;justify-content: center;font-family: sans-serif;font-size: large;padding-top: 0.75vw;padding-bottom: 0.75vw;">
                    the value of the input is
                </p>
            </div>
        </main>
    </body>
    <script>
        function calculate(){
            var amount = parseFloat(document.getElementById("Starting Amount").value) || 0;
            var contribution = parseFloat(document.getElementById("Additional contribution").value) || 0;
            var rate = parseFloat(document.getElementById("Rate of Return").value) || 0;
            var time = parseFloat(document.getElementById("Time Period").value) || 0;

            // Perform the correct calculation using the declared variables
            var result = amount + contribution + (amount * rate * time);

            document.getElementById("return").innerHTML = "The calculated value is " + result;
        }
    </script>
</html>