CrackAlert/createAlert.html at main · FT1E/CrackAlert · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CrackAlert</title>
        <link rel="icon" href="media/Logo.jpg" type="image/jpeg">
        <link rel="stylesheet" href="normalUser.css">
    </head>

    <style>
        .back-icon{
            height: 10vh;
            aspect-ratio: 1/1;
            position: absolute;
            left: 0;
        }
    </style>

    <body>

        <div class="top-bar">
            <!-- Back button in Top Left -->
            <a href="index.html">
                <img src="media/back_arrow_icon.png" href="index.html" class="back-icon">
            </a>
            <span class="title" style="z-index: 2;">CreateAlert</span>
        </div>


        <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
        <!-- Create Alert -->
        <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------>


        <!-- Photo Upload Section -->
        <div style="width: 255px; height: 232px; left: 64px; top: 82px; position: absolute; text-align: center;">
            <!-- Section Title -->
            <div style="left: 14px; top: 0px; position: absolute; color: black; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">
                Take or upload a photo:
            </div>

            <!-- Background Box -->
            <div style="width: 255px; height: 194px; left: 0px; top: 38px; position: absolute; background: #D9D9D9; border-radius: 20px">
            </div>

            <!-- Take Photo Icon -->
            <div style="width: 96px; height: 74px; left: 79px; top: 103px; position: absolute">
                <!-- Camera Button -->
                <label for="cameraInput" style="cursor: pointer;">
                    <img src="media/camera_icon.png" alt="Camera Icon" style="width: 100%; height: 100%;">
                </label>
                <input id="cameraInput" type="file" accept="image/*" capture="environment" style="display: none;" onchange="handleCameraInput(event)">
            </div>

            <!-- "Take a photo" Text -->
            <div style="left: 78px; top: 78px; position: absolute">
                <span style="color: black; font-size: 15px; font-family: Kavoon; font-weight: 400; word-wrap: break-word;">Take a photo</span>
            </div>
            <!-- "Upload" Text -->
            <div style="left: 267px; top: 200px; position: absolute; color: black; font-size: 15px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">
                Upload
            </div>
            <!-- Upload Icon -->
            <div style="width: 43px; height: 38px; left: 270px; top: 159px; position: absolute" onclick="triggerFileInput()">
            <!-- <div style="width: 32.25px; height: 28.50px; left: 5.38px; top: 4.75px; position: absolute; border: 4px #1E1E1E solid"></div> -->
            <img src="media/upload_icon.png" >
            </div>
        </div>

        <!-- Hidden File Input -->
        <input id="fileInput" type="file" accept="image/*" style="display: none;" onchange="handleFileSelect(event)">

        <!-- Location Section -->
        <div style="left: 146px; top: 327px; position: absolute; color: black; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">
        Location:
        </div>
        <textarea style="width: 333px; height: 61px; left: 30px; top: 352px; position: absolute; background: #D9D9D9; font-size: 16px; font-family: Arial, sans-serif; border: none; padding: 5px; resize: none;"></textarea>


        <!-- Type Section -->
        <div style="width: 333px; height: 86px; left: 30px; top: 439px; position: absolute">
            <!-- Background Box -->
            <div style="width: 333px; height: 61px; left: 0px; top: 25px; position: absolute; background: #D9D9D9">
            </div>
            <!-- "Type:" Text -->
            <div style="left: 135px; top: 0px; position: absolute; color: black; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">
                    Type:
            </div>
            <!-- Dropdown Menu -->
            <select style="width: 333px; height: 61px; left: 0px; top: 25px; position: absolute; background: #D9D9D9; font-size: 16px; font-family: Arial, sans-serif; border: none; padding: 5px;">
                <option value="crack">Crack</option>
                <option value="leak">Leak</option>
                <option value="busted">Busted</option>
                <option value="damaged">Damaged</option>
                <option value="other">Other</option>
            </select>
        </div>

        <!-- Description Section -->
        <div style="width: 333px; height: 187px; left: 30px; top: 543px; position: absolute">
            <!-- Background Box -->
            <div style="width: 333px; height: 162px; left: 0px; top: 25px; position: absolute; background: #D9D9D9; border-radius: 20px">
            </div>
            <!-- "Description:" Text -->
            <div style="left: 101px; top: 0px; position: absolute; color: black; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word">
                Description:
            </div>
            <!-- Textarea -->
                <textarea style="width: 313px; height: 142px; left: 10px; top: 35px; position: absolute; background: transparent; font-size: 16px; font-family: Arial, sans-serif; border: none; padding: 10px; resize: none; outline: none; border-radius: 15px;"></textarea>
        </div>

        <!-- Submit Button -->
        <div style="width: 205px; height: 47px; left: 94px; top: 773px; position: absolute; background: #D9D9D9; border-radius: 30px; cursor: pointer;"
        onclick="handleSubmit()">
        </div>
        <div style="left: 162px; top: 784px; position: absolute; color: black; font-size: 20px; font-family: Kavoon; font-weight: 400; word-wrap: break-word; cursor: pointer;"
        onclick="handleSubmit()">
        Submit
        </div>

        <!-- Popup Div (Initially Hidden) -->
        <div id="popup" style="display: none; width: 250px; height: 100px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #c47f7f; border-radius: 20px; text-align: center; padding: 20px; font-family: Arial, sans-serif; font-size: 18px; color: black; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);">
        You have successfully created an alert!
        </div>


        <script>
            function handleSubmit() {
                // Show the popup
                const popup = document.getElementById("popup");
                popup.style.display = "block";

                // add the newly reported crack
                cord = JSON.parse(localStorage.getItem("newCrack"));
                markers = JSON.parse(localStorage.getItem("cracks"));
                markers.push(cord);
                localStorage.setItem("cracks", JSON.stringify(markers));

                // Hide the popup and redirect after 4 seconds
                setTimeout(() => {
                    popup.style.display = "none";
                    window.location.href="index.html"; // Replace with your desired HTML file
                }, 1500);
            }


            function triggerFileInput() {
                // Trigger the hidden file input
                document.getElementById("fileInput").click();
            }

            function handleFileSelect(event) {
                const file = event.target.files[0]; // Get the selected file
                if (file) {
                    // You can handle the selected file here
                    console.log("File selected:", file.name);
                    alert("File uploaded successfully: " + file.name);
                }
            }
            function handleCameraInput(event) {
                const file = event.target.files[0];
                if (file) {
                    alert(`You selected: ${file.name}`);
                    // Further processing can be done here, such as uploading the image or displaying a preview.
                }
            }

            </script>

    </body>
</html>