Subversion Repositories SmartDukaan

Rev

Rev 36642 | Rev 36689 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 36642 Rev 36686
Line 5... Line 5...
5 
    <title>Location Verification - SmartDukaan</title>
 5 
    <title>Location Verification - SmartDukaan</title>
6 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
 6 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
7 
    <style>
 7 
    <style>
8 
        body {
 8 
        body {
9 
            background: #f4f6f9;
 9 
            background: #f4f6f9;
10 
            font-family: 'Segoe UI', sans-serif;
 10 
            font-family: 'Segoe UI', Roboto, sans-serif;
11 
        }
 11 
        }
12 
 
 12 
 
13 
        .geo-card {
 13 
        .geo-card {
14 
            max-width: 480px;
 14 
            max-width: 480px;
15 
            margin: 30px auto;
 15 
            margin: 30px auto;
16 
            background: #fff;
 16 
            background: #fff;
17 
            border-radius: 12px;
 17 
            border-radius: 14px;
18 
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
 18 
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
19 
            overflow: hidden;
 19 
            overflow: hidden;
20 
        }
 20 
        }
21 
 
 21 
 
22 
        .geo-header {
 22 
        .geo-header {
23 
            background: linear-gradient(135deg, #1a73e8, #0d47a1);
 23 
            background: linear-gradient(135deg, #f7931e 0%, #ed1c24 100%);
24 
            color: #fff;
 24 
            color: #fff;
25 
            padding: 24px;
 25 
            padding: 22px 24px;
26 
            text-align: center;
 26 
            text-align: center;
27 
        }
 27 
        }
28 
 
 28 
 
- 
 
 29 
        .geo-header .brand-row {
- 
 
 30 
            display: flex;
- 
 
 31 
            align-items: center;
- 
 
 32 
            justify-content: center;
- 
 
 33 
            gap: 10px;
- 
 
 34 
            margin-bottom: 6px;
- 
 
 35 
        }
- 
 
 36 
 
- 
 
 37 
        .geo-header .brand-mark {
- 
 
 38 
            width: 36px;
- 
 
 39 
            height: 36px;
- 
 
 40 
            background: #fff;
- 
 
 41 
            color: #ed1c24;
- 
 
 42 
            border-radius: 8px;
- 
 
 43 
            display: inline-flex;
- 
 
 44 
            align-items: center;
- 
 
 45 
            justify-content: center;
- 
 
 46 
            font-weight: 800;
- 
 
 47 
            font-size: 20px;
- 
 
 48 
            letter-spacing: -1px;
- 
 
 49 
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
- 
 
 50 
        }
- 
 
 51 
 
29 
        .geo-header h4 {
 52 
        .geo-header h4 {
30 
            margin: 0;
 53 
            margin: 0;
31 
            font-weight: 600;
 54 
            font-weight: 700;
- 
 
 55 
            letter-spacing: 0.3px;
32 
        }
 56 
        }
33 
 
 57 
 
34 
        .geo-header p {
 58 
        .geo-header p {
35 
            margin: 8px 0 0;
 59 
            margin: 8px 0 0;
36 
            opacity: 0.9;
 60 
            opacity: 0.95;
37 
            font-size: 14px;
 61 
            font-size: 13px;
38 
        }
 62 
        }
39 
 
 63 
 
40 
        .geo-body {
 64 
        .geo-body {
41 
            padding: 24px;
 65 
            padding: 24px;
42 
        }
 66 
        }
Line 67... Line 91...
67 
        .step-dot.done {
 91 
        .step-dot.done {
68 
            background: #4caf50;
 92 
            background: #4caf50;
69 
        }
 93 
        }
70 
 
 94 
 
71 
        .step-dot.current {
 95 
        .step-dot.current {
72 
            background: #1a73e8;
 96 
            background: #ed1c24;
73 
        }
 97 
        }
74 
 
 98 
 
75 
        .btn-geo {
 99 
        .btn-geo {
76 
            background: #1a73e8;
 100 
            background: linear-gradient(135deg, #f7931e 0%, #ed1c24 100%);
77 
            color: #fff;
 101 
            color: #fff;
78 
            border: none;
 102 
            border: none;
79 
            border-radius: 8px;
 103 
            border-radius: 8px;
80 
            padding: 12px 24px;
 104 
            padding: 12px 24px;
81 
            font-size: 16px;
 105 
            font-size: 16px;
82 
            width: 100%;
 106 
            width: 100%;
83 
            cursor: pointer;
 107 
            cursor: pointer;
- 
 
 108 
            font-weight: 600;
- 
 
 109 
            box-shadow: 0 2px 8px rgba(237, 28, 36, 0.25);
84 
        }
 110 
        }
85 
 
 111 
 
86 
        .btn-geo:hover {
 112 
        .btn-geo:hover {
87 
            background: #1558b0;
 113 
            filter: brightness(0.95);
88 
            color: #fff;
 114 
            color: #fff;
89 
        }
 115 
        }
90 
 
 116 
 
91 
        .btn-geo:disabled {
 117 
        .btn-geo:disabled {
92 
            background: #b0bec5;
 118 
            background: #b0bec5;
Line 115... Line 141...
115 
            cursor: pointer;
 141 
            cursor: pointer;
116 
            transition: border-color 0.3s;
 142 
            transition: border-color 0.3s;
117 
        }
 143 
        }
118 
 
 144 
 
119 
        .upload-area:hover {
 145 
        .upload-area:hover {
120 
            border-color: #1a73e8;
 146 
            border-color: #ed1c24;
121 
        }
 147 
        }
122 
 
 148 
 
123 
        .upload-area.uploaded {
 149 
        .upload-area.uploaded {
124 
            border-color: #4caf50;
 150 
            border-color: #4caf50;
125 
            background: #e8f5e9;
 151 
            background: #e8f5e9;
Line 147... Line 173...
147 
                transform: rotate(360deg);
 173 
                transform: rotate(360deg);
148 
            }
 174 
            }
149 
        }
 175 
        }
150 
 
 176 
 
151 
        .form-control:focus {
 177 
        .form-control:focus {
152 
            border-color: #1a73e8;
 178 
            border-color: #ed1c24;
153 
            box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
 179 
            box-shadow: 0 0 0 0.2rem rgba(237, 28, 36, 0.20);
154 
        }
 180 
        }
155 
    </style>
 181 
    </style>
156 
</head>
 182 
</head>
157 
<body>
 183 
<body>
158 
 
 184 
 
159 
<div class="geo-card">
 185 
<div class="geo-card">
160 
    <div class="geo-header">
 186 
    <div class="geo-header">
- 
 
 187 
        <div class="brand-row">
- 
 
 188 
            <span class="brand-mark">S</span>
161 
        <h4>SmartDukaan</h4>
 189 
            <h4>SmartDukaan</h4>
- 
 
 190 
        </div>
162 
        <p>Location Verification</p>
 191 
        <p>Location Verification</p>
163 
    </div>
 192 
    </div>
164 
    <div class="geo-body">
 193 
    <div class="geo-body">
165 
        <div class="step-indicator">
 194 
        <div class="step-indicator">
166 
            <div class="step-dot current" id="dot1"></div>
 195 
            <div class="step-dot current" id="dot1"></div>
Line 205... Line 234...
205 
        <!-- STEP 3: Upload Photo & Submit -->
 234 
        <!-- STEP 3: Upload Photo & Submit -->
206 
        <div class="step" id="step3">
 235 
        <div class="step" id="step3">
207 
            <h6 class="mb-3">Step 3: Upload Store Photo</h6>
 236 
            <h6 class="mb-3">Step 3: Upload Store Photo</h6>
208 
            <div class="upload-area" id="uploadArea" onclick="document.getElementById('photoInput').click();">
 237 
            <div class="upload-area" id="uploadArea" onclick="document.getElementById('photoInput').click();">
209 
                <div id="uploadPlaceholder">
 238 
                <div id="uploadPlaceholder">
- 
 
 239 
                    <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="none"
- 
 
 240 
                         stroke="#ed1c24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
210 
                    <p style="font-size:32px; margin:0;">📷</p>
 241 
                         style="display:block; margin: 0 auto 8px;">
- 
 
 242 
                        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
- 
 
 243 
                        <circle cx="12" cy="13" r="4"></circle>
- 
 
 244 
                    </svg>
211 
                    <p class="text-muted mb-0">Tap to capture or upload store photo</p>
 245 
                    <p class="text-muted mb-0">Tap to capture or upload store photo</p>
212 
                </div>
 246 
                </div>
213 
                <img id="photoPreview" class="preview-img" style="display:none;">
 247 
                <img id="photoPreview" class="preview-img" style="display:none;">
214 
                <input type="file" id="photoInput" accept="image/*" capture="environment" style="display:none;">
 248 
                <input type="file" id="photoInput" accept="image/*" capture="environment" style="display:none;">
215 
            </div>
 249 
            </div>
Line 377... Line 411...
377 
                latitude: $('#latitude').val(),
 411 
                latitude: $('#latitude').val(),
378 
                longitude: $('#longitude').val(),
 412 
                longitude: $('#longitude').val(),
379 
                imageDocumentId: $('#imageDocumentId').val()
 413 
                imageDocumentId: $('#imageDocumentId').val()
380 
            },
 414 
            },
381 
            success: function (resp) {
 415 
            success: function (resp) {
382 
                // Replace body with thank you
 416 
                // Replace body with thank you (SVG check icon — no emoji to avoid charset issues)
383 
                $('.geo-body').html(
 417 
                $('.geo-body').html(
384 
                        '<div class="text-center py-4">' +
 418 
                        '<div class="text-center py-4">' +
- 
 
 419 
                        '<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 24 24"' +
- 
 
 420 
                        ' fill="none" stroke="#22c55e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"' +
385 
                        '<div style="font-size:64px;">✅</div>' +
 421 
                        ' style="display:block; margin: 0 auto;">' +
- 
 
 422 
                        '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>' +
- 
 
 423 
                        '</svg>' +
386 
                        '<h5 class="mt-3">Thank You!</h5>' +
 424 
                        '<h5 class="mt-3">Thank You!</h5>' +
387 
                        '<p class="text-muted">Your location has been submitted successfully.<br>Our team will review it shortly.</p>' +
 425 
                        '<p class="text-muted">Your location has been submitted successfully.<br>Our team will review it shortly.</p>' +
388 
                        '</div>'
 426 
                        '</div>'
389 
                );
 427 
                );
390 
                $('.step-indicator').remove();
 428 
                $('.step-indicator').remove();