scratch – Diff between revs 121 and 125

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 121 Rev 125
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en" ng-app="scratch">
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   21  
22 <!-- Site-wide style CCS --> 22 <!-- Site-wide style CCS -->
23 <link href="css/style.css" rel="stylesheet"> 23 <link href="css/style.css" rel="stylesheet">
24 24
25 <!-- Local style --> 25 <!-- Local style -->
26 <!-- <link href="css/link/style.css" rel="stylesheet"> --> 26 <!-- <link href="css/link/style.css" rel="stylesheet"> -->
-   27
-   28 <!-- Scratch Angular Includes -->
-   29 <ng-include src="'html/scratch-head-last.html'"></ng-include>
27 </head> 30 </head>
28   31  
29 <body> 32 <body>
-   33
-   34 <!-- Scratch Angular Includes -->
-   35 <ng-include src="'html/scratch-body-first.html'"></ng-include>
30   36  
31 <!-- Main component for a primary marketing message or call to action --> 37 <!-- Main component for a primary marketing message or call to action -->
32 <div class="paralax-background"></div> 38 <div class="paralax-background"></div>
33 <div class="jumbotron"> 39 <div class="jumbotron">
34 <h1>scratch copy</h1> 40 <h1>scratch copy</h1>
35 <p class="quote">the asset sharer</p> 41 <p class="quote">the asset sharer</p>
36 </div> 42 </div>
37   43  
38 <div class="container"> 44 <div class="container">
39 45
40 <ul class="nav nav-tabs"> 46 <ul class="nav nav-tabs">
41 <li><a href="index.html">Home</a></li> 47 <li><a href="index.html">Home</a></li>
42 <li><a href="file.html">File</a></li> 48 <li><a href="file.html">File</a></li>
43 <li><a href="text.html">Text</a></li> 49 <li><a href="text.html">Text</a></li>
44 <li><a href="draw.html">Draw</a></li> 50 <li><a href="draw.html">Draw</a></li>
45 <li class="active"><a href="#">Link</a></li> 51 <li class="active"><a href="#">Link</a></li>
46 <li><a href="view.html">View</a></li> 52 <li><a href="view.html">View</a></li>
47 </ul> 53 </ul>
48 54
49 <div id="main-panel" class="panel panel-default"> 55 <div id="main-panel" class="panel panel-default">
50 <div class="panel-body"> 56 <div class="panel-body">
51 <form id="link-form" role="form"> 57 <form id="link-form" role="form">
52 <div class="form-group has-feedback"> 58 <div class="form-group has-feedback">
53 <div class="input-group"> 59 <div class="input-group">
54 <span class="input-group-btn"> 60 <span class="input-group-btn">
55 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link." data-disable="true" disabled> 61 <button id="save" class="btn btn-default" type="button" data-toggle="tooltip" data-placement="auto" title="Generate link." data-disable="true" disabled>
56 <i class="glyphicon glyphicon-share"></i> 62 <i class="glyphicon glyphicon-share"></i>
57 </button> 63 </button>
58 </span> 64 </span>
59 <input id="link" type="text" class="form-control" pattern="^https?://[\-_\.\+!\*'\(\),a-zA-Z0-9]+:?[0-9]{0,5}/.*$"> 65 <input id="link" type="text" class="form-control" pattern="^https?://[\-_\.\+!\*'\(\),a-zA-Z0-9]+:?[0-9]{0,5}/.*$">
60 </div> 66 </div>
61 <div class="input-group"> 67 <div class="input-group">
62 <input id="URL" type="text" class="form-control" readonly> 68 <input id="URL" type="text" class="form-control" readonly>
63 <span class="input-group-btn"> 69 <span class="input-group-btn">
64 <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> 70 <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>
65 </span> 71 </span>
66 </div> 72 </div>
67 <div class="input-group"> 73 <div class="input-group">
68 <input id="deleteURL" type="text" class="form-control" readonly> 74 <input id="deleteURL" type="text" class="form-control" readonly>
69 <span class="input-group-btn"> 75 <span class="input-group-btn">
70 <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button> 76 <button id="delete-url" class="btn btn-default" type="button" data-clipboard-target="#deleteURL"><i class="glyphicon glyphicon-paperclip"></i></button>
71 </span> 77 </span>
72 </div> 78 </div>
73 </div> 79 </div>
74 </form> 80 </form>
75 </div> 81 </div>
76 </div> 82 </div>
77 83
78 </div> <!-- container --> 84 </div> <!-- container -->
79 85
80 <div id="footer"> 86 <div id="footer">
81 <div class="container"> 87 <div class="container">
82 <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> 88 <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 </div> 89 </div>
84 </div> 90 </div>
85   91  
86 <!-- jQuery --> 92 <!-- jQuery -->
87 <script src="bower_components/jquery/dist/jquery.min.js"></script> 93 <script src="bower_components/jquery/dist/jquery.min.js"></script>
-   94 <!-- Angular JS -->
-   95 <script src="bower_components/angular/angular.min.js"></script>
88 <!-- BootStrap --> 96 <!-- BootStrap -->
89 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 97 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
90 <!-- Bootstrap Validator --> 98 <!-- Bootstrap Validator -->
91 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script> 99 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
92 <!-- Clipboard --> 100 <!-- Clipboard -->
93 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 101 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
-   102 <!-- Angular Initialization. -->
-   103 <script>
-   104 var app = angular.module('scratch', []);
-   105 </script>
94 <script> 106 <script>
95 $(document).ready(() => { 107 $(document).ready(() => {
96 // Attach the form validator. 108 // Attach the form validator.
97 $('#link-form').validator({ 109 $('#link-form').validator({
98 focus: false, 110 focus: false,
99 delay: 1000 111 delay: 1000
100 }).on('invalid.bs.validator', () => { 112 }).on('invalid.bs.validator', () => {
101 $('#save').attr('disabled', true); 113 $('#save').attr('disabled', true);
102 }).on('valid.bs.validator', () => { 114 }).on('valid.bs.validator', () => {
103 $('#save').attr('disabled', false); 115 $('#save').attr('disabled', false);
104 }); 116 });
105 117
106 // Save image and create URL. 118 // Save image and create URL.
107 $('#save').click(() => { 119 $('#save').click(() => {
108 120
109 var formData = new FormData(); 121 var formData = new FormData();
110 formData.append('file', new Blob( 122 formData.append('file', new Blob(
111 [ 123 [
112 '[InternetShortcut]' 124 '[InternetShortcut]'
113 .concat('\n') 125 .concat('\n')
114 .concat('URL=') 126 .concat('URL=')
115 .concat($('#link') 127 .concat($('#link')
116 .val() 128 .val()
117 ) 129 )
118 .concat('\n') 130 .concat('\n')
119 ] 131 ]
120 ), 132 ),
121 '.url' 133 '.url'
122 ); 134 );
123 135
124 $.get('session.php').then((token) => { 136 $.get('session.php').then((token) => {
125 formData.append('token', token); 137 formData.append('token', token);
126 $.ajax({ 138 $.ajax({
127 url: 'file.php', 139 url: 'file.php',
128 type: 'POST', 140 type: 'POST',
129 data: formData, 141 data: formData,
130 // cache: false // FF 142 // cache: false // FF
131 processData: false, 143 processData: false,
132 contentType: false 144 contentType: false
133 }).done((data) => { 145 }).done((data) => {
134 // Serialize JSON to object. 146 // Serialize JSON to object.
135 data = JSON.parse(data); 147 data = JSON.parse(data);
136 148
137 $('#URL') 149 $('#URL')
138 .val( 150 .val(
139 location.protocol 151 location.protocol
140 .concat("//") 152 .concat("//")
141 .concat(window.location.hostname) 153 .concat(window.location.hostname)
142 .concat("/") 154 .concat("/")
143 .concat(data.hash) 155 .concat(data.hash)
144 ); 156 );
145 157
146 $('#deleteURL') 158 $('#deleteURL')
147 .val( 159 .val(
148 location 160 location
149 .protocol.concat("//") 161 .protocol.concat("//")
150 .concat(window.location.hostname) 162 .concat(window.location.hostname)
151 .concat("/") 163 .concat("/")
152 .concat(data.timestamp) 164 .concat(data.timestamp)
153 .concat("/") 165 .concat("/")
154 .concat(data.hash) 166 .concat(data.hash)
155 ); 167 );
156 }); 168 });
157 }); 169 });
158 }); 170 });
159 171
160 // Enable the Clipboard button. 172 // Enable the Clipboard button.
161 new Clipboard('#copy-url'); 173 new Clipboard('#copy-url');
162 new Clipboard('#delete-url'); 174 new Clipboard('#delete-url');
163 175
164 // Scroll to the panel. 176 // Scroll to the panel.
165 $('html, body').animate({ 177 $('html, body').animate({
166 scrollTop: $('#main-panel').offset().top 178 scrollTop: $('#main-panel').offset().top
167 }, 'slow'); 179 }, 'slow');
168 }); 180 });
169 </script> 181 </script>
170 <!-- Jumbotron parallax effect --> 182 <!-- Jumbotron parallax effect -->
171 <script> 183 <script>
172 var jumboHeight = $('.jumbotron').outerHeight(); 184 var jumboHeight = $('.jumbotron').outerHeight();
173 function parallax(){ 185 function parallax(){
174 var scrolled = $(window).scrollTop(); 186 var scrolled = $(window).scrollTop();
175 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 187 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
176 } 188 }
177   189  
178 $(window).scroll(function(e){ 190 $(window).scroll(function(e){
179 parallax(); 191 parallax();
180 }); 192 });
181 </script> 193 </script>
182 </body> 194 </body>
183 </html> 195 </html>
184   196