showcase_web/a.html at main · SymMotion/showcase_web · 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
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
<style>
    body {
        background: linear-gradient(
            150deg,
            #f0ebe3 0%,
            #e4dccf 66%,
            #748da6 85%
        );
    }

    h1 {
        color: white;
        text-align: center;
    }

    p {
        font-family: "Open Sans", sans-serif;
        font-size: 20px;
    }

    .project-detail_detail .detail-content .description {
        font-family: "Open Sans", sans-serif;
        line-height: 1.5em;
        font-size: 1em;
        text-align: justify;
        text-justify: inter-word;
    }

    .parallax {
        background-image: linear-gradient(
                rgba(0, 0, 0, 0.5),
                rgba(0, 0, 0, 0.5)
            ),
            url("https://images.unsplash.com/photo-1508444845599-5c89863b1c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80");

        min-height: 140px;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        padding-top: 30px;
        padding-bottom: 30px;
    }

    .parallax h1 {
        text-align: center;
        font-size: 2em;
    }

    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        margin: auto;
    }
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .item {
        width: 100%
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .container > div {
        flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
        /*demo*/
        box-shadow: 0 0 0 0;
        margin-bottom: 10px;
    }
</style>
<p class="description">
    Currently, the cleaning of high-rise structures, such as the Supertrees at
    Gardens by the Bay, is costly, labour-intensive, and poses risks to workers.
    There are drone-based solutions available but they require highly skilled
    drone pilots, which is not ideal due to the potential manpower crunch brought
    about by the COVID-19 pandemic, ageing population, as well as the high cost
    associated with salary and training of personnel. Hence, in this project, we
    designed and prototyped a tethered drone system with a unified easy-to-use
    user interface. This enables semi-autonomous aerial-ground collaboration under
    one-man control to reduce the cost of manpower, cost of inefficiency, and
    safety risks.
</p>

<script>
    window.addEventListener("load", function () {
        document
            .getElementsByClassName("project-detail_image")[0]
            .children[0].remove();
        document
            .getElementsByClassName("project-detail_image")[0]
            .children[0].classList.remove("container_slider");
    });
</script>