VisOil-Project/index.html at master · tom-oroshi/VisOil-Project · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VisOil | Drilling Data Graphical Display</title>

    <!--Stylesheet-->
    <link rel="stylesheet" href="css/style.css">

    <!--Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <!--Bootstrap 4-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!--Animations-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.compat.css" integrity="sha256-Z12agm4mw1C2s2sXTx0wUlgmQdWqv1HCc/vgtpB0r9M=" crossorigin="anonymous"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js" type="text/javascript"></script>


</head>
<body>
    <button id="top-btn" title="Go to top">Back to Top</button>
    <main>
        <!-- Landing Area -->
        <div id="landing">
            <div id="landing-text">
                <div id="landing-text-inner">
                    <!-- TODO Add Logo-->
                    <h1>VisOil</h1>
                    <h2>Drilling Data Graphical Display</h2>
                    <h3>by Oroshi Web Development</h3>
                    <a href="#about" class="custom-btn wow flipInX" id="view-about">
                        About
                    </a>
                    <a href="#features" class="custom-btn wow flipInX" data-wow-delay="0.2s" id="view-features">
                        Features
                    </a>
                    <a href="#bio" class="custom-btn wow flipInX" data-wow-delay="0.4s" id="view-bio">
                        Bio
                    </a>
                    <a href="#contact" class="custom-btn wow flipInX" data-wow-delay="0.8s" id="view-contact">
                        Contact
                    </a>
                </div>
            </div>
            <div id="landing-image"></div>
        </div>
        <div id="content">
            <div id="about">
                <div class="header">
                    <h2>About VisOil</h2>
                </div>
                <div id="graph-img-container">
                    <img id="graph-img" src="img/graph_sample.webp" alt="drilling data graph">
                    <!--TODO add images to describe visoil-->
                </div>
                <div id="about-content">
                    <p>VisOil is a web application used to display real-time drilling data from a wellsite into a detailed interactive line-graph along with features for report creation, printing and adding notes for collaboration. Many exploration and production companies still use static graphs stored locally on desktops. These graphs need to be constantly updated manually by engineers and have high costs both in time and labor and are prone to human error. With VisOil these issues are eliminated, and you are also offered instant access to your drilling-data at anytime and from anywhere over the internet via secured access.</p>
                    <!--@TODO Link to live preview site-->
                </div>
                <div class="preview-container">
                    <div class="preview wow fadeInDown">
                        <div class="preview-body">
                            <h2 class="preview-title">Live preview</h2>
                            <h4 class="preview-text"><a href="https://visoil-app.web.app/" target="_blank">Check out a preivew of the VisOil web app!</a></h4>
                        </div>
                    </div>
                </div>
            <div id="features">
                <div class="header">
                    <h2>Features</h2>
                </div>
                    <div class="feature-container">
                        <div class="feature wow fadeInLeft">
                            <svg width="4em" height="4em" viewBox="0 0 16 16" class="bi bi-stopwatch-fill icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07A7.002 7.002 0 0 1 8 16 7 7 0 0 1 7 2.07V1H6a.5.5 0 0 1-.5-.5zm3 4.5a.5.5 0 0 0-1 0v3.5h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5z"/>
                              </svg>
                            <div class="feature-body">
                                <h4 class="feature-title">Real-Time</h4>
                                <p class="feature-text">Get up-to-date drilling progress every time you open the app and watch in real-time as the data grows. This eliminates the need to constantly download data updates from third parties, and drastically increases response time for critical drilling-related decisions.</p>
                            </div>
                        </div>
                        <div class="feature wow fadeInLeft" data-wow-delay="0.2s">
                            <div class="box">
                            <svg width="4em" height="4em" viewBox="0 0 16 16" class="bi bi-shield-lock icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M5.443 1.991a60.17 60.17 0 0 0-2.725.802.454.454 0 0 0-.315.366C1.87 7.056 3.1 9.9 4.567 11.773c.736.94 1.533 1.636 2.197 2.093.333.228.626.394.857.5.116.053.21.089.282.11A.73.73 0 0 0 8 14.5c.007-.001.038-.005.097-.023.072-.022.166-.058.282-.111.23-.106.525-.272.857-.5a10.197 10.197 0 0 0 2.197-2.093C12.9 9.9 14.13 7.056 13.597 3.159a.454.454 0 0 0-.315-.366c-.626-.2-1.682-.526-2.725-.802C9.491 1.71 8.51 1.5 8 1.5c-.51 0-1.49.21-2.557.491zm-.256-.966C6.23.749 7.337.5 8 .5c.662 0 1.77.249 2.813.525a61.09 61.09 0 0 1 2.772.815c.528.168.926.623 1.003 1.184.573 4.197-.756 7.307-2.367 9.365a11.191 11.191 0 0 1-2.418 2.3 6.942 6.942 0 0 1-1.007.586c-.27.124-.558.225-.796.225s-.526-.101-.796-.225a6.908 6.908 0 0 1-1.007-.586 11.192 11.192 0 0 1-2.417-2.3C2.167 10.331.839 7.221 1.412 3.024A1.454 1.454 0 0 1 2.415 1.84a61.11 61.11 0 0 1 2.772-.815z"/>
                                <path d="M9.5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                <path d="M7.411 8.034a.5.5 0 0 1 .493-.417h.156a.5.5 0 0 1 .492.414l.347 2a.5.5 0 0 1-.493.585h-.835a.5.5 0 0 1-.493-.582l.333-2z"/>
                              </svg>
                            </div>
                            <div class="card-body">
                                <h4 class="card-title">Secure</h4>
                                <p class="card-text">VisOil is backed by Google Firebase authentication and security, ensuring that your data is protected from attackers. All communication between the application and the database are encrypted, and email verification ensures that only the correct users have access to data.</p>
                            </div>
                        </div>
                        <div class="feature wow fadeInLeft" data-wow-delay="0.4s">
                            <svg width="4em" height="4em" viewBox="0 0 16 16" class="bi bi-toggle-on icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
                              </svg>
                            <div class="card-body">
                            <h4 class="card-title">Interactive</h4>
                            <p class="card-text">Better than traditional spreadsheet-based applications, VisOil allows you to interact with the data: toggle layers on and off, select and zoom to specific areas quickly, and print to pdf without needing to install extra browser plugins</p>
                            </div>
                        </div>
                        <div class="feature wow fadeInLeft" data-wow-delay="0.6s">
                            <svg width="4em" height="4em" viewBox="0 0 16 16" class="bi bi-wrench icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M.102 2.223A3.004 3.004 0 0 0 3.78 5.897l6.341 6.252A3.003 3.003 0 0 0 13 16a3 3 0 1 0-.851-5.878L5.897 3.781A3.004 3.004 0 0 0 2.223.1l2.141 2.142L4 4l-1.757.364L.102 2.223zm13.37 9.019L13 11l-.471.242-.529.026-.287.445-.445.287-.026.529L11 13l.242.471.026.529.445.287.287.445.529.026L13 15l.471-.242.529-.026.287-.445.445-.287.026-.529L15 13l-.242-.471-.026-.529-.445-.287-.287-.445-.529-.026z"/>
                              </svg>
                            <div class="card-body">
                            <h4 class="card-title">Scalable</h4>
                            <p class="card-text">VisOil is built to be modular: Is there a feature you want added? Want to customize the look of your graph? All these can be done with minimal effort by our developer team to give you an application that suits your style and business needs</p>
                            </div>
                        </div>
                    </div>
            <div id="bio">
                <div class="header">
                    <h2>About Me</h2>
                </div>
                <div class="bio-container wow fadeInUp" data-wow-offset="10">
                    <div class="profile-pic">
                        <img src="./img/thomas_cyan_none.webp" alt="">
                    </div>
                    <div class="bio">
                        <h3>Thomas Llewellyn</h3>
                        <p>Thomas is a web developer with a passion for creating web applications that are exciting, and he believes that a strong online presence is essential to a business’ success in todays market. Thomas is passionate about learning and holds a diploma from SAIT's School of Information and Communications Technologies, with a Computer Systems major. Thomas enjoys drinking coffee, discovering new music to listen to, and camping with his family in Alberta's beautiful backcountry.</p>
                    </div>
                </div>
            </div>
            <div id="contact">
                <div class="header">
                    <h2>Contact</h2>
                </div>
                <h4>Do you want to know more about Visoil? Don't hesitate to contact me!</h4>
                <h5>Email: <strong><a href="mailto: Thomas@oroshi.ca">Thomas@oroshi.ca</a></strong></a></h5>
            </div>
        </div>
    </main>
    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>

    <!--Custom Scripts-->
    <script src="./js/main.js"></script>

    <!-- Edge browser support -->
    <script src="https://unpkg.com/webp-hero@0.0.0-dev.21/dist-cjs/polyfills.js"></script>
    <script src="https://unpkg.com/webp-hero@0.0.0-dev.21/dist-cjs/webp-hero.bundle.js"></script>
    <script>
    var webpMachine = new webpHero.WebpMachine()
    webpMachine.polyfillDocument()
    </script>
    <!-- Edge browser support code end -->

    <!--Lottie animations-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.1/lottie.min.js" type="text/javascript"></script>

    <!--initialize animations-->
    <script>
        new WOW().init();
    </script>
</body>
</html>