-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadd-observation.html
155 lines (143 loc) · 7.92 KB
/
add-observation.html
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
<!DOCTYPE html>
<html data-theme="light" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Notifications Notiflix -->
<link rel="stylesheet" href="./js/utils/notiflix-3.2.5.min.css" />
<script src="./js/utils/notiflix-3.2.5.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<title>Añadir una observación</title>
</head>
<body style="background-color:#fefefe;">
<div class="drawer">
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<div class="navbar bg-base-100 shadow-md">
<div class="flex-none">
<label for="my-drawer" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="inline-block w-5 h-5 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</label>
</div>
<div class="flex-1">
<a class="normal-case text-xl">Menú</a>
</div>
<div class="flex-none">
<div class="tooltip tooltip-left" data-tip="cerrar sesión">
<button class="btn btn-square btn-ghost" id="btnLogout">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="inline-block w-5 h-5 stroke-current">>
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
</svg>
</button>
</div>
</div>
</div>
<main>
<div class="container px-3 mx-auto grid md-auto h-auto">
<!-- Contenedor | Coloca tu contenido aquí -->
<div class="grid grid-cols-1 md:grid-cols-1 h-screen place-items-center">
<div class="pt-10">
<h3 class="text-lg font-bold">Nueva observación</h3>
<p class="py-4">Titulo para el problema</p>
<input type="text" id="title" placeholder="Titulo" class="input input-bordered w-full" />
<p class="py-4">
Por favor ingresa una descripción detallada del desperfecto:
</p>
<textarea id="comment" class="textarea textarea-accent w-full" placeholder="Desperfecto..."></textarea>
</div>
<div class="pt-3 mx-auto">
<div class="flex flex-wrap text-center">
<div class=" mb-10 px-4">
<div class="rounded-lg h-64 overflow-hidden flex justify-center">
<video id="video" autoplay class="object-center rounded-box"></video>
</div>
<h2 class="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">Captura la evidencia</h2>
<p class="leading-relaxed text-base mb-3">Abre la cámara y despúes presiona el botón "tomar foto" para
capturar la pantalla</p>
<div class="btn-group btn-group-horizontal">
<button class="btn btn-outline text-white border-none hover:bg-green-500 bg-green-500"
id="open">Abrir
Cámara</button>
<button class="btn btn-outline btn-disabled text-white border-none hover:bg-green-500 bg-green-500"
id="take">Tomar
Foto</button>
</div>
</div>
</div>
</div>
<div class="flex justify-center flex-col">
<div class="rounded-lg overflow-hidden">
<div id="photo" class="carousel carousel-center max-w-md p-4 space-x-4 bg-neutral rounded-box bg-white">
</div>
</div>
<h2 class="title-font text-2xl font-medium text-gray-900 text-center">Vista previa</h2>
<p class="leading-relaxed text-base text-center">Asegúrate de que la foto sea nítida y clara</p>
<button class="btn btn-outline bg-green-500 text-white border-none hover:bg-green-500 my-5"
id="saveObservation">
<svg class="stroke-1 h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
</svg>
Guardar
</button>
</div>
</div>
</div>
</main>
</div>
<div class="drawer-side">
<label for="my-drawer" class="drawer-overlay"></label>
<aside class="z-20 w-64 bg-white">
<div class="text-gray-500 dark:text-gray-400">
<a class="flex justify-center text-lg font-bold text-gray-800 dark:text-gray-200" href="#">
<img class="" height="120px" width="120px" src="./images/Logo.png" />
</a>
<div class="divider"></div>
<ul class="mt-6">
<li class="relative px-6 py-3">
<span class="absolute inset-y-0 left-0 w-1 bg-[#25AC5B] rounded-tr-lg rounded-br-lg"
aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold text-black transition-colors duration-150 hover:text-gray-400 hover:bg-transparent"
href="completed-visits.html">
<svg class="w-5 h-5" aria-hidden="true" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
<span class="ml-4">Visitas</span>
</a>
</li>
</ul>
<ul>
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800"
href="current-products.html">
<svg class="w-5 h-5" aria-hidden="true" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path>
<path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path>
</svg>
<span class="ml-4">Productos</span>
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
<script src="./js/utils/network.js"></script>
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
<script src="./js/modules/AddObservationModule.js" type="module"></script>
<script src="./js/modules/LogoutModule.js" type="module"></script>
</body>
</html>