an.tsouchlos/hyperlink-sw
1
0
Fork 0
Code Issues Pull Requests 1 Actions Projects Releases Wiki Activity

Compare commits

base: an.tsouchlos:96e2b183a3444a484745c5b4df91bec5ffdfd02e
Branches Tags
an.tsouchlos:master
an.tsouchlos:feature/include_html
an.tsouchlos:feature/http_server
an.tsouchlos:feature/wifi
an.tsouchlos:feature/ci
...
compare: an.tsouchlos:6f0acc90c35929b2d5bd3a4927bfe3cdc854a4f2
Branches Tags
an.tsouchlos:feature/include_html
an.tsouchlos:feature/http_server
an.tsouchlos:master
an.tsouchlos:feature/wifi
an.tsouchlos:feature/ci

2 Commits
96e2b183a3 ... 6f0acc90c3

Author SHA1 Message Date
Andreas Tsouchlos
6f0acc90c3 Add first version of setup.html 2023-09-11 00:58:32 +02:00
Andreas Tsouchlos
e90941ba91 Add build dirs to gitignore 2023-09-10 23:23:56 +02:00
2 changed files with 172 additions and 0 deletions
Show Stats Expand all files Collapse all files

3
.gitignore vendored
View File

@ -10,3 +10,6 @@ sdkconfig.old
cmake-build-debug
cmake-build-release
cmake-build-relwithdebinfo
cmake-build-debug-docker/
cmake-build-release-docker/
cmake-build-relwithdebinfo-docker/

169
res/setup.html Normal file
View File

@ -0,0 +1,169 @@
<html>
<head>
<title>CommonSense</title>
<style>
body {
margin: 0;
background-color: #022B3C;
}
#wrapper {
position: fixed;
width: 80%;
margin: 5% 10% 5% 10%;
background-color: #93A3B1;
}
#header {
background-color: #491D30;
text-align: center;
vertical-align: middle;
color: white;
font-weight: bold;
font-size: 15pt;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#header-text {
padding: 15px;
}
#tab {
overflow: hidden;
}
#tab button {
background-color: inherit;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
#tab button:hover {
background-color: #DC7D6A;
}
#tab button.active {
background-color: #93A3B1;
color: black;
}
.tabcontent {
display: none;
text-align: left;
margin: 20px 10% 20px 10%;
}
#container {
padding: 50px 30% 20px 30%;
text-align: left;
}
#footer {
text-align: center;
padding: 10px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 11px 11px 5px 5px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
table tr th {
text-align: right;
}
th, td {
padding: 0 15px 0 15px;
}
</style>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<div id="wrapper" class="card">
<div id="header">
<div id="header-text">
CommonSense
</div>
<div id="tab">
<button class="tablink" onclick="openTab(event, 'Setup')" id="defaultOpen">Setup</button>
<button class="tablink" onclick="openTab(event, 'Info')">Info</button>
</div>
</div>
<div id="Setup" class="tabcontent">
Please enter the WiFi network name and password below.
The device will restart and attempt to connect to the given network.
If the connection is unsuccessful, the setup access point will be activated again.
<form method="post">
<div id="container">
<label for="uname"><b>Network</b></label>
<input type="text" placeholder="Enter Network Name" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Apply & Reboot</button>
</div>
</form>
</div>
<div id="Info" class="tabcontent">
<table>
<tr>
<th>Version</th>
</tr>
<tr>
<th>Commit Hash</th>
</tr>
</table>
</div>
<div id="footer">
<hr />
Copyright &copy Andreas Tsouchlos 2023
</div>
<script>
document.getElementById("defaultOpen").click();
</script>
</div>
</body>
</html>