Gem-Price-Estimator/index.html at main · DMS-Menula/Gem-Price-Estimator · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gem Price Estimator - For Sri Lankan & Global Gems</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="https://img.pikbest.com/origin/09/22/51/64ipIkbEsTIBV.png!sw800">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KDJR0M31KS"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-KDJR0M31KS');
</script>
</head>
<body>
    <div class="container">
        <header class="hero">
            <h1 class="title">Gem Price Estimator</h1>
            <p class="subtitle">Realistic pricing for Sri Lankan and global gemstones. Enter details for instant estimates in USD & LKR.</p>
            <div class="sparkles">✨</div>
        </header>

        <main class="main-content">
            <form id="gemForm" class="estimator-form">
                <div class="input-group">
                    <label for="gemType">Gem Type:</label>
                    <select id="gemType" required>
                        <option value="">Select a Gem</option>
                    </select>
                </div>

                <div class="input-group">
                    <label for="weight">Weight (Carats):</label>
                    <input type="number" id="weight" min="0.01" max="100" step="0.01" required>
                    <div class="slider-container">
                        <input type="range" id="weightSlider" min="0.01" max="100" step="0.01" value="1">
                    </div>
                </div>

                <div class="input-group">
                    <label for="color">Color Intensity:</label>
                    <select id="color" required>
                        <option value="">Select Color Intensity</option>
                        <option value="faint">Faint</option>
                        <option value="light">Light</option>
                        <option value="medium">Medium</option>
                        <option value="intense">Intense</option>
                        <option value="vivid">Vivid</option>
                    </select>
                </div>

                <div class="input-group">
                    <label for="clarity">Clarity:</label>
                    <select id="clarity" required>
                        <option value="">Select Clarity</option>
                        <option value="poor">Poor</option>
                        <option value="fair">Fair</option>
                        <option value="good">Good</option>
                        <option value="veryGood">Very Good</option>
                        <option value="excellent">Excellent</option>
                    </select>
                </div>

                <div class="input-group">
                    <label for="cut">Cut Quality:</label>
                    <select id="cut" required>
                        <option value="">Select Cut Quality</option>
                        <option value="poor">Poor</option>
                        <option value="fair">Fair</option>
                        <option value="good">Good</option>
                        <option value="veryGood">Very Good</option>
                        <option value="excellent">Excellent</option>
                    </select>
                </div>

                <div class="input-group">
                    <label class="toggle-label">
                        <input type="checkbox" id="usdToggle" checked hidden> Show in USD
                        <span class="toggle-switch"></span>
                    </label>
                </div>

                <button type="submit" class="calculate-btn">Estimate Price ✨</button>
            </form>

            <div id="result" class="result hidden">
                <h2>Estimated Price Range</h2>
                <div class="price-display">
                    <p id="lowPrice"></p>
                    <p id="highPrice"></p>
                    <p id="currencyLabel"></p>
                </div>
                <div class="factors-info">
                    <h3>Key Factors Considered:</h3>
                    <ul id="factorsList"></ul>
                </div>
                <button id="exportBtn" class="export-btn">Export Report 📄</button>
            </div>

            <section class="education">
                <h2>Gemstone Education</h2>
                <p>Learn more about gems! Prices are based on 2025 market data, including Sri Lankan specialties like Padparadscha Sapphires. Note: These are estimates; consult a certified gemologist for accurate appraisals.</p>
                <div class="gem-cards">
                    <div class="card">
                        <h3>Blue Sapphire (Sri Lankan)</h3>
                        <p>Vibrant blues from Ceylon. Avg: $600-$6,500/ct depending on quality.</p>
                    </div>
                    <div class="card">
                        <h3>Padparadscha Sapphire</h3>
                        <p>Rare pink-orange hue from Sri Lanka. Up to $30,000+/ct for premium.</p>
                    </div>
                    <div class="card">
                        <h3>Parti Sapphire</h3>
                        <p>Multi-color zoning, Sri Lankan: $500-$5,000+/ct.</p>
                    </div>
                    <div class="card">
                        <h3>Ruby</h3>
                        <p>Intense red; prices vary widely, avg $5,000/ct for good quality.</p>
                    </div>
                </div>
            </section>
        </main>
    </div>


    <script src="data/data.js"></script>
    <script src="script.js"></script>

</body>
</html>