Henry-Leonard.github.io/index.html at main · OffredPosts/Henry-Leonard.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Print Price Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🖨️ 3D Print Price Calculator</h1>
            <p>Calculate pricing for your 3D printing commissions</p>
        </header>

        <div class="calculator">
            <div class="input-section">
                <h2>Print Details</h2>

                <div class="input-group">
                    <label for="printTime">Print Time (hours)</label>
                    <input type="number" id="printTime" min="0" step="0.1" placeholder="e.g., 3.5">
                </div>

                <div class="input-group">
                    <label for="filamentWeight">Filament Weight (grams)</label>
                    <input type="number" id="filamentWeight" min="0" step="1" placeholder="e.g., 150">
                </div>

                <div class="input-group">
                    <label for="printPlates">Number of Print Plates</label>
                    <input type="number" id="printPlates" min="1" value="1" step="1">
                </div>

                <div class="input-group">
                    <label for="complexity">Complexity Level</label>
                    <select id="complexity">
                        <option value="5">Simple - $5/plate</option>
                        <option value="7">Medium - $7/plate</option>
                        <option value="10">Complex - $10/plate</option>
                        <option value="15">Very Complex - $15/plate</option>
                    </select>
                </div>

                <button id="calculateBtn" class="calculate-btn">Calculate Price</button>
            </div>

            <div class="results-section">
                <h2>Price Breakdown</h2>

                <div class="price-breakdown">
                    <div class="breakdown-item">
                        <span>Labor (per plate):</span>
                        <span id="laborCostPerPlate">$5.00</span>
                    </div>
                    <div class="breakdown-item">
                        <span>Total Labor:</span>
                        <span id="totalLaborCost">$0.00</span>
                    </div>
                    <div class="breakdown-item">
                        <span>Machine Time:</span>
                        <span id="machineCost">$0.00</span>
                    </div>
                    <div class="breakdown-item">
                        <span>Filament Cost:</span>
                        <span id="filamentCost">$0.00</span>
                    </div>
                    <div class="breakdown-item total">
                        <span>Base Cost:</span>
                        <span id="baseCost">$0.00</span>
                    </div>
                    <div class="breakdown-item total">
                        <span>Final Price:</span>
                        <span id="finalPrice">$0.00</span>
                    </div>
                </div>

                <div class="pricing-info">
                    <h3>Pricing Formula</h3>
                    <p><strong>Labor:</strong> $5-15 per print plate (based on complexity)</p>
                    <p><strong>Machine Time:</strong> $2 per hour</p>
                    <p><strong>Filament:</strong> $0.02 per gram</p>
                    <p><strong>Complexity:</strong> Affects labor cost per plate</p>
                </div>
            </div>
        </div>

        <div class="examples">
            <h2>Example Calculations</h2>
            <div class="example-grid">
                <div class="example-card">
                    <h3>Small Print</h3>
                    <p>2 hours, 100g, 1 plate</p>
                    <p class="example-price">~$14.00</p>
                </div>
                <div class="example-card">
                    <h3>Medium Print</h3>
                    <p>5 hours, 250g, 1 plate</p>
                    <p class="example-price">~$25.00</p>
                </div>
                <div class="example-card">
                    <h3>Large Print</h3>
                    <p>8 hours, 500g, 2 plates</p>
                    <p class="example-price">~$52.00</p>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>