Skip to content

Commit 6c99718

Browse files
benfrancisbenfrancis
authored
Merge pull request #1 from benfrancis/new-website
New WebThings website
2 parents 42e61dd + 4d656ab commit 6c99718

File tree

79 files changed

+3914
-303
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+3914
-303
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# webthings-io
1+
# webthings.io
2+
3+
WebThings website.

‎about/css/about-mobile.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
#hero img {
2+
width: calc(100% - 80px);
3+
}
4+
5+
#webthings-gateway-section, #webthings-framework-section, #webthings-cloud-section {
6+
display: block;
7+
}
8+
9+
#web-of-things-section .illustration,
10+
#webthings-section .illustration,
11+
#webthings-gateway-section .illustration img,
12+
#webthings-framework-section .illustration img,
13+
#webthings-cloud-section .illustration img
14+
{
15+
width: 100%;
16+
height: auto;
17+
}
18+
19+
#webthings-section .illustration {
20+
max-width: 325px;
21+
}
22+
23+
#webthings-gateway-section .illustration img {
24+
max-width: 280px;
25+
}
26+
27+
#webthings-framework-section .illustration img {
28+
max-width: 355px;
29+
}
30+
31+
#webthings-cloud-section .illustration img {
32+
max-width: 477px;
33+
}
34+
35+
#webthings-gateway-section .description,
36+
#webthings-framework-section .description,
37+
#webthings-cloud-section .description {
38+
padding: 0;
39+
}

‎about/css/about.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
#hero {
2+
background-color: #f6faff;
3+
background-image: url('/images/hero_image.png');
4+
background-position: center;
5+
background-size: cover;
6+
padding: 0;
7+
text-align: center;
8+
height: 300px;
9+
}
10+
11+
#hero img {
12+
height: 60px;
13+
}
14+
15+
#hero p {
16+
padding: 0 10px;
17+
}
18+
19+
#hero-body {
20+
max-width: 400px;
21+
padding: 100px 0;
22+
margin: 0 auto;
23+
}
24+
25+
#webthings-wordmark {
26+
height: 100px;
27+
}
28+
29+
h1 {
30+
font-size: 32px;
31+
font-weight: 600;
32+
}
33+
34+
h2 {
35+
padding: 10px 0;
36+
font-weight: normal;
37+
}
38+
39+
h2 strong {
40+
font-weight: 600;
41+
}
42+
43+
#web-of-things-section img {
44+
width: 800px;
45+
display: block;
46+
margin: 20px auto;
47+
}
48+
49+
#webthings-section img {
50+
width: 325px;
51+
display: block;
52+
margin: 20px auto;
53+
}
54+
55+
.illustration, .description {
56+
flex: 1;
57+
}
58+
59+
.description {
60+
padding: 0 20px;
61+
box-sizing: border-box;
62+
}
63+
64+
.illustration img {
65+
display: block;
66+
margin: 20px auto;
67+
}
68+
69+
#webthings-gateway-section {
70+
display: flex;
71+
flex-direction: row;
72+
}
73+
74+
#webthings-gateway-section .illustration img {
75+
width: 280px;
76+
}
77+
78+
#webthings-framework-section {
79+
display: flex;
80+
flex-direction: row-reverse;
81+
}
82+
83+
#webthings-framework-section .illustration img {
84+
height: 250px;
85+
}
86+
87+
#webthings-cloud-section {
88+
display: flex;
89+
flex-direction: row;
90+
}
91+
92+
#webthings-cloud-section .illustration img {
93+
height: 393px;
94+
}
95+
96+
.light-section {
97+
padding: 40px;
98+
background-color: #fff;
99+
}
100+
101+
.dark-section {
102+
padding: 40px;
103+
background-color: #e6e6e6;
104+
}
105+
106+
#documentation-section {
107+
text-align: center;
108+
}

‎about/images/cloud.png‎

51.8 KB
Loading

‎about/images/framework.png‎

54.1 KB
Loading

‎about/images/gateway.png‎

19.3 KB
Loading

‎about/images/web_of_things_block_diagram.png‎

54.4 KB
Loading

‎about/images/webthings_block_diagram.png‎

56.1 KB
Loading

‎about/index.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>About WebThings</title>
7+
<link rel="canonical" href="https://webthings.io/about">
8+
<link rel="icon" href="/images/icon.svg" />
9+
<link rel="stylesheet" type="text/css" href="/css/site.css" />
10+
<link rel="stylesheet" media="(max-width: 959px)" href="/css/site-mobile.css" />
11+
<link rel="stylesheet" type="text/css" href="css/about.css" />
12+
<link rel="stylesheet" media="(max-width: 959px)" href="/css/about-mobile.css" />
13+
<link rel="stylesheet" media="(max-width: 959px)" href="css/about-mobile.css" />
14+
<meta name="description" content="Building the Web of Things" />
15+
<meta name="twitter:card" content="summary_large_image" />
16+
<meta name="twitter:site" content="@WebThingsIO" />
17+
<meta property="og:title" content="WebThings" />
18+
<meta property="og:description" content="Building the Web of Things" />
19+
<meta property="og:type" content="website" />
20+
<meta property="og:url" content="https://webthings.io/about" />
21+
<meta property="og:image" content="https://webthings.io/images/banner.png" />
22+
<script src="/js/site.js"></script>
23+
</head>
24+
25+
<body>
26+
27+
<header>
28+
<button id="menu-button"></button>
29+
<a href="/">
30+
<img id="wordmark" src="/images/webthings_wordmark-light.svg" alt="WebThings" />
31+
</a>
32+
<nav id="main-navigation">
33+
<ul id="main-navigation-list">
34+
<li><a href="/about" class="selected">About</a></li>
35+
<li><a href="/gateway">Gateway</a></li>
36+
<li><a href="/framework">Framework</a></li>
37+
<li><a href="/docs">Docs</a></li>
38+
<li><a href="https://discourse.mozilla.org/c/iot">Forum</a></li>
39+
</ul>
40+
</nav>
41+
</header>
42+
43+
<main>
44+
<section id="hero">
45+
<div id="hero-body">
46+
<img src="/images/webthings_wordmark-dark.svg" alt="WebThings" />
47+
<p>An open platform for monitoring and controlling devices over the web</p>
48+
</div>
49+
</section>
50+
51+
<section id="web-of-things-section" class="light-section">
52+
<h1>The Web of Things</h1>
53+
<p>The <a href="https://www.w3.org/WoT/">Web of Things</a> (WoT) connects physical objects to the World Wide Web.</p>
54+
<p>The purpose of the Web of Things is to create a decentralised <a href="https://en.wikipedia.org/wiki/Internet_of_things">Internet of Things</a> (IoT) by giving connected devices URLs on the web to make them linkable and discoverable, and defining a standard <a href="https://www.w3.org/TR/wot-thing-description/">data model</a> and <a href="https://www.w3.org/community/web-thing-protocol/">protocol</a> to make them interoperable.</p>
55+
<p>The Web of Things is intended as a unifying application layer for the Internet of Things, linking together multiple underlying IoT protocols using existing web technologies.</p>
56+
<img class="illustration" src="images/web_of_things_block_diagram.png" alt="Horizontal application layer on top of existing IoT technologies"/>
57+
<p>The Web of Things is currently undergoing standardisation at the <a href="https://www.w3.org/WoT/">W3C</a>, via the <a href="https://www.w3.org/WoT/WG/">Web of Things Working Group</a> and <a href="https://www.w3.org/community/web-thing-protocol/">Web Thing Protocol Community Group</a>.</p>
58+
</section>
59+
60+
<section id="webthings-section" class="dark-section">
61+
<h1>WebThings</h1>
62+
<p>WebThings is an open source implementation of the Web of Things, including the WebThings Gateway, WebThings Framework and WebThings Cloud.</p>
63+
<img src="images/webthings_block_diagram.png" class="illustration" alt="Illustration of things created with the WebThings Framework, connected to WebThings Cloud via WebThings Gateway. "/>
64+
</section>
65+
66+
<section id="webthings-gateway-section" class="light-section">
67+
<div class="description">
68+
<h2><strong>WebThings</strong> Gateway</h2>
69+
<p><a href="/gateway/">WebThings Gateway</a> is a software distribution for smart home gateways which enables users to directly monitor and control their smart home over the web, without a middleman.</p>
70+
<p>It provides a web-based user interface to monitor and control smart home devices, a rules engine to automate them and an add-ons system to extend the gateway with support for a wide range of existing smart home devices.</p>
71+
</div>
72+
<div class="illustration">
73+
<img src="images/gateway.png" alt="A home gateway device." />
74+
</div>
75+
</section>
76+
77+
<section id="webthings-framework-section" class="dark-section">
78+
<div class="description">
79+
<h2><strong>WebThings</strong> Framework</h2>
80+
<p><a href="/framework/">WebThings Framework</a> is a collection of re-usable software components to help developers build their own web things which directly expose the Web Thing Protocol.</p>
81+
<p>It includes libraries in a range of programming languages including Node.js, Python, Java, Rust and C++ (for Arduino).</p>
82+
</div>
83+
<div class="illustration">
84+
<img src="images/framework.png" alt="A collection of connected devices." />
85+
</div>
86+
</section>
87+
88+
<section id="webthings-cloud-section" class="light-section">
89+
<div class="description">
90+
<h2><strong>WebThings</strong> Cloud</h2>
91+
<p>WebThings Cloud is a collection of cloud services for remotely managing web things over the internet.</p>
92+
<p>WebThings Cloud provides a remote access service which can create an end-to-end encrypted tunnel between a WoT gateway (or device) and a WoT client so that it can be securely accessed over the internet.</p>
93+
</div>
94+
<div class="illustration">
95+
<img src="images/cloud.png" alt="Illustration of a secure tunnel from a smart home to a user's smartphone via the cloud." />
96+
</div>
97+
</section>
98+
99+
<section id="documentation-section" class="dark-section">
100+
<p>You can learn more about WebThings in our <a href="/docs/">online documentation</a>.</p>
101+
</section>
102+
</main>
103+
104+
<footer>
105+
<a href="/">
106+
<img id="footer-wordmark" src="/images/webthings_wordmark-light.svg" />
107+
</a>
108+
<nav id="footer-navigation">
109+
<ul id="footer-navigation-list">
110+
<li><a href="/privacy">Privacy</a></li>
111+
<li><a href="mailto:[email protected]">Contact</a></li>
112+
</ul>
113+
</nav>
114+
<nav id="social">
115+
<a id="twitter-icon" href="https://twitter.com/WebThingsIO"></a>
116+
<a id="github-icon" href="https://github.com/WebThingsIO"></a>
117+
</nav>
118+
<p id="smallprint">WebThings is sponsored by <a href="https://krellian.com">Krellian Ltd.</a> and is no longer affiliated with the <a href="https://mozilla.com">Mozilla Corporation</a>.</p>
119+
</footer>
120+
121+
</body>
122+
123+
</html>

‎css/home-mobile.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
#hero img {
2+
height: 40px;
3+
}
4+
5+
#gateway-section {
6+
width: 100%;
7+
}
8+
9+
#gateway-section img {
10+
width: calc(100% - 20px);
11+
height: auto;
12+
}
13+
14+
#framework-section {
15+
clear: both;
16+
width: 100%;
17+
}
18+
19+
#framework-section img {
20+
width: calc(100% - 20px);
21+
height: auto;
22+
}
23+
24+
#contributions {
25+
width: 100%;
26+
box-sizing: border-box;
27+
}
28+
29+
.contribution {
30+
width: 100%;
31+
box-sizing: border-box;
32+
margin: 10px 0;
33+
}

0 commit comments

Comments
 (0)