WorkPulse/index.html at main · revatikadam0607/WorkPulse · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Portal | Sadguru Controls and Automation Private Limited</title>
    <style>
        body { font-family: sans-serif; margin: 0; background-color: #f4f4f4; padding: 20px; }
        .container { max-width: 400px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        header { text-align: center; color: #004a99; margin-bottom: 20px; }
        label { display: block; margin: 10px 0 5px; font-weight: bold; }
        input { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }

        .geo-box { background: #fff3cd; border: 1px solid #ffeeba; padding: 15px; border-radius: 5px; text-align: center; }
        .btn-location { background: #856404; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 5px; width: 100%; margin-bottom: 10px; }
        .btn-submit { background: #28a745; color: white; border: none; padding: 15px; cursor: pointer; border-radius: 5px; width: 100%; font-size: 16px; font-weight: bold; }
        .btn-submit:disabled { background: #ccc; cursor: not-allowed; }
        #status { font-size: 12px; color: #666; }
    </style>
</head>
<body>

<div class="container">
    <header style="text-align:center; padding:20px; border-bottom:1px solid #ddd;">
    <img src="/logo.png" alt="Sadguru Logo" width="150">

    <h1>Sadguru Controls and Automation</h1>
    <p>It's all about Automation and Technology...!!!</p>
</header>

    <form action="/submit-report" method="POST" enctype="multipart/form-data">
        <label>Employee Name</label>
        <input type="text" name="empName" required placeholder="Enter Full Name">

        <label style="display: block; margin-bottom: 10px; font-weight: bold;">Take a live selfie</label>

<input type="file" id="real-camera" name="workImage" capture="user" style="display: none;" required>

<button type="button" onclick="document.getElementById('real-camera').click()"
        style="background-color: #007bff; color: white; padding: 12px; border: none; border-radius: 5px; width: 100%; font-weight: bold; cursor: pointer; margin-bottom: 10px;">
    📷 Open Camera for Selfie
</button>

<div id="file-name" style="font-size: 12px; color: #666; margin-bottom: 20px;">No photo captured yet</div>

        <div class="geo-box">
            <button type="button" class="btn-location" onclick="getLocation()">📍 Click to Verify Location</button>
            <div id="status">Location required to submit</div>
            <input type="hidden" id="lat" name="latitude">
            <input type="hidden" id="long" name="longitude">
        </div>

        <br>
        <button type="submit" id="submitBtn" class="btn-submit">Submit Report</button>
    </form>
</div>

<script>
    function getLocation() {
        const status = document.getElementById('status');
        if (navigator.geolocation) {
            status.innerHTML = "Locating...";
            navigator.geolocation.getCurrentPosition((position) => {
                document.getElementById('lat').value = position.coords.latitude;
                document.getElementById('long').value = position.coords.longitude;
                status.innerHTML = "Location Verified ✔️";
                status.style.color = "green";
            }, () => {
                status.innerHTML = "Error: Allow location access in browser.";
            });
        }
    }
    // This tells the browser: "When the camera finishes taking a photo..."
document.getElementById('real-camera').onchange = function() {
    // If a file exists (the selfie was taken)
    if (this.files && this.files.length > 0) {
        // Change the text to green and show a checkmark
        const display = document.getElementById('file-name');
        display.innerHTML = "✅ Selfie Captured Successfully!";
        display.style.color = "#28a745"; // Green color
        display.style.fontWeight = "bold";
    }
};
</script>

</body>
</html>