-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·212 lines (207 loc) · 15.1 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Thu Mar 07 2019 16:29:03 GMT+0000 (UTC) -->
<html data-wf-page="5c73ef92331282ed473e4646" data-wf-site="5c73ef92331282bb253e4645">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-136798282-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-136798282-1');
</script>
<meta charset="utf-8">
<title>Help Build One Army</title>
<meta content="We’re building a platform for communities to grow online/offline and tackle global problems. We’re testing it first on our 65K members community, improve it and finally release it for the world to use." name="description">
<meta content="Help Build One Army" property="og:title">
<meta content="We’re building a platform for communities to grow online/offline and tackle global problems. We’re testing it first on our 65K members community, improve it and finally release it for the world to use." property="og:description">
<meta content="https://uploads-ssl.webflow.com/5c73ef92331282bb253e4645/5c9380d64bd22cc7ecb9f0fd_one%20army%20thumbnail%20hand.jpg" property="og:image">
<meta content="summary" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/one-army.webflow.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/github-activity-0.1.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Varela:400"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.jpg" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.jpg" rel="apple-touch-icon">
</head>
<body>
<div class="landing"><img src="images/strong-emoji.png" width="50" alt="" class="strong-emoji"><img src="images/build-one-army.png" width="260" srcset="images/build-one-army-p-500.png 500w, images/build-one-army.png 506w" sizes="(max-width: 479px) 70vw, (max-width: 767px) 40vw, (max-width: 991px) 30vw, 20vw" alt="" class="lets-build-one-army">
<div class="videowrapper">
<div style="padding-top:56.17021276595745%" id="w-node-5ba324948305-473e4646" class="landing-video w-video w-embed"><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FIN_3SzDARKA%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DIN_3SzDARKA&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FIN_3SzDARKA%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe></div>
</div><img src="images/drawing-woman.png" width="250" alt="" class="dev-girl"><img src="images/drawing-top-view-coding.png" width="240" alt="" class="dev-guy"><img src="images/drawing-message.png" width="131.5" alt="" class="emojis"><img src="images/together.png" width="240.5" alt="" class="together"><img src="images/drawing-hand.png" width="50" alt="" class="hand">
<div class="git-star">
<a class="github-button" href="https://github.com/ONEARMY/community-platform" data-size="large" data-show-count="true" aria-label="Star ntkme/github-buttons on GitHub">Star</a>
</div>
</div><img src="images/drawing-screens.png" width="203.5" alt="" class="react">
<h2 class="h2 buildingplat"><strong class="bold-text">We’re building a platform for communities to grow online/offline and tackle global problems. First we’re testing it on our Precious Plastic community, then we’ll improve it and finally release it for the world to use.</strong></h2>
<div class="features">
<div class="main-container">
<h1 class="h1">Features</h1>
<div class="features-wrapper">
<div class="feature">
<div class="feature-image"><img src="images/rectangle1.png" width="167.5" alt="" class="image-feature"></div>
<div class="feature-text"><img src="images/open-source.png" width="168" alt="" class="title-feature">
<p class="paragraph">The platform is developed free and open source so everyone can use it. First tested in our community and later open up to other communities that need it.</p>
</div>
</div>
<div class="feature">
<div class="feature-image"><img src="images/rectangle2.png" width="167" alt="" class="image-feature"></div>
<div class="feature-text"><img src="images/work-together.png" width="199.5" alt="" class="title-feature">
<p class="paragraph">Together we're stronger. One Army will encourage collaboration and group work (subarmies) across the platform and in real life. </p>
</div>
</div>
<div class="feature">
<div class="feature-image"><img src="images/rectangle3.png" width="160" alt="" class="image-feature"></div>
<div class="feature-text"><img src="images/help-eachother.png" width="183.5" alt="" class="title-feature">
<p class="paragraph">A Q&A and Discussion modules where people can ask for help and get the relevant support from the global community. </p>
</div>
</div>
<div class="feature">
<div class="feature-image"><img src="images/rectangle4.png" width="164" alt="" class="image-feature"></div>
<div class="feature-text"><img src="images/meet-people-near-you.png" width="280.5" srcset="images/meet-people-near-you-p-500.png 500w, images/meet-people-near-you.png 561w" sizes="(max-width: 479px) 81vw, (max-width: 767px) 54vw, (max-width: 991px) 31vw, 22vw" alt="" class="title-feature">
<p class="paragraph">A strong map tool (built on OSM) to connect people locally enabling multiple layers or groups to accommodate projects of different sizes and scale.</p>
</div>
</div>
<div class="feature">
<div class="feature-image"><img src="images/rectangle5.png" width="170" alt="" class="image-feature"></div>
<div class="feature-text"><img src="images/solutions-from-people.png" width="281.5" srcset="images/solutions-from-people-p-500.png 500w, images/solutions-from-people.png 563w" sizes="(max-width: 479px) 81vw, (max-width: 767px) 54vw, (max-width: 991px) 31vw, 22vw" alt="" class="title-feature">
<p class="paragraph">We will enable people to share How-to documentations to show how they tackle environmental problems.</p>
</div>
</div>
<div class="feature">
<div class="feature-image"><img src="images/rectangle6.png" width="167" alt="" class="image-feature"></div>
<div class="feature-text"><img src="images/filter-the-crap.png" width="186" alt="" class="title-feature">
<p class="paragraph">The platform is built upon, and will inspire users to, create useful content- not likeable. Enough of that. Time for some useful stuff. Sorry mark :)</p>
</div>
</div>
</div>
</div>
</div>
<div class="roadmap-wrapper">
<h1 class="h1">Product Roadmap</h1><img src="images/roadmap-mobile-v4.png" width="160" srcset="images/roadmap-mobile-v4.png 500w, images/roadmap-mobile-v4.png 640w" sizes="100vw" alt="" class="image-12"><img src="images/roadmap-final-release.png" srcset="images/roadmap-final-release.png 500w, images/roadmap-final-release.png 800w, images/roadmap-final-release.png 1080w, images/roadmap-final-release.png 1600w, images/roadmap-final-release.png 1919w" sizes="(max-width: 1919px) 100vw, 1919px" alt="" class="image-10">
<!-- <div class="current">
<div class="current-left"><img src="images/roadmap-cross.png" alt=""></div>
<div class="current-right">
<div class="current-top"><img src="images/roadmap-arrow-1.png" alt=""><a href="https://www.figma.com/proto/OZ5xbZYR4ZKNBijrs9kPJnbu/OneArmy-Platform?node-id=3286%3A46033&viewport=84%2C304%2C0.027&scaling=scale-down-width" target="_blank" class="button-secondary w-button">Figma</a>
<a href="https://www.figma.com/proto/OZ5xbZYR4ZKNBijrs9kPJnbu/OneArmy-Platform?node-id=458%3A0&viewport=-1426%2C242%2C0.0625&scaling=scale-down-width" target="_blank" class="button-block figma w-inline-block">
<div class="custom-button figma-wrap">
<h6 class="h3">Figma</h6><img src="images/button-arrow-blue-1.png" width="25" alt="" class="arrow"></div>
</a>
</div>
<div class="current-bottom"><img src="images/roadmap-arrow-2.png" alt="">
<a href="https://dev.onearmy.world/" target="_blank" class="button-block dev-site w-inline-block">
<div class="custom-button red">
<h6 class="h3 red">Dev site</h6><img src="images/button-arrow-red-1.png" width="25" alt="" class="arrow"></div>
</a><a href="https://dev.onearmy.world/" target="_blank" class="button-secondary red w-button">Dev site</a></div>
</div>
</div> -->
<div class="site-block">
<div class="site">
<h2 class="h2 extra-pad"><strong class="bold-text">Latest UI & UX prototype</strong></h2>
<a href="https://preciousplastic.typeform.com/to/m51uq4" target="_blank" class="button-block figma w-inline-block">
<div class="custom-button">
<h6 class="h3">Figma</h6>
</div>
</a>
</div>
<div class="site">
<h2 class="h2 extra-pad"><strong class="bold-text">Check out our dev website</strong></h2>
<a href="https://dev.onearmy.world/discussions" target="_blank" class="button-block devsite w-inline-block">
<div class="custom-button">
<h6 class="h3">Dev site</h6>
</div>
</a>
</div>
</div>
</div>
<div class="techstack">
<h1 class="h1">Tech stack</h1>
<div class="techs">
<div class="main-container">
<div class="tech-wrapper">
<div class="tech-wrap"><img src="images/logo-react.png" width="120" alt="">
<h5 class="h5">React</h5>
</div>
<div class="tech-wrap"><img src="images/logo-fire.png" width="120" alt="">
<h5 class="h5">Firebase</h5>
</div>
<div class="tech-wrap"><img src="images/logo-style-thing.png" width="120" alt="">
<h5 class="h5">Styled components</h5>
</div>
<div class="tech-wrap"><img src="images/logo-typescript.png" width="118.5" alt="">
<h5 class="h5">Typescript</h5>
</div>
<div class="tech-wrap"><img src="images/logo-design-system.png" width="120" alt="">
<h5 class="h5">Design system</h5>
</div>
</div>
</div>
</div>
<h4 class="h4 black">Find out more about our tech choices <a href="https://github.com/OneArmyWorld/onearmy/blob/master/CONTRIBUTING.md#--technologies" target="_blank" class="inline-link">here</a></h4>
</div>
<div class="help-options">
<h1 class="h1">Ready to help?</h1>
<div class="join-options-wrapper">
<div class="option-wrapper">
<div class="list-image"><img src="images/list-long.png" width="42" alt="" class="image-8"></div>
<div class="option-text-wrapper"><img src="images/joinus.jpg" width="167" alt="" class="help-header">
<p class="paragraph-2"><strong>Come to work with us<br>- </strong>Project with impact and purpose <br>- Used by the thousands <br>- Latest techs <br>- Space for learning<br><br><strong>Join our community</strong> <br>- Based in Eindhoven <br>- A bed in one of our 8 shared houses <br>- Lots of funny designers, engineers and devs<br>- Yoga and salsa classes <br>- Breathe sustainability <br>- The occasional Sprinter sauna :)<br><br><strong>Food is on us</strong> <br>- Best Vegan food in town, 24/7<br>- Cooked by our chefs <br>- Breakfast, lunch, dinner <br></p>
<a href="https://preciousplastic.typeform.com/to/m51uq4" target="_blank" class="button-block application w-inline-block">
<div class="custom-button">
<h6 class="h3 yellow">Application</h6><img src="images/button-arrow-black-1.png" width="15" alt="" class="arrow yel"></div>
</a>
</div>
</div>
<div class="option-wrapper extrapad-remote">
<div class="list-image"><img src="images/list-short.png" width="48" alt="" class="image-11"></div>
<div class="option-text-wrapper"><img src="images/remote.jpg" width="167" alt="" class="help-header">
<p class="paragraph-2"><strong>Head over to our Github<br>- </strong>Check our contribution guidelines<br>- Make sure you love react<br><br><strong>Pick your battle</strong> <br>- Choose an issue<br>- Comment your name<br><br><strong>Fork the project</strong> <br>- Do your magic<br><br><strong>Submit your pull requests</strong> <br>- PR are reviewed on Tuesdays<br></p>
<a href="https://github.com/ONEARMY/community-platform" target="_blank" class="button-block w-inline-block">
<div class="custom-button git">
<h6 class="h3 yellow">Github Repo</h6><img src="images/button-arrow-black-2.png" width="15" alt="" class="arrow yel"></div>
</a>
</div>
</div>
</div>
</div>
<div class="git-activity">
<h1 class="h1">Latest Github activity</h1>
<div class="feed-wrapper">
<div id="feed"></div>
</div>
</div>
<div id="footer" class="bye-bye">
<div class="main-container">
<div class="bye-wrapper">
<h3 class="heading">Share this with your dev friends</h3>
<p class="hide-p" id="p1">https://build.onearmy.world/</p>
<button class="button copy" onclick="copyToClipboard('#p1')">Copy URL</button>
<h4 class="h4">See you on Github ;)</h4>
</div>
</div>
</div>
<script src="https://d1tdp7z6w94jbb.cloudfront.net/js/jquery-3.3.1.min.js" type="text/javascript" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script type="text/javascript" src="js/github-activity-0.1.5.min.js"></script>
<script type="text/javascript">
GitHubActivity.feed({
username: "onearmy",
repository: "community-platform",
selector: "#feed",
limit: 10 // optional
});
</script>
</script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>