简单的 jQuery 密码屏幕？

Question

在升级到我们公司更大、更好、没有 90 年代后期味道的网站期间，我被要求实施一些措施。

我们需要在我们的网站上展示促销信息。不过，我们是批发商。我们不想让任何人看到他们。我们可以接受竞争总是会找到一种偷偷摸摸并获得定价的方法——这是一个众所周知的事实和普遍的做法——但我们不希望任何随机的人能够点击链接并看到它。对于这个临时实例来说，安全性并不是一个大问题。

这是一个简单的网站，没有任何形式的用户控制/登录/没有数据库。简单的 HTML。早在我来之前就建好了。

所以，我想知道该怎么做：

我希望用户点击“促销”导航按钮。它会将他们带到一个比方说promotions.htm 链接。

但是在这个页面加载时，我希望他们看到的第一件事是一个覆盖整个屏幕及其后面所有内容的 div。我希望有一个简单的“密码”输入字段。输入正确的密码并单击下面的按钮后，此路障密码 div 将消失并授予他们对内容的可视访问权限。

我已经尝试在谷歌上搜索到死，但只遇到有关如何验证密码长度/强度的链接，或有关与正确数据库和登录相关的密码的链接。

我不需要大量代码；如果有人给我推动或一些初步的想法，我想我自己可以解决足够的问题。

这里可能存在的问题是人们只能使用 Chrome 的检查器之类的东西并隐藏阻塞的 div/元素。同样，我们知道密码会泄露，竞争者最终会看到其中的一部分，但我们不希望任何知道如何在浏览器中隐藏 div 的人也能看到它。

有人知道如何制作这个（简单的？）文本字段检查器吗？

Answer 1

这是我的看法，使用一些非常不安全的密码与.fromCharCode() 混淆

（提示：密码是“hunter2”）

var arr = [104, 117, 110, 116, 101, 114, 50];
var str = '';
arr.forEach(function (val, index) {
  str += String.fromCharCode(val);
})

$('#form').on('submit', function (event) {
  event.preventDefault();
  
  var pw = $(this).find('#password');
  
  if ( pw.val() == str ) {
    $('#fortknox').hide();
  }
  
})

#fortknox {
  position: fixed;
  top:0;left:0;
  width:100%;
  height:100%;
  background-color:black;
  z-index: 100;
}

#fortknox form {
  display:block;
  margin: 50px auto;
  text-align: center;
}

#content {
  position:relative;
  width:100vw;
  height:100vh;
  background-image:url('http://i.imgur.com/8Jne9VO.png');
  background-repeat:no-repeat;
  background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fortknox">
  <form id="form">
    <input type="password" id="password" placeholder="password">
    <button type="submit">Enter</button>
  </form>
</div>
  
<div id="content"></div>