badge_create.html.twig 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715
  1. <script>
  2. (function () {
  3. var designer = null;
  4. $(function () {
  5. $('.help-badges').tooltip();
  6. $('.help-badges-img').tooltip();
  7. $('#btn-open-designer').on('click', function (e) {
  8. e.preventDefault();
  9. var designerUrl = 'https://www.openbadges.me/designer.html?origin={{ _p.web }}';
  10. designerUrl = designerUrl + '&email={{ platformAdminEmail }}';
  11. designerUrl = designerUrl + '&close=true';
  12. designerUrl = designerUrl + '&hidePublish=true';
  13. var windowOptions = 'width=1200,height=680,location=0,menubar=0,status=0,toolbar=0';
  14. designer = window.open(designerUrl, '', windowOptions);
  15. });
  16. $('#image').on('change', function () {
  17. var self = this;
  18. if (self.files.length > 0) {
  19. var image = self.files[0];
  20. if (!image.type.match(/image.*/)) {
  21. return;
  22. }
  23. var fileReader = new FileReader();
  24. fileReader.onload = function (e) {
  25. $('#badge-preview').attr('src', e.target.result);
  26. $('#badge-container').removeClass('hide');
  27. };
  28. fileReader.readAsDataURL(image);
  29. }
  30. });
  31. });
  32. })();
  33. </script>
  34. <div class="row">
  35. <div class="col-md-9">
  36. <form action="{{ _p.web_self_query_vars }}" class="form-horizontal" method="post" enctype="multipart/form-data">
  37. <legend>
  38. {{ skill.name }}
  39. </legend>
  40. <fieldset>
  41. <div class="form-group">
  42. <label class="col-sm-2 control-label" for="image">{{ 'Image' | get_lang }}</label>
  43. <div class="col-sm-10">
  44. <input data-placement="left" data-toggle="tooltip" title="{{ "BadgeMeasuresXPixelsInPNG" | get_lang }}" type="file" name="image" id="image" class="help-badges-img" accept="image/*">
  45. </div>
  46. </div>
  47. <div class="form-group collapse" id="badge-studio-frame">
  48. <label class="col-sm-2 control-label" for="criteria"></label>
  49. <div class="col-sm-10">
  50. <h1 class="title">Badge Studio</h1>
  51. <div class="" id="studio">
  52. <div id="input">
  53. <div class="row">
  54. <div class="col-md-4">
  55. <h3 class="label"><label for="studio-mask">{{ "Templates" | get_lang }}</label></h3>
  56. <select name="template" class="form-control" id="studio-template" data-path="{{ badge_studio.templates }}">
  57. <option value="template-1">{{ "Template" | get_lang }} 1</option>
  58. <option value="template-2">{{ "Template" | get_lang }} 2</option>
  59. <option value="template-3">{{ "Template" | get_lang }} 3</option>
  60. </select>
  61. <h3 class="label"><label for="studio-mask">{{ "Palettes" | get_lang }}</label></h3>
  62. <select name="palette" class="form-control" id="studio-palette">
  63. <option value="palette-1"
  64. data-color-background="#CE001F"
  65. data-color-stitching="#FFF"
  66. data-color-border="#4C4F53"
  67. data-color-detail="#999"
  68. data-color-glyph="#FFF">{{ "Palette" | get_lang }} 1</option>
  69. <option value="palette-2"
  70. data-color-background="#04A"
  71. data-color-stitching="#0AE"
  72. data-color-border="#0AE"
  73. data-color-detail="#FFF"
  74. data-color-glyph="#FFF">{{ "Palette" | get_lang }} 2</option>
  75. <option value="palette-3"
  76. data-color-background="#11458B"
  77. data-color-stitching="#3EB48D"
  78. data-color-border="#3EB48D"
  79. data-color-detail="#FFF"
  80. data-color-glyph="#FFF">{{ "Palette" | get_lang }} 3</option>
  81. </select>
  82. <br />
  83. <h3 class="label"><label for="studio-mask">{{ "Colors" | get_lang }}</label></h3>
  84. <div id="custom-palette"></div>
  85. </div>
  86. <div class="col-md-8">
  87. <div id="output"></div>
  88. </div>
  89. </div>
  90. <div class="row">
  91. <div class="col-md-3">
  92. <h3 class="label"><label for="studio-mask">{{ "Mask" | get_lang }}</label></h3>
  93. <p class="item">
  94. <select name="mask" class="form-control" id="studio-mask" data-path="{{ badge_studio.masks }}">
  95. <option value="">{{ "None" | get_lang }}</option>
  96. <option value="lines">{{ "Lines" | get_lang }}</option>
  97. </select>
  98. </p>
  99. </div>
  100. <div class="col-md-3">
  101. <h3 class="label"><label for="studio-options">{{ "Options" | get_lang }}</label></h3>
  102. <p class="item" id="options">
  103. <i>None</i>
  104. </p>
  105. </div>
  106. <div class="col-md-6">
  107. <h3 class="label"><label for="studio-glyph">{{ "Icon" | get_lang }}</label></h3>
  108. <p class="item">
  109. <select name="glyph" class="form-control" id="studio-glyph">
  110. <option value="">None</option>
  111. <option value="ambulance">Ambulance</option>
  112. <option value="anchor">Anchor</option>
  113. <option value="android">Android</option>
  114. <option value="angle-down">Angle: Down</option>
  115. <option value="angle-double-down">Angle: Down (Double)</option>
  116. <option value="angle-left">Angle: Left</option>
  117. <option value="angle-double-left">Angle: Left (Double)</option>
  118. <option value="angle-right">Angle: Right</option>
  119. <option value="angle-double-right">Angle: Right (Double)</option>
  120. <option value="angle-up">Angle: Up</option>
  121. <option value="angle-double-up">Angle: Up (Double)</option>
  122. <option value="apple">Apple</option>
  123. <option value="archive">Archive</option>
  124. <option value="arrow-down">Arrow: Down</option>
  125. <option value="arrow-circle-down">Arrow: Down (Circle)</option>
  126. <option value="arrow-circle-o-down">Arrow: Down (Circle-O)</option>
  127. <option value="arrow-left">Arrow (Left)</option>
  128. <option value="arrow-circle-left">Arrow: Left (Circle)</option>
  129. <option value="arrow-circle-o-left">Arrow: Left (Circle-O)</option>
  130. <option value="arrow-right">Arrow: Right</option>
  131. <option value="arrow-circle-right">Arrow: Right (Circle)</option>
  132. <option value="arrow-circle-o-right">Arrow: Right (Circle-O)</option>
  133. <option value="arrow-up">Arrow: Up</option>
  134. <option value="arrow-circle-up">Arrow: Up (Circle)</option>
  135. <option value="arrow-circle-o-up">Arrow: Up (Circle-O)</option>
  136. <option value="arrows">Arrows</option>
  137. <option value="arrows-alt">Arrows (Alt)</option>
  138. <option value="arrows-h">Arrows: Horizontal</option>
  139. <option value="arrows-v">Arrows: Vertical</option>
  140. <option value="asterisk">Asterisk</option>
  141. <option value="automobile">Automobile</option>
  142. <option value="backward">Backward</option>
  143. <option value="ban">Ban</option>
  144. <option value="bank">Bank</option>
  145. <option value="bar-chart-o">Bar Chart (O)</option>
  146. <option value="barcode">Barcode</option>
  147. <option value="bars">Bars</option>
  148. <option value="beer">Beer</option>
  149. <option value="behance">Behance</option>
  150. <option value="behance-square">Behance (Square)</option>
  151. <option value="bell">Bell</option>
  152. <option value="bell-o">Bell (O)</option>
  153. <option value="bitbucket">BitBucket</option>
  154. <option value="bitbucket-square">BitBucket (Square)</option>
  155. <option value="bitcoin">Bitcoin</option>
  156. <option value="bold">Bold</option>
  157. <option value="bolt">Bolt</option>
  158. <option value="bomb">Bomb</option>
  159. <option value="book">Book</option>
  160. <option value="bookmark">Bookmark</option>
  161. <option value="bookmark-o">Bookmark (O)</option>
  162. <option value="briefcase">Briefcase</option>
  163. <option value="btc">BTC</option>
  164. <option value="bug">Bug</option>
  165. <option value="building">Building</option>
  166. <option value="building-o">Building (O)</option>
  167. <option value="bullhorn">Bullhorn</option>
  168. <option value="bullseye">Bullseye</option>
  169. <option value="cab">Cab</option>
  170. <option value="calendar">Calendar</option>
  171. <option value="calendar-o">Calendar (O)</option>
  172. <option value="camera">Camera</option>
  173. <option value="camera-retro">Camera (Retro)</option>
  174. <option value="car">Car</option>
  175. <option value="caret-down">Caret: Down</option>
  176. <option value="caret-square-o-down">Caret: Down (Square-O)</option>
  177. <option value="caret-left">Caret: Left</option>
  178. <option value="caret-square-o-left">Caret: Left (Square-O)</option>
  179. <option value="caret-right">Caret: Right</option>
  180. <option value="caret-square-o-right">Caret: Right (Square-O)</option>
  181. <option value="caret-up">Caret: Up</option>
  182. <option value="caret-square-o-up">Caret: Up (Square-O)</option>
  183. <option value="certificate">Certificate</option>
  184. <option value="chain">Chain</option>
  185. <option value="chain-broken">Chain (Broken)</option>
  186. <option value="check">Check</option>
  187. <option value="check-circle">Check (Circle)</option>
  188. <option value="check-circle-o">Check (Circle-O)</option>
  189. <option value="check-square">Check (Square)</option>
  190. <option value="check-square-o">Check (Square-O)</option>
  191. <option value="chevron-down">Chevron: Down</option>
  192. <option value="chevron-circle-down">Chevron: Down (Circle)</option>
  193. <option value="chevron-left">Chevron: Left</option>
  194. <option value="chevron-circle-left">Chevron: Left (Circle)</option>
  195. <option value="chevron-right">Chevron: Right</option>
  196. <option value="chevron-circle-right">Chevron: Right (Circle)</option>
  197. <option value="chevron-up">Chevron: Up</option>
  198. <option value="chevron-circle-up">Chevron: Up (Circle)</option>
  199. <option value="child">Child</option>
  200. <option value="circle">Circle</option>
  201. <option value="circle-o">Circle (O)</option>
  202. <option value="circle-o-notch">Circle (O Notch)</option>
  203. <option value="circle-thin">Circle (Thin)</option>
  204. <option value="clipboard">Clipboard</option>
  205. <option value="clock-o">Clock (O)</option>
  206. <option value="cloud">Cloud</option>
  207. <option value="cloud-download">Cloud: Download</option>
  208. <option value="cloud-upload">Cloud: Upload</option>
  209. <option value="cny">CNY</option>
  210. <option value="code">Code</option>
  211. <option value="code-fork">Code (Fork)</option>
  212. <option value="codepen">Codepen</option>
  213. <option value="coffee">Coffee</option>
  214. <option value="cog">Cog</option>
  215. <option value="cogs">Cogs</option>
  216. <option value="columns">Columns</option>
  217. <option value="comment">Comment</option>
  218. <option value="comment-o">Comment (O)</option>
  219. <option value="comments">Comments</option>
  220. <option value="comments-o">Comments (O)</option>
  221. <option value="compass">Compass</option>
  222. <option value="compress">Compress</option>
  223. <option value="copy">Copy</option>
  224. <option value="credit-card">Credit (Card)</option>
  225. <option value="crop">Crop</option>
  226. <option value="crosshairs">Crosshairs</option>
  227. <option value="css3">CSS3</option>
  228. <option value="cube">Cube</option>
  229. <option value="cubes">Cubes</option>
  230. <option value="cut">Cut</option>
  231. <option value="cutlery">Cutlery</option>
  232. <option value="dashboard">Dashboard</option>
  233. <option value="database">Database</option>
  234. <option value="dedent">Dedent</option>
  235. <option value="delicious">Delicious</option>
  236. <option value="desktop">Desktop</option>
  237. <option value="deviantart">Deviantart</option>
  238. <option value="digg">Digg</option>
  239. <option value="dollar">Dollar</option>
  240. <option value="dot-circle-o">Dot (Circle-O)</option>
  241. <option value="download">Download</option>
  242. <option value="dribbble">Dribbble</option>
  243. <option value="dropbox">Dropbox</option>
  244. <option value="drupal">Drupal</option>
  245. <option value="edit">Edit</option>
  246. <option value="eject">Eject</option>
  247. <option value="ellipsis-h">Ellipsis (Horizontal)</option>
  248. <option value="ellipsis-v">Ellipsis (Vertical)</option>
  249. <option value="empire">Empire</option>
  250. <option value="envelope">Envelope</option>
  251. <option value="envelope-o">Envelope (O)</option>
  252. <option value="envelope-square">Envelope (Square)</option>
  253. <option value="eraser">Eraser</option>
  254. <option value="eur">EUR</option>
  255. <option value="euro">Euro</option>
  256. <option value="exchange">Exchange</option>
  257. <option value="exclamation">Exclamation</option>
  258. <option value="exclamation-circle">Exclamation (Circle)</option>
  259. <option value="exclamation-triangle">Exclamation (Triangle)</option>
  260. <option value="expand">Expand</option>
  261. <option value="external-link">External Link</option>
  262. <option value="external-link-square">External Link (Square)</option>
  263. <option value="eye">Eye</option>
  264. <option value="eye-slash">Eye (Slash)</option>
  265. <option value="facebook">Facebook</option>
  266. <option value="facebook-square">Facebook (Square)</option>
  267. <option value="fast-backward">Fast Rewind</option>
  268. <option value="fast-forward">Fast Forward</option>
  269. <option value="fax">Fax</option>
  270. <option value="female">Female</option>
  271. <option value="fighter-jet">Fighter Jet</option>
  272. <option value="file">File</option>
  273. <option value="file-o">File (O)</option>
  274. <option value="files-o">Files (O)</option>
  275. <option value="file-archive-o">File: Archive (O)</option>
  276. <option value="file-audio-o">File: Audio (O)</option>
  277. <option value="file-code-o">File: Code (O)</option>
  278. <option value="file-excel-o">File: Excel (O)</option>
  279. <option value="file-image-o">File: Image (O)</option>
  280. <option value="file-movie-o">File: Movie (O)</option>
  281. <option value="file-pdf-o">File: PDF (O)</option>
  282. <option value="file-photo-o">File: Photo (O)</option>
  283. <option value="file-picture-o">File: Picture (O)</option>
  284. <option value="file-powerpoint-o">File: Powerpoint (O)</option>
  285. <option value="file-sound-o">File: Sound (O)</option>
  286. <option value="file-text">File: Text</option>
  287. <option value="file-text-o">File: Text (O)</option>
  288. <option value="file-video-o">File: Video (O)</option>
  289. <option value="file-word-o">File: Word (O)</option>
  290. <option value="file-zip-o">File: Zip (O)</option>
  291. <option value="film">Film</option>
  292. <option value="filter">Filter</option>
  293. <option value="fire">Fire</option>
  294. <option value="fire-extinguisher">Fire Extinguisher</option>
  295. <option value="flag">Flag</option>
  296. <option value="flag-o">Flag (O)</option>
  297. <option value="flag-checkered">Flag: Checkered</option>
  298. <option value="flash">Flash</option>
  299. <option value="flask">Flask</option>
  300. <option value="flickr">Flickr</option>
  301. <option value="floppy-o">Floppy (O)</option>
  302. <option value="folder">Folder</option>
  303. <option value="folder-o">Folder (O)</option>
  304. <option value="folder-open">Folder: Open</option>
  305. <option value="folder-open-o">Folder: Open (O)</option>
  306. <option value="font">Font</option>
  307. <option value="forward">Forward</option>
  308. <option value="foursquare">Foursquare</option>
  309. <option value="frown-o">Frown (O)</option>
  310. <option value="gamepad">Gamepad</option>
  311. <option value="gavel">Gavel</option>
  312. <option value="gbp">GBP</option>
  313. <option value="ge">Ge</option>
  314. <option value="gear">Gear</option>
  315. <option value="gears">Gears</option>
  316. <option value="gift">Gift</option>
  317. <option value="git">Git</option>
  318. <option value="git-square">Git (Square)</option>
  319. <option value="github">GitHub</option>
  320. <option value="github-alt">GitHub (Alt)</option>
  321. <option value="github-square">GitHub (Square)</option>
  322. <option value="gittip">GitTip</option>
  323. <option value="glass">Glass</option>
  324. <option value="globe">Globe</option>
  325. <option value="google">Google</option>
  326. <option value="google-plus">Google Plus</option>
  327. <option value="google-plus-square">Google Plus (Square)</option>
  328. <option value="graduation-cap">Graduation (Cap)</option>
  329. <option value="group">Group</option>
  330. <option value="h-square">H (Square)</option>
  331. <option value="hacker-news">Hacker News</option>
  332. <option value="hand-o-down">Hand: Down (O)</option>
  333. <option value="hand-o-left">Hand: Left (O)</option>
  334. <option value="hand-o-right">Hand: Right (O)</option>
  335. <option value="hand-o-up">Hand: Up (O)</option>
  336. <option value="hdd-o">HDD (O)</option>
  337. <option value="header">Header</option>
  338. <option value="headphones">Headphones</option>
  339. <option value="heart">Heart</option>
  340. <option value="heart-o">Heart (O)</option>
  341. <option value="history">History</option>
  342. <option value="home">Home</option>
  343. <option value="hospital-o">Hospital (O)</option>
  344. <option value="html5">HTML5</option>
  345. <option value="image">Image</option>
  346. <option value="inbox">Inbox</option>
  347. <option value="indent">Indent</option>
  348. <option value="info">Info</option>
  349. <option value="info-circle">Info (Circle)</option>
  350. <option value="inr">Inr</option>
  351. <option value="instagram">Instagram</option>
  352. <option value="institution">Institution</option>
  353. <option value="italic">Italic</option>
  354. <option value="joomla">Joomla</option>
  355. <option value="jpy">JPY</option>
  356. <option value="jsfiddle">JSFiddle</option>
  357. <option value="key">Key</option>
  358. <option value="keyboard-o">Keyboard (O)</option>
  359. <option value="krw">KRW</option>
  360. <option value="language">Language</option>
  361. <option value="laptop">Laptop</option>
  362. <option value="leaf">Leaf</option>
  363. <option value="legal">Legal</option>
  364. <option value="lemon-o">Lemon (O)</option>
  365. <option value="level-down">Level Down</option>
  366. <option value="level-up">Level Up</option>
  367. <option value="life-bouy">Life Bouy</option>
  368. <option value="life-ring">Life Ring</option>
  369. <option value="life-saver">Life Saver</option>
  370. <option value="lightbulb-o">Lightbulb (O)</option>
  371. <option value="link">Link</option>
  372. <option value="linkedin">LinkedIn</option>
  373. <option value="linkedin-square">LinkedIn (Square)</option>
  374. <option value="linux">Linux</option>
  375. <option value="list">List</option>
  376. <option value="list-alt">List (Alt)</option>
  377. <option value="list-ol">List (Ol)</option>
  378. <option value="list-ul">List (Ul)</option>
  379. <option value="location-arrow">Location (Arrow)</option>
  380. <option value="lock">Lock</option>
  381. <option value="long-arrow-down">Long Arrow Down</option>
  382. <option value="long-arrow-left">Long Arrow Left</option>
  383. <option value="long-arrow-right">Long Arrow Right</option>
  384. <option value="long-arrow-up">Long Arrow Up</option>
  385. <option value="magic">Magic</option>
  386. <option value="magnet">Magnet</option>
  387. <option value="mail-forward">Mail: Forward</option>
  388. <option value="mail-reply">Mail: Reply</option>
  389. <option value="mail-reply-all">Mail: Reply All</option>
  390. <option value="male">Male</option>
  391. <option value="map-marker">Map Marker</option>
  392. <option value="maxcdn">MaxCDN</option>
  393. <option value="medkit">Medkit</option>
  394. <option value="meh-o">Meh (O)</option>
  395. <option value="microphone">Microphone</option>
  396. <option value="microphone-slash">Microphone (Slash)</option>
  397. <option value="minus">Minus</option>
  398. <option value="minus-circle">Minus (Circle)</option>
  399. <option value="minus-square">Minus (Square)</option>
  400. <option value="minus-square-o">Minus (Square O)</option>
  401. <option value="mobile">Mobile</option>
  402. <option value="mobile-phone">Mobile Phone</option>
  403. <option value="money">Money</option>
  404. <option value="moon-o">Moon (O)</option>
  405. <option value="mortar-board">Mortar Board</option>
  406. <option value="music">Music</option>
  407. <option value="navicon">Navicon</option>
  408. <option value="openid">Openid</option>
  409. <option value="outdent">Outdent</option>
  410. <option value="pagelines">Pagelines</option>
  411. <option value="paper-plane">Paper Plane</option>
  412. <option value="paper-plane-o">Paper Plane (O)</option>
  413. <option value="paperclip">Paper Clip</option>
  414. <option value="paragraph">Paragraph</option>
  415. <option value="paste">Paste</option>
  416. <option value="pause">Pause</option>
  417. <option value="paw">Paw</option>
  418. <option value="pencil">Pencil</option>
  419. <option value="pencil-square">Pencil (Square)</option>
  420. <option value="pencil-square-o">Pencil (Square-O)</option>
  421. <option value="phone">Phone</option>
  422. <option value="phone-square">Phone (Square)</option>
  423. <option value="photo">Photo</option>
  424. <option value="picture-o">Picture (O)</option>
  425. <option value="pied-piper">Pied Piper</option>
  426. <option value="pied-piper-alt">Pied Piper (Alt)</option>
  427. <option value="pied-piper-square">Pied Piper (Square)</option>
  428. <option value="pinterest">Pinterest</option>
  429. <option value="pinterest-square">Pinterest (Square)</option>
  430. <option value="plane">Plane</option>
  431. <option value="play">Play</option>
  432. <option value="play-circle">Play (Circle)</option>
  433. <option value="play-circle-o">Play (Circle-O)</option>
  434. <option value="plus">Plus</option>
  435. <option value="plus-circle">Plus (Circle)</option>
  436. <option value="plus-square">Plus (Square)</option>
  437. <option value="plus-square-o">Plus (Square-O)</option>
  438. <option value="power-off">Power Off</option>
  439. <option value="print">Print</option>
  440. <option value="puzzle-piece">Puzzle Piece</option>
  441. <option value="qq">Qq</option>
  442. <option value="qrcode">QR Code</option>
  443. <option value="question">Question</option>
  444. <option value="question-circle">Question (Circle)</option>
  445. <option value="quote-left">Quote: Left</option>
  446. <option value="quote-right">Quote: Right</option>
  447. <option value="ra">Ra</option>
  448. <option value="random">Random</option>
  449. <option value="rebel">Rebel</option>
  450. <option value="recycle">Recycle</option>
  451. <option value="reddit">Reddit</option>
  452. <option value="reddit-square">Reddit (Square)</option>
  453. <option value="refresh">Refresh</option>
  454. <option value="renren">Renren</option>
  455. <option value="reorder">Reorder</option>
  456. <option value="repeat">Repeat</option>
  457. <option value="reply">Reply</option>
  458. <option value="reply-all">Reply All</option>
  459. <option value="retweet">Retweet</option>
  460. <option value="rmb">Rmb</option>
  461. <option value="road">Road</option>
  462. <option value="rocket">Rocket</option>
  463. <option value="rotate-left">Rotate Left</option>
  464. <option value="rotate-right">Rotate Right</option>
  465. <option value="rouble">Rouble</option>
  466. <option value="rss">RSS</option>
  467. <option value="rss-square">RSS (Square)</option>
  468. <option value="rub">Rub</option>
  469. <option value="ruble">Ruble</option>
  470. <option value="rupee">Rupee</option>
  471. <option value="save">Save</option>
  472. <option value="scissors">Scissors</option>
  473. <option value="search">Search</option>
  474. <option value="search-minus">Search: Minus</option>
  475. <option value="search-plus">Search: Plus</option>
  476. <option value="send">Send</option>
  477. <option value="send-o">Send (O)</option>
  478. <option value="share">Share</option>
  479. <option value="share-alt">Share (Alt)</option>
  480. <option value="share-alt-square">Share (Alt Square)</option>
  481. <option value="share-square">Share (Square)</option>
  482. <option value="share-square-o">Share (Square-O)</option>
  483. <option value="shield">Shield</option>
  484. <option value="shopping-cart">Shopping Cart</option>
  485. <option value="sign-in">Sign In</option>
  486. <option value="sign-out">Sign Out</option>
  487. <option value="signal">Signal</option>
  488. <option value="sitemap">Sitemap</option>
  489. <option value="skype">Skype</option>
  490. <option value="slack">Slack</option>
  491. <option value="sliders">Sliders</option>
  492. <option value="smile-o">Smile (O)</option>
  493. <option value="sort">Sort</option>
  494. <option value="sort-asc">Sort: Asc</option>
  495. <option value="sort-desc">Sort: Desc</option>
  496. <option value="sort-down">Sort: Down</option>
  497. <option value="sort-up">Sort: Up</option>
  498. <option value="sort-alpha-asc">Sort: Alpha Asc</option>
  499. <option value="sort-alpha-desc">Sort: Alpha Desc</option>
  500. <option value="sort-amount-asc">Sort: Amount Asc</option>
  501. <option value="sort-amount-desc">Sort: Amount Desc</option>
  502. <option value="sort-numeric-asc">Sort: Numeric Asc</option>
  503. <option value="sort-numeric-desc">Sort: Numeric Desc</option>
  504. <option value="soundcloud">Soundcloud</option>
  505. <option value="space-shuttle">Space Shuttle</option>
  506. <option value="spinner">Spinner</option>
  507. <option value="spoon">Spoon</option>
  508. <option value="spotify">Spotify</option>
  509. <option value="square">Square</option>
  510. <option value="square-o">Square (O)</option>
  511. <option value="stack-exchange">Stack Exchange</option>
  512. <option value="stack-overflow">Stack Overflow</option>
  513. <option value="star">Star</option>
  514. <option value="star-half">Star (Half)</option>
  515. <option value="star-half-empty">Star (Half Empty)</option>
  516. <option value="star-half-full">Star (Half Full)</option>
  517. <option value="star-half-o">Star (Half O)</option>
  518. <option value="star-o">Star (O)</option>
  519. <option value="steam">Steam</option>
  520. <option value="steam-square">Steam (Square)</option>
  521. <option value="step-backward">Step Backward</option>
  522. <option value="step-forward">Step Forward</option>
  523. <option value="stethoscope">Stethoscope</option>
  524. <option value="stop">Stop</option>
  525. <option value="strikethrough">Strikethrough</option>
  526. <option value="stumbleupon">Stumbleupon</option>
  527. <option value="stumbleupon-circle">Stumbleupon (Circle)</option>
  528. <option value="subscript">Subscript</option>
  529. <option value="suitcase">Suitcase</option>
  530. <option value="sun-o">Sun (O)</option>
  531. <option value="superscript">Superscript</option>
  532. <option value="support">Support</option>
  533. <option value="table">Table</option>
  534. <option value="tablet">Tablet</option>
  535. <option value="tachometer">Tachometer</option>
  536. <option value="tag">Tag</option>
  537. <option value="tags">Tags</option>
  538. <option value="tasks">Tasks</option>
  539. <option value="taxi">Taxi</option>
  540. <option value="tencent-weibo">Tencent Weibo</option>
  541. <option value="terminal">Terminal</option>
  542. <option value="text-height">Text Height</option>
  543. <option value="text-width">Text Width</option>
  544. <option value="th">Th</option>
  545. <option value="th-large">Th (Large)</option>
  546. <option value="th-list">Th (List)</option>
  547. <option value="thumb-tack">Thumb Tack</option>
  548. <option value="thumbs-down">Thumbs Down</option>
  549. <option value="thumbs-o-down">Thumbs Down (O)</option>
  550. <option value="thumbs-up">Thumbs Up</option>
  551. <option value="thumbs-o-up">Thumbs Up (O)</option>
  552. <option value="ticket">Ticket</option>
  553. <option value="times">Times</option>
  554. <option value="times-circle">Times (Circle)</option>
  555. <option value="times-circle-o">Times (Circle O)</option>
  556. <option value="tint">Tint</option>
  557. <option value="toggle-down">Toggle Down</option>
  558. <option value="toggle-left">Toggle Left</option>
  559. <option value="toggle-right">Toggle Right</option>
  560. <option value="toggle-up">Toggle Up</option>
  561. <option value="trash-o">Trash (O)</option>
  562. <option value="tree">Tree</option>
  563. <option value="trello">Trello</option>
  564. <option value="trophy">Trophy</option>
  565. <option value="truck">Truck</option>
  566. <option value="try">Try</option>
  567. <option value="tumblr">Tumblr</option>
  568. <option value="tumblr-square">Tumblr (Square)</option>
  569. <option value="turkish-lira">Turkish Lira</option>
  570. <option value="twitter">Twitter</option>
  571. <option value="twitter-square">Twitter (Square)</option>
  572. <option value="umbrella">Umbrella</option>
  573. <option value="underline">Underline</option>
  574. <option value="undo">Undo</option>
  575. <option value="university">University</option>
  576. <option value="unlink">Unlink</option>
  577. <option value="unlock">Unlock</option>
  578. <option value="unlock-alt">Unlock (Alt)</option>
  579. <option value="unsorted">Unsorted</option>
  580. <option value="upload">Upload</option>
  581. <option value="usd">USD</option>
  582. <option value="user">User</option>
  583. <option value="user-md">User (MD)</option>
  584. <option value="users">Users</option>
  585. <option value="video-camera">Video (Camera)</option>
  586. <option value="vimeo-square">Vimeo (Square)</option>
  587. <option value="vine">Vine</option>
  588. <option value="vk">Vk</option>
  589. <option value="volume-up">Volume Up</option>
  590. <option value="volume-down">Volume Down</option>
  591. <option value="volume-off">Volume Off</option>
  592. <option value="warning">Warning</option>
  593. <option value="wechat">Wechat</option>
  594. <option value="weibo">Weibo</option>
  595. <option value="weixin">Weixin</option>
  596. <option value="wheelchair">Wheelchair</option>
  597. <option value="windows">Windows</option>
  598. <option value="won">Won</option>
  599. <option value="wordpress">Wordpress</option>
  600. <option value="wrench">Wrench</option>
  601. <option value="xing">Xing</option>
  602. <option value="xing-square">Xing (Square)</option>
  603. <option value="yahoo">Yahoo</option>
  604. <option value="yen">Yen</option>
  605. <option value="youtube">Youtube</option>
  606. <option value="youtube-play">Youtube (Play)</option>
  607. <option value="youtube-square">Youtube (Square)</option>
  608. </select>
  609. </p>
  610. <h3 class="label"><label for="size-glyph">{{ "Size" | get_lang }}</label></h3>
  611. <p class="item">
  612. <select name="size-glyph" class="form-control" id="size-glyph">
  613. <option value="big">{{ "Big" | get_lang }}</option>
  614. <option value="medium" selected>{{ "Medium" | get_lang }}</option>
  615. <option value="small">{{ "Small" | get_lang }}</option>
  616. </select>
  617. </p>
  618. </div>
  619. <div class="col-md-12 text-center">
  620. <a id="set-custom-badge" class="btn btn-primary"><em class="fa fa-check"></em> {{ 'UseThisBadge' | get_lang }}</a>
  621. <input type="hidden" id="badge_studio_image" name="badge_studio_image" >
  622. </div>
  623. </div>
  624. </div>
  625. </div>
  626. </div>
  627. <template id="glyph-selector-template">
  628. <div id="glyph-selector" role="dialog" class="overlay hidden" aria-label="Select a glyph" tabIndex="0">
  629. <div class="header">
  630. <label class="title"></label>
  631. </div>
  632. <div class="panel">
  633. <ul>
  634. </ul>
  635. </div>
  636. </div>
  637. </template>
  638. <template id="glyph-selector-item-template">
  639. <li>
  640. <input type="radio" name="glyph-selector-item" class="hidden">
  641. <label></label>
  642. </li>
  643. </template>
  644. <template id="option-template">
  645. <label>
  646. <input type="checkbox">
  647. <span>Label</span>
  648. </label>
  649. </template>
  650. <template id="close-button-template">
  651. <button type="button" class="close fa fa-times-circle-o" aria-label="Close"></button>
  652. </template>
  653. <template id="custom-color-template">
  654. <label>
  655. <input type="color">
  656. <span>Label</span>
  657. </label>
  658. </template>
  659. </div>
  660. </fieldset>
  661. <div class="form-group">
  662. <div class="col-sm-offset-2 col-sm-10">
  663. <button type="submit" class="btn btn-primary btn-large"><em class="fa fa-plus"></em>
  664. {{ 'SaveBadge'| get_lang }}
  665. </button>
  666. </div>
  667. </div>
  668. </form>
  669. </div>
  670. <div class="col-md-3">
  671. <div class="openbadges-img" id="badge-container">
  672. <img id="badge-preview" class="img-fluid" alt="{{ 'BadgePreview' | get_lang }}" src="{{ skill.icon_big }}">
  673. </div>
  674. <div class="create-openbadges">
  675. <button id="btn-open-designer" class="help-badges btn btn-primary btn-large btn-block" data-toggle="tooltip" data-placement="bottom" title="{{ 'DesignANewBadgeComment' | get_lang }}" type="button">
  676. <em class="fa fa-pencil"></em> {{ 'DesignNewBadge' | get_lang }}
  677. </button>
  678. </div>
  679. <div class="create-openbadges">
  680. <button id="btn-open-badge-studio" class="help-badges btn btn-outline-primary btn-large btn-block" data-toggle="collapse" data-target="#badge-studio-frame" aria-expanded="false" aria-controls="badge-studio-frame" title="{{ 'DesignWithBadgeStudioComment' | get_lang }}" type="button">
  681. <em class="fa fa-cogs"></em> {{ 'DesignWithBadgeStudio' | get_lang }}
  682. </button>
  683. </div>
  684. </div>
  685. </div>
  686. {{ badge_studio.script_js }}
  687. <script>
  688. $(function() {
  689. $('#set-custom-badge').click(function () {
  690. var data = $('#raster').attr('src');
  691. $('#badge_studio_image').val(data);
  692. $('#badge-preview').attr('src', data);
  693. $('#badge-container').removeClass('hide');
  694. });
  695. $('#size-glyph').change(function () {
  696. window.size = $(this).val();
  697. updateGlyph();
  698. });
  699. })
  700. </script>