Smart-Rockets/index.html at main · lovesaroha/Smart-Rockets · 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
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags. -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#ffffff" />
    <meta name="description" content="smart rockets genetic algorithm">
    <title>Smart Rockets Genetic Algorithm</title>
    <!-- Include css files. -->
    <link rel="stylesheet" type="text/css" href="./assets/style.css">
    <link rel="stylesheet" href="./assets/fa.min.css">
</head>

<body>
    <div class="container w-full mx-auto max-w-8/12 md:px-4 pb-8">
        <!-- Header. -->
        <center>
            <h1 class="font-bold display-1 underline">
                Smart Rockets
            </h1>
            <h4 class="text-subtitle mb-6">Each rockets goal is to reach the target circle without crashing. A genetic
                algorithm creates new
                populations, with the most "fit" rockets most likely to become parents.</h4>
        </center>
        <!-- Config. -->
        <div class="card p-2 px-4 mx-auto max-w-xl">
            <!-- Population size configuration. -->
            <h4>Population Size</h4>
            <select class="w-full border-2 border-gray p-2 mb-3 capitalize focus:outline-none focus:border-primary"
                id="maxpop_id" oninput="javascript: totalPopulation = parseInt(this.value);">
                <option selected value="10">10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="60">60</option>
            </select>
            <!-- Barriers configuration. -->
            <h4>Total Barriers</h4>
            <select class="w-full border-2 border-gray p-2 mb-3 capitalize focus:outline-none focus:border-primary"
                id="barriers_id" oninput="javascript: newTotalBarriers = parseInt(this.value);">
                <option selected value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <!-- Mutation rate. -->
            <h4>Mutation Rate</h4>
            <select class="w-full border-2 border-gray p-2 mb-3 capitalize focus:outline-none focus:border-primary"
                id="mutation_rate_id" oninput="javascript: newMutationRate = parseFloat(this.value);">
                <option selected value="0.01">1%</option>
                <option value="0.05">5%</option>
                <option value="0.1">10%</option>
                <option value="0.3">30%</option>
                <option value="0.9">90%</option>
            </select>

            <!-- Start algorithm. -->
            <button id="submit_id" class="mb-2" onclick="javascript: this.innerHTML = ' ReStart'; startAlgorithm();"
                type="submit"> Start</button>
            <div id="result_id" class="hidden">
                <!-- Result info. -->
                <h4>Life Span <font class="text-primary" id="count_id">0</font>
                </h4>
                <h4> Generations <font class="text-primary" id="generation_id">0</font>
                </h4>
            </div>
        </div>
    </div>
    <center>
        <!-- Canvas with map image. -->
        <canvas style="background: url('assets/background.png');" class="shadow-md mt-3 mb-2 hide-on-md" height="600"
            width="600" id="canvas"></canvas>
    </center>
    <!-- Footer. -->
    <div class="mb-2 card text-center p-2 mx-auto max-w-xl">
        <h4 class="text-subtitle"><a href="https://github.com/lovesaroha/Smart-Rockets"
                target="_blank">LoveSaroha/Smart-Rockets</a></h4>
        <h3 class="text-subtitle font-bold mb-0 hover:underline cursor-pointer"
            onclick="javascript: window.location = 'https://lovesaroha.com';">Love Saroha</h3>
        <h4 class="text-gray">lovesaroha1994@gmail.com</h4>
    </div>
    <!-- Include script.js file -->
    <script type="text/javascript" src="./assets/script.js"></script>
</body>

</html>