<script> (function () { var designer = null; $(document).on('ready', function () { $('.help-badges').tooltip(); $('.help-badges-img').tooltip(); }); $(document).on('ready', function () { $('#btn-open-designer').on('click', function (e) { e.preventDefault(); var designerUrl = 'https://www.openbadges.me/designer.html?origin={{ _p.web }}'; designerUrl = designerUrl + '&email={{ platformAdminEmail }}'; designerUrl = designerUrl + '&close=true'; designerUrl = designerUrl + '&hidePublish=true'; var windowOptions = 'width=1200,height=680,location=0,menubar=0,status=0,toolbar=0'; designer = window.open(designerUrl, '', windowOptions); }); $('#image').on('change', function () { var self = this; if (self.files.length > 0) { var image = self.files[0]; if (!image.type.match(/image.*/)) { return; } var fileReader = new FileReader(); fileReader.onload = function (e) { $('#badge-preview').attr('src', e.target.result); $('#badge-container').removeClass('hide'); }; fileReader.readAsDataURL(image); } }); }); })(); </script> <div class="col-md-12"> <div class="openbadges-tabs"> <ul class="nav nav-tabs"> <li> <a href="{{ _p.web_main }}admin/skill_badge.php">{{ 'Home' | get_lang }}</a> </li> <li> <a href="{{ _p.web_main }}admin/skill_badge_list.php">{{ "CurrentBadges" | get_lang }}</a> </li> <li class="active"> <a href="#">{{ 'Edit' | get_lang }}</a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane active"> <div class="openbadges-introduction"> <div class="row"> <div class="col-md-12"> <div class="block-edit"> <div class="block-title">{{ 'SkillInfo' | get_lang }}</div> </div> </div> </div> <div class="row"> <div class="col-md-9"> <form action="{{ _p.web_self_query_vars }}" class="form-horizontal" method="post" enctype="multipart/form-data"> <fieldset> <div class="form-group"> <label class="col-sm-2 control-label" for="name">{{ 'Name' | get_lang }}</label> <div class="col-sm-10"> <input type="text" name="name" id="name" class="form-control" value="{{ skill.name }}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="name">{{ 'Description' | get_lang }}</label> <div class="col-sm-10"> <textarea name="description" id="description" class="form-control" rows="4">{{ skill.description }}</textarea> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="image">{{ 'Image' | get_lang }}</label> <div class="col-sm-10"> <input data-placement="left" data-toggle="tooltip" title="{{ "BadgeMeasuresXPixelsInPNG" | get_lang }}" type="file" name="image" id="image" class="help-badges-img" accept="image/*"> </div> </div> <div class="form-group collapse" id="badge-studio-frame"> <label class="col-sm-2 control-label" for="criteria"></label> <div class="col-sm-10"> <h1 class="title">Badge Studio</h1> <div class="" id="studio"> <div id="input"> <div class="row"> <div class="col-md-4"> <h3 class="label"><label for="studio-mask">{{ "Templates" | get_lang }}</label></h3> <select name="template" class="form-control" id="studio-template" data-path="{{ badge_studio.templates }}"> <option value="template-1">{{ "Template" | get_lang }} 1</option> <option value="template-2">{{ "Template" | get_lang }} 2</option> <option value="template-3">{{ "Template" | get_lang }} 3</option> </select> <h3 class="label"><label for="studio-mask">{{ "Palettes" | get_lang }}</label></h3> <select name="palette" class="form-control" id="studio-palette"> <option value="palette-1" data-color-background="#CE001F" data-color-stitching="#FFF" data-color-border="#4C4F53" data-color-detail="#999" data-color-glyph="#FFF">{{ "Palette" | get_lang }} 1</option> <option value="palette-2" data-color-background="#04A" data-color-stitching="#0AE" data-color-border="#0AE" data-color-detail="#FFF" data-color-glyph="#FFF">{{ "Palette" | get_lang }} 2</option> <option value="palette-3" data-color-background="#11458B" data-color-stitching="#3EB48D" data-color-border="#3EB48D" data-color-detail="#FFF" data-color-glyph="#FFF">{{ "Palette" | get_lang }} 3</option> </select> <br /> <h3 class="label"><label for="studio-mask">{{ "Colors" | get_lang }}</label></h3> <div id="custom-palette"></div> </div> <div class="col-md-8"> <div id="output"></div> </div> </div> <div class="row"> <div class="col-md-3"> <h3 class="label"><label for="studio-mask">{{ "Mask" | get_lang }}</label></h3> <p class="item"> <select name="mask" class="form-control" id="studio-mask" data-path="{{ badge_studio.masks }}"> <option value="">{{ "None" | get_lang }}</option> <option value="lines">{{ "Lines" | get_lang }}</option> </select> </p> </div> <div class="col-md-3"> <h3 class="label"><label for="studio-options">{{ "Options" | get_lang }}</label></h3> <p class="item" id="options"> <i>None</i> </p> </div> <div class="col-md-6"> <h3 class="label"><label for="studio-glyph">{{ "Icon" | get_lang }}</label></h3> <p class="item"> <select name="glyph" class="form-control" id="studio-glyph"> <option value="">None</option> <option value="ambulance">Ambulance</option> <option value="anchor">Anchor</option> <option value="android">Android</option> <option value="angle-down">Angle: Down</option> <option value="angle-double-down">Angle: Down (Double)</option> <option value="angle-left">Angle: Left</option> <option value="angle-double-left">Angle: Left (Double)</option> <option value="angle-right">Angle: Right</option> <option value="angle-double-right">Angle: Right (Double)</option> <option value="angle-up">Angle: Up</option> <option value="angle-double-up">Angle: Up (Double)</option> <option value="apple">Apple</option> <option value="archive">Archive</option> <option value="arrow-down">Arrow: Down</option> <option value="arrow-circle-down">Arrow: Down (Circle)</option> <option value="arrow-circle-o-down">Arrow: Down (Circle-O)</option> <option value="arrow-left">Arrow (Left)</option> <option value="arrow-circle-left">Arrow: Left (Circle)</option> <option value="arrow-circle-o-left">Arrow: Left (Circle-O)</option> <option value="arrow-right">Arrow: Right</option> <option value="arrow-circle-right">Arrow: Right (Circle)</option> <option value="arrow-circle-o-right">Arrow: Right (Circle-O)</option> <option value="arrow-up">Arrow: Up</option> <option value="arrow-circle-up">Arrow: Up (Circle)</option> <option value="arrow-circle-o-up">Arrow: Up (Circle-O)</option> <option value="arrows">Arrows</option> <option value="arrows-alt">Arrows (Alt)</option> <option value="arrows-h">Arrows: Horizontal</option> <option value="arrows-v">Arrows: Vertical</option> <option value="asterisk">Asterisk</option> <option value="automobile">Automobile</option> <option value="backward">Backward</option> <option value="ban">Ban</option> <option value="bank">Bank</option> <option value="bar-chart-o">Bar Chart (O)</option> <option value="barcode">Barcode</option> <option value="bars">Bars</option> <option value="beer">Beer</option> <option value="behance">Behance</option> <option value="behance-square">Behance (Square)</option> <option value="bell">Bell</option> <option value="bell-o">Bell (O)</option> <option value="bitbucket">BitBucket</option> <option value="bitbucket-square">BitBucket (Square)</option> <option value="bitcoin">Bitcoin</option> <option value="bold">Bold</option> <option value="bolt">Bolt</option> <option value="bomb">Bomb</option> <option value="book">Book</option> <option value="bookmark">Bookmark</option> <option value="bookmark-o">Bookmark (O)</option> <option value="briefcase">Briefcase</option> <option value="btc">BTC</option> <option value="bug">Bug</option> <option value="building">Building</option> <option value="building-o">Building (O)</option> <option value="bullhorn">Bullhorn</option> <option value="bullseye">Bullseye</option> <option value="cab">Cab</option> <option value="calendar">Calendar</option> <option value="calendar-o">Calendar (O)</option> <option value="camera">Camera</option> <option value="camera-retro">Camera (Retro)</option> <option value="car">Car</option> <option value="caret-down">Caret: Down</option> <option value="caret-square-o-down">Caret: Down (Square-O)</option> <option value="caret-left">Caret: Left</option> <option value="caret-square-o-left">Caret: Left (Square-O)</option> <option value="caret-right">Caret: Right</option> <option value="caret-square-o-right">Caret: Right (Square-O)</option> <option value="caret-up">Caret: Up</option> <option value="caret-square-o-up">Caret: Up (Square-O)</option> <option value="certificate">Certificate</option> <option value="chain">Chain</option> <option value="chain-broken">Chain (Broken)</option> <option value="check">Check</option> <option value="check-circle">Check (Circle)</option> <option value="check-circle-o">Check (Circle-O)</option> <option value="check-square">Check (Square)</option> <option value="check-square-o">Check (Square-O)</option> <option value="chevron-down">Chevron: Down</option> <option value="chevron-circle-down">Chevron: Down (Circle)</option> <option value="chevron-left">Chevron: Left</option> <option value="chevron-circle-left">Chevron: Left (Circle)</option> <option value="chevron-right">Chevron: Right</option> <option value="chevron-circle-right">Chevron: Right (Circle)</option> <option value="chevron-up">Chevron: Up</option> <option value="chevron-circle-up">Chevron: Up (Circle)</option> <option value="child">Child</option> <option value="circle">Circle</option> <option value="circle-o">Circle (O)</option> <option value="circle-o-notch">Circle (O Notch)</option> <option value="circle-thin">Circle (Thin)</option> <option value="clipboard">Clipboard</option> <option value="clock-o">Clock (O)</option> <option value="cloud">Cloud</option> <option value="cloud-download">Cloud: Download</option> <option value="cloud-upload">Cloud: Upload</option> <option value="cny">CNY</option> <option value="code">Code</option> <option value="code-fork">Code (Fork)</option> <option value="codepen">Codepen</option> <option value="coffee">Coffee</option> <option value="cog">Cog</option> <option value="cogs">Cogs</option> <option value="columns">Columns</option> <option value="comment">Comment</option> <option value="comment-o">Comment (O)</option> <option value="comments">Comments</option> <option value="comments-o">Comments (O)</option> <option value="compass">Compass</option> <option value="compress">Compress</option> <option value="copy">Copy</option> <option value="credit-card">Credit (Card)</option> <option value="crop">Crop</option> <option value="crosshairs">Crosshairs</option> <option value="css3">CSS3</option> <option value="cube">Cube</option> <option value="cubes">Cubes</option> <option value="cut">Cut</option> <option value="cutlery">Cutlery</option> <option value="dashboard">Dashboard</option> <option value="database">Database</option> <option value="dedent">Dedent</option> <option value="delicious">Delicious</option> <option value="desktop">Desktop</option> <option value="deviantart">Deviantart</option> <option value="digg">Digg</option> <option value="dollar">Dollar</option> <option value="dot-circle-o">Dot (Circle-O)</option> <option value="download">Download</option> <option value="dribbble">Dribbble</option> <option value="dropbox">Dropbox</option> <option value="drupal">Drupal</option> <option value="edit">Edit</option> <option value="eject">Eject</option> <option value="ellipsis-h">Ellipsis (Horizontal)</option> <option value="ellipsis-v">Ellipsis (Vertical)</option> <option value="empire">Empire</option> <option value="envelope">Envelope</option> <option value="envelope-o">Envelope (O)</option> <option value="envelope-square">Envelope (Square)</option> <option value="eraser">Eraser</option> <option value="eur">EUR</option> <option value="euro">Euro</option> <option value="exchange">Exchange</option> <option value="exclamation">Exclamation</option> <option value="exclamation-circle">Exclamation (Circle)</option> <option value="exclamation-triangle">Exclamation (Triangle)</option> <option value="expand">Expand</option> <option value="external-link">External Link</option> <option value="external-link-square">External Link (Square)</option> <option value="eye">Eye</option> <option value="eye-slash">Eye (Slash)</option> <option value="facebook">Facebook</option> <option value="facebook-square">Facebook (Square)</option> <option value="fast-backward">Fast Rewind</option> <option value="fast-forward">Fast Forward</option> <option value="fax">Fax</option> <option value="female">Female</option> <option value="fighter-jet">Fighter Jet</option> <option value="file">File</option> <option value="file-o">File (O)</option> <option value="files-o">Files (O)</option> <option value="file-archive-o">File: Archive (O)</option> <option value="file-audio-o">File: Audio (O)</option> <option value="file-code-o">File: Code (O)</option> <option value="file-excel-o">File: Excel (O)</option> <option value="file-image-o">File: Image (O)</option> <option value="file-movie-o">File: Movie (O)</option> <option value="file-pdf-o">File: PDF (O)</option> <option value="file-photo-o">File: Photo (O)</option> <option value="file-picture-o">File: Picture (O)</option> <option value="file-powerpoint-o">File: Powerpoint (O)</option> <option value="file-sound-o">File: Sound (O)</option> <option value="file-text">File: Text</option> <option value="file-text-o">File: Text (O)</option> <option value="file-video-o">File: Video (O)</option> <option value="file-word-o">File: Word (O)</option> <option value="file-zip-o">File: Zip (O)</option> <option value="film">Film</option> <option value="filter">Filter</option> <option value="fire">Fire</option> <option value="fire-extinguisher">Fire Extinguisher</option> <option value="flag">Flag</option> <option value="flag-o">Flag (O)</option> <option value="flag-checkered">Flag: Checkered</option> <option value="flash">Flash</option> <option value="flask">Flask</option> <option value="flickr">Flickr</option> <option value="floppy-o">Floppy (O)</option> <option value="folder">Folder</option> <option value="folder-o">Folder (O)</option> <option value="folder-open">Folder: Open</option> <option value="folder-open-o">Folder: Open (O)</option> <option value="font">Font</option> <option value="forward">Forward</option> <option value="foursquare">Foursquare</option> <option value="frown-o">Frown (O)</option> <option value="gamepad">Gamepad</option> <option value="gavel">Gavel</option> <option value="gbp">GBP</option> <option value="ge">Ge</option> <option value="gear">Gear</option> <option value="gears">Gears</option> <option value="gift">Gift</option> <option value="git">Git</option> <option value="git-square">Git (Square)</option> <option value="github">GitHub</option> <option value="github-alt">GitHub (Alt)</option> <option value="github-square">GitHub (Square)</option> <option value="gittip">GitTip</option> <option value="glass">Glass</option> <option value="globe">Globe</option> <option value="google">Google</option> <option value="google-plus">Google Plus</option> <option value="google-plus-square">Google Plus (Square)</option> <option value="graduation-cap">Graduation (Cap)</option> <option value="group">Group</option> <option value="h-square">H (Square)</option> <option value="hacker-news">Hacker News</option> <option value="hand-o-down">Hand: Down (O)</option> <option value="hand-o-left">Hand: Left (O)</option> <option value="hand-o-right">Hand: Right (O)</option> <option value="hand-o-up">Hand: Up (O)</option> <option value="hdd-o">HDD (O)</option> <option value="header">Header</option> <option value="headphones">Headphones</option> <option value="heart">Heart</option> <option value="heart-o">Heart (O)</option> <option value="history">History</option> <option value="home">Home</option> <option value="hospital-o">Hospital (O)</option> <option value="html5">HTML5</option> <option value="image">Image</option> <option value="inbox">Inbox</option> <option value="indent">Indent</option> <option value="info">Info</option> <option value="info-circle">Info (Circle)</option> <option value="inr">Inr</option> <option value="instagram">Instagram</option> <option value="institution">Institution</option> <option value="italic">Italic</option> <option value="joomla">Joomla</option> <option value="jpy">JPY</option> <option value="jsfiddle">JSFiddle</option> <option value="key">Key</option> <option value="keyboard-o">Keyboard (O)</option> <option value="krw">KRW</option> <option value="language">Language</option> <option value="laptop">Laptop</option> <option value="leaf">Leaf</option> <option value="legal">Legal</option> <option value="lemon-o">Lemon (O)</option> <option value="level-down">Level Down</option> <option value="level-up">Level Up</option> <option value="life-bouy">Life Bouy</option> <option value="life-ring">Life Ring</option> <option value="life-saver">Life Saver</option> <option value="lightbulb-o">Lightbulb (O)</option> <option value="link">Link</option> <option value="linkedin">LinkedIn</option> <option value="linkedin-square">LinkedIn (Square)</option> <option value="linux">Linux</option> <option value="list">List</option> <option value="list-alt">List (Alt)</option> <option value="list-ol">List (Ol)</option> <option value="list-ul">List (Ul)</option> <option value="location-arrow">Location (Arrow)</option> <option value="lock">Lock</option> <option value="long-arrow-down">Long Arrow Down</option> <option value="long-arrow-left">Long Arrow Left</option> <option value="long-arrow-right">Long Arrow Right</option> <option value="long-arrow-up">Long Arrow Up</option> <option value="magic">Magic</option> <option value="magnet">Magnet</option> <option value="mail-forward">Mail: Forward</option> <option value="mail-reply">Mail: Reply</option> <option value="mail-reply-all">Mail: Reply All</option> <option value="male">Male</option> <option value="map-marker">Map Marker</option> <option value="maxcdn">MaxCDN</option> <option value="medkit">Medkit</option> <option value="meh-o">Meh (O)</option> <option value="microphone">Microphone</option> <option value="microphone-slash">Microphone (Slash)</option> <option value="minus">Minus</option> <option value="minus-circle">Minus (Circle)</option> <option value="minus-square">Minus (Square)</option> <option value="minus-square-o">Minus (Square O)</option> <option value="mobile">Mobile</option> <option value="mobile-phone">Mobile Phone</option> <option value="money">Money</option> <option value="moon-o">Moon (O)</option> <option value="mortar-board">Mortar Board</option> <option value="music">Music</option> <option value="navicon">Navicon</option> <option value="openid">Openid</option> <option value="outdent">Outdent</option> <option value="pagelines">Pagelines</option> <option value="paper-plane">Paper Plane</option> <option value="paper-plane-o">Paper Plane (O)</option> <option value="paperclip">Paper Clip</option> <option value="paragraph">Paragraph</option> <option value="paste">Paste</option> <option value="pause">Pause</option> <option value="paw">Paw</option> <option value="pencil">Pencil</option> <option value="pencil-square">Pencil (Square)</option> <option value="pencil-square-o">Pencil (Square-O)</option> <option value="phone">Phone</option> <option value="phone-square">Phone (Square)</option> <option value="photo">Photo</option> <option value="picture-o">Picture (O)</option> <option value="pied-piper">Pied Piper</option> <option value="pied-piper-alt">Pied Piper (Alt)</option> <option value="pied-piper-square">Pied Piper (Square)</option> <option value="pinterest">Pinterest</option> <option value="pinterest-square">Pinterest (Square)</option> <option value="plane">Plane</option> <option value="play">Play</option> <option value="play-circle">Play (Circle)</option> <option value="play-circle-o">Play (Circle-O)</option> <option value="plus">Plus</option> <option value="plus-circle">Plus (Circle)</option> <option value="plus-square">Plus (Square)</option> <option value="plus-square-o">Plus (Square-O)</option> <option value="power-off">Power Off</option> <option value="print">Print</option> <option value="puzzle-piece">Puzzle Piece</option> <option value="qq">Qq</option> <option value="qrcode">QR Code</option> <option value="question">Question</option> <option value="question-circle">Question (Circle)</option> <option value="quote-left">Quote: Left</option> <option value="quote-right">Quote: Right</option> <option value="ra">Ra</option> <option value="random">Random</option> <option value="rebel">Rebel</option> <option value="recycle">Recycle</option> <option value="reddit">Reddit</option> <option value="reddit-square">Reddit (Square)</option> <option value="refresh">Refresh</option> <option value="renren">Renren</option> <option value="reorder">Reorder</option> <option value="repeat">Repeat</option> <option value="reply">Reply</option> <option value="reply-all">Reply All</option> <option value="retweet">Retweet</option> <option value="rmb">Rmb</option> <option value="road">Road</option> <option value="rocket">Rocket</option> <option value="rotate-left">Rotate Left</option> <option value="rotate-right">Rotate Right</option> <option value="rouble">Rouble</option> <option value="rss">RSS</option> <option value="rss-square">RSS (Square)</option> <option value="rub">Rub</option> <option value="ruble">Ruble</option> <option value="rupee">Rupee</option> <option value="save">Save</option> <option value="scissors">Scissors</option> <option value="search">Search</option> <option value="search-minus">Search: Minus</option> <option value="search-plus">Search: Plus</option> <option value="send">Send</option> <option value="send-o">Send (O)</option> <option value="share">Share</option> <option value="share-alt">Share (Alt)</option> <option value="share-alt-square">Share (Alt Square)</option> <option value="share-square">Share (Square)</option> <option value="share-square-o">Share (Square-O)</option> <option value="shield">Shield</option> <option value="shopping-cart">Shopping Cart</option> <option value="sign-in">Sign In</option> <option value="sign-out">Sign Out</option> <option value="signal">Signal</option> <option value="sitemap">Sitemap</option> <option value="skype">Skype</option> <option value="slack">Slack</option> <option value="sliders">Sliders</option> <option value="smile-o">Smile (O)</option> <option value="sort">Sort</option> <option value="sort-asc">Sort: Asc</option> <option value="sort-desc">Sort: Desc</option> <option value="sort-down">Sort: Down</option> <option value="sort-up">Sort: Up</option> <option value="sort-alpha-asc">Sort: Alpha Asc</option> <option value="sort-alpha-desc">Sort: Alpha Desc</option> <option value="sort-amount-asc">Sort: Amount Asc</option> <option value="sort-amount-desc">Sort: Amount Desc</option> <option value="sort-numeric-asc">Sort: Numeric Asc</option> <option value="sort-numeric-desc">Sort: Numeric Desc</option> <option value="soundcloud">Soundcloud</option> <option value="space-shuttle">Space Shuttle</option> <option value="spinner">Spinner</option> <option value="spoon">Spoon</option> <option value="spotify">Spotify</option> <option value="square">Square</option> <option value="square-o">Square (O)</option> <option value="stack-exchange">Stack Exchange</option> <option value="stack-overflow">Stack Overflow</option> <option value="star">Star</option> <option value="star-half">Star (Half)</option> <option value="star-half-empty">Star (Half Empty)</option> <option value="star-half-full">Star (Half Full)</option> <option value="star-half-o">Star (Half O)</option> <option value="star-o">Star (O)</option> <option value="steam">Steam</option> <option value="steam-square">Steam (Square)</option> <option value="step-backward">Step Backward</option> <option value="step-forward">Step Forward</option> <option value="stethoscope">Stethoscope</option> <option value="stop">Stop</option> <option value="strikethrough">Strikethrough</option> <option value="stumbleupon">Stumbleupon</option> <option value="stumbleupon-circle">Stumbleupon (Circle)</option> <option value="subscript">Subscript</option> <option value="suitcase">Suitcase</option> <option value="sun-o">Sun (O)</option> <option value="superscript">Superscript</option> <option value="support">Support</option> <option value="table">Table</option> <option value="tablet">Tablet</option> <option value="tachometer">Tachometer</option> <option value="tag">Tag</option> <option value="tags">Tags</option> <option value="tasks">Tasks</option> <option value="taxi">Taxi</option> <option value="tencent-weibo">Tencent Weibo</option> <option value="terminal">Terminal</option> <option value="text-height">Text Height</option> <option value="text-width">Text Width</option> <option value="th">Th</option> <option value="th-large">Th (Large)</option> <option value="th-list">Th (List)</option> <option value="thumb-tack">Thumb Tack</option> <option value="thumbs-down">Thumbs Down</option> <option value="thumbs-o-down">Thumbs Down (O)</option> <option value="thumbs-up">Thumbs Up</option> <option value="thumbs-o-up">Thumbs Up (O)</option> <option value="ticket">Ticket</option> <option value="times">Times</option> <option value="times-circle">Times (Circle)</option> <option value="times-circle-o">Times (Circle O)</option> <option value="tint">Tint</option> <option value="toggle-down">Toggle Down</option> <option value="toggle-left">Toggle Left</option> <option value="toggle-right">Toggle Right</option> <option value="toggle-up">Toggle Up</option> <option value="trash-o">Trash (O)</option> <option value="tree">Tree</option> <option value="trello">Trello</option> <option value="trophy">Trophy</option> <option value="truck">Truck</option> <option value="try">Try</option> <option value="tumblr">Tumblr</option> <option value="tumblr-square">Tumblr (Square)</option> <option value="turkish-lira">Turkish Lira</option> <option value="twitter">Twitter</option> <option value="twitter-square">Twitter (Square)</option> <option value="umbrella">Umbrella</option> <option value="underline">Underline</option> <option value="undo">Undo</option> <option value="university">University</option> <option value="unlink">Unlink</option> <option value="unlock">Unlock</option> <option value="unlock-alt">Unlock (Alt)</option> <option value="unsorted">Unsorted</option> <option value="upload">Upload</option> <option value="usd">USD</option> <option value="user">User</option> <option value="user-md">User (MD)</option> <option value="users">Users</option> <option value="video-camera">Video (Camera)</option> <option value="vimeo-square">Vimeo (Square)</option> <option value="vine">Vine</option> <option value="vk">Vk</option> <option value="volume-up">Volume Up</option> <option value="volume-down">Volume Down</option> <option value="volume-off">Volume Off</option> <option value="warning">Warning</option> <option value="wechat">Wechat</option> <option value="weibo">Weibo</option> <option value="weixin">Weixin</option> <option value="wheelchair">Wheelchair</option> <option value="windows">Windows</option> <option value="won">Won</option> <option value="wordpress">Wordpress</option> <option value="wrench">Wrench</option> <option value="xing">Xing</option> <option value="xing-square">Xing (Square)</option> <option value="yahoo">Yahoo</option> <option value="yen">Yen</option> <option value="youtube">Youtube</option> <option value="youtube-play">Youtube (Play)</option> <option value="youtube-square">Youtube (Square)</option> </select> </p> <h3 class="label"><label for="size-glyph">{{ "Size" | get_lang }}</label></h3> <p class="item"> <select name="size-glyph" class="form-control" id="size-glyph"> <option value="big">{{ "Big" | get_lang }}</option> <option value="medium" selected>{{ "Medium" | get_lang }}</option> <option value="small">{{ "Small" | get_lang }}</option> </select> </p> </div> <div class="col-md-12 text-center"> <a id="set-custom-badge" class="btn btn-primary"><em class="fa fa-check"></em> {{ 'UseThisBadge' | get_lang }}</a> <input type="hidden" id="badge_studio_image" name="badge_studio_image" > </div> </div> </div> </div> </div> <template id="glyph-selector-template"> <div id="glyph-selector" role="dialog" class="overlay hidden" aria-label="Select a glyph" tabIndex="0"> <div class="header"> <label class="title"></label> </div> <div class="panel"> <ul> </ul> </div> </div> </template> <template id="glyph-selector-item-template"> <li> <input type="radio" name="glyph-selector-item" class="hidden"> <label></label> </li> </template> <template id="option-template"> <label> <input type="checkbox"> <span>Label</span> </label> </template> <template id="close-button-template"> <button type="button" class="close fa fa-times-circle-o" aria-label="Close"></button> </template> <template id="custom-color-template"> <label> <input type="color"> <span>Label</span> </label> </template> </div> <div class="form-group"> <label class="col-sm-2 control-label" for="criteria">{{ 'CriteriaToEarnTheBadge' | get_lang }}</label> <div class="col-sm-10"> <textarea name="criteria" id="criteria" class="form-control" rows="10">{{ skill.criteria }}</textarea> </div> </div> </fieldset> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary btn-large"><em class="fa fa-floppy-o"></em> {{ 'SaveBadge'| get_lang }}</button> </div> </div> </form> </div> <div class="col-md-3"> <div class="create-openbadges"> <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"> <em class="fa fa-plus"></em> {{ 'DesignNewBadge' | get_lang }} </button> </div> <div class="create-openbadges"> <button id="btn-open-badge-studio" class="help-badges btn btn-default 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"> <em class="fa fa-cogs"></em> {{ 'DesignWithBadgeStudio' | get_lang }} </button> </div> <p class="openbadges-text">{{'BadgePreview' | get_lang }}</p> <div class="openbadges-img {{ skill.icon ? '' : 'hide' }}" id="badge-container"> <img id="badge-preview" class="img-responsive" alt="{{ 'BadgePreview' | get_lang }}" src="{{ skill.icon ? skill.web_icon_path : '' }}"> </div> </div> </div> </div> </div> </div> </div> {{ badge_studio.script_js }} <script> $(document).ready(function() { $('#set-custom-badge').click(function () { var data = $('#raster').attr('src'); $('#badge_studio_image').val(data); $('#badge-preview').attr('src', data); $('#badge-container').removeClass('hide'); }); $('#size-glyph').change(function () { window.size = $(this).val(); updateGlyph(); }); }) </script>