OBDAtlas.github.io/index.html at master · OBDAtlas/OBDAtlas.github.io · 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
---
layout: home
title: WHAT IT IS
order: 0
---

<div class="home">

  <div class="full-width-image" style="display: table; background-image:url(assets/images/top-segment.png);">
    <center style="display: table-cell; vertical-align: middle; padding: 120px 0px">
      <h1>Get to know your car better</h1>
      Use an OBD (On board diagnostics) to access all the information<br>available in your car.
    </center>
  </div>

  <div class="page-segment">
    <div style="display: inline-block; float:right; margin: auto 100px; background-color: #FFE24D; border-radius: 100%; padding: 40px;">
      <object type="image/svg+xml" data="assets/shapes/obd-device.svg">Your browser does not support SVG</object>
    </div>
    <p>
      <h2>OBD What? OBD Who?</h2>
      So what’s an OBD? OBD stands for on board diagnostics. Your car sends a bunch
      of signals all the time and you can read them with on OBD. This is useful for
      a lot of different things. You can  use it to read all the error messages,
      see your gas level, and see how your car performs.
    </p>
    <br>
    <a class="button rounded">
      Read more
    </a>
  </div>

  <div class="full-width-image" style="background-color: #1ED0AE">
    <div class="page-segment" style="background-color: #1ED0AE">
      <center>
        <h1>See it in action</h1>
        Play around with the values in the car emulator and send<br>
        some commands to see what the ODB would return.
      </center>
      <div style="margin-top:50px;">
        <div style="max-width: 650px; float:left;">
          <img src="assets/images/terminal-placeholder.png" />
          <!--<iframe style="max-width: 100%;" width="650" height="480" src="http://carminestudios.com/obd-atlas" frameborder="0" allowfullscreen></iframe>-->
        </div>
        <div style="max-width: 320px; float:right;">
          <img src="assets/images/emulator-placeholder.png" />
          <!--<iframe style="max-width: 100%;" width="320" height="480" src="" frameborder="0" allowfullscreen></iframe>-->
        </div>
      </div>
    </div>
  </div>

</div>