arduino 强制门户wifi名片

#include <WiFi.h>
#include <DNSServer.h>
#include <WebServer.h>

const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
WebServer webServer(80);

String responseHTML = ""
"<!DOCTYPE html>"
"<html lang='en'>"
"  <head>"
"    <meta charset='UTF-8' />"
"    <meta http-equiv='X-UA-Compatible' content='IE=edge' />"
"    <meta name='viewport' content='width=device-width, initial-scale=1.0' />"
"    <title>WIFI电子名片</title>"
"    <style>"
".container {"
"  width:100%;"
" max-width:760px;"
" margin:0 auto"
"}"
".container ul {"
" padding:0;"
" margin:0"
"}"
".container ul li {"
" list-style:none;"
" position:relative;"
" padding:0;"
" margin:0;"
" width:100%;"
" border-radius:12px;"
" margin-bottom:12px;"
" box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);"
" padding:10px;"
" box-sizing:border-box;"
" background-image:linear-gradient(120deg,#84fab0 0%,#8fd3f4 100%)"
"}"
".container ul li:hover {"
" box-shadow:0 8px 16px 0 rgba(0,0,0,0.2)"
"}"
".container ul li .item {"
" position:relative;"
" margin-bottom:12px;"
" padding-right:20px;"
" box-sizing:border-box;"
" height:30px;"
" line-height:30px"
"}"
".container ul li .item span {"
" display:block;"
" float:left;"
" width:100px;"
" font-size:1em;"
" color:white"
"}"
""
".container ul li .item span2 {"
" display:block;"
" float:left;"
" width:200px;"
" font-size:1em;"
" color:#FF6347"
"}"
".container ul li .title {"
" font-size:1.25em;"
" font-weight:bold;"
" font-family:'Courier New',Courier,monospace;"
" margin-bottom:12px;"
" color:white"
"}"
".container ul li .technology .tech {"
" margin-bottom:12px;"
" font-size:1.2em;"
" color:#fff;"
" padding-left:2px;"
" box-sizing:border-box"
"}"
".container ul li .technology li {"
" background-image:linear-gradient(120deg,#fdfbfb 0%,#ebedee 100%)"
"}"
".container ul li .detail {"
" position:absolute;"
" width:100%;"
" height:60px;"
" font-size:1.25em;"
" text-align:center;"
" line-height:60px;"
" bottom:0;"
" left:0;"
" border-bottom-left-radius:12px;"
" border-bottom-right-radius:12px;"
" cursor:pointer"
"}"
".container ul li .detail a {"
" color:#fff;"
" text-decoration:none"
"}"
".container ul li:nth-child(5) .item {"
" display:flex"
"}"
".container ul li:nth-child(5) .item span {"
" width:60px"
"}"
".container ul li:nth-child(5) .item a {"
" display:inline-block;"
" width:90%;"
" white-space:nowrap;"
" overflow:hidden;"
" text-overflow:ellipsis"
"}"
".container ul .project {"
" padding-bottom:70px"
"}"
".container ul .project .p1 {"
" text-align:center"
"}"
".container ul .project .p1 img {"
" display:block;"
" width:100px;"
" height:100px;"
" margin:10px auto 0px auto"
"}"
".container ul .project .p2 {"
" margin:20px auto 0px auto"
"}"
".container ul .project .p2 a {"
" display:block;"
" font-size:16px;"
" color:#fff;"
" text-align:center;"
" text-decoration:none"
"}"
".container ul .project .p3 {"
" margin:20px auto 0px auto"
"}"
".container ul .project .p3 a {"
" display:block;"
" font-size:16px;"
" color:#fff;"
" text-align:center;"
" text-decoration:none"
"}"
".container .footer {"
" text-align:center"
"}"
"      .btn {"
"        background: #2ecc71;"
"        width: 50%;"
"        padding-top: 5px;"
"        padding-bottom: 5px;"
"        color: white;"
"        border-radius: 4px;"
"        border: #27ae60 1px solid;"
"        margin: 20 auto;"
"        font-weight: 800;"
"        font-size: 0.8em;"
"      }"
"</style>"
"  </head>"
"  <body>"
"    <div class='container'>"
"      <ul>"
"  <li>"
"          <div class='title'>什么是WIFI电子名片</div>"
"<div class='item github'>"
"          wifi热点名称产生广告效益"
"          </div>"
"          <div class='item github'>"
"          wifi热点网络推送介绍页面"
"          </div>"
"          <div class='item gitee'>"
"          插到车上、插到移动电源上"
"          </div>"
"          <div class='item csdn'>"
"           走到哪里、推广就做到哪里"
"          </div>"
"          <div class='item csdn'>"
"           长期产生广告宣传作用"
"          </div>"
"          <div class='item csdn'>"
"           自建热点网络，不产生流量费用"
"          </div>"
"          <div class='item github'>"
"           U盘大小，售价160元"
"          </div>"
"        </li>"
"            <li>"
"          <div class='title'>WIFI电子名片</div>"
"          <div class='school item'>"
"            <span>联系人：</span>"
"            <span2>赵经理</span>"
"          </div>"
"          <div class='school item'>"
"            <span>联系电话：</span>"
"            <span2><a href='tel:13903473237' style='text-decoration:none;'>13903473237</a></span>"
"          </div></li>"
"       "
"      </ul>"
"      <div class='footer'><a href='tel:13903473237' ><button type='button' class='btn btn-default'>咨询电话</button></a></div>"
"    </div>"
"<a href='tel:13903473237' style='font-size:14px;color: #FCFCFC;text-decoration:none;'>定制你的WIFI名片</a>"
"  </body>"
"</html>";

void setup() {
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("WIFI名片13903473237");

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  // replay to all requests with same HTML
  webServer.onNotFound([]() {
    webServer.send(200, "text/html", responseHTML);
  });
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}
电子模块
ESP32-C3 MiNi开发板彩色丝印 ESP32开发板 wifi 蓝牙拇指大小