fuel-consumption-calculator/index.php at master · BlazOrazem/fuel-consumption-calculator · 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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Easily calculate fuel travel expenses in different countries based on the latest fuel prices.">
    <meta name="keywords" content="fuel, consumption, calculator">
    <meta name="author" content="Blaž Oražem">

    <title>Fuel Consumption Calculator</title>

    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="color-overlay"></div>

<div class="container">
    <header>
        <h1 class="font-weight-bold">Fuel Consumption Calculator</h1>
        <p class="lead pt-2">Calculate your fuel travel expenses easily.</p>
    </header>
</div>

<div id="fuel" class="container">
    <div class="row justify-content-lg-center pt-3">
        <div class="col col-lg-6">
            <div class="form-group row results">
                <div class="col col-sm-6 col-xs-12">
                    <div class="row">
                        <label for="inputCountry" class="col-4 col-form-label text-right font-weight-bold">
                            Country
                        </label>
                        <div class="col-8">
                            <select class="form-control" id="inputCountry" v-model="country" v-on:change="calculate()">
                                <option value="Austria">Austria</option>
                                <option value="Bosnia-and-Herzegovina">Bosnia and Herzegovina</option>
                                <option value="Croatia">Croatia</option>
                                <option value="France">France</option>
                                <option value="Germany">Germany</option>
                                <option value="Hungary">Hungary</option>
                                <option value="Italy">Italy</option>
                                <option value="Slovenia" selected>Slovenia</option>
                                <option value="Serbia">Serbia</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-12 btn-group btn-group-toggle">
                    <label class="btn btn-info active" data-fuel="gasoline">
                        <input type="radio" name="fuel" autocomplete="off" value="gasoline" v-model="fuel" v-on:change="calculate()" checked> Gasoline
                    </label>
                    <label class="btn btn-info" data-fuel="diesel">
                        <input type="radio" name="fuel" autocomplete="off" value="diesel" v-model="fuel" v-on:change="calculate()"> Diesel
                    </label>
                    <label class="btn btn-info" data-fuel="lpg">
                        <input type="radio" name="fuel" autocomplete="off" value="lpg" v-model="fuel" v-on:change="calculate()"> LPG
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-lg-center small-hide pt-2">
        <div class="col col-lg-3">
            <label for="inputDistance" class="control-label font-weight-bold">Distance <small>(km)</small></label>
            <input type="text" class="form-control" id="inputDistance" placeholder="enter distance, eg. 125,5" v-model="distance">
        </div>
        <div class="col col-lg-3">
            <label for="inputConsumption" class="control-label font-weight-bold">Avg. consumption <small>(L/100km)</small></label>
            <input type="text" class="form-control" id="inputConsumption" placeholder="enter consumption, eg. 7,4" v-model="consumption">
        </div>
    </div>
    <div class="row justify-content-lg-center pt-3">
        <div class="col col-lg-6">
            <p class="text-center mb-0">
                <small>
                    Fuel prices are parsed from <a href="https://www.globalpetrolprices.com" target="_blank">globalpetrolprices.com</a>.
                </small>
            </p>
        </div>
    </div>
    <div class="row justify-content-lg-center">
        <div class="col col-lg-6">
            <hr>
        </div>
    </div>
    <div class="row justify-content-lg-center pt-3">
        <div class="col col-lg-6">
            <div class="form-group row results">
                <label for="calculatedConsumption" class="col-4 col-form-label text-right font-weight-bold">
                    Consumption
                </label>
                <div class="col-6">
                    <input type="text" class="form-control text-right" id="calculatedConsumption" v-model="resultConsumption" readonly>
                </div>
                <label class="col-2 col-form-label font-weight-bold">L</label>
            </div>
            <div class="form-group row results">
                <label for="calculatedPriceEur" class="col-4 col-form-label text-right font-weight-bold">
                    Price total
                </label>
                <div class="col-6">
                    <input type="text" class="form-control text-right" id="calculatedPriceEur" v-model="resultPriceEur" readonly>
                </div>
                <label class="col-2 col-form-label font-weight-bold">USD</label>
            </div>
            <div class="form-group row results">
                <label for="calculatedPrice" class="col-4 col-form-label text-right font-weight-bold">
                    Price <small>(regional)</small>
                </label>
                <div class="col-6">
                    <input type="text" class="form-control text-right" id="calculatedPrice" v-model="resultPrice" readonly>
                </div>
                <label class="col-2 col-form-label font-weight-bold">{{ currency }}</label>
            </div>
            <div class="form-group row results mb-3">
                <label for="calculatedPricePerUnitEur" class="col-4 col-form-label text-right font-weight-bold">
                    Price per unit
                </label>
                <div class="col-6">
                    <input type="text" class="form-control text-right" id="calculatedPricePerUnitEur" v-model="resultPricePerUnitEur" readonly>
                </div>
                <label class="col-2 col-form-label font-weight-bold">{{ currency }} / L</label>
            </div>
        </div>
    </div>
    <div class="row justify-content-lg-center">
        <div class="col col-lg-6">
            <p class="text-center mb-0" v-if="date">
                <small>
                    Prices were updated on {{ date }}.
                </small>
            </p>
            <hr>
        </div>
    </div>
</div>

<footer>
    <p class="text-center">
        &copy; <a href="https://orazem.si" target="_blank">Orazem.si</a> <?= date('Y') ?>. All rights reserved.
    </p>
    <p class="text-center">
        <i class="github-icon"></i>
        <a href="https://github.com/BlazOrazem/fuel-consumption-calculator" target="_blank">
            Fuel Consumption Calculator on Github.
        </a>
    </p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="js/app.js"></script>

</body>
</html>