CrackAlert/FakeReport3.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert Screen</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: white;
            font-family: Arial, sans-serif;
            position: relative;
        }


        .top-bar {
            width: 100vw;
            height: 10vh;
            background: #5388EA;
            position: absolute;
            top: 0;
            left: 0;
            /* z-index: 0; */
        }


        .title {
            position: absolute;
            top: 2vh;
            left: 37%;
            color: #FFD900;
            font-size: 10vw;
            font-family: Kavoon, sans-serif;
            font-weight: 600;
            word-wrap: break-word;
        }

        .photo-section {
            width: 70vw;
            height: 30vh;
            position: absolute;
            top: 15vh;
            left: 15vw;
            background: #7d7474;
            border-radius: 20px;
            overflow: hidden;
        }

        .photo-section img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .section-title {
            position: absolute;
            top: -5%;
            left: 5%;
            color: black;
            font-size: 4vw;
            font-family: Kavoon, sans-serif;
            font-weight: 400;
            word-wrap: break-word;
        }

        textarea, select {
            width: 85vw;
            height: 8vh;
            position: absolute;
            left: 7.5vw;
            background: #D9D9D9;
            font-size: 4vw;
            border: none;
            padding: 5px;
            border-radius: 10px;
            resize: none;
            outline: none;
        }

        .description-box {
            height: 20vh;
        }

    </style>
</head>
<body>

    <a href="ExpertReports.html">
        <div style="width: 60px; height: 60px; left: 7px; top: 5px; position: absolute; z-index: 2; ">
            <!-- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) -->
            <!-- <div style="width: 60.83px; height: 60.83px; left: 6.08px; top: 6.08px; position: absolute; border: 1.50px #292D32 solid"></div> -->
            <img src="media/back_arrow_icon.png" style="width: 100%; height: 100%;">
        </div>
    </a>


    <div class="top-bar"></div>


    <div class="title">Alert</div>

    <!-- Photo Section -->
    <div class="photo-section">
        <img src="media/BottomLeftImage.jpg" alt="Placeholder Photo">
    </div>
    <div class="section-title" style="top: 12vh; left: 25vh;">Photo:</div>

    <!-- Location Section -->
    <div class="section-title" style="top: 49vh; left: 25vh;">Location:</div>
    <textarea style="top: 52vh;" placeholder="Centar mladih Koper"></textarea>

    <!-- Type Section -->
    <div class="section-title" style="top: 65vh; left: 25vh;">Type:</div>
    <select style="top: 68vh;">
        <option value="crack">Crack</option>
    </select>

    <!-- Description Section -->
    <div class="section-title" style="top: 77vh; left: 23vh;">Description:</div>
    <textarea class="description-box" style="top: 80vh;" placeholder="Am scared of this crack"></textarea>

</body>
</html>