-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (224 loc) · 14.3 KB
/
index.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html 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">
<!-- css -->
<link rel="stylesheet" href="style.css">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Spartan:wght@700&display=swap" rel="stylesheet">
<!-- icons -->
<script src="https://kit.fontawesome.com/cab882f187.js" crossorigin="anonymous"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Admigual: freelance budget platform</title>
</head>
<body class="cuerpo">
<Nav id="nav-bar">
<div class="navbar-body">
<h3>Admigual</h3>
<ul>
<li><a href="https://admigual.000webhostapp.com/#contactame" target="blank" alt="Portfolio Web">Portfolio Web</a></li>
<li><a href="https://admigual.000webhostapp.com/#portfolio" target="blank" alt="Contacto">Contacto</a></li>
<li><a href="javascript:location.reload(true)">Reset</a></li>
</ul>
</div>
</Nav>
<main>
<aside>
<h1>Admigual</h1>
<h2>Freelance Budget Platform</h2>
<p>¿Estas interesado en trabajar conmigo? ¿Tenes un proyecto en mente que quieras realizar?</p>
<p>Como artista audiovisual entiendo que cada proyecto, tecnica y herramienta son distintas y conllevan un esfuerzo diferente.<br><br>
Por eso cree este script, en el cual vas a poder tener facilmente, y gratis, una aproximación del presupuesto para el proyecto
que queres realizar, de manera instantanea. Una vez finalizado yo voy a recibir tu consulta y me pondre en contacto <span>A.S.A.P.</span>,
aunque tambien, podes contactarte directamente conmigo en la sección <span>"contacto"</span>.</p>
</aside>
<div class="bud-script">
<!-- aca va a ir toda la interfaz del script -->
<section class="form-container">
<div class="form-page user">
<div class="user-header">
<h2 class="user-title">
Hacemos la Prueba?
</h2>
<p>Completá los campos de usuario y clickeá en "comencemos" para empezar a presupuestar.</p>
</div>
<div class="user-form">
<!-- Registro de usuario/cliente -->
<input class="client-input" type="text" name="userName" placeholder="Como te decimos?" id="userName">
<input class="client-input" type="email" name="userMail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Tu E-mail" id="userMail">
<button class="btn btn-dark" id="btnNewCl" type="button">Comencemos</button>
<!-- insertar user form aca -->
</div>
</div>
<div class="form-page project" id="form-project">
<div class="project-header">
<h2 class="project-title">
Bienvenido saracatunga!
</h2>
<p>En esta plataforma podes crear presupuestos para hasta 3 proyectos. Para crear un nuevo proyecto
tipeá su nombre y hace click en "crear".
</p>
</div>
<div class="project-form">
<!-- formulario de proyecto aqui -->
<!-- nombre del proyecto -->
<input class="client-input" type="text" name="projName" placeholder="Nombre del Proyecto" id="projName">
<!-- Generar Proyecto -->
<button class="btn btn-dark" type="button" id="btnNewProj" disabled>Crear Proyecto</button>
</div>
<div class="project-footer">
<p>
*una vez finalizados podras ver y eliminar los proyectos creados en el <span>footer de la pagina</span>.
</p>
</div>
</div>
<div class="form-page products">
<div class="product-header">
<h2 class="product-title">
Proyecto Cambalache<!-- nombre de proyecto -->
</h2>
<p>En esta etapa gestionaras los productos que contiene tu proyecto hasta que decidas finalizarlos.</p>
</div>
<div class="product-form">
<div class="product-type" id="typeCont">
<!-- aca van los radio -->
<div class="form-check form-check-block" id="box3d">
<input class="radio-check" type="radio" name="projType" value="0" id="radio3d">
<label class="form-check-label" for="type3d" checked="">3D Asset</label>
</div>
<div class="form-check form-check-block" id="box2d">
<input class="radio-check" type="radio" name="projType" value="1" id="radio2d">
<label class="form-check-label" for="radio2d">2d Anim.</label>
</div>
<div class="form-check form-check-block" id="boxEv">
<input class="radio-check" type="radio" name="projType" value="2" id="radioEV">
<label class="form-check-label" for="radioEV">Video Ed.</label>
</div>
</div>
<div class="product-creator">
<div class="product-instructions">
<p>
♦ Por favor, seleccioná el tipo de producto que queres crear y completa los campos
emergentes con la info solicitada.
</p>
<p>
♦ Confirmá la creacion de un producto clickeando en la flecha.
</p>
<p>
♦ Podes crear hasta 4 productos. Con al menos uno podras <span>Finalizar el Proyecto</span>
y se te mostrará su presupuesto aprox.
</p>
</div>
<div class="product-timer">
<!-- Subtipo de proyecto -->
<!-- 3d -->
<select class="unstyled multiplier" aria-label="Small select" id="subType3d">
<option value="0"selected="">Elija Subtipo</option>
<option value="1">Asset Inanimable</option>
<option value="2">Asset Animable</option>
</select>
<!-- 2d -->
<div id="timer2d">
<input class="multiplier" type="text" name="propName" placeholder="Nombre del objeto/personaje" id="propName">
<input class="multiplier" type="number" name="seg2d" placeholder="Seg. de Animacón" id="seg2d">
</div>
<!-- Edicion de Video -->
<div id="EVTimer">
<input class="multiplier" type="number" name="minVide" placeholder="Min. de Edición" id="minVideo">
</div>
<div id="prodTareas">
<div class="task-pack" id="tasks3d">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="10" id="design3d">
<label class="task-label" for="inlineCheckDefault">Diseño</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="40" id="production3d">
<label class="task-label" for="inlineCheckDefault">Producción</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="30" id="render3d">
<label class="task-label" for="inlineCheckDefault">Renderizar</label>
</div>
</div>
<div class="task-pack" id="tasks2d">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="15" id="body2d">
<label class="task-label" for="inlineCheckDefault">Animación Corporea</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="20" id="face2d">
<label class="task-label" for="inlineCheckDefault">Animación Facial</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="10" id="character2d">
<label class="task-label" for="inlineCheckDefault">Armado Personaje</label>
</div>
</div>
<div class="task-pack" id="tasksEv">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="5" id="evMontaje">
<label class="task-label" for="inlineCheckDefault">Montaje</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="8" id="evColor">
<label class="task-label" for="inlineCheckDefault">Correccion de Color</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="1" id="evEncoding">
<label class="task-label" for="inlineCheckDefault">Encodear</label>
</div>
</div>
</div>
</div>
</div>
<div class="confirmation-btns">
<div class="prod-confirm-container">
<button class="btn btn-dark" type="button" id="addProd" disabled>▼</button>
<p>
Agregar producto
</p>
<!-- add product btn -->
</div>
<!-- end project btn -->
<button class="btn btn-outline-dark" type="button" id="endProject" disabled>Finalizar Proyecto</button>
</div>
</div>
<div class="product-footer">
<p>
En esta barra veras los productos reservados.<br>
Pasa el mouse para mas info. Click para eliminar.
</p>
<!-- product footer -->
<ol class="product-shelf">
<!-- <li class="product-icon threed"></l-->
</ol>
</div>
</div>
</section>
<button class="btn btn-outline-dark row col-3 mx-3 my-3" type="submit" value="submit" id="saveUserData">Enviar proyectos!</button>
</div>
</main>
<footer>
<!-- <div class="card" id="card-1">
<i title="mostrar cartas" class="fas fa-star" id="show-card"></i>
<div class="card1-content">
<p class="card__exit"><i class="far fa-times-circle" id="closeCard"></i></p>
<div class="card__icon">
<i class="fas fa-bolt"></i>
<h2>Proyecto:<p id="usuario"></p></h2>
</div>
<h4 class="card__title">hola ke ase</h4>
</div>
</div> -->
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>