fluffy – Blame information for rev 1

Subversion Repositories:
Rev:
Rev Author Line No. Line
1 office 1 <!DOCTYPE html>
2 <html>
3  
4 <head>
5 <meta charset='utf-8'>
6 <title>Fluffy</title>
7 <script src='/node_modules/jquery/dist/jquery.min.js'></script>
8 <script src='/js/jquery.svg3dtagcloud.min.js'></script>
9  
10 <!-- Bootstrap CSS -->
11 <link href='/node_modules/bootstrap/dist/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
12 <link href='/node_modules/bootstrap/dist/css/bootstrap-theme.min.css' rel='stylesheet' type='text/css'>
13  
14 <!-- DropZone -->
15 <link href='/node_modules/dropzone/dist/dropzone.css' rel='stylesheet' type='text/css'>
16  
17 <!-- Fluffy style -->
18 <!-- <link href='https://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext' rel='stylesheet' type='text/css'> -->
19 <link href='/css/style.css' rel='stylesheet' type='text/css'>
20  
21 </head>
22 <body>
23 <div id='cloud'></div>
24 <!-- Add button -->
25 <div class="add" data-toggle="modal" data-target="#myModal"></div>
26 <!-- Modal -->
27 <div id="myModal" class="modal fade" role="dialog">
28 <div class="modal-dialog">
29 <!-- Modal content-->
30 <div class="modal-content">
31 <div class="modal-header">
32 <button type="button" class="close" data-dismiss="modal">&times;</button>
33 <h4 class="modal-title">Add New Service</h4>
34 </div>
35 <div class="modal-body">
36 <div class="row">
37 <div class="col-md-6 col-sm-6 col-xs-12">
38 <form id="serve" data-toggle="validator" role="form" enctype="multipart/form-data" method="POST">
39 <div class="form-group ">
40 <label class="control-label requiredField" for="service-url">
41 Service URL
42 </label>
43 <input class="form-control" id="service-url" name="service-url" placeholder="http://myservice.tld/" type="text" required/>
44 <div class="help-block with-errors">
45 The URL to link to.
46 </div>
47 </div>
48 <div class="form-group ">
49 <label class="control-label requiredField" for="service-name">
50 Service Name
51 </label>
52 <input class="form-control" id="service-name" name="service-name" placeholder="My Service" type="text" required/>
53 <div class="help-block with-errors">
54 The name that should be used for the service.
55 </div>
56 </div>
57 <div class="form-group">
58 <label class="control-label requiredField" for="dropzone">
59 Service Icon
60 </label>
61 <div id="service-icon" class="service-icon"></div>
62 <div id="dropzone-template">
63 <div class="dz-preview dz-file-preview">
64 <div class="dz-details">
65 <img data-dz-thumbnail />
66 </div>
67 </div>
68 </div>
69 <div class="help-block with-errors">
70 An icon that should be used to represent the service.
71 </div>
72 </div>
73 <div class="form-group">
74 <button id="add" type="submit" class="btn btn-primary">Add</button>
75 </div>
76 </form>
77 </div>
78 </div>
79 </div>
80 </div>
81 </div>
82 </div>
83  
84 <!-- Bootstrap JavaScript -->
85 <script src='/node_modules/bootstrap/dist/js/bootstrap.min.js'></script>
86 <!-- Bootstrap Validator -->
87 <script src='/node_modules/bootstrap-validator/dist/validator.min.js'></script>
88 <!-- DropZone -->
89 <script src='/node_modules/dropzone/dist/min/dropzone.min.js'></script>
90 <script>
91 $(document).ready(function() {
92 $.getJSON('/data/data.json', (services) => {
93 // Create and display the tag cloud.
94 $('#cloud').svg3DTagCloud({
95 entries: services,
96 width: '100%',
97 height: '100%',
98 radius: '65%',
99 radiusMin: 75,
100 bgDraw: true,
101 bgColor: '#fff',
102 opacityOver: 1.00,
103 opacityOut: 0.05,
104 opacitySpeed: 6,
105 fov: 800,
106 speed: 2,
107 //fontFamily: 'Oswald, Arial, sans-serif',
108 fontSize: '14px',
109 fontColor: '#000',
110 fontWeight: 'bold', //bold
111 fontStyle: 'normal', //italic
112 fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
113 fontToUpperCase: true,
114 //tooltipFontFamily: 'Oswald, Arial, sans-serif',
115 tooltipFontSize: '14px',
116 tooltipFontColor: '#000',
117 tooltipFontWeight: 'bold', //bold
118 tooltipFontStyle: 'normal', //italic
119 tooltipFontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
120 tooltipFontToUpperCase: false,
121 tooltipTextAnchor: 'middle',
122 tooltipDiffX: 0,
123 tooltipDiffY: 16
124 });
125  
126 // Set up dropzone for icon upload.
127 $('#service-icon').dropzone({
128 url: '/',
129 autoProcessQueue: true,
130 uploadMultiple: false,
131 maxFiles: 1,
132 acceptedFiles: 'image/*',
133 resizeMethod: 'contain',
134 thumbnailWidth: 64,
135 thumbnailHeight: 64,
136 resizeWidth: 64,
137 resizeHeight: 64,
138 paramName: "image",
139 previewTemplate: document.querySelector('#dropzone-template').innerHTML,
140 renameFile: function(file) {
141 // set the filename to the name of the service
142 file.name = $('#service-name').val();
143 },
144 init: function() {
145 // only allow a single icon file to be uploaded
146 this.on("maxfilesexceeded", function(file) {
147 this.removeAllFiles();
148 this.addFile(file);
149 });
150 }
151 });
152  
153 // Validation process to ensure that all parameters are passed.
154 $('#form').validator().on('submit', function (e) {
155 if (e.isDefaultPrevented())
156 return;
157 })
158 });
159 });
160 </script>
161 </body>