LightParking/index.html at master · LightlessOne/LightParking · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Light Parking</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.png">
</head>

<body>
    <div id="app-container">
        <!-- LEFT PANEL: Controls & Stats -->
        <div id="ui-panel">
            <h1>Light Parking</h1>
            <div class="section control-group">
                <div class="sub-section">
                    <label for="car-selector">Select Car</label>
                    <select id="car-selector" class="car-select"></select>
                </div>
                <div class="sub-section">
                    <label for="camera-mode-select">Camera Mode</label>
                    <select id="camera-mode-select" class="car-select">
                        <option value="static">Static</option>
                        <option value="follow" selected>Follow</option>
                        <option value="followRotate">Follow & Rotate</option>
                    </select>
                </div>
                <div class="sub-section">
                    <label for="map-select">Map</label>
                    <select id="map-select" class="car-select"></select>
                </div>
            </div>

            <div class="section control-group">
                <label for="zoom-slider">ZOOM<span id="zoom-value">1.00x</span></label>
                <input type="range" id="zoom-slider" min="0.25" max="4.0" value="1" step="0.25">
            </div>

            <button id="reset-btn" class="primary-btn">Reset Car Position</button>

            <div class="section" id="car-details"></div>

            <div class="stat-card">
                <div class="stat-label">STEERING</div>
                <div id="steering-indicator" class="stat-value">0.0° ↑</div>
                <div class="hint">[ A ← · → D ] - Steer</div>
                <div class="hint">[ R ] - Center steering</div>
            </div>

            <div class="stat-card">
                <div class="stat-label">SPEED</div>
                <div id="speed-indicator" class="stat-value">0.0 km/h</div>
                <div class="hint">[ W ↑ · S ↓ ] - Drive</div>
                <div class="hint">[ ␣ ] - Handbrake</div>
            </div>
        </div>

        <!-- CENTER: Canvas -->
        <div id="canvas-wrapper">
            <canvas id="parkingCanvas" width="1000" height="900"></canvas>
        </div>

        <!-- RIGHT PANEL: Car Management -->
        <div id="car-panel">
            <h2>Light Garage</h2>

            <div class="section">
                <h3>Add Custom Car</h3>
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" id="new-car-name" placeholder="My Car" value="Custom">
                </div>
                <div class="form-row">
                    <div class="form-group half">
                        <label>Length (m)</label>
                        <input type="number" id="new-car-length" value="4.5" step="0.01" min="2.0" max="8.0">
                    </div>
                    <div class="form-group half">
                        <label>Width (m)</label>
                        <input type="number" id="new-car-width" value="1.8" step="0.01" min="1.4" max="2.5">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group half">
                        <label>Wheelbase (m)</label>
                        <input type="number" id="new-car-wheelbase" value="2.6" step="0.01" min="1.8" max="4.0">
                    </div>
                    <div class="form-group half">
                        <label>Track (m)</label>
                        <input type="number" id="new-car-track" value="1.55" step="0.01" min="1.2" max="2.0">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group half">
                        <label>Wheel radius (inch)</label>
                        <input type="number" id="new-car-wheel-radius" value="16" step="1" min="4" max="56">
                    </div>
                    <div class="form-group half">
                        <label>Max Steer (°)</label>
                        <input type="number" id="new-car-maxsteer" value="35" min="10" max="45" step="1">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group half">
                        <input type="color" id="new-car-color" value="#1e3a5f">
                    </div>
                </div>
                <button id="add-car-btn" class="secondary-btn">Add to Garage</button>
                <button id="remove-car-btn" class="danger-btn" style="margin-top: 14px;">Remove Current Car</button>
            </div>

            <div class="section">
                <h3>Import / Export</h3>
                <button id="export-car-btn" class="small-btn">Export as JSON</button>
                <button id="import-car-btn" class="small-btn">Import from JSON</button>
                <textarea id="import-export-area" placeholder='Paste JSON here' rows="2"></textarea>
            </div>

            <h2>Level Editor</h2>

            <div class="section">
                <h3>Add Object</h3>
                <select id="obstacle-type-select" class="car-select"></select>
                <button id="add-object-btn" class="secondary-btn" style="margin-top:8px;">Place New Object</button>
            </div>

            <div class="section">
                <h3>Edit Selected</h3>
                <div id="selected-info">No object selected</div>
                <div style="display: flex; gap: 6px; margin-top: 8px;">
                    <button id="delete-selected-btn" class="small-btn" style="flex:1;">🗑️ Delete</button>
                    <button id="rotate-selected-btn" class="small-btn" style="flex:1;">↻ Rotate</button>
                </div>
                <button id="clear-all-btn" class="danger-btn" style="margin-top:8px;">Clear All Objects</button>
            </div>

            <div class="legend" style="font-size:0.8rem;">
                <div><b>Editing controls:</b></div>
                <div>• Click object to select</div>
                <div>• Drag to move</div>
                <div>• Hold Shift + drag to rotate</div>
            </div>
        </div>
    </div>

    <script type="module" src="js/main.js"></script>
</body>

</html>