Lätt Node.JS + WebSockets LED-Controller för Raspberry Pi (4 / 6 steg)
Steg 4: Lägga till statiska HTML-innehåll
Lägg till följande filer i mappen "offentliga":
index.html
När jag klistrar in HTML-kod i instructables, automatiskt gör det som en del av sidan, så jag gjorde filen tillgänglig på pastebin: http://pastebin.com/jJ9L0RF8
Style.CSS
kroppen {
text-align: center;
marginal-top: 50px;
bakgrund: #50D0A0;
}
ingående [typ = intervallet] {
-webkit-utseende: none;
bredd: 80%.
}
ingående [typ = intervallet]:: - webkit - slider-runnable-spåra {
höjd: 10px;
bakgrund: #ddd;
gränsen: none;
border-radius: 3px;
}
ingående [typ = intervallet]:: - webkit - slider-tumme {
-webkit-utseende: none;
gränsen: none;
höjd: 32px;
bredd: 32px;
border-radius: 50%.
bakgrund: goldenrod;
marginal-top:-12px;
}
ingående [typ = intervallet]: fokusera {
disposition: none;
}
ingående [typ = intervallet]: fokus:: - webkit - slider-runnable-spåra {
bakgrund: #ccc;
}
denna formatmall är optimerad för webkit webbläsare som Google Chrome eller krom webbläsare.
Webbplatsen kommer att fungera alldeles utmärkt utan den, men det ser mycket finare med.
Webbplatsen bör också göra och fungerar bra på de flesta smartphones och tabletter (testat med krom).