<!DOCTYPE HTML><html> <head> <title>Blog Freely</title><script src='https://www.google.com/recaptcha/api.js'></script><style type="text/css">h2 { font-weight: normal;}#pricing.content-container div.form-container #payment-form { display: block !important;}#pricing #signup-form table { max-width: inherit !important; width: 100%;}#pricing #payment-form table { margin-top: 0 !important; max-width: inherit !important; width: 100%;}tr.subscription { border-spacing: 0;}#pricing.content-container tr.subscription button { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%;}#pricing tr.subscription td { padding: 0 0.5em;}#pricing table.billing > tbody > tr > td:first-child { vertical-align: middle !important;}.billing-section { display: none;}.billing-section.bill-me { display: table-row;}#btn-create { color: white !important;}#total-price { padding-left: 0.5em;}#alias-site.demo { color: #999;}#alias-site { text-align: left; margin: 0.5em 0;}form dd { margin: 0;}</style> <link rel="stylesheet" type="text/css" href="https://blogfreely.net/css/write.css" /> <link rel="shortcut icon" href="https://blogfreely.net/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="application-name" content="Blog Freely"> <meta name="application-url" content="https://blogfreely.net"> <meta property="og:site_name" content="Blog Freely" /> </head> <body > <div id="overlay"></div> <header> <h2><a href="/">Blog Freely</a></h2> <nav id="user-nav"> <nav class="tabs"> <a href="/about">About</a> <a href="/login">Log in</a> <a href="/signup">Signup</a> </nav> </nav> </header> <div id="official-writing"> <div id="pricing" class="content-container wide-form"> <div class="row"> <div style="text-align:left"> <h1 style="margin-top:0;max-width:8em;">Start your blog</h1> <p><a href="/about">Learn more...</a></p> </div> <div> <div id="billing"> <form action="/auth/signup" method="POST" id="signup-form" onsubmit="return signup()"> <dl class="billing"> <label> <dt>Username</dt> <dd> <input type="text" id="alias" name="alias" style="width: 100%; box-sizing: border-box;" tabindex="1" autofocus /> <p id="alias-site" class="demo">blogfreely.net/<strong>your-username</strong></p> </dd> </label> <label> <dt>Password</dt> <dd><input type="password" id="password" name="pass" autocomplete="new-password" placeholder="" tabindex="2" style="width: 100%; box-sizing: border-box;" /></dd> </label> <label> <dt>Email (optional)</dt> <dd><input type="email" name="email" id="email" style="letter-spacing: 1px; width: 100%; box-sizing: border-box;" placeholder="me@example.com" tabindex="3" /></dd> </label> <div class="g-recaptcha" data-sitekey="6LdDMosUAAAAAJoAGgP_P5z-Afh7Q119Hg6tnsjZ"></div> <dt> <button id="btn-create" type="submit" style="margin-top: 0">Create blog</button> </dt> </dl> </form> </div> </div></div> </div> <script type="text/javascript" src="/js/h.js"></script><script type="text/javascript">function signup() { var $pass = document.getElementById('password'); if (!aliasOK) { var $a = $alias; $a.el.className = 'error'; $a.el.focus(); $a.el.scrollIntoView(); return false; } if ($pass.value == "") { var $a = $pass; $a.className = 'error'; $a.focus(); $a.scrollIntoView(); return false; } var $btn = document.getElementById('btn-create'); $btn.disabled = true; $btn.value = 'Creating...'; return true;} var $alias = H.getEl('alias');var $aliasSite = document.getElementById('alias-site');var aliasOK = true;var typingTimer;var doneTypingInterval = 750;var doneTyping = function() { var alias = $alias.el.value; if (alias != "") { var params = { username: alias }; var http = new XMLHttpRequest(); http.open("POST", '/api/alias', true); http.setRequestHeader("Content-type", "application/json"); http.onreadystatechange = function() { if (http.readyState == 4) { data = JSON.parse(http.responseText); if (http.status == 200) { aliasOK = true; $alias.removeClass('error'); $aliasSite.className = $aliasSite.className.replace(/(?:^|\s)demo(?!\S)/g, ''); $aliasSite.className = $aliasSite.className.replace(/(?:^|\s)error(?!\S)/g, ''); $aliasSite.innerHTML = 'blogfreely.net/<strong>' + data.data + '</strong>/'; } else { aliasOK = false; $alias.setClass('error'); $aliasSite.className = 'error'; $aliasSite.textContent = data.error_msg; } } } http.send(JSON.stringify(params)); } else { $aliasSite.className += ' demo'; $aliasSite.innerHTML = 'blogfreely.net/<strong>your-username</strong>/'; }};$alias.on('keyup input', function() { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval);});</script> </div> <footer class="contain-me"> <hr /> <div class="marketing-section"> <div class="clearfix blurbs"> <div class="half"> <h3><a class="home" href="/">Blog Freely</a></h3> <ul> <li><a href="/about">about</a></li> <li><a href="/privacy">privacy</a></li> </ul> </div> <div class="half"> <h3><a href="https://blogfreely.net" style="color:#444;text-transform:lowercase;">Blogfreely</a></h3> <ul> <li><a href="https://blogfreely.net/guide" target="guide">writer's guide</a></li> </ul> </div> </div> </div> </footer> <script type="text/javascript"> try { WebFontConfig = { custom: { families: [ 'Lora:400,700:latin', 'Open+Sans:400,700:latin' ], urls: [ '/css/fonts.css' ] } }; (function() { var wf = document.createElement('script'); wf.src = '/js/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); } catch (e) { } </script> </body></html>
