root/other-projects/nz-flag-design/trunk/main-form/choose-canvas.html @ 29803

Revision 29803, 5.3 KB (checked in by davidb, 5 years ago)

Better resize calcuation for aspect ration page

  • Property svn:executable set to *
Line 
1<!DOCTYPE html> 
2<html id="story">
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7    <meta http-equiv="Pragma" content="no-cache" />
8    <meta http-equiv="Expires" content="0" />
9
10<!--
11    <meta name="viewport" content="width=device-width, initial-scale=1"/>
12-->
13    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
14    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
15    <meta name="apple-mobile-web-app-capable" content="yes"/>
16   
17    <script src="css/source-sans-pro.js"></script>
18    <link href="css/styles.css" rel="stylesheet"/>
19    <link href="css/storystyle.css" rel="stylesheet"/>
20   
21    <link rel="stylesheet"  href="lib-slider/css/jquery.mobile-1.3.0.css"/>
22    <link rel="stylesheet" href="lib-slider/css/jqm-demos.css"/>
23    <link rel="stylesheet" href="lib-slider/css/swipe-page.css"/>
24    <link rel="shortcut icon" href="lib-slider/nzflag-icon64-padded.png"/>
25
26    <!-- jQuery -->
27    <script src="lib/jquery-1.11.1.min.js"></script>
28    <script src="lib/jquery.cookie.js"></script>
29
30    <!-- page swipe -->
31    <script src="lib-slider/js/jquery.mobile.demos.js"></script>
32    <script src="lib-slider/js/jquery.mobile-1.3.0.js"></script>
33    <script src="lib-slider/js/swipe-page.js"></script>
34
35    <!-- accordion bars -->
36    <link href="css/liteaccordion.css" rel="stylesheet" />
37    <script src="js/jquery.easing.1.3.js"></script>
38    <script src="js/liteaccordion-with-resize.jquery.js"></script>
39
40    <!-- canvg library -->
41    <script type="text/javascript" src="lib/canvg/rgbcolor.js"></script>
42    <script type="text/javascript" src="lib/canvg/StackBlur.js"></script>
43    <script type="text/javascript" src="lib/canvg/canvg.js"></script>
44     
45    <!-- spectrum for colour palette -->
46    <!--  For documentation see https://bgrins.github.io/spectrum -->
47    <script src='bgrins-spectrum/spectrum.js'></script>
48    <link rel='stylesheet' href='bgrins-spectrum/spectrum.css' />
49
50    <script src="../similarity-2d/js-lib/Colour.js"></script>
51    <script src="../similarity-2d/flag-processing.js"></script>
52
53    <script src="choose-canvas.js" />
54     
55    <!-- css for choose-palette -->
56<!--
57    <style>
58        .ui-slider-track {
59            background-color: #ECECEC;
60        }
61        .ui-slider-handle {
62            background-color: #a05a2c; /* used to be #E7924B; */
63        }
64    </style>
65-->
66
67    <script>
68        // Flag settings - used to initialise the svg canvas to the user's preferences
69        var flagCanvasSettings = { backgroundColor: "#000066", width: 800, height: 400 };
70
71    </script>
72     
73    <title>Canvas Size</title>
74
75  </head>
76
77  <body>
78    <div data-role="page" id="choose-canvas-page"
79     class="demo-page"
80     data-dom-cache="true"
81     data-next="choose-palette">
82     
83      <div data-role="content">
84     
85    <div data-role="controlgroup" class="control" data-mini="true">         
86          <a href="#" class="next right-button res-fwd" style="right:1%;"></a>
87<!--
88      <a href="#" class="prev left-button gen-back" style="left:1%;"></a>
89-->
90        </div>
91
92    <a target="_parent" href="../index.html" class="back-button back-left"></a>   
93     
94    <div class="story-page">
95
96      <!-- put custom content here -->       
97      <span class="left story-icon idea" ></span>
98      <h2>Canvas Size</h2>         
99     
100        <div class="dialog" id="dialog" title="Flat Aspect Ratio Selection Panel" widthXX="800px">
101            <br><br>
102            <h2>Please choose from the following aspect ratios to select the width and height of your flag.</h2>
103            <p>
104          Once chosen, swipe the page or click/press on the right arrow to go onto the next step.
105          You can swipe/click back to this page at any time to change your selection.
106        </p>
107
108      <div id="aspect-ratio-div">
109      </div>
110
111
112<!--
113            <div class="centredDiv">
114                <div class="ratioDiv flagHover" id="ratio23" onclick="updateCanvasDimensions(2, 3)" title="2:3"></div>
115                <div class="ratioDiv" style="border-width:2px;" id="ratio12" onclick="updateCanvasDimensions(1, 2)" title="1:2"></div>
116                <div class="ratioDiv" id="ratio35" onclick="updateCanvasDimensions(3, 5)" title="3:5"></div>
117                <div style="clear: both"></div>
118            </div>
119            <p class="optionline">2:3 1:2 3:5</p><br>
120
121            <div class="centredDiv">
122                <div class="ratioDiv" id="ratio1019" onclick="updateCanvasDimensions(10, 19)" title="10:19"></div>
123                <div class="ratioDiv" id="ratio58" onclick="updateCanvasDimensions(5, 8)" title="5:8"></div>
124                <div class="ratioDiv" id="ratio811" onclick="updateCanvasDimensions(8, 11)" title="8:11"></div>
125                <div style="clear: both"></div>
126            </div>           
127            <p class="optionline">10:19 5:8 8:11</p>
128-->
129        </div>
130       
131      <!-- end of putting custom content -->
132
133    </div> <!-- end story-page-->   
134   
135      </div><!-- /content -->
136
137<!-- make persistent?
138      <div data-role="footer" style="width:100%;">
139    COSI: Centre of Open Source Innovation @ The University of Waikato.
140      </div>
141-->
142     
143    </div><!-- /page -->
144     
145  </body>
146</html>
Note: See TracBrowser for help on using the browser.