-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·180 lines (172 loc) · 8.43 KB
/
index.html
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="A small website that calculates break even points, taking into account (dis)economies of scale" />
<title>DESBEP | (Dis)Economies of Scale, and Break Even Points</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<ul class="left hide-on-med-and-down">
<li><a href="javascript:addVar();"><i class="material-icons medium" id="add">plus_one</i></a></li>
<li><a href="javascript:delVar();"><i class="material-icons medium" id="delete">delete</i></a></li>
</ul>
<a href="#" class="brand-logo center">DESBEP</a>
<a href="#" data-activates="mobile" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="modal-trigger" href="#helpmodal">Help</a></li>
<li><a class="modal-trigger" href="#bugsmodal">Bugs</a></li>
<li><a class="modal-trigger" href="#changemodal">Changelog</a></li>
</ul>
<ul class="side-nav" id="mobile">
<li><a href="javascript:addVar();">Add</a></li>
<li><a href="javascript:delVar();">Remove</a></li>
<li><a class="modal-trigger" href="#helpmodal">Help</a></li>
<li><a class="modal-trigger" href="#bugsmodal">Bugs</a></li>
<li><a class="modal-trigger" href="#changemodal">Changelog</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main class="valign-wrapper">
<div class="container grey lighten-4 z-depth-1 hoverable">
<form action="javascript:void(0);" name="">
<div class="center-align"><h5 class="blue-grey-text text-darken-3">Variables</h5></div>
<div class="row">
<div class="col m3 offset-m3 s10 offset-s1">
<input type="number" id="f" name="f" required min="0" value="12000" step="0.01" class="update">
<label for="f">Fixed costs</label>
</div>
<div class="col m3 offset-m0 s10 offset-s1">
<input type="number" id="i" name="i" required min="0" value="200" step="0.01" class="update">
<label for="i">Selling price per unit</label>
</div>
</div>
<div class="divider"></div>
<div>
<div class="row" id="variable">
<div id="v0">
<div class="col m3 offset-m3 s5 offset-s1">
<input type="number" id="iv0" name="iv0" required min="0" value="10" step="0.01" class="update">
<label for="iv0">Variable cost 1</label>
</div>
<div class="col offset-s6"></div>
</div>
</div>
</div>
</form>
<br>
<div class="divider"></div>
<div class="center-align"><h5 class="blue-grey-text text-darken-3">Break Even Points</h5></div>
<div class="row">
<div class="col m8 offset-m2 s10 offset-s1" id="output">
<div class="col m3 s12" id="b0">
<input readonly type="text" id="ib0" value="N/A">
<label for="ib0">Break Even Point 1</label>
</div>
</div>
</div>
<div class="row">
<div class="hide-on-small-only col s8 offset-s2" id="graph" style="height: 200px"></div>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-4">
<div class="container">
<div class="row">
<div class="col s12">
<h5 class="white-text">Made with care</h5>
<p class="grey-text text-lighten-4">This service has been made with love and care. Despite this, there could still be bugs, errors
or other faults. I sincerely apologise if this is the case, but I take no legal responsibility or liability to any damage this product
may cause to any entity or object. Please remember, break even analysis is a prediction tool, and should not be used as a definitive
outcome or future.</p>
<p class="grey-text text-lighten-4">Desmos is not affiliated with this site, and so neither party is responsible for the other. You are subject to their terms whilst
using their services</p>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2017 Harry Shipton
</div>
</div>
</footer>
<!-- Modals-->
<div id="helpmodal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Help</h4>
<h5>Input</h5>
<p>Fixed costs | Costs that do not change based on production - this should be the total.</p>
<p>Variable cost | the costs of production for producing the product (per product) after the specified amount of output is reached.</p>
<p>Point of change | the amount of output where the current variable cost should start.</p>
<p>Selling price per unit | The selling price of the product/service per unit.</p>
<p>Submit | Really?</p>
<p>All inputs for monetary values can be in any currency, just make sure you use the same currency on all inputs.</p>
<div class="divider"></div>
<h5>Output</h5>
<p>Any output that produces 'N/A' is not an error, it is where two breakevens do not exist for the input.</p>
<p>Break Even Point | The amount of output that is needed to breakeven.</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<div id="bugsmodal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Bugs/"features"</h4>
<p>The break even points can produce a negative value under the right circumstances,
and although mathematically correct, this is not discarded by the program,
and so should be disregarded for business purposes</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Close</a>
</div>
</div>
<div id="changemodal" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Changelog</h4>
<h5>Version 2</h5>
<p>2.1.2 | Fixed false break even values</p>
<p>2.1.1 | Moved to our own API key</p>
<p>2.1.0 | Added graphing support back in</p>
<p>2.0.0 | Multiple variable cost rates are now possible! Graphing support has been removed in favour of this. However, graphing is being worked on currently!</p>
<div class="divider"></div>
<h5>Version 1</h5>
<p>1.3.0 | Added graph support for non mobile users, provided by Desmos</p>
<p>1.2.0 | Mobile devices properly supported now!</p>
<p>1.1.2 | Minor changes related to legal text etc</p>
<p>1.1.1 | Minor UI changes</p>
<p>1.1.0 | Added beautiful stuff using Materialize.css</p>
<p>1.0.0 | Initial code, nothing beautiful</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-blue btn-flat">Close</a>
</div>
</div>
<!--JS imports-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="https://www.desmos.com/api/v0.6/calculator.js?apiKey=b88927985e064453ab206bac398da46f"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73065355-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>