engineering/www.remarkbox.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modified: index.html

Browse source 
new file:   index.html.orig
This commit is contained in:
russellballestrini 2017-03-17 13:07:20 -04:00
parent 5fddb35ad7
commit 092c258ac7
2 changed files with 457 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

122
index.html
View file

@ -12,93 +12,69 @@
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="custom.css">
<style type="text/css">
.banner {
animation: slide-in .5s;
transform: translateY(0%);
}
<link rel="stylesheet" href="custom2.css">
.proposition {
animation: slide-in 2.5s;
transform: translateY(0%);
}
<script src="jquery-3.2.0.slim.min.js"></script>
<script src="custom.js"></script>
@keyframes slide-in {
0% {
transform: translateY(100vh);
}
}
@-ms-keyframes slide-in {
0% {
transform: translateY(100%);
}
}
.one-half.column {
width: 100%;
}
@media (min-width: 1080px) {
.one-half.column {
width: 48%;
}
}
</style>
<!-- reviewing the data - https://getmirrorshades.com/view.html?siteKey=NwkBplCe -->
<script async src="https://getmirrorshades.com/agent.js" data-siteId="MA-EWUFWH-64A"></script>
</head>
<body>
<body class="remarkbox-body">
<a name="top"></a>
<center><a href="http://www.remarkbox.com"><img src="remarkbox-minified.png" class="banner" style="width: 45%; margin-top: 100px; margin-bottom: 60px; min-width: 300px; max-width: 600px;" /></a></center>
<div class="redline"></div>
<div class="navbar">
<div class="hidden-on-tablet">
<a href="http://www.remarkbox.com"><img src="remarkbox-minified.png" class="navlogo" /></a>
<div class="navlinks">
<a href="#beta">Beta</a>
<a href="#faq">FAQ</a>
<a href="#about">About</a>
<a href="#plans">Plans</a>
</div>
</div>
</div>
<div class="proposition">
<div class="container">
<a name="free"></a>
<div class="nav hidden-on-phone">
<a href="#faq">FAQ</a>
<a href="#plans">Plans</a>
<a href="#beta">Beta</a>
<a href="#about">About</a>
<a href="#remarkbox-demo">Demo</a>
</div>
<br />
<br />
<center><a href="http://www.remarkbox.com">
<img src="remarkbox-minified.png" class="herologo" /></a>
<h3>Your readers want to communicate with you</h3>
</center>
<div class="row">
<div class="one-half column">
<center>
<h3>Your readers want to <br />communicate with you</h3>
<span style="font-size: 1.25em;">
<br />
Reward them with Remarkbox
<br />
<br />
The <b>free comment system</b>
Remarkbox offers a <span class="avoidwrap"><b>free comment system</b></span>
<br />
that engaged readers prefer to use
to keep readers engaged <span class="avoidwrap">with your content.</span>
<br />
<br />
It works everywhere, <span class="avoidwrap">even <b>static sites</b>!</span>
</span>
<br />
<br />
<br />
<b>Try <a href="#remarkbox-demo">here</a> or setup on your site in 30s</b>
<br />
<button style="color: #FFFFFF; background-color: #AA0000; border-color: #AA0000;">Get Started</button>
<br />
<br />
Setup on your page in 30s or <a href="#learn">learn more</a>
<br />
<br />
</center>
@ -107,7 +83,7 @@
<div class="one-half column">
<center>
<br />
<b>Works everywhere, <span class="avoidwrap">even static sites!</span></b>
<br />
<br />
<br />
<textarea style="width: 96%; height: 270px; font-size: .7em; color: #999999; border-color: #cccccc;" disabled><!-- Remarkbox - readers want to communicate with you -->
@ -124,6 +100,24 @@
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<span id="learn">
<div class="nav">
<div>
<a href="http://www.remarkbox.com"><img src="remarkbox-minified.png" class="navlogo" /></a>
<div class="navlinks">
<a href="#beta">Beta</a>
<a href="#faq">FAQ</a>
<a href="#about">About</a>
<a href="#plans">Plans</a>
</div>
</div>
</div>
<div class="reasons row-padding">
<center>
@ -133,7 +127,6 @@
<div class="container">
<div class="row">
<div class="one-half column">
<center>
@ -192,16 +185,19 @@
<p>
https://www.youtube.com/watch?v=Pm8P4oCIY3g
-->
<span id="plans">
<span id="faq">
</div>
</div>
<div class="container row-padding">
<div class="row">
<div class="one-half column" style="padding-left: 5%;">
<h5 id="plans">Plans and Pricing</h5>
<h5>Plans and Pricing</h5>
<b><a href="#free">Free</a></b>
<br />
@ -219,6 +215,7 @@ Moderator access for one verified domain
<b>$14/mo</b> (beta)
<br />
<span id="beta">
Moderator access for unlimited verified domains
<br />
@ -228,12 +225,13 @@ Moderator access for unlimited verified domains
There will likely be an Enterprise plan with dedicated resources.
</span>
<br />
<br />
<br />
<h5 id="beta">Remarkbox Beta</h5>
<h5>Remarkbox Beta</h5>
For <b>beta access</b> and updates, join the email list
@ -272,7 +270,7 @@ Your <b>feedback will shape</b> Remarkbox!
<div class="one-half column" style="padding-left: 5%;">
<h5 id="faq">FAQ</h5>
<h5>FAQ</h5>
<p>
@ -313,6 +311,8 @@ Your <b>feedback will shape</b> Remarkbox!
</div>
<span id="about">
</div>
</div>
@ -322,7 +322,7 @@ Your <b>feedback will shape</b> Remarkbox!
<div class="six columns" style="padding-left: 5%">
<h5 id="about">About Remarkbox</h5>
<h5>About Remarkbox</h5>
<p>
<img src="https://lh3.googleusercontent.com/-uAPZy7NmmP0/AAAAAAAAAAI/AAAAAAAAAnI/iG2P43gCL2U/s140-c/photo.jpg" align="left" style="margin-right: 20px; margin-top: 5px;">

396
index.html.orig Normal file
View file

@ -0,0 +1,396 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comments as a service | Remarkbox</title>
<!-- this makes mobile pretty... -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#D40000">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="custom.css">
<style type="text/css">
.banner {
animation: slide-in .5s;
transform: translateY(0%);
}
.proposition {
animation: slide-in 2.5s;
transform: translateY(0%);
}
@keyframes slide-in {
0% {
transform: translateY(100vh);
}
}
@-ms-keyframes slide-in {
0% {
transform: translateY(100%);
}
}
.one-half.column {
width: 100%;
}
@media (min-width: 1080px) {
.one-half.column {
width: 48%;
}
}
</style>
<!-- reviewing the data - https://getmirrorshades.com/view.html?siteKey=NwkBplCe -->
<script async src="https://getmirrorshades.com/agent.js" data-siteId="MA-EWUFWH-64A"></script>
</head>
<body>
<a name="top"></a>
<center><a href="http://www.remarkbox.com"><img src="remarkbox-minified.png" class="banner" style="width: 45%; margin-top: 100px; margin-bottom: 60px; min-width: 300px; max-width: 600px;" /></a></center>
<div class="proposition">
<div class="container">
<a name="free"></a>
<div class="nav hidden-on-phone">
<a href="#faq">FAQ</a>
<a href="#plans">Plans</a>
<a href="#beta">Beta</a>
<a href="#about">About</a>
<a href="#remarkbox-demo">Demo</a>
</div>
<br />
<br />
<div class="row">
<div class="one-half column">
<center>
<h3>Your readers want to <br />communicate with you</h3>
<span style="font-size: 1.25em;">
<br />
Reward them with Remarkbox
<br />
<br />
The <b>free comment system</b>
<br />
that engaged readers prefer to use
<br />
</span>
<br />
<br />
<br />
<b>Try <a href="#remarkbox-demo">here</a> or setup on your site in 30s</b>
<br />
<br />
</center>
</div>
<div class="one-half column">
<center>
<br />
<b>Works everywhere, <span class="avoidwrap">even static sites!</span></b>
<br />
<br />
<textarea style="width: 96%; height: 270px; font-size: .7em; color: #999999; border-color: #cccccc;" disabled><!-- Remarkbox - readers want to communicate with you -->
<script type="text/javascript" src="https://demo.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script><script type="text/javascript">thread_fragment=window.location.hash; thread_uri=window.location.href; document.write('<iframe id="remarkbox" src="https://demo.remarkbox.com/embed?thread_uri=' + thread_uri + '" title="remarkbox" width="100%" style="width: 100% !important; border: none !important; overflow: hidden !important;" allowtransparency="true" scrolling="no" horizontalscrolling="no" verticalscrolling="no" tabindex="0" seamless></iframe>'); iFrameResize({inPageLinks: true, initCallback: function(iframe){iframe.iFrameResizer.moveToAnchor(thread_fragment);}}, document.getElementById("remarkbox") );</script><noscript><iframe id="remarkbox" src="https://demo.remarkbox.com/embed?nojs=true" frameborder="0" style="height: 600px; width: 100%; border: none !important;" allowtransparency="true" height="600px" width="100%"></iframe></noscript></textarea>
<br />
<b>&#11014; Put me on your web page</b>
</center>
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="reasons row-padding">
<center>
<h4>Finally, a blog comment system with ethics</h4>
<br/>
</center>
<div class="container">
<div class="row">
<div class="one-half column">
<center>
<img src="/static/img/remarkbox-instant-preview-of-comments.gif" width="94%" style="margin-top: 20px;">
<span style="font-size: .7em">Markdown and syntax highlighted code blocks!</span>
</center>
<br/>
</div>
<div class="one-half column" style="padding-left: 5%;">
<h5>Say <u>YES</u> to Privacy!</h5>
<ul style="margin-bottom: 40px;">
<li><b>No user tracking</b> - anonymous by default</li>
<li><b>No ads</b> - promote your message only</li>
</ul>
<h5>Dissolve barriers of engagement</h5>
<ul style="margin-bottom: 40px;">
<li><b>No registration</b> - optional email verification</li>
<li><b>Realtime previews</b> - as the user types</li>
<li><b>Looks and feels</b> - like part of your site</li>
</ul>
<h5>Free comments</h5>
<ul style="margin-bottom: 40px;">
<li><b>Setup</b> - in 30s or less!</li>
<li><b>Cancel anytime</b> - export comments as JSON</li>
<li><b>No Cost or limits</b> - <a href="#plans">free plan</a></li>
</ul>
</div>
</div>
<div class="row">
<center>
<h5 style="margin-bottom: 0px">Don't give your readers Disqust</h5>
<h6>Switch to Remarkbox, the Disqus alternative</h6>
</center>
</div>
<!--
<p>
If you wonder why I would do something crazy like open source my product, watch
Bryan Cantrill's talk on "Corporate Open Source Anti-patterns":
<p>
https://www.youtube.com/watch?v=Pm8P4oCIY3g
-->
</div>
</div>
<div class="container row-padding">
<div class="row">
<div class="one-half column" style="padding-left: 5%;">
<h5 id="plans">Plans and Pricing</h5>
<b><a href="#free">Free</a></b>
<br />
Simply put the snippet into your HTML
<br/>
<br/>
<b>$5/mo</b> (beta)
<br />
Moderator access for one verified domain
<br/>
<br/>
<b>$14/mo</b> (beta)
<br />
Moderator access for unlimited verified domains
<br />
<br />
<span style="font-size: .7em">
There will likely be an Enterprise plan with dedicated resources.
</span>
<br />
<br />
<br />
<h5 id="beta">Remarkbox Beta</h5>
For <b>beta access</b> and updates, join the email list
<br />
<br />
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup .button { background-color: #AA0000; }
#mc_embed_signup .button:hover { background-color: #D40000; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//ballestrini.us2.list-manage.com/subscribe/post?u=c64d1bc4e5a99ee1343dba0fc&amp;id=b4deeab70b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c64d1bc4e5a99ee1343dba0fc_b4deeab70b" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="join beta" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
<i>(only 2 messages a month)</i>
</form>
</div>
<!--End mc_embed_signup-->
Your <b>feedback will shape</b> Remarkbox!
<br />
<br />
</div>
<div class="one-half column" style="padding-left: 5%;">
<h5 id="faq">FAQ</h5>
<p>
<!--
<p>
May I migrate from Wordpress to Remarkbox?
Yes, Describe how to use our ETL tool.
</p>
<p>
May I migrate from Disqus to Remarkbox?
Yes, Describe how to use our ETL tool.
</p>
<p>
May I migrate from open source Remarkbox to hosted Remarkbox?
Yes, Describe how to use our ETL tool.
</p>
<p>
May I migrate from Remarkbox to open source Remarkbox?
Yes, Describe how to use our ETL tool.
</p>
-->
<p style="margin-bottom: 10px;">
<b>Do you have any real examples?</b>
<ul style="margin-left: 20px;">
<li><a href="http://russell.ballestrini.net/random.html" target="_blank">http://russell.ballestrini.net/random.html</a></li>
<li><a href="https://linkpeek.com/blog" target="_blank">https://linkpeek.com/blog</a></li>
<li><a href="http://westworld2.com/">http://westworld2.com</a></li>
<li><a href="http://webscale.plumbing/managing-apt-repos-in-s3-using-lambda" target="_blank">http://webscale.plumbing</a></li>
<li><a href="http://gumyum.com/" target="_blank">http://gumyum.com</a></li>
<li><a href="http://www.remarkbox.com/#remarkbox">http://www.remarkbox.com/#remarkbox</a></li>
</ul>
</p>
</div>
</div>
</div>
<div class="graybg row-padding">
<div class="container">
<div class="row">
<div class="six columns" style="padding-left: 5%">
<h5 id="about">About Remarkbox</h5>
<p>
<img src="https://lh3.googleusercontent.com/-uAPZy7NmmP0/AAAAAAAAAAI/AAAAAAAAAnI/iG2P43gCL2U/s140-c/photo.jpg" align="left" style="margin-right: 20px; margin-top: 5px;">
<b><a href="http://russell.ballestrini.net/about">Russell Ballestrini</a></b> - <i>Founder</i>
My vision of Remarkbox started back in 2013 while porting
my blog from Wordpress to Pelican, a static-site-generator.
</p>
<p>
I had a problem: what would I do with my readers comments?
</p>
<p>
My research found solutions which served ads and I didn't want that.
I set out to build my own solution because - <br/>"how long could it possibly take to build an embeddable comment system?" (hint: 3 years)
</p>
Lots of love and thought have gone into making Remarkbox. I hope you and your readers enjoy using it!
</div>
<div class="six columns" style="padding-left: 5%">
<h5>Resilient Web Design</h5>
<p>
Remarkbox follows resilient web design principles.
This means Remarkbox will work even when Javascript does not.
</p>
<p>
When Javascript works, Remarkbox will powerup and enhance the user experience!
</p>
<p>
For more details read: <a href="http://russell.ballestrini.net/capability-driven-presentation/" target="_blank">Capability driven Presentation</a>
</p>
<br />
<br />
<br />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-padding">
<h5 id="remarkbox-demo">Remarkbox Demo <span style="font-size: .65em; margin-left: 10px;">try it out! </span></h5>
<!-- Remarkbox - readers want to communicate with you -->
<script type="text/javascript" src="https://demo.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script><script type="text/javascript">thread_fragment=window.location.hash; thread_uri=window.location.href; document.write('<iframe id="remarkbox" src="https://demo.remarkbox.com/embed?thread_uri=' + thread_uri + '" title="remarkbox" width="100%" style="width: 100% !important; border: none !important; overflow: hidden !important;" allowtransparency="true" scrolling="no" horizontalscrolling="no" verticalscrolling="no" tabindex="0" seamless></iframe>'); iFrameResize({inPageLinks: true, initCallback: function(iframe){iframe.iFrameResizer.moveToAnchor(thread_fragment);}}, document.getElementById("remarkbox") );</script><noscript><iframe id="remarkbox" src="https://demo.remarkbox.com/embed?nojs=true" frameborder="0" style="height: 600px; width: 100%; border: none !important;" allowtransparency="true" height="600px" width="100%"></iframe></noscript>
</div>
</div>
<div class="graybg row-padding">
<center>
<b>
&#169;2016-2017 | USA, Connecticut, New London | <a href="https://twitter.com/RussellBal" target="_blank">@russellbal</a>
</b>
</center>
</div>
</body>
</html>