image/index.html at main · manavmahan/image · 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>
<style>
    .loader {
      width: 50px;
      height: 50px;
      border: 6px solid #fff;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      margin: 25px;
    }
    .loader::after {
      content: '';
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-bottom-color: #d72728;
    }

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
</style>

<html lang="en">
    <body id="page-top">
        <div id="row" style="display: flex; margin: 0">
            <div id="container" style="display: flex; flex: 1; margin: 0"></div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
        <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/gh/manavmahan/image/earcut.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/manavmahan/image/local.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/manavmahan/image/analysis.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/manavmahan/image/building.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/manavmahan/image/energyScale.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/manavmahan/image/image.js"></script>

        <!-- <script type=text/javascript src="earcut.js"></script>
        <script type=text/javascript src="local.js"></script>
        <script type=text/javascript src="analysis.js"></script>
        <script type=text/javascript src="building.js"></script>
        <script type=text/javascript src="energyScale.js"></script>
        <script type=text/javascript src="image.js"></script> -->

    </body>
</html>

<template id="screen">
    <div style="flex: 1; display: flex; background-color: #000000cf; margin-left: -100%; z-index: 1; align-items: center; " >
        <div style="display: flex; flex:1; background-color: #ffffffbf; z-index: 10; margin: 1em; height: calc(100% - 2em); width: calc(100% - 2em);">
            <div id="plot3d" style="background-color: #ffffff00; z-index: 20; height: 100%; width: 65%;"></div>
            <div id="analysis" style="background-color: #ffffff00; z-index: 10; height: 100%; width: 35%;"></div>
            <a onclick="closeScreen()">
                <i class="fa-solid fa-xmark" style="flex:1; margin: 1rem;"></i>
            </a>
        </div>
    </div>
</template>

<template id="loader">
    <div style="width:100px; height:100px; z-index: 100; background-color: #00000000; pointer-events: none;">
        <div class="loader" ></div>
    </div>
</template>