cardinal-spline-simulator/index.html at main · clucle/cardinal-spline-simulator · 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
<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <style type="text/css">
        body {
            background: black !important;
        }

        .sansserif {
            font-family: Verdana, Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>
    <div id="boardWraaper" class="w-100 d-flex justify-content-center text-center flex-column">
        <div class="w-100 d-flex justify-content-center">
            <div class="my-4 sansserif text-white">
                <h1>cardinal-spline-path</h1>
            </div>
        </div>
        <div class="w-100 d-flex justify-content-center">
            <canvas id="board" width="600" height="600"></canvas>
            <div class="w-25 justify-content-center ms-4">
                <div class="card">
                    <div class="card-header">
                        Edit Mode
                    </div>
                    <ul class="list-group list-group-flush text-start">
                        <li class="list-group-item" id="edit-add">(A)dd Point</li>
                        <li class="list-group-item" id="edit-delete">(D)elete Point</li>
                        <li class="list-group-item" id="edit-move">(M)ove Point</li>
                        <li class="list-group-item" id="edit-none">(N)one</li>
                    </ul>
                </div>
                <br>
                <div class="card p-2">
                    <label for="tension-slider" class="form-label">tension : <span id="tension-value">0.5</span></label>
                    <input type="range" class="form-range" id="tension-slider"  min="0" max="1" step="0.01">
                </div>
            </div>
        </div>
        <div class="w-100 d-flex justify-content-center">
            <div class="my-4 sansserif text-white">
                <small>source code : <a href="https://github.com/clucle/cardinal-spline-simulator">github</a></small>
                <br>
                <small>Copyright &copy; 2022 <a href="https://github.com/clucle">clucle</a>. All Rights Reserved</small>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="./resources/src/cardinal_spline.js"></script>
<script type="text/javascript" src="./resources/src/point.js"></script>
<script type="text/javascript" src="./resources/src/view.js"></script>
<script type="text/javascript" src="main.js"></script>

</html>