mobileapi-examples/javascript/trade-in-estimator/index.html at main · MobileAPI-dev/mobileapi-examples · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trade-In Estimator - MobileAPI.dev</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>Trade-In <span class="accent">Estimator</span></h1>
    <p>Estimate your device's trade-in value &mdash; powered by <a href="https://mobileapi.dev" target="_blank">MobileAPI.dev</a></p>
</header>

<div class="api-key-bar">
    <label for="api-key-input">API Key</label>
    <input type="password" id="api-key-input" placeholder="Paste your MobileAPI key here">
    <span class="hint">Free tier: 200 req/month. <a href="https://mobileapi.dev/signup/" target="_blank">Get a key</a></span>
</div>

<div class="container">

    <div class="error-banner" id="error-banner"></div>

    <!-- Device search -->
    <div class="search-section" id="search-section">
        <label for="search-input">Find Your Device</label>
        <input type="text" id="search-input" placeholder="Start typing a device name..." autocomplete="off">
        <div class="autocomplete-dropdown" id="dropdown"></div>
    </div>

    <!-- Device info card -->
    <div class="device-card" id="device-card">
        <div class="device-header" id="device-header"></div>
        <div class="spec-grid" id="spec-grid"></div>

        <!-- Condition selector -->
        <div class="condition-section">
            <h3>Select Device Condition</h3>
            <div class="condition-options" id="condition-options">
                <div class="condition-btn" data-condition="excellent">
                    <span class="label">Excellent</span>
                    <span class="desc">Like new, no scratches</span>
                </div>
                <div class="condition-btn" data-condition="good">
                    <span class="label">Good</span>
                    <span class="desc">Minor wear, works perfectly</span>
                </div>
                <div class="condition-btn" data-condition="fair">
                    <span class="label">Fair</span>
                    <span class="desc">Visible wear, fully functional</span>
                </div>
                <div class="condition-btn" data-condition="poor">
                    <span class="label">Poor</span>
                    <span class="desc">Heavy wear or minor damage</span>
                </div>
            </div>
        </div>

        <!-- Estimate result -->
        <div class="estimate-result" id="estimate-result">
            <div class="estimate-label">Estimated Trade-In Value</div>
            <div class="estimate-value" id="estimate-value">$0</div>
            <div class="estimate-range" id="estimate-range"></div>
            <div class="estimate-breakdown" id="estimate-breakdown"></div>
            <div class="disclaimer">
                This is a demonstration estimate based on publicly available device specifications.
                Actual trade-in values vary by retailer, region, and market conditions.
            </div>
        </div>
    </div>

</div>

<footer>
    Powered by <a href="https://mobileapi.dev" target="_blank">MobileAPI.dev</a> &mdash;
    <a href="https://mobileapi.dev/docs/" target="_blank">Docs</a> &middot;
    <a href="https://mobileapi.dev/signup/" target="_blank">Get Free API Key</a>
</footer>

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

</body>
</html>