MartinSekeras.github.io/index.html at master · MartinSekeras/MartinSekeras.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
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html>

<head>
  <title>Product Stakr v0.5a</title>
  <style>
    .warning-message {
      color: red;
    }

    .container {
      margin-bottom: 10px;
    }

    .hidden-input {
      display: none;
    }

    .large-text {
      font-size: 18px;
      /*font-weight: bold;*/
    }

    .input-container {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }

    .input-container label {
      width: 150px;
      margin-right: 1px;
    }


    .card {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 20px;
      margin-right: 0px;
      box-shadow: 0px 0px 1px 0.25px rgba(0, 0, 0, .1);
    }

    .cardtwo {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 20px;
      margin-right: 0px;
      box-shadow: 0px 0px 1px 0.25px rgba(0, 0, 0, .1);
    }


    .card-title {
      font-size: 20px;
      font-weight: bold;
      margin-top: 1px;
      margin-bottom: 0px;
    }

    .card-title-two {
      font-size: 20px;
      font-weight: bold;
      margin-top: 1px;
      margin-bottom: 5px;
    }

    .author {
      font-size: 15px;
      font-weight: italic;
      color: green;
      margin-top: 0px;
      margin-bottom: 10px;
    }

    .calculate-button {
      margin-top: 5px;
      font-size: 20px;
      padding: 1px 10px;
      margin-left: 0px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;

    }

    .reset-button {
      margin-top: 5px;
      font-size: 20px;
      padding: 1px 10px;
      margin-left: 0px;
      background-color: #ff0000;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .input-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .calculate-button:hover {
      background-color: #2a612c;
    }

    .reset-button:hover {
      background-color: #5c0000;
    }
  </style>
  <script src="script.js"></script>
</head>

<body>
  <div class="card">
    <h1 class="card-title">Product Stakr v0.5a </h1>
    <h1 class="author"><i>by Martin Sekeres</i></h1>
    <p1>This is a beta software, intended for limited use as a general rule on calculating amount <br>
      of boxes that can be fit onto variety of pallets. In no way I take responsibility for any<br>
      issues user may or may not have while using this software, this is a alpha build and will<br>
      have issues i was not aware of. So use with caution as <b>estimates</b> only.<br><br></p1>

    <p1>With that disclaimer out of the way have fun using this software. Scroll down to see the<br>
      updates and development progress of this web app.</p1>
  </div>

  <div class="card">
    <h2 class="card-title">Pallet Specifications</h2>

    <div class="container">
      <input type="checkbox" id="singlePalletCheckbox" onchange="handleCheckboxChange(this)">
      <label for="singlePalletCheckbox">Single Pallet (1200mm x 1000mm x 1600, Max Weight: 500kg)</label>
    </div>

    <div id="singlePalletFields" class="container hidden-input">
      <label for="singlePalletLength">Pallet Length(mm):</label>
      <input type="number" id="singlePalletLength" value="1200"><br>

      <label for="singlePalletWidth">Pallet Width(mm):</label>
      <input type="number" id="singlePalletWidth" value="1000"><br>

      <label for="singlePalletHeight">Pallet Height(mm):</label>
      <input type="number" id="singlePalletHeight" value="1600"><br>

      <label for="singlePalletMaxWeight">Max Pallet Weight(kg):</label>
      <input type="number" id="singlePalletMaxWeight" value="500"><br>
    </div>

    <div class="container">
      <input type="checkbox" id="doublePalletCheckbox" onchange="handleCheckboxChange(this)">
      <label for="doublePalletCheckbox">Double Pallet (2400mm x 1000mm x 1600, Max Weight: 500kg)</label>
    </div>

    <div id="doublePalletFields" class="container hidden-input">
      <label for="doublePalletLength">Pallet Length(mm):</label>
      <input type="number" id="doublePalletLength" value="2400"><br>

      <label for="doublePalletWidth">Pallet Width(mm):</label>
      <input type="number" id="doublePalletWidth" value="1000"><br>

      <label for="doublePalletHeight">Pallet Height(mm):</label>
      <input type="number" id="doublePalletHeight" value="1600"><br>

      <label for="doublePalletMaxWeight">Max Pallet Weight(kg):</label>
      <input type="number" id="doublePalletMaxWeight" value="500"><br>
    </div>

    <div class="container">
      <input type="checkbox" id="customPalletCheckbox" onchange="handleCheckboxChange(this)">
      <label for="customPalletCheckbox">Custom Pallet (Not functional, will not yield any results.)</label>
    </div>

    <div id="customPalletFields" class="container hidden-input">
      <label for="customPalletLength">Pallet Length(mm):</label>
      <input type="number" id="customPalletLength"><br>

      <label for="customPalletWidth">Pallet Width(mm):</label>
      <input type="number" id="customPalletWidth"><br>

      <label for="customPalletHeight">Pallet Height(mm):</label>
      <input type="number" id="customPalletHeight"><br>

      <label for="customPalletMaxWeight">Max Pallet Weight(kg):</label>
      <input type="number" id="customPalletMaxWeight"><br>
    </div>
  </div>

  <div class="card">
    <h2 class="card-title">Product Specifications</h2>
    <div class="input-container">
      <label for="productLength">Product Length (mm):</label>
      <input type="number" id="productLength" class="large-text">
    </div>
    <div class="input-container">
      <label for="productWidth">Product Width (mm):</label>
      <input type="number" id="productWidth" class="large-text">
    </div>
    <div class="input-container">
      <label for="productHeight">Product Height (mm):</label>
      <input type="number" id="productHeight" class="large-text">
    </div>
    <div class="input-container">
      <label for="productWeight">Product Weight (kg):</label>
      <input type="number" id="productWeight" class="large-text">
    </div>
    <button onclick="calculateMaxProducts()" class="calculate-button">Calculate</button>


    <div id="result"></div>
  </div>

  <div class="card">
    <h2 class="card-title">Results</h2>
    <p id="maxProducts"></p>
    <p id="warningMessageOne" class="warning-message"></p>
    <p id="warningMessageTwo" class="warning-message"></p>
  </div>

  <!--<button onclick="resetForm()" class="reset-button">Reset</button>-->
  <div class="card">
    <h2 class="card-title-two">Updates</h2>
    <div class="cardtwo">
      <h3 class="card-title">03 June 2023</h3>
      <p1><b>Update version 0.3a</b>, added a lot of functionality to pallet stacker.<br>
        For one it is now possible to calculate additional orientations. This means that<br>
        the calculator can detect and orient boxes on pallet to fit more. Such as 3 boxes<br>
        laying flat and 1 box standing up on it's end at the endge of a pallet.<br>
        This is a beta feature and only reflect double pallets and may not work 100%<br><br></p1>

      <p1><b>Update version 0.3b</b>, New quick update on features i wanted to add before.<br>
        The web app can now handle error correcting when nothing is inputted into fields, it<br>
        can also detect overweight pallets and alert user if the pallet may be too heavy<br>
        for racking, depending on lenght of pallet and weight the user inputted. These<br>
        variables are hard coded will vary as every deployment is different, optional input field planned.</p1>
    </div>

    <div class="cardtwo">
      <h3 class="card-title">04 June 2023</h3>
      <p1><b>Update version 0.4</b>, New day new update, fairly small update today. The web app is <br>
        now simplified, no longer pallet spec is user inputtable but simple checkboxes with <br>
        predetermined values. Future update will feature custom checkbox with user <br>
        selectable values but for now for simplicity sake it was made with 2 options.</p1>
    </div>

    <div class="cardtwo">
      <h3 class="card-title">06 June 2023</h3>
      <p1><b>Update version 0.5a</b>, Big update today, frst we have the new name for the program<br>
        Let me introducte you to Product Stakr. A sophisticated web app to calculate number of products<br>
        you can fit onto a pallet based on products physical and volumetric based infrmation.<br><br>
        Secondly, new update brings, layered stacking, this new form of calculating dimensions can<br>
        go ayer by layer checking physical dimensions and volume to figure out the best possible<br>
        way to stack the product. I hope you enjoy this update and i will see you all in the next one.</p1>
    </div>
  </div>
</body>

</html>