scratch – Diff between revs 115 and 121

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 115 Rev 121
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7 <meta http-equiv="Pragma" content="no-cache" /> 7 <meta http-equiv="Pragma" content="no-cache" />
8 <meta http-equiv="Expires" content="0" /> 8 <meta http-equiv="Expires" content="0" />
9 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 10 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
11 <meta name="description" content="quick asset upload"> 11 <meta name="description" content="quick asset upload">
12 <meta name="author" content="Wizardry and Steamworks"> 12 <meta name="author" content="Wizardry and Steamworks">
13 <link rel="icon" href="favicon.ico"> 13 <link rel="icon" href="favicon.ico">
14   14  
15 <title>scratch</title> 15 <title>scratch</title>
16   16  
17 <!-- Bootstrap core CSS --> 17 <!-- Bootstrap core CSS -->
18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
19 <!-- Font Awesome --> 19 <!-- Font Awesome -->
20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
21 <!-- DrawingBoard --> 21 <!-- DrawingBoard -->
22 <link href="bower_components/drawingboard.js/dist/drawingboard.min.css" rel="stylesheet"> 22 <link href="bower_components/drawingboard.js/dist/drawingboard.min.css" rel="stylesheet">
23   23  
24 <!-- Site-wide style CCS --> 24 <!-- Site-wide style CCS -->
25 <link href="css/style.css" rel="stylesheet"> 25 <link href="css/style.css" rel="stylesheet">
26 26
27 <!-- Local style --> 27 <!-- Local style -->
28 <link href="css/draw/style.css" rel="stylesheet"> 28 <link href="css/draw/style.css" rel="stylesheet">
29 </head> 29 </head>
30   30  
31 <body> 31 <body>
32   32  
33 <!-- Main component for a primary marketing message or call to action --> 33 <!-- Main component for a primary marketing message or call to action -->
34 <div class="paralax-background"></div> 34 <div class="paralax-background"></div>
35 <div class="jumbotron"> 35 <div class="jumbotron">
36 <h1>scratch copy</h1> 36 <h1>scratch copy</h1>
37 <p class="quote">the asset sharer</p> 37 <p class="quote">the asset sharer</p>
38 </div> 38 </div>
39   39  
40 <div class="container"> 40 <div class="container">
41 41
42 <ul class="nav nav-tabs"> 42 <ul class="nav nav-tabs">
43 <li><a href="index.html">Home</a></li> 43 <li><a href="index.html">Home</a></li>
44 <li><a href="file.html">File</a></li> 44 <li><a href="file.html">File</a></li>
45 <li><a href="text.html">Text</a></li> 45 <li><a href="text.html">Text</a></li>
46 <li class="active"><a href="#">Draw</a></li> 46 <li class="active"><a href="#">Draw</a></li>
47 <li><a href="link.html">Link</a></li> 47 <li><a href="link.html">Link</a></li>
48 <li><a href="gallery.html">Gallery</a></li> 48 <li><a href="view.html">View</a></li>
49 </ul> 49 </ul>
50 50
51 <div id="main-panel" class="panel panel-default"> 51 <div id="main-panel" class="panel panel-default">
52 <div class="panel-heading"> 52 <div class="panel-heading">
53 <div class="form-group"> 53 <div class="form-group">
54 <div class="input-group"> 54 <div class="input-group">
55 <span class="input-group-btn"> 55 <span class="input-group-btn">
56 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link."> 56 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link.">
57 <i class="glyphicon glyphicon-share"></i> 57 <i class="glyphicon glyphicon-share"></i>
58 </button> 58 </button>
59 </span> 59 </span>
60 <input id="URL" type="text" class="form-control" readonly> 60 <input id="URL" type="text" class="form-control" readonly>
61 <span class="input-group-btn"> 61 <span class="input-group-btn">
62 <button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button> 62 <button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
63 </span> 63 </span>
64 </div> 64 </div>
65 <div class="input-group"> 65 <div class="input-group">
66 <input id="deleteURL" type="text" class="form-control" readonly> 66 <input id="deleteURL" type="text" class="form-control" readonly>
67 <span class="input-group-btn"> 67 <span class="input-group-btn">
68 <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button> 68 <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button>
69 </span> 69 </span>
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 <div class="panel-body" id="drawing-panel"> 73 <div class="panel-body" id="drawing-panel">
74 <div id="drawingboard"> 74 <div id="drawingboard">
75 </div> 75 </div>
76 </div> 76 </div>
77 </div> 77 </div>
78   78  
79 </div> <!-- /container --> 79 </div> <!-- /container -->
80 80
81 <div id="footer"> 81 <div id="footer">
82 <div class="container"> 82 <div class="container">
83 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> 83 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
84 </div> 84 </div>
85 </div> 85 </div>
86   86  
87 <!-- jQuery --> 87 <!-- jQuery -->
88 <script src="bower_components/jquery/dist/jquery.min.js"></script> 88 <script src="bower_components/jquery/dist/jquery.min.js"></script>
89 <!-- BootStrap --> 89 <!-- BootStrap -->
90 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 90 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
91 91
92 <!-- DrawingBoard --> 92 <!-- DrawingBoard -->
93 <script src="bower_components/drawingboard.js/dist/drawingboard.min.js"></script> 93 <script src="bower_components/drawingboard.js/dist/drawingboard.min.js"></script>
94 <!-- Clipboard --> 94 <!-- Clipboard -->
95 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 95 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
96 96
97 <!-- Local javascript --> 97 <!-- Local javascript -->
98 <script src="js/Base64ToBlob.js"></script> 98 <script src="js/Base64ToBlob.js"></script>
99 <script> 99 <script>
100 $(document).ready(() => { 100 $(document).ready(() => {
101 // Setup the drawing board. 101 // Setup the drawing board.
102 var drawingBoard = new DrawingBoard.Board('drawingboard', { 102 var drawingBoard = new DrawingBoard.Board('drawingboard', {
103 controls: [ 103 controls: [
104 'Color', 104 'Color',
105 { Size: { type: 'dropdown' } }, 105 { Size: { type: 'dropdown' } },
106 { DrawingMode: { filler: false } }, 106 { DrawingMode: { filler: false } },
107 'Navigation' 107 'Navigation'
108 ], 108 ],
109 size: 8, 109 size: 8,
110 color: "#ff99ff", 110 color: "#ff99ff",
111 webStorage: 'session', 111 webStorage: 'session',
112 enlargeYourContainer: true, 112 enlargeYourContainer: true,
113 droppable: true 113 droppable: true
114 }); 114 });
115 115
116 // Save image and create URL. 116 // Save image and create URL.
117 $('#save').click(() => { 117 $('#save').click(() => {
118 var formData = new FormData(); 118 var formData = new FormData();
119 formData.append('file', new Blob( 119 formData.append('file', new Blob(
120 [ 120 [
121 base64toBlob( 121 base64toBlob(
122 drawingBoard 122 drawingBoard
123 .getImg() 123 .getImg()
124 .replace(/^data:image\/(png|jpg);base64,/, ''), 124 .replace(/^data:image\/(png|jpg);base64,/, ''),
125 'image/png') 125 'image/png')
126 ] 126 ]
127 ), 127 ),
128 '.png' 128 '.png'
129 ); 129 );
130 $.get('session.php').then((token) => { 130 $.get('session.php').then((token) => {
131 formData.append('token', token); 131 formData.append('token', token);
132 $.ajax({ 132 $.ajax({
133 url: 'file.php', 133 url: 'file.php',
134 type: 'POST', 134 type: 'POST',
135 data: formData, 135 data: formData,
136 // cache: false // FF 136 // cache: false // FF
137 processData: false, 137 processData: false,
138 contentType: false 138 contentType: false
139 }).done((data) => { 139 }).done((data) => {
140 // Serialize JSON to object. 140 // Serialize JSON to object.
141 data = JSON.parse(data); 141 data = JSON.parse(data);
142 142
143 $('#URL') 143 $('#URL')
144 .val( 144 .val(
145 location.protocol 145 location.protocol
146 .concat("//") 146 .concat("//")
147 .concat(window.location.hostname) 147 .concat(window.location.hostname)
148 .concat("/") 148 .concat("/")
149 .concat(data.hash) 149 .concat(data.hash)
150 ); 150 );
151 151
152 $('#deleteURL') 152 $('#deleteURL')
153 .val( 153 .val(
154 location 154 location
155 .protocol.concat("//") 155 .protocol.concat("//")
156 .concat(window.location.hostname) 156 .concat(window.location.hostname)
157 .concat("/") 157 .concat("/")
158 .concat(data.timestamp) 158 .concat(data.timestamp)
159 .concat("/") 159 .concat("/")
160 .concat(data.hash) 160 .concat(data.hash)
161 ); 161 );
162 }); 162 });
163 }); 163 });
164 }); 164 });
165 165
166 // Enable the Clipboard button. 166 // Enable the Clipboard button.
167 new Clipboard('#copy-url'); 167 new Clipboard('#copy-url');
168 new Clipboard('#delete-url'); 168 new Clipboard('#delete-url');
169 169
170 // Scroll to the panel. 170 // Scroll to the panel.
171 $('html, body').animate({ 171 $('html, body').animate({
172 scrollTop: $('#main-panel').offset().top 172 scrollTop: $('#main-panel').offset().top
173 }, 'slow'); 173 }, 'slow');
174 }); 174 });
175 </script> 175 </script>
176 <!-- Jumbotron parallax effect --> 176 <!-- Jumbotron parallax effect -->
177 <script> 177 <script>
178 var jumboHeight = $('.jumbotron').outerHeight(); 178 var jumboHeight = $('.jumbotron').outerHeight();
179 function parallax(){ 179 function parallax(){
180 var scrolled = $(window).scrollTop(); 180 var scrolled = $(window).scrollTop();
181 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 181 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
182 } 182 }
183   183  
184 $(window).scroll(function(e){ 184 $(window).scroll(function(e){
185 parallax(); 185 parallax();
186 }); 186 });
187 </script> 187 </script>
188 </body> 188 </body>
189 </html> 189 </html>
190   190