Skip to content

Commit 27c29d7

Browse files
committed
Created a basic version of the index page using divs
1 parent 512ed31 commit 27c29d7

File tree

2 files changed

+107
-0
lines changed

2 files changed

+107
-0
lines changed
Binary file not shown.

PicoHTTPServer/www/index.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<html>
2+
<head>
3+
<!--<link rel="stylesheet" href="css/main.css">-->
4+
<style type="text/css">
5+
body {
6+
font-family: Verdana, Geneva, Tahoma, sans-serif;
7+
}
8+
9+
.main {
10+
display: grid;
11+
place-items: center;
12+
}
13+
14+
.header {
15+
display: grid;
16+
place-items: center;
17+
}
18+
19+
.pinout {
20+
width: 100%;
21+
max-width: 800px;
22+
min-width: 200px;
23+
display: grid;
24+
grid-template-columns: auto 1fr auto
25+
}
26+
27+
.header * {
28+
margin: 5px 0px;
29+
}
30+
31+
.pico_image {
32+
width: 100%;
33+
grid-column: 2;
34+
}
35+
36+
#left_pins {
37+
display: grid;
38+
grid-template-rows: repeat(20, 1fr);
39+
grid-row-gap: 2px;
40+
position: relative;
41+
top: 4%;
42+
height: 96%;
43+
}
44+
45+
#left_pins div {
46+
font-size: auto;
47+
margin: auto 0;
48+
background: #eeeeee;
49+
}
50+
51+
#left_pins div span:nth-last-child(1) {
52+
background: #cccccc;
53+
margin: 2px;
54+
}
55+
56+
.pinmode a {
57+
margin: 2px;
58+
}
59+
60+
</style>
61+
<script language="JavaScript">
62+
function setlinks() {
63+
for (const span of document.getElementsByClassName('pinmode')) {
64+
for (const link of span.children) {
65+
link.href='javascript:setgpio(this)';
66+
}
67+
}
68+
}
69+
</script>
70+
71+
</head>
72+
73+
<body onload="setlinks()">
74+
<div class="main">
75+
<div class="header">
76+
<h1>Raspberry Pi Pico W Demo</h1>
77+
<p>Click on any I/O pin below to change its value:</p>
78+
</div>
79+
<div class="pinout">
80+
<div id="left_pins">
81+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
82+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
83+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
84+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
85+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
86+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>12</span></div>
87+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
88+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
89+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
90+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
91+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
92+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
93+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
94+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
95+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
96+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
97+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
98+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
99+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
100+
<div><span>Value=???</span><span class="pinmode"><a>Input</a><a>0</a><a>1</a></span><span>GPIO0</span><span>1</span></div>
101+
</div>
102+
103+
<img src="pinout.svg" class="pico_image"/>
104+
</div>
105+
</div>
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)