5 <title>Bid4Cars</title>
6 <link rel="stylesheet" href="/css/vendor/bootstrap.css">
7 <link rel="stylesheet" href="/css/app/valuations.css">
8 <link rel="stylesheet" type="text/css" media="only screen and (max-width: 767px), only screen and (max-device-width: 767px)" href="css/app/mobile_valuations.css" />
9 <link rel="stylesheet" href="/css/vendor/bootstrap-responsive.css">
10 <script src="/js/vendor/jquery-1.10.1.min.js" type="text/javascript"></script>
11 <script src="/js/vendor/bootstrap.min.js" type="text/javascript"></script>
12 <script src="/js/app/form-helpers.js" type="text/javascript"></script>
14 <script src="js/vendor/html5shiv.js"></script>
16 <meta id="MetaViewport" name="viewport" content="width=device-width">
18 if( navigator.userAgent.match(/iPhone|Android/i) && !navigator.userAgent.match(/Chrome/) )
20 $('#MetaViewport').attr('content', 'width=480px');
26 <div class="header container-fluid">
27 <div class="row-fluid header-top">
28 <div class="span2 user-details">
30 <p class="detail-label">Logged in as:</p>
34 <span class="user-avatar"><img src="imgs/avotar_img.png" alt=""></span>
35 <p class="detail-label">Welcome</p>
39 <p><span class="detail-label">Time:</span> <span id="Time">11h45</span></p>
43 <div class="row-fluid header-bottom">
44 <div class="span11 nav-bar">
47 <span class="notification">5</span>
48 <a href="">ON AUCTION</a>
51 <span class="notification">5</span>
52 <a href="">MY STOCK</a>
55 <span class="notification">5</span>
56 <a href="">MY VALUATIONS</a>
58 <li><a href="">MY SETTINGS</a></li>
59 <li><a href="">CONTACT US</a></li>
60 <li><a href="">PRICE GUIDE</a></li>
63 <div class="span1 nav-login">
64 <a href="#">LOGOUT</a>
70 <div class="main-section">
71 <div class="container-fluid">
73 <div class="row-fluid page-title-wrapper">
75 <h1>New valuations</h1>
76 <p class="page-title-header">
77 Please fill in the requested fields in order to complete the new valuation.
81 <div class="row-fluid page-top-forms-wrapper">
82 <div class="customer-details-form span4">
83 <p class="form-header"><i class="icon-user icon-white"></i> Customer details</p>
84 <div class="form-horizontal">
85 <div class="control-group customer-name">
86 <label class="control-label" for="inputCustomerName">Customer name:</label>
87 <div class="controls">
88 <input class="information-input" type="text" id="inputEmail">
91 <div class="control-group customer-surname">
92 <label class="control-label" for="inputCustomerSurname">Customer surname:</label>
93 <div class="controls">
94 <input class="information-input" type="password" id="inputCustomerSurname">
97 <div class="control-group id">
98 <label class="control-label" for="inputId">ID:</label>
99 <div class="controls">
100 <input class="information-input" type="password" id="inputId">
103 <div class="control-group mobile">
104 <label class="control-label" for="inputMobile">Mobile:</label>
105 <div class="controls">
106 <input class="information-input" type="password" id="inputMobile">
109 <div class="control-group email">
110 <label class="control-label" for="inputEmail">email:</label>
111 <div class="controls">
112 <input class="information-input" type="password" id="inputEmail">
115 <div class="control-group deparment">
116 <label class="control-label" for="inputDepartment">Department:</label>
117 <div class="btn-group grey-btn">
118 <button class="btn select">Select</button>
119 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
120 <span class="caret new-valuation"> </span>
122 <ul class="dropdown-menu">
123 <li><a>Option 1</a></li>
124 <li><a>Option 2</a></li>
130 <div class="valuation-details-form span4">
131 <p class="form-header"><img class="clipboard" src="imgs/clipboard.gif" alt="">Valuation details</p>
132 <div class="form-horizontal">
133 <div class="control-group-wrapper">
134 <div class="control-group date-created">
135 <label class="control-label valuation-line" for="inputDateCreated">Date created:</label>
136 <div class="controls">
137 <p class="information-lines">24/05/2013</p>
140 <div class="control-group valuation-no">
141 <label class="control-label valuation-line" for="inputValuationNo">Valuation no:</label>
142 <div class="controls">
143 <p class="information-lines">123FNN29</p>
146 <div class="control-group ref-no">
147 <label class="control-label valuation-line" for="inputRefNo">Refarence no:</label>
148 <div class="controls">
149 <p class="information-lines">RJC39939</p>
152 <div class="control-group vechile">
153 <label class="control-label valuation-line" for="inputVechile">Vechile status:</label>
154 <div class="controls">
155 <p class="information-lines">Status thing</p>
158 <div class="control-group created-by">
159 <label class="control-label valuation-line" for="inputCreatedBy">Created by:</label>
160 <div class="controls">
161 <p class="information-lines">The initiator</p>
164 <div class="control-group valuator">
165 <label class="control-label valuation-line" for="inputValuator">Valuator:</label>
166 <div class="controls">
167 <p class="information-lines">Valuator</p>
170 <div class="control-group sales-person">
171 <label class="control-label valuation-line" for="inputSalesPerson">Sales person:</label>
172 <div class="controls">
173 <p class="information-lines">The sales person</p>
176 <div class="control-group date-loaded">
177 <label class="control-label valuation-line" for="inputDateLoaded">Date loaded on price guide:</label>
178 <div class="controls">
179 <p class="information-lines">10/02/2013</p>
185 <div class="pricing-details-form span4">
186 <p class="form-header"><img class="money" src="imgs/money.gif" alt="">Pricing details</p>
187 <div class="form-horizontal">
188 <p>Trade:<span class="price">R 156 000 000</span></p>
189 <p class="trade-and-retail">*Trade and Retail avaliable</p>
190 <p class="retail">Retail:<span class="price">R 156 000 000</span></p>
191 <div class="control-group amount-offered">
192 <label class="control-label" for="inputAmountOffered">Amount offered:</label>
193 <div class="controls">
194 <input class="information-input" type="text" id="inputAmountOffered">
197 <div class="control-group oa">
198 <label class="control-label" for="inputOa">O.A:</label>
199 <div class="controls">
200 <input class="information-input" type="text" id="inputOa">
203 <div class="control-group Stand-in-value">
204 <label class="control-label" for="inputStandInValue">Stand-in-value:</label>
205 <div class="controls">
206 <input class="information-input" type="text" id="inputStandInValue">
209 <div class="control-group projected-retail">
210 <label class="control-label" for="inputProjectedRetail">Projected retail:</label>
211 <div class="controls">
212 <input class="information-input" type="text" id="input">
215 <div class="control-group planned-margin">
216 <label class="control-label" for="inputPlannedMargin">Planned margin:</label>
217 <div class="controls">
218 <input class="information-input" type="text" id="input">
224 <div class="row-fluid page-middle-forms-wrapper">
225 <div class="vichile-specs-form span8">
226 <p class="form-header"><img class="car" src="imgs/car.gif" alt="">Vehicle specifications</p>
227 <div class="form-horizontal left-and-right-side">
228 <div class="left-side">
229 <div class="control-group">
230 <label class="control-label" for="inputYear">Year:</label>
231 <div class="btn-group grey-btn">
232 <button class="btn select">Year</button>
233 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
234 <span class="caret new-valuation"></span>
236 <ul class="dropdown-menu">
237 <li><a>Option 1</a></li>
238 <li><a>Option 2</a></li>
242 <div class="control-group">
243 <label class="control-label" for="inputCaregory">Catergory:</label>
244 <div class="btn-group grey-btn">
245 <button class="btn select">Catergory</button>
246 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
247 <span class="caret new-valuation"> </span>
249 <ul class="dropdown-menu">
250 <li><a>Option 1</a></li>
251 <li><a>Option 2</a></li>
255 <div class="control-group">
256 <label class="control-label" for="inputVechileMake">Vechile make:</label>
257 <div class="btn-group grey-btn">
258 <button class="btn select">Vechile make</button>
259 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
260 <span class="caret new-valuation"> </span>
262 <ul class="dropdown-menu">
263 <li><a>Option 1</a></li>
264 <li><a>Option 2</a></li>
268 <div class="control-group">
269 <label class="control-label" for="inputVechileModel">Vechile model:</label>
270 <div class="btn-group grey-btn">
271 <button class="btn select">Vechile model</button>
272 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
273 <span class="caret new-valuation"> </span>
275 <ul class="dropdown-menu">
276 <li><a>Option 1</a></li>
277 <li><a>Option 2</a></li>
281 <div class="control-group">
282 <label class="control-label" for="inputVechileType">Vechile type:</label>
283 <div class="btn-group grey-btn">
284 <button class="btn select">Vechile type</button>
285 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
286 <span class="caret new-valuation"> </span>
288 <ul class="dropdown-menu">
289 <li><a>Option 1</a></li>
290 <li><a>Option 2</a></li>
294 <div class="control-group ">
295 <label class="control-label" for="inputRegistration">Registration no:</label>
296 <div class="controls">
297 <input class="information-input" type="text" id="inputRegistrationNo">
300 <div class="control-group">
301 <label class="control-label" for="inputFuel type">Fuel type:</label>
302 <div class="btn-group grey-btn">
303 <button class="btn select">Fuel type</button>
304 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
305 <span class="caret new-valuation"> </span>
307 <ul class="dropdown-menu">
308 <li><a>Option 1</a></li>
309 <li><a>Option 2</a></li>
313 <div class="control-group">
314 <label class="control-label" for="inputTransmissionType">Transmission type:</label>
315 <div class="btn-group grey-btn">
316 <button class="btn select">Transmission type</button>
317 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
318 <span class="caret new-valuation"> </span>
320 <ul class="dropdown-menu">
321 <li><a>Option 1</a></li>
322 <li><a>Option 2</a></li>
326 <div class="control-group vin-no">
327 <label class="control-label" for="inputVinNo">Vin no:</label>
328 <div class="controls">
329 <input class="information-input" type="text" id="inputVinNo">
332 <div class="control-group eng-no">
333 <label class="control-label" for="inputEngNo">Eng. no:</label>
334 <div class="controls">
335 <input class="information-input" type="text" id="inputEngNo">
338 <div class="control-group mm-code">
339 <label class="control-label" for="inputMmCode">MM code:</label>
340 <div class="controls">
341 <input class="information-input" type="text" id="inputMmCode">
345 <div class="right-side">
346 <div class="control-group kms">
347 <label class="control-label" for="inputKms">Kms:</label>
348 <div class="controls">
349 <input class="information-input" type="text" id="inputKms">
352 <div class="control-group">
353 <label class="control-label" for="inputConditioning">Conditioning:</label> <div class="btn-group grey-btn">
354 <button class="btn select">Conditioning</button>
355 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
356 <span class="caret new-valuation"> </span>
358 <ul class="dropdown-menu">
359 <li><a>Option 1</a></li>
360 <li><a>Option 2</a></li>
364 <div class="control-group">
365 <label class="control-label" for="inputMainExtColour">Main ext colour:</label>
366 <div class="btn-group grey-btn">
367 <button class="btn select">Main ext colour</button>
368 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
369 <span class="caret new-valuation"> </span>
371 <ul class="dropdown-menu">
372 <li><a>Option 1</a></li>
373 <li><a>Option 2</a></li>
377 <div class="control-group">
378 <label class="control-label" for="inputMainIntColour">Main int colour:</label>
379 <div class="btn-group grey-btn">
380 <button class="btn select">Main int colour</button>
381 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
382 <span class="caret new-valuation"> </span>
384 <ul class="dropdown-menu">
385 <li><a>Option 1</a></li>
386 <li><a>Option 2</a></li>
390 <div class="control-group">
391 <label class="control-label" for="inputUpholstery">Upholstery:</label>
392 <div class="btn-group grey-btn">
393 <button class="btn select">Upholstery</button>
394 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
395 <span class="caret new-valuation"> </span>
397 <ul class="dropdown-menu">
398 <li><a>Option 1</a></li>
399 <li><a>Option 2</a></li>
403 <div class="control-group">
404 <label class="control-label" for="inputPapers">Papers:</label>
405 <div class="btn-group grey-btn">
406 <button class="btn select">Papers</button>
407 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
408 <span class="caret new-valuation"> </span>
410 <ul class="dropdown-menu">
411 <li><a>Option 1</a></li>
412 <li><a>Option 2</a></li>
416 <textarea class="text-box" rows="2"></textarea>
417 <div class="control-group">
418 <label class="natis-label" for="inputNatis">Natis:</label>
419 <div class="btn-group natis">
420 <button class="btn select">Natis</button>
421 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
422 <span class="caret new-valuation"> </span>
424 <ul class="dropdown-menu">
425 <li><a>Option 1</a></li>
426 <li><a>Option 2</a></li>
430 <div class="control-group">
431 <label class="control-label" for="inputSpareKeys">Spare keys:</label>
432 <div class="btn-group grey-btn">
433 <button class="btn select">Spare keys</button>
434 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
435 <span class="caret new-valuation"> </span>
437 <ul class="dropdown-menu">
438 <li><a>Option 1</a></li>
439 <li><a>Option 2</a></li>
443 <div class="control-group">
444 <label class="control-label" for="inputFsh">FSH:</label>
445 <div class="btn-group grey-btn">
446 <button class="btn select">FSH</button>
447 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
448 <span class="caret new-valuation"> </span>
450 <ul class="dropdown-menu">
451 <li><a>Option 1</a></li>
452 <li><a>Option 2</a></li>
456 <div class="control-group">
457 <label class="control-label" for="inputCustomerName">FSH notes</label>
458 <textarea class="text-box-fsh" rows="2"></textarea>
463 <div class="damages-form span4">
464 <p class="form-header"><img class="bomb" src="imgs/bomb.gif" alt=""> Damages</p>
465 <div class="form-horizontal">
466 <div class="control-group kms">
467 <label class="checkbox checkbox-line">
468 <input type="checkbox" value="">
471 <div class="controls">
472 <input class="rand-input" type="text" id="inputKms">
475 <div class="control-group mechanical">
476 <label class="checkbox checkbox-line">
477 <input type="checkbox" value="">
480 <div class="controls">
481 <input class="rand-input" type="text" id="inputMechanical">
484 <div class="control-group elecrtical">
485 <label class="checkbox checkbox-line">
486 <input type="checkbox" value="">
489 <div class="controls">
490 <input class="rand-input" type="text" id="inputElecrtical">
493 <div class="control-group wheels">
494 <label class="checkbox checkbox-line">
495 <input type="checkbox" value="">
498 <div class="controls">
499 <input class="rand-input" type="text" id="inputWheels">
502 <div class="control-group other">
503 <label class="checkbox checkbox-line">
504 <input type="checkbox" value="">
507 <div class="controls">
508 <input class="rand-input" type="text" id="inputOther">
511 <p class="damages-comments">Damages comments:</p>
512 <textarea class="textbox" rows="3"></textarea>
513 <div class="control-group total-estimated">
514 <label class="total-estimated-label" for="inputTotalEstimated">Total estimated repair price:</label>
515 <div class="controls">
516 <p class="price">R 24 000 </p>
519 <div class="control-group previous-repairs">
520 <label class="previous-repairs-label" for="inputPreviousRepairs">Previous repairs noted:</label>
521 <div class="controls">
525 <p class="damages-comments">Damages comments:</p>
526 <textarea class="textbox" rows="3"></textarea>
530 <div class="row-fluid page-bottom-forms-wrapper">
531 <div class="accessories-form span4">
532 <p class="form-header"><img class="headphones" src="imgs/headphones.gif" alt="">Accessories</p>
533 <div class="form-horizontal ">
534 <div class="control-group column-left">
535 <label class="checkbox checkbox-line">
536 <input type="checkbox" value="">
537 Park Distance Control
539 <label class="checkbox checkbox-line">
540 <input type="checkbox" value="">
543 <label class="checkbox checkbox-line">
544 <input type="checkbox" value="">
547 <label class="checkbox checkbox-line">
548 <input type="checkbox" value="">
551 <label class="checkbox checkbox-line">
552 <input type="checkbox" value="">
555 <label class="checkbox checkbox-line">
556 <input type="checkbox" value="">
557 Park Distance Control
559 <label class="checkbox checkbox-line">
560 <input type="checkbox" value="">
563 <label class="checkbox checkbox-line">
564 <input type="checkbox" value="">
567 <label class="checkbox checkbox-line">
568 <input type="checkbox" value="">
571 <label class="checkbox checkbox-line">
572 <input type="checkbox" value="">
575 <label class="checkbox checkbox-line">
576 <input type="checkbox" value="">
577 Park Distance Control
579 <label class="checkbox checkbox-line">
580 <input type="checkbox" value="">
583 <label class="checkbox checkbox-line">
584 <input type="checkbox" value="">
587 <label class="checkbox checkbox-line">
588 <input type="checkbox" value="">
591 <label class="checkbox checkbox-line">
592 <input type="checkbox" value="">
596 <div class="control-group column-right">
597 <label class="checkbox checkbox-line">
598 <input type="checkbox" value="">
601 <label class="checkbox checkbox-line">
602 <input type="checkbox" value="">
605 <label class="checkbox checkbox-line">
606 <input type="checkbox" value="">
607 Balance of Service Plan
609 <label class="checkbox checkbox-line">
610 <input type="checkbox" value="">
611 Balance of Maintenance Plan
613 <label class="checkbox checkbox-line">
614 <input type="checkbox" value="">
615 Maintenance Plan Extension
617 <label class="checkbox checkbox-line">
618 <input type="checkbox" value="">
621 <label class="checkbox checkbox-line">
622 <input type="checkbox" value="">
625 <label class="checkbox checkbox-line">
626 <input type="checkbox" value="">
627 Balance of Service Plan
629 <label class="checkbox checkbox-line">
630 <input type="checkbox" value="">
631 Balance of Maintenance Plan
633 <label class="checkbox checkbox-line">
634 <input type="checkbox" value="">
635 Maintenance Plan Extension
637 <label class="checkbox checkbox-line">
638 <input type="checkbox" value="">
641 <label class="checkbox checkbox-line">
642 <input type="checkbox" value="">
645 <label class="checkbox checkbox-line">
646 <input type="checkbox" value="">
647 Balance of Service Plan
649 <label class="checkbox checkbox-line">
650 <input type="checkbox" value="">
651 Balance of Maintenance Plan
653 <label class="checkbox checkbox-line">
654 <input type="checkbox" value="">
655 Maintenance Plan Extension
658 <div class="comment-box">
659 <p class="comment">Comments</p>
660 <textarea class="comment-text-box" rows="3"></textarea>
664 <div class="photos-form span4">
665 <p class="form-header"><img class="camera" src="imgs/camera.gif" alt="">Photos</p>
666 <div class="form-horizontal left-and-right-side">
667 <p class="instruction-paragraph">Click on the container to upload images from file:</p>
668 <p class="warning-paragraph">Maximum of eight photos allowed</p>
670 <div class="visible-phone mobile-car-images-wrapper">
671 <a href=""><img src="imgs/main_img_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
672 <a href=""><img src="imgs/front_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
673 <a href=""><img src="imgs/right_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
675 <div class="visible-phone mobile-car-images-wrapper">
676 <a href=""><img src="imgs/left_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
677 <a href=""><img src="imgs/interior_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
678 <a href=""><img src="imgs/back_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
680 <div class="visible-phone mobile-car-images-wrapper">
681 <a href=""><img src="imgs/engine_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
682 <a href=""><img src="imgs/copy_of_natis_car.jpg" class="img-polaroid mobile-motor-vehicle-imgs"></a>
685 <div class="hidden-phone column-left">
686 <div class="motor-vehicle-imgs">
687 <a href=""><img src="imgs/main_img_car.jpg"></a>
689 <div class="motor-vehicle-imgs">
690 <a href=""><img src="imgs/right_car.jpg"></a>
692 <div class="motor-vehicle-imgs">
693 <a href=""><img src="imgs/interior_car.jpg"></a>
695 <div class="motor-vehicle-imgs">
696 <a href=""><img src="imgs/engine_car.jpg"></a>
699 <div class="hidden-phone column-left">
700 <div class="motor-vehicle-imgs">
701 <a href=""><img src="imgs/front_car.jpg"></a>
703 <div class="motor-vehicle-imgs">
704 <a href=""><img src="imgs/left_car.jpg"></a>
706 <div class="motor-vehicle-imgs">
707 <a href=""><img src="imgs/back_car.jpg"></a>
709 <div class="motor-vehicle-imgs">
710 <a href=""><img src="imgs/copy_of_natis_car.jpg"></a>
715 <div class="select-valuator span4">
716 <p class="select-valuator-header">Select valuator</p>
717 <div class="valuator-name-button">
718 <div class="btn-group grey-btn">
719 <button class="btn select">Valuator name</button>
720 <button class="btn dropdown-toggle selection" data-toggle="dropdown">
721 <span class="caret new-valuation"> </span>
723 <ul class="dropdown-menu">
724 <li><a>Option 1</a></li>
725 <li><a>Option 2</a></li>
729 <div class="btn-wrapper">
730 <div class="top-grey-set">
731 <button class="btn mobile-send-to-price-btn send-to-price-btn">Send to price guide</button>
732 <button class="btn mobile-send-to-price-btn send-to-sales-btn">Send to sales</button>
733 <button class="hidden-phone btn edit-btn">Edit</button>
735 <div class="bottom-grey-set">
736 <button class="btn mobile-print-btn print-btn"><i class="icon-print printer mobile-printer"></i>Print</button>
737 <button class="btn mobile-archive-btn archive-btn">Archive</button>
738 <button class="btn mobile-add-to-stock-btn add-to-stock-btn">Add to stock</button>
740 <div class="colored-btn-set">
741 <button class="btn mobile-select btn-danger Bid4cars-btn">Request Bid4cars accident report</button>
742 <button class="btn mobile-select btn-warning bmw-btn">Request BMW accident report</button>
743 <button class="btn mobile-select btn-primary save-and-send-btn">Save & send to pending valuation</button>
744 <button class="btn mobile-select btn-success save-and-submit-btn">Save and submit for valuation</button>