SortingStudio/index.html at main · HarshScripts22/SortingStudio · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"
      rel="stylesheet"
    />

    <link rel="icon" type="image/png" href="icons8-.png" />

    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>SortingStudio</title>
  </head>
  <body>
    <div class="nav-container">
      <h2 class="title" onclick="window.location.reload()">Sorting Studio</h2>
      <div class="navbar" id="navbar">
        <a id="random" onclick="RenderScreen()">Generate array</a>
        <span class="options">
          <select name="select sort algorithm" id="menu" class="algo-menu">
            <option value="0">Choose algorithm</option>
            <option value="1">Bubble Sort</option>
            <option value="2">Selection Sort</option>
            <option value="3">Insertion Sort</option>
            <option value="4">Merge Sort</option>
            <option value="5">Quick Sort</option>
          </select>
        </span>
        <span class="options">
          <select name="select array size" id="menu" class="size-menu">
            <option value="0">Array size</option>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
            <option value="60">60</option>
            <option value="70">70</option>
            <option value="80">80</option>
            <option value="90">90</option>
            <option value="100">100</option>
          </select>
        </span>
        <!-- <input type="text" placeholder="Input Array..." id="menu1">  -->
        <span class="options">
          <select name="input" id="menu" class="input">
            <option value="N">Input</option>
            <option value="Y">Yes</option>
            <option value="N">No</option>
          </select>
        </span>
        <span class="options">
          <select name="speed of visualization" id="menu" class="speed-menu">
            <option value="0">Speed</option>
            <option value="0.5">0.50x</option>
            <option value="0.75">0.75x</option>
            <option value="1">1.00x</option>
            <option value="2">2.00x</option>
            <option value="4">4.00x</option>
          </select>
        </span>
        <a class="start">Sort</a>
        <a class="icon"><i class="fa fa-bars"></i></a>
      </div>
    </div>
    <br />
    <div class="center">
      <div class="array"></div>
    </div>

    <div class="inputBoxParent">
      <label for="inputArr"
        >Enter the array values separated with commas :</label
      >
      <div></div>
      <input
        type="text"
        id="inputArr"
        name="inputArr"
        class="inputBox"
      /><br /><br />
    </div>

    <footer class="footer">
      <p>
        Time Complexity = <span id="time"></span> and Total Time Taken =
        <span id="Ttime"></span>seconds
      </p>
    </footer>

    <div class="footerr">
      <div class="social-media">
        <a href="mailto:deshmukhharsh2507@gmail.com"
          ><i class="bx bxl-gmail"></i
        ></a>
        <a href="https://www.linkedin.com/in/harsh-deshmukh17/" target="_blank"
          ><i class="bx bxl-linkedin-square"></i
        ></a>
        <a href="https://github.com/HarshScripts22" target="_blank"
          ><i class="bx bxl-github"></i
        ></a>
        <a href="https://x.com/Harsh_deshmukh0" target="_blank"
          ><i class="bx bxl-twitter"></i
        ></a>
      </div>

      <div class="footerr-text">
        <!-- div -->
        <p>COPYRIGHT &copy; 2024 HARSH DESHMUKH | ALL RIGHTS RESERVED.</p>
      </div>
    </div>
    <script src="scripts/app.js"></script>
    <script src="scripts/helper.js"></script>
    <script src="scripts/sort-algorithms.js"></script>
  </body>
</html>