-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
132 lines (131 loc) · 6.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Involt - Arduino to html prototyping framework for designers.</title>
<meta content="Prototyping framework for designers to easily create interaction between hardware and software. You only need basic knowledge about html, css and Arduino to get started." name="description"></meta>
<meta content="hardware prototyping, software to hardware, arduino, html, arduino to html, framework, jquery, physical computing, communication, prototyping, bluetooth, mobile, cordova, phonegap, design, nwjs, webkit" name="keywords"></meta>
<meta content="width=device-width, initial-scale=1" name="viewport"></meta>
<meta property="og:url" content="https://involt.github.io" />
<meta property="og:site_name" content="Involt"/>
<meta property="og:title" content="HTML to Arduino prototyping framework for designers." />
<meta property="og:description" content="The easiest way to create app prototype which communicates with physical product. Involt works like a bridge between software and hardware. Only basic knowledge about HTML, CSS and Arduino is required." />
<meta property="og:image" content="https://involt.github.io/img/facebook-share-lg.png" />
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--<script src="js/less.js"></script>-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69535393-1', 'auto');
ga('send', 'pageview');
</script>
<script type="text/javascript" src="https://cookiegenerator.eu/cookie.js?msg=We%20use%20cookies%20to%20understand%20how%20you%20use%20our%20site%20and%20to%20improve%20your%20experience.%20This%20includes%20personalizing%20content%20and%20advertising.%20To%20learn%20more%2C%20%5Burl%3Dhttps%3A%2F%2Finvolt.github.io/policy.html%5Dclick%20here%5B%2Furl%5D.%20By%20continuing%20to%20use%20our%20site%2C%20you%20accept%20our%20use%20of%20cookies.&bg_color=d5f1ff&msg_color=000000&link_color=008bff"></script>
</head>
<body>
<header>
<div class="container-head">
<a href="/" class="logo"><img src="img/logo.svg" alt=""></a>
<div class="ham-btn">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="getting-started.html">Getting started</a>
<a href="examples.html">Examples</a>
<a href="reference.html">Reference</a>
<a href="about.html">About</a>
<a id="gth-dl" href="https://github.com/Involt/Involt">Github</a>
</nav>
</div>
</header>
<div class="main-lead">
<div class="container">
<h1>An easy way to think outside the box.</h1>
<h2>Simplicity of HTML and CSS combined with hardware interactions.</h2>
<a href="https://github.com/Involt/Involt" class="cta">Download</a>
<!-- <p>Placeholder for notification</p> -->
</div>
</div>
<div class="container">
<div class="column">
<img src="img/feature1.svg" alt="no coding">
<h3>No advanced coding</h3>
<p>Create your app using only basic knowledge about HTML, CSS and Arduino. Instead of learning advanced coding focus on overall experience and quickly develop results.</p>
</div>
<div class="column">
<img src="img/feature2.svg" alt="css">
<h3>Fast results with CSS</h3>
<p>Using CSS allows you to work on layout and interfacing with device at once. Involt comes with UI kit to help you get started.</p>
</div>
<div class="column">
<img src="img/feature3.svg" alt="prototyping">
<h3>Easy prototyping</h3>
<p>Desktop or mobile? Wireless? There is no need to rebuild project from scratch. With Involt everything is simple.</p>
</div>
</div>
<div class="landing-textmid">
<div class="container">
<img src="img/multi.svg" alt="">
<div class="text-right">
<h3>Prototyping without barriers</h3>
<p>The foundations of Involt is overcoming obstacles that blocks many concepts from making it to the real world. There are many prototyping tools for software and hardware but none covers both. With its fresh approach, inject tangible interactions into your app like never before.</p>
</div>
<br style="clear:both;">
</div>
</div>
<div class="howdoesit">
<div class="container">
<h3>How does it work?</h3>
<h2>Involt translates CSS classes into functions. You only need to specify UI element, target pin and variables like desired values or their range.</h2>
<p>This example code creates simple button that turns on LED.</p>
<div class="code"><div class="ard button P5 value-255"> Click me </div></div>
<p>For more advanced project you can use JavaScript and JQuery. You can do the same thing with Involt JQuery methods:</p>
<div class="code">$(this).pinDefine("P5").sendValue(255);</div>
<div class="linkunder">Read the <a href="getting-started.html">getting started</a> or <a href="reference.html">reference</a> page.</div>
</div>
</div>
<div class="landing-end">
<div class="container">
<h3>CSS framework with built-in hardware interactions for desktop and mobile.</h3>
<a href="https://github.com/Involt/Involt" class="cta">Download</a>
</div>
</div>
<footer>
<div class="container">
<div class="column">
<img src="img/ico1.svg" class="ico-small" alt="">
<div class="footer-txt">
Involt was made to quickly create interactive objects with software to hardware communication by using HTML and CSS. The goal is to help you to overcome the obstacles at prototyping stage.
</div>
<a href="about.html">Read more</a>
</div>
<div class="column">
<img src="img/ico2.svg" class="ico-small" alt="">
<div class="footer-txt">
You can help develop framework on Github. There are new features added with each version. To see the progress of development check the changelog. Involt is under MIT license.
</div>
<a href="https://github.com/Involt/Involt/wiki/Changelog">See the Changelog</a>
</div>
<div class="column">
<img src="img/ico3.svg" class="ico-small" alt="">
<div class="footer-txt">
Used Involt and enjoyed it? Do you have any questions or suggestions? Help by sending feedback directly via mail.
</div>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</footer>
<script src="js/jq-ui.js"></script>
</body>
</html>