我现在需要你去写一个网站首页，要求如下：

页面分为四种：
1.首页区
2.导航区
3.功能区
4.后台区

技术栈：
常见网页技术都行：包括但不限于js、html、php、css。
layui等样式均可使用

基础页面展示要求：
1.首页区要求
    主内容占据页面60%内容
    主内容为：占据页面20%的展示栏位于上方，下方40%为导航区块，用户可自行选择四大板块
        分别为：科普库，蓝队库，红队库，工具库
    剩余40%空间，上部10%放置名人名言（从quota.txt中获取），（中部为主内容），下部放置ICP备案号，公安备案号，版权声明和其他内容
2.导航区要求
    最大限度保证信息密度和美观度，同时页面分为两部分，上半部分占据20%，为搜索栏
    （注意，最上方留白10%）
    下半部分为导航区域
        导航区域要求：
        PC页面两侧各留白15%，中间划分为三大列，导航块内容分别置于各列中（大列无标题）
        导航块为固定一标题加三小列五行的格式，标题加粗居左，行列内容为导航按钮块，鼠标移动上方时变色（若存在备注信息则会在按钮上分蹦出来一个语言栏，没有则仅变色），点击后新建一个页面打开该链接
        每个导航块大小固定，在移动设备页面中，单小列显示
3.功能区要求
设计一个功能区首页（要求与其他页面的风格一致）
    顶部居中大展示栏，最右侧为首页按钮，点击返回首页区，最左侧为返回功能区首页按钮，中间为本功能页标题
    你需要设计以下功能：
        编码/加解密页：Base64编解码，Base32编解码，md5加密，url编解码，unicode编解码（需支持中文以及其他复杂内容的编解码），各类sha加密
            注意：页面需同时具备可自由编辑输入的输入和输出区块
        随机密码生成页：用户自由选择大写、小写字母，数字和特殊符号或者自定义内容并自己选择密码长度进行随机密码生成
        二维码生成器：用户可放入内容用以生成二维码（可自由放大图片并下载）
        杀软识别：识别输入框内的tasklist内容，随后在avlist.js中匹配内容，以表格形式输出匹配结果
            格式示例：avList = {"360tray.exe": "360 安全卫士 - 实时保护",....}
4.后台区要求
    具备对其他页面进行调整的功能
    1.顺序排布
    2.内容设计
    3.导航区导航内容的增删改查

    使用sqlite存储登录密码以及其他内容（密码加密格式：先base64再进行md5）

高级要求：
    展示栏：一个居中小区块，左侧为logo，右侧为当前时间和上次更新时间，在其下还有天气区块（<iframe width="500" height="40" src="https://i.tianqi.com/?c=code&a=getcode&id=173&icon=1" frameborder="0"></iframe>）
    搜索栏：最左侧为切换按钮，可自由切换导航引擎为bing，baidu，github等，中间为输入框，最右侧为搜索按钮，存在输入内容时在输入框最右侧显示清除按钮，用户可点击搜索按钮或者直接回车打开新页面搜索内容
    首页四大板块在用户鼠标移动至上方时用延申文本板块，覆盖其他几个板块并展示说明，该延申文本不具备点击效果以及其他特性，用户鼠标移出该四大板块区域时消失，或者移动至其他板块时以同样的效果展开显示
        注意，若鼠标所在的板块不在最左侧或最右侧，则在展开说明时移动至旁侧（即最左侧或者最右侧），这时，实际板块位置不变，若用户将鼠标移至其他板块上方，则对该板块进行展开
    各类输入输出框：支持拉动右下侧边角进行区域扩大（竖向扩大，横向不变），搜索框除外