Information concernant les Cookies et services Web tiers
Nos partenaires et nous-mêmes utilisons différentes technologies, telles que les cookies, pour personnaliser les contenus et les publicités, proposer des fonctionnalités sur les réseaux sociaux et analyser le trafic. Merci de cliquer sur le bouton ci-dessous pour donner votre accord. Vous pouvez changer d’avis et modifier vos choix à tout moment. Informations RGPD
map.html
À propos
- Type de fichier
- Fichier HTML de 256 Ko (text/html)
- Confidentialité
- Fichier public, envoyé le 30 octobre 2018 à 13:12, depuis l'adresse IP 92.154.x.x (France)
- Sécurité
- Ne contient aucun Virus ou Malware connus - Dernière vérification: 17/06/19
- Statistiques
- La présente page de téléchargement a été vue 163 fois depuis l'envoi du fichier
- Page de téléchargement
Aperçu du fichier
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflY6gPjD/www-widgetapi.js" async=""></script><script src="https://www.youtube.com/iframe_api"></script><script async="" src="https://www.google-analytics.com/analytics.js"></script><script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.fr.BUES4F5XsDY.O/m=signin2/rt=j/sv=1/d=1/ed=1/am=wQ/rs=AGLTcCNWx40KR3jbQ6FmTMdWsK3clVe8FQ/cb=gapi.loaded_0" async=""></script><script><!--
if(window.location.protocol == "file:") {
document.write('<base href="http://hextml.playest.net/" />');
}
--></script>
<title>Map The Blank</title>
<link rel="stylesheet" type="text/css" id="mainstyle" href="includes/hextml.css?v6.55">
<link rel="stylesheet" type="text/css" id="mapstyle" href="includes/map.025.css?v6.55">
<link rel="shortcut icon" type="image/png" href="includes/images/favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Online hexmap maker and campaign manager. For DnD or any other tabletop RPG. Maps can be shared in almost real-time with anyone.">
<meta property="og:title" content="An online mapmaker - Hextml">
<meta property="og:description" content="Online hexmap maker and campaign manager for DnD and other RPG.">
<meta property="og:image" content="http://hextml.playest.net/preview.jpg">
<meta property="og:url" content="http://hextml.playest.net">
<meta property="og:type" content="article">
<meta property="og:locale" content="en_GB">
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@playest">
<meta name="twitter:creator" content="@playest">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="521171258594-inp0d33scqcnt0sjb2dctob05tf8stot.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async="async" defer="defer" gapi_processed="true"></script>
<style>
.splashing .header, .splashing .left-panel, .splashing .main, .splashing #togetherjs-dock, .splashing .hovermap {
display: none;
}
.splashscreen .logo {
position: absolute;
}
.splashing .splashscreen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.splashscreen .rotate {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.splashscreen .ldlogo {
display: flex;
align-items: center;
justify-content: center;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
<style id="resourcesStyle">
/**/
/**/
</style>
<style id="resourcesBgColor">
/**/
/**/
</style>
<link id="togetherjs-stylesheet" rel="stylesheet" href="http://hextml.playest.net/includes/togetherjs/togetherjs.css?bust=1540456225940"><script src="http://hextml.playest.net/includes/togetherjs/libs/require.js?bust=1540456225940"></script><style>.abcRioButton{-webkit-border-radius:1px;border-radius:1px;-webkit-box-shadow 0 2px 4px 0px rgba(0,0,0,.25);box-shadow:0 2px 4px 0 rgba(0,0,0,.25);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;-webkit-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;color:#262626;cursor:pointer;outline:none;overflow:hidden;position:relative;text-align:center;vertical-align:middle;white-space:nowrap;width:auto}.abcRioButton:hover{-webkit-box-shadow:0 0 3px 3px rgba(66,133,244,.3);box-shadow:0 0 3px 3px rgba(66,133,244,.3)}.abcRioButtonBlue{background-color:#4285f4;border:none;color:#fff}.abcRioButtonBlue:hover{background-color:#4285f4}.abcRioButtonBlue:active{background-color:#3367d6}.abcRioButtonLightBlue{background-color:#fff;color:#757575}.abcRioButtonLightBlue:active{background-color:#eee;color:#6d6d6d}.abcRioButtonIcon{float:left}.abcRioButtonBlue .abcRioButtonIcon{background-color:#fff;-webkit-border-radius:1px;border-radius:1px}.abcRioButtonSvg{display:block}.abcRioButtonContents{font-family:Roboto,arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.21px;margin-left:6px;margin-right:6px;vertical-align:top}.abcRioButtonContentWrapper{height:100%;width:100%}.abcRioButtonBlue .abcRioButtonContentWrapper{border:1px solid transparent}.abcRioButtonErrorWrapper,.abcRioButtonWorkingWrapper{display:none;height:100%;width:100%}.abcRioButtonErrorIcon,.abcRioButtonWorkingIcon{margin-left:auto;margin-right:auto}.abcRioButtonErrorState,.abcRioButtonWorkingState{border:1px solid #d5d5d5;border:1px solid rgba(0,0,0,.17);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(0,0,0,.05);color:#262626}.abcRioButtonErrorState:hover,.abcRioButtonWorkingState:hover{border:1px solid #aaa;border:1px solid rgba(0,0,0,.25);-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1)}.abcRioButtonErrorState:active,.abcRioButtonWorkingState:active{border:1px solid #aaa;border:1px solid rgba(0,0,0,.25);-webkit-box-shadow:inset 0 1px 0 #ddd;box-shadow:inset 0 1px 0 #ddd;color:#262626}.abcRioButtonWorkingState,.abcRioButtonWorkingState:hover{background-color:#f5f5f5}.abcRioButtonWorkingState:active{background-color:#e5e5e5}.abcRioButtonErrorState,.abcRioButtonErrorState:hover{background-color:#fff}.abcRioButtonErrorState:active{background-color:#e5e5e5}.abcRioButtonWorkingState .abcRioButtonWorkingWrapper,.abcRioButtonErrorState .abcRioButtonErrorWrapper{display:block}.abcRioButtonErrorState .abcRioButtonContentWrapper,.abcRioButtonWorkingState .abcRioButtonContentWrapper,.abcRioButtonErrorState .abcRioButtonWorkingWrapper{display:none}.-webkit-keyframes abcRioButtonWorkingIconPathSpinKeyframes{0%{-webkit-transform:rotate(0)}} </style><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="session" src="http://hextml.playest.net/includes/togetherjs/session.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="jquery" src="http://hextml.playest.net/includes/togetherjs/libs/jquery-1.8.3.min.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="util" src="http://hextml.playest.net/includes/togetherjs/util.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="channels" src="http://hextml.playest.net/includes/togetherjs/channels.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="storage" src="http://hextml.playest.net/includes/togetherjs/storage.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="jqueryPlugins" src="http://hextml.playest.net/includes/togetherjs/jqueryPlugins.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="ui" src="http://hextml.playest.net/includes/togetherjs/ui.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="templates" src="http://hextml.playest.net/includes/togetherjs/templates.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="templating" src="http://hextml.playest.net/includes/togetherjs/templating.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="linkify" src="http://hextml.playest.net/includes/togetherjs/linkify.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="peers" src="http://hextml.playest.net/includes/togetherjs/peers.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="windowing" src="http://hextml.playest.net/includes/togetherjs/windowing.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="tinycolor" src="http://hextml.playest.net/includes/togetherjs/libs/tinycolor.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="elementFinder" src="http://hextml.playest.net/includes/togetherjs/elementFinder.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="visibilityApi" src="http://hextml.playest.net/includes/togetherjs/visibilityApi.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="chat" src="http://hextml.playest.net/includes/togetherjs/chat.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="webrtc" src="http://hextml.playest.net/includes/togetherjs/webrtc.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="cursor" src="http://hextml.playest.net/includes/togetherjs/cursor.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="startup" src="http://hextml.playest.net/includes/togetherjs/startup.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="videos" src="http://hextml.playest.net/includes/togetherjs/videos.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="forms" src="http://hextml.playest.net/includes/togetherjs/forms.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="youtubeVideos" src="http://hextml.playest.net/includes/togetherjs/youtubeVideos.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="playback" src="http://hextml.playest.net/includes/togetherjs/playback.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="eventMaker" src="http://hextml.playest.net/includes/togetherjs/eventMaker.js?bust=1540456225940"></script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="togetherjs" data-requiremodule="ot" src="http://hextml.playest.net/includes/togetherjs/ot.js?bust=1540456225940"></script></head>
<body class="truefow hideText stamp">
<script>
var url = window.location.pathname;
var basename = url.substring(url.lastIndexOf('/') + 1);
if(basename == "view.html") {
console.log("entering play(er)mode");
document.querySelector("body").classList.add("fullMap");
document.querySelector("body").classList.add("playerMode");
if(window.location.protocol != "file:") {
//document.querySelector("body").classList.add("fullMapLock");
}
}</script>
<div class="splashscreen">
<div class="ldlogo">
<img class="logo" src="includes/images/hextml_logo.png">
<img class="rotate" src="includes/images/loadingfg.png">
</div>
<div class="ldmsg">Unloading stuff...</div>
</div>
<div class="settings overpanel" style="display: none;">
<div class="panel">
<button class="close" onclick="theInterface.hideSettings();" title="close">×</button>
<div class="titleLine panelLine">
<input class="mapTitle" value="Title" oninput="theProject.updateTitleEvent(this);" type="text">
</div>
<div class="editor panelItem">
<p class="help"></p>
<div class="centered line">
<div class="mapSizeManager">
<div>
<button onclick="theProject.incrementMapSizeEvent('row', 'before', -1);">-</button>
<button onclick="theProject.incrementMapSizeEvent('row', 'before', +1);">+</button>
</div>
<div class="left">
<button onclick="theProject.incrementMapSizeEvent('col', 'before', +1);">+</button><br>
<button onclick="theProject.incrementMapSizeEvent('col', 'before', -1);">-</button>
</div>
<img src="includes/images/map.svg" alt="map">
<div class="right">
<button onclick="theProject.incrementMapSizeEvent('col', 'after', +1);">+</button><br>
<button onclick="theProject.incrementMapSizeEvent('col', 'after', -1);">-</button>
</div>
<div>
<button onclick="theProject.incrementMapSizeEvent('row', 'after', -1);">-</button>
<button onclick="theProject.incrementMapSizeEvent('row', 'after', +1);">+</button>
</div>
</div>
</div>
<div class="changeMapSize smartline eq">
<div>
<span>Height: </span>
<span><input id="mapHeight" type="text"></span>
<span>Width: </span>
<span><input id="mapWidth" type="text"></span>
</div>
<button class="eq" onclick="theProject.changeMapSizeEvent();">set size</button>
</div>
<div class="smartline eq">
<button onclick="theProject.clearMapEvent();">Clear</button>
<button onclick="theProject.makeRandomMapEvent();">Generate</button>
</div>
</div><!-- /editor -->
<div class="bgpanel">
<p class="help">If you added a background image to the map in the "resource" tab you can change the opacity of the tile and move the background.</p>
<div class="smartline">
<span class="fixed">Opacity: </span><input oninput="theProject.updateOpacityOfMapEvent(this);" type="range">
</div>
<div class="smartline eq">
<span>Background horizontal offset (px):</span>
<input id="bgxoffset" oninput="theProject.updateBgOffsetEvent();" type="number">
</div>
<div class="smartline eq">
<span>Background vertical offset (px):</span>
<input id="bgyoffset" oninput="theProject.updateBgOffsetEvent();" type="number">
</div>
<div class="smartline eq">
<span>Background zoom (%):</span>
<input id="bgzoom" oninput="theProject.updateBgOffsetEvent();" type="number">
</div>
</div>
</div>
</div>
<div class="localSaves overpanel" style="display:none;">
<div class="panel">
<button class="close" onclick="theInterface.hideLocalSavesPanel();" title="close">×</button>
<button onclick="theProject.localSaveEvent();">Save now</button><br>
<button onclick="theInterface.startLocalSave();">Enable </button> /
<button onclick="theInterface.stopLocalSave();">Disable</button> auto save
<h1>Local saves</h1>
<ul>
</ul>
</div>
</div>
<div class="panel4 resource overpanel" style="display:none;">
<div class="panel">
<button class="close" onclick="theInterface.hideResourcePanel();" title="close">×</button>
<div class="help">
Here you can upload resources (one by one or multiples at the same time).
<ul>
<li>An image resource can be an image that you will be able to use as terrain or as a background for the map (try the "opacity" feature). The text field is for the background color</li>
<li>A text resource is a map that can be imported.</li>
</ul>
</div>
<div class="panelItem hline">
<button class="double" onclick="document.querySelector('#fileimport').click();">Upload Resources</button>
<input id="fileimport" enctype="multipart/form-data" multiple="multiple" type="file">
<input id="fileimport2" enctype="multipart/form-data" multiple="multiple" type="file">
</div>
<p>Need help to find the code for a background color? <input type="color"></p>
<h2><button class="collapse" onclick="togglePanelItemVisibility(this, document.querySelector('.dataResourceList'));">-</button> Images</h2>
<div class="panelItem resourceList dataResourceList">
</div>
<h2><button class="collapse" onclick="togglePanelItemVisibility(this, document.querySelector('.textResourceList'));">-</button> Others</h2>
<div class="panelItem resourceList textResourceList"></div>
</div>
</div>
<div class="hovermap titleline">
<button onclick="theProject.toggleFullMapMode();"><img src="includes/images/smallscreen.svg" alt="not fullscreen"></button>
</div>
<div class="page">
<div class="header">
<div class="smartLine">
<button class="small ham-menu" onclick="theInterface.toggleHeader();"></button>
<a class="small title logo" href="/"></a>
<div class="small">|</div>
<div class="small">
<button class="langbtn small" title="Change language" onclick="theInterface.clickLocalMenuEvent(event, this.parentNode);"><img src="includes/images/language.svg"></button>
<div class="localMenu langMenu">
<button class="" title="fr" onclick="theInterface.changeLanguage('de-de');">German</button><br>
<button class="" title="fr" onclick="theInterface.changeLanguage('nl-nl');">Dutch</button><br>
<button class="" title="fr" onclick="theInterface.changeLanguage('no-no');">Norwegian</button><br>
<button class="" title="fr" onclick="theInterface.changeLanguage('fr-fr');">French</button><br>
<button class="" title="en" onclick="theInterface.changeLanguage('en-us');">English</button><br>
<button class="" title="en" onclick="theInterface.changeLanguage('i18n');">i18n</button><br>
<a href="/translate.html">Help translation</a>
</div>
</div>
<button class="small primary" onclick="theProject.exportProjectToHTMLEvent()" title="Export"> <img alt="export" src="includes/images/export.svg"> </button>
<button class="small primary" onclick="document.querySelector('#fileimport2').click();" title="Open"> <img alt="open" src="includes/images/open.svg"> </button>
<button class="small primary" id="exportToImage2" onclick="theProject.exportCurrentMapToImageEvent()" title="Export to image"> <img alt="Image" src="includes/images/image.svg"> </button>
<div class="small">|</div>
<button class="small" onclick="theProject.undoEvent();" title="Undo"> <img alt="undo" src="includes/images/undo.svg"> </button>
<button class="small" onclick="theProject.redoEvent();" title="Redo"> <img alt="redo" src="includes/images/redo.svg"> </button>
<div class="small">|</div>
<a class="small" href="/tutorial5.html">Tutorial</a>
<div class="small">|</div>
<a class="small" href="/blank.html">Blank</a>
<div class="small">|</div>
<a class="small" href="/templates.html">...</a>
<a class="small title" href="https://www.patreon.com/playest" onclick="logEvent('outlink', 'click', this.href);"><img src="includes/images/patron.png"></a>
<div class="small">|</div>
<span class="small"><span class="saveserver">Saves</span>: <a href="/why.html#neversave">?</a></span>
<table class="small">
<tbody><tr>
<th class="saveserverheader">
<span id="projecturl2">server</span>
<span class="notify"></span>
</th>
<th class="savelocal">
<a class="doLocalSavesButton" href="#" title="Start saving" onclick="theInterface.startLocalSave(); return false;">local</a>
<a style="display: none;" class="showLocalSavesButton" href="#" title="Show saves" onclick="theInterface.showLocalSavesPanel(); return false;">local</a>
<span class="notify"></span>
</th>
</tr>
<tr>
<td>
<div class="small">
<span id="lastServerSave">never</span>
<span id="lastServerSaveAgo">never</span>
</div>
</td>
<td>
<div class="small">
<span id="lastSave">never</span>
<span id="lastSaveAgo">never</span>
</div>
</td>
</tr>
</tbody></table>
<div class="var"></div>
<div class="g-signin2 small" data-onsuccess="onSignIn" data-theme="dark" data-gapiscan="true" data-onload="true"><div style="height:36px;width:120px;" class="abcRioButton abcRioButtonBlue"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon" style="padding:8px"><div style="width:18px;height:18px;" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span style="font-size:13px;line-height:34px;" class="abcRioButtonContents"><span id="not_signed_indfgb558k6kg7">Connexion</span><span id="connecteddfgb558k6kg7" style="display:none">Signed in</span></span></div></div></div>
<div id="googleSignoutButton" class="small" style="display: none;">
<div style="height:36px;width:120px;" class="abcRioButton abcRioButtonBlue" onclick="googleSignOut();">
<div class="abcRioButtonContentWrapper">
<div class="abcRioButtonIcon" style="padding:8px">
<div style="width:18px;height:18px;" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h22.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
</div>
</div>
<span style="font-size:13px;line-height:34px;" class="abcRioButtonContents">
<span style="">Sign out</span>
</span>
</div>
</div>
</div>
</div>
</div><!-- /header -->
<div class="main">
<div class="popup">
<div class="messageBox">
<button onclick="this.parentNode.parentNode.classList.toggle('show'); return false;">×</button>
<div class="message">
</div>
<div class="wait">
<img src="includes/images/loading2.gif" alt="wait">
</div>
</div>
</div>
<div class="left-panel">
<div class="doubleButton">
<button class="b1" title="Collaboration" onclick="enableCollaboration(this);"><img src="includes/images/collaboration.svg"></button><button class="b2" title="Collaboration options" onclick="theInterface.clickLocalMenuEvent(event, this.parentNode);">˅</button>
<div class="localMenu viewersMenu hideText truefow">
<button class="small hexNumberButton" title="Show/hide hex number" onclick="theProject.toggleHexNumberForViewersEvent();"><span style="">#</span></button>
<button class="small hexBorderButton" title="Show/hide hex border" onclick="theProject.toggleHexBorderForViewersEvent();"><img src="includes/images/border.svg"></button>
<button class="small fowButton" title="En/disable fog of war" onclick="theProject.toggleFogOfWarForViewersEvent();"><img src="includes/images/fogeye.svg"></button>
<button class="small hidetextButton" title="Show/hide text and icons" onclick="theProject.toggleTextVisibilityForViewersEvent();"><img src="includes/images/hidetext.svg"></button>
<button class="small viewerModeButton" title="Go into edit mode and put others into viewer mode" onclick="theProject.toggleViewerModeEvent(true);"><img src="includes/images/leading.svg"></button>
<button class="small viewerModeButton" title="Set everybody into edit mode" onclick="theProject.toggleViewerModeEvent(false);"><img src="includes/images/groupwork.svg"></button>
</div>
</div>
<button class="small" title="Sync view" onclick="theProject.scrollToElementEvent();"><img src="includes/images/group-leader.svg"></button>
<hr>
<button class="small ibtn" title="Change orientation of hexagons" onclick="theProject.switchColRowModeEvent();"><img src="includes/images/toggle_colrow2.png"></button>
<button class="small hexNumberButton" title="Show/hide hex number" onclick="theProject.toggleHexNumberEvent();"><img style="width:27px;" src="includes/images/coords.svg"></button>
<button class="small hexBorderButton" title="Show/hide hex border" onclick="theProject.toggleHexBorderEvent();"><img src="includes/images/border.svg"></button>
<button class="small fowButton" title="En/disable fog of war" onclick="theProject.toggleFogOfWarEvent();"><img src="includes/images/fogeye.svg"></button>
<button class="small hidetextButton" title="Show/hide text and icons" onclick="theProject.toggleTextVisibilityEvent();"><img src="includes/images/hidetext.svg"></button>
<button class="small hideNotesButton" title="Show/hide note markers" onclick="theProject.toggleNotesMarkerEvent();"><img src="includes/images/notepad.svg"></button>
<button class="bwbutton small" title="Black and white/color mode" onclick="theProject.toggleBlackWhiteModeEvent();"><img style="width:27px;" src="includes/images/color2wb.png"></button>
<hr>
<button class="small" title="change zoom" onclick="theProject.loopZoom();"><img src="includes/images/zoom_inout.svg"></button>
<button class="small" title="Outline mode" onclick="theProject.toogleOutlineModeEvent();"><img src="includes/images/checklist.svg"></button>
</div>
<div class="hexBlockSample" data-version="1530855544">
<div class="hexBlock">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum"></span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div>
<article class="hexline"></article>
<div class="overmap hexincol">
<section class="map" data-version="1.0" data-height="0" data-width="0" data-title="New map">
</section>
</div>
<div class="oneResource dataresource">
<div class="resource"></div>
<span class="name" style="display: none;"></span>
<label><input class="intoterrain" onchange="theProject.customTerrains.toggle(new Resource(this.parentNode.parentNode));" type="checkbox"> terrain</label>
<label><input class="intoicon" onchange="theProject.icons.toggle(new Resource(this.parentNode.parentNode));" type="checkbox"> icon</label>
<button class="asbackground" onclick="theProject.setBackgroundOfMapEvent(new Resource(this.parentNode));">background</button>
<input class="color half" value="transparent" oninput="theProject.setBgColorOfResourceEvent(this.parentNode, this.value);" type="text">
<button class="auto" onclick="theProject.deleteResource(new Resource(this.parentNode));">×</button>
</div>
<div class="oneResource textresource">
<div class="resource" style="display: none;"></div>
<span class="name"></span>
<button class="double" onclick="theProject.loadSubmapsFromDOM(this.parentNode);">Add into submaps</button>
<button class="double" onclick="theProject.loadProjectFromResourceEvent(this.parentNode);">Override</button>
<button class="auto" onclick="theProject.deleteResource(new Resource(this.parentNode));">×</button>
</div>
<div class="submap">
<button class="up" onclick="">↑</button>
<button class="down" onclick="">↓</button>
<button class="del" onclick="this.parentNode.remove(); document.querySelectorAll('.mapcontainer > .overmap')[parseInt(this.dataset.domNum)].remove();">×</button>
<a class="title" href=""></a>
</div>
<div class="terrainSample">
<button onclick="paintColorSelect(this, 'terrain');" class="beach" title="beach"><img src="includes/terrains/terrains_classic/beach.png"></button>
</div>
</div><!-- /hexBlockSample -->
<div class="announceBox" style="display: none;">
<button onclick="closeAnnounce();" title="close">×</button>
<div class="announce"><p>
<strong>The interface is <a target="_blank" href="https://www.imdb.com/title/tt2779318/quotes?item=qt2059079">hot!</a></strong> Version 6 is out.
<br>
</p><ul>
<li>You can <strong>drag and drop icon</strong> on the map</li>
<li>Custom tiles and icons can be directly uploaded from the terrains tab.</li>
<li>Collaborative mode is enabled by default.</li>
<li><a href="https://www.youtube.com/watch?v=hlVKOah23kQ&list=PLfc0LP0PZlKUhWbZm0My1RY-XalpCzcaO" onclick="logEvent('outlink', 'click', this.href);">I made some tutorial videos</a></li>
<li>If you have a problem with your previous maps try <a href="http://old.hextml.playest.net/">here</a></li>
</ul>
<p></p>
<p>
<a target="_blank" href="https://www.reddit.com/r/rpg/comments/98676h/making_hexmaps_online_for_the_fifth_time_with/" onclick="logEvent('outlink', 'click', this.href);">Click here</a> to discuss, ask questions and read the changelog. You can also contact me on <a target="_blank" href="https://twitter.com/playest" onclick="logEvent('outlink', 'click', this.href);">twitter</a>.
</p>
</div>
</div>
<div style="display:none;" id="credits">
<p><a href="http://hextml.playest.net">Hextml</a> is an online hex map maker, world building tool, campaign manager and virtual tabletop software for your RPG. Use it in your DnD (or any other tabletop RPG) campaign to build a world for you and your players. It uses the best of HTML5 to let you make beautiful hexagonal maps. You can share a map live with your players by enabling the collaborative mode (with or without fog of war).
</p>
<p>Ask quetions about the software <a href="https://www.reddit.com/r/rpg/comments/77tklz/a_new_version_of_hextml_the_webbased_hexagonal/?ref=share&ref_source=link">here</a>, I visit this post quite often.</p>
<p>Hextml is made by made by <a href="https://twitter.com/playest">playest</a></p>
<p><a href="credits.html">Other credits</a></p>
<p class="creditsToggle"><a href="#" onclick="toggleVisibility(document.querySelector('#credits'));">Hide credits</a></p>
</div>
<div class="project" data-authorid="97f159cd-52db-c5fc-c502-e4b98a79e96d" data-guid="098a851b-4d11-a9a6-ae3d-053971ff476c" data-lastfilesave="2018-10-25T08:36:11.608Z"></div>
<div class="mapcontainer">
<div class="overmap show selected hexincol"><section class="map" data-version="1" data-uid="0" data-height="16" data-width="22" data-title="Map The Blank"><article class="hexline" data-y="0"><div class="hexBlock hex-0-0" data-x="0" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">0, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="1" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">1, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="2" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">2, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="3" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">3, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="4" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">4, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="5" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">5, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="6" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">6, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="7" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">7, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="8" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">8, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="9" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">9, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-1-0" data-x="10" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">10, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-2-0" data-x="11" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">11, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-3-0" data-x="12" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">12, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-4-0" data-x="13" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">13, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-5-0" data-x="14" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">14, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-6-0" data-x="15" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">15, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-7-0" data-x="16" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">16, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-8-0" data-x="17" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">17, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-9-0" data-x="18" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">18, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-10-0" data-x="19" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">19, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-11-0" data-x="20" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">20, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-12-0" data-x="21" data-y="0">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">21, 0</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div></article><article class="hexline" data-y="1"><div class="hexBlock hex-0-1" data-x="0" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">0, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="1" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">1, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="2" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">2, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="3" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">3, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="4" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">4, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="5" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">5, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="6" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">6, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="7" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">7, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-1" data-x="8" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">8, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-0" data-x="9" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">9, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-1-0" data-x="10" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">10, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-2-0" data-x="11" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">11, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-3-0" data-x="12" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">12, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-4-0" data-x="13" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">13, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-5-0" data-x="14" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">14, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-6-0" data-x="15" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">15, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-7-0" data-x="16" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">16, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-8-0" data-x="17" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">17, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-9-0" data-x="18" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">18, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-10-0" data-x="19" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">19, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-11-0" data-x="20" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">20, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-12-0" data-x="21" data-y="1">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">21, 1</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div></article><article class="hexline" data-y="2"><div class="hexBlock hex-0-2" data-x="0" data-y="2">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">0, 2</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-2" data-x="1" data-y="2">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">1, 2</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-2" data-x="2" data-y="2">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">2, 2</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-2" data-x="3" data-y="2">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">3, 2</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-2" data-x="4" data-y="2">
<div class="hexagon hexagon2">
<div class="hexagon-in1">
<div class="hexagon-in2" style="">
<span class="hexnum">4, 2</span>
</div>
</div>
</div>
<div class="icons"></div>
<div class="texts"></div>
<div class="notes"></div>
</div><div class="hexBlock hex-0-2" data-x="5" data-y="2">
<div class="hexagon hexagon2">
<div class="hexagon-in1">