please make the canvases in html, javascript and css. the boxes and the rectangles.

2.0 Requirements 2.1 ExternalInterface Requirements 2.1.1 User Interfaces 2.1.1.1 Home Page Figure 2.1.1.1 Project XS VIEW CHAPTERS 2.1.1.2 Home Page Menu Figure 2.1.1.2 VIEW CHAPTERS VIEW CHAPTERS Ventilation and Drafts Insulation Size and Proportion Immediate Context Construction Details Energy Sources Refrigeration Cycle Psychometrics Environmental Impacts Radiation and Glazing 2.1.1.3 Selection of Insulation Option Figure 2.1.1.3 WON This CHE SWA 2.1.1.4 Plan View Figure 2.1.1.4 Project XS 2.1.1.5 Elevation View Figure 2.1.1.5 Insulation 2.1.1.6 PLACES WITH DEGREE-DAYS Menu Figure 2.1.1.6 PLACES WITH DEGREE-DAYS NV Alert-13030 NV Iqaluit -9980 NV Resolution Island - 9000 NW Yellowknife - 8170 ON Attawapiskat - 7100 MB FlinFlon - 6440 QC Noranda - 6050 MB Winnipeg - 5670 NB Campbellton - 5500 AL Calgary - 5000 NL St Johns - 4800 NB Fredericton - 4670 ON Ottawa - 4520 PE Charlottetown. 4460 OC Montreal Centro - 4300 NS Halifax - 4000 ON Toronto CH-3500 ON Windsor - 3400 BC Nanaimo - 3000 PLACES WITH DEGREE DAYS OPAQUE 2.1.1.7 OPAQUE CONSTRUCTION WITH R or R/INCH Menu Figure 2.1.1.7 OPAQUE CONSTRUCTION WITH R or R/INCH OPAQUE CONSTRUCTION WITH R or R/INCH Bare Container (R1) Plus Interior Finish Uninsulated (R2) Plus Finish and Cellulose (R3/in) Plus Finish and Fiberglass (R3/in) Plus Finish and Spray Foam (R6/in) Daar Thermal 2.1.1.8 () Opaque Thickness Slider Figure 2.1.1.8 O (") Opaque Thickness 2.1.1.19 Plan View (Opaque Thickness at half, OPAQUE CONSTRUCTION WITH R or R/INCH at fifth option) Figure 2.1.1.19 2.1.1.20 Plan View (Opaque Thickness at half, OPAQUE CONSTRUCTION WITH R or R/INCH at first option, Window Area at half) Figure 2.1.1.20 2.1.1.21 Elevation View (Window Area at half) Figure 2.1.1.21 2.1.1.22 Plan View (Opaque Thickness at half, OPAQUE CONSTRUCTION WITH R or R/INCH at first option, Window Area at full) Figure 2.1.1.22 2.1.1.23 Elevation View (Window Area at full) Figure 2.1.1.23 2.2 Functional Requirements 2.2.1 P1 [P1 - 1] Upon re-selecting VIEW CHAPTERS in the menu in Figure 2.1.1.2 the screen shall appear as in Figure 2.1.11 [P1 -2] VIEW CHAPTERS appears as blue in the menu in Figure 2.1.1.2. (P1 31 Insulation appears as blue in the menu in Figure 2.1.1.2 [P1 - 4 All options other than VIEW CHAPTERS and Insulation appear as grey in the menu in Figure 21.1.2 1P1 - 5] When Insulation is selected the screen in Figure 2.1.13 appears below the screen in Figure 2.1.1.1. Both are visible. [P1 - 6 All screen elements are ordered according to Figure 2.1.1.1 and Figure 2.1.1.3. [P1 - 7) The shipping container is 19 feet, 10 inches long [P1 - 8] The shipping container is 8 feet wide [P1 - 9 The shipping container is 9 feet, 6 inches in height. [P1 - 10) The door is 6 feet, 8 inches tall, [P1 - 11] The door is 3 feet wide [P1-12] The floor is 7 inches thick [P1 - 13] The walls are initially2 inches thick [P1 - 14] The outer wall is blue (43104fb) as in Figure 2.1.1.4. [P1 - 15) The inner wall is blue (#3104fb) as in Figure 2.1.14. 1P1 - 16) The floor is grey (#d?cbed as in Figure 2.1.14. (P1 - 17] The bottom of the door appears at the 7-inch mark as in Figure 2.1.1.5. [P1 - 13] The walls are initially 2 inches thick. [P1 - 14The outer wall is blue (131049b) as in Figure 2.114 [P1 - 15] The inner wall is blue (43100 b) as in Figure 2.1.24. [P1 - 16) The floor is grey (ad2cbed) as in Figure 2.1.14. [P1 - 17] The bottom of the door appears at the 7-inch mark as in Figure 2.115. [P1 18] The door frame can go below the 7-inch mark as in Figure 2.1.1.5. [P1 - 19) The colour of the elevation is blut (Ha3beld) as in Figure 2.1.1.5. [P1 - 19] The options for the PLACES WITH DEGREE-DAYS menu in Figure 2.1.1.6 are PLACES WITH DEGREE-DAYS NV Alert - 13030 NVIqaluit. 9980 NV Resolution Island - 9000 NW Yellowknife - 8170 ON Attawapiskat - 7100 MB Flin Flon - 6440 QC Noranda - 6050 MB Winnipeg - 5670 NB Campbellton - 5500 Calgary - 5000 AL NE St. Johns - 4800 NB Fredericton - 4670 ON Ottawa - 4520 PE Charlottetown - 4460 QC Montreal Centre - 4300 NS Halifax - 4000 ON Toronto CH - 3500 ON Windsor - 3400 BC Nanaimo - 3000 BC Vancouver - 2900 BC White Rock - 2620 1P1-19 The options for the PLACES WITH DEGREE-DAYS menu in Figure 2116 are: PLACES WITH DEGREE-DAYS NV Alert - 13030 NVIqaluit -9980 NV Resolution Island - 9000 NW Yellowknife - 8170 ON Attawapiskat - 7100 MB Flin Flon - 6440 QC Noranda - 6050 MB Winnipeg - 5670 NB Campbellton - 5500 AL Calgary - 5000 NL St. Johns - 4800 NB Fredericton - 4670 ON Ottawa - 4520 PE Charlottetown - 4460 QC Montreal Centre - 4300 NS Halifax - 4000 ON Toronto CH - 3500 ON Windsor - 3400 BC Nanaimo - 3000 BC Vancouver 2900 BC White Rock 2620 [P1 - 20The GRAPHS menu in Figure 2.1.1.11 is greyed out except for the title GRAPHS. [P1 - 21] The READOUTS menu in Figure 2.1.1.12 is preyed out except for the title READOUTS. [P1 - 22] The slider at full in Figure 2.1.1.15 is 14 inches. 1P1 23] The colour of the insulation in Figure 2.1.117 1s (#e8e5e4). [P1 - 24] The colour of the insulation in Figure 2.1.1.18 is (wec764). 1P1-25] The colour of the insulation in Figure 2.1.1.19 is (wdfaaa). [P1 - 26) The colour of the window in Figure 2.1.1 20 is (407ebf8). 2.0 Design Decisions All screen elements fit in a 6 x 4 grid using jQuery Mobile. The jpeg file ship Crate.jpg is displayed in a width/height space of 260 by 194 pixels. The HTML canvas for the plan view in Figure 2.1.1.4 has width/height 321 by 178. The width of the canvas for the plan view in Figure 2.1.1.4 is based on: 321 = 1.35 (for magnification) x 238 pixels (19 feet, 10 inches container length = 238 inches) The height of the canvas for the plan view in Figure 2.1.1.4 is based on: 178 = 1.35 (for magnification) x 132 pixels (8 foot container width + 3 foot door = 132 inches) The HTML canvas for the elevation view in Figure 2.1.1.5 has width/height 321 by 154. The width of the canvas for the elevation view in Figure 2.1.1.5 is based on: 321 = 1.35 (for magnification) x 238 pixels (19 feet, 10 inches container length = 238 inches) The height of the canvas for the elevation view in Figure 2.1.1.4 is based on: 154 = 1.35 (for magnification) x 114 pixels (9 feet, 6 inches container height = 114 inches) The Opaque Thermal Resistance readout in Figure 2.1.1.9 is 50px. The Annual Energy readout in Figure 2.1.1.10 is 75px. The height of the canvas for the elevation view in Figure 2.1.1.4 is based on: 154 = 1.35 (for magnification) x 114 pixels (9 feet, 6 inches container height = 114 inches) The Opaque Thermal Resistance readout in Figure 2.1.1.9 is 50px. The Annual Energy readout in Figure 2.1.1.10 is 75px. 3.0 Design Constraints The application will be designed for both desktop/laptop and mobile form factors. Note that the defaults for jQuery Mobile will be used to accomplish this task and that no special breakpoints will be created for any phase of this project. 4.0 Process Constraints The project shall follow an incremental phased development process whereby all features will be apparent from P1 onwards. Subsequent phases will enhance the functionality of the features. JQuery Mobile will be used for styling as well as the ThemeRoller GUI for creating styles