forked from lilyQuartz/simpleDirectedGraph
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (153 loc) · 6.29 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
<!doctype html>
<html>
<head>
<!-- META -->
<title>LOOPY: a tool for thinking in systems</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="LOOPY!">
<meta itemprop="description" content="a tool for thinking in systems">
<meta itemprop="image" content="http://ncase.me/loopy/social/thumbnail.png">
<!-- Twitter Card data: LARGE -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ncasenmare">
<meta name="twitter:title" content="LOOPY!">
<meta name="twitter:description" content="a tool for thinking in systems">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/loopy/social/thumbnail.png">
<!-- Open Graph data -->
<meta property="og:title" content="LOOPY!">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/loopy/">
<meta property="og:image" content="http://ncase.me/loopy/social/thumbnail.png">
<meta property="og:description" content="a tool for thinking in systems">
<!-- Styles -->
<link href="css/index.css" type="text/css" rel="stylesheet"/>
</head>
<body style="background:#e9e9e9">
<!-- SPLASH -->
<div class="white section" id="splash">
<div id="logo_container">
<iframe id="logo_interactive" src="splash" style="border:none" width="300" height="350"></iframe>
<div id="logo"></div>
</div>
</div>
<div id="arrow"></div>
<!-- INFO -->
<div class="light-gray section" style="padding-top:20px">
<div id="why" class="content">
In a world filled with ever-more-complex
technological, sociological, ecological,
political & economic systems...
a tool to make interactive simulations may not be that much help.
But it can certainly try.
</div>
<div id="features" class="content">
<div class="feature-image">
<img src="img/feature_play.gif"/>
</div>
<div class="feature-text">
<div>play with simulations</div>
It's the ancient, time-honored way of learning:
messing around and seeing what happens.
Play with simulations to ask "what if" questions, and get
an intuition for how the system works!
</div>
<div class="feature-text">
<div>programming by drawing</div>
Raw code is too inaccessible.
Also drag-and-drop is too mainstream.
But with LOOPY, you can model systems by simply drawing circles & arrows,
like a wee baby
</div>
<div class="feature-image">
<img src="img/feature_draw.gif"/>
</div>
<div class="feature-image">
<img src="img/feature_remix.gif" width="305"/>
</div>
<div class="feature-text">
<div>remix others' simulations</div>
Want to build upon your friends' models?
Or challenge your enemies' models?
LOOPY lets you have a conversation with simulations!
You can go from <i>thinking</i> in systems,
to <i>talking</i> in systems.
</div>
</div>
</div>
<!-- EXAMPLES -->
<div class="white section">
<div id="example_header" class="content">
NOW PLAY WITH AN EXAMPLE:
</div>
<div id="examples" class="content">
<iframe src="v1.1/pages/examples" scrolling="no" style="border:none" width="620" height="220"></iframe>
</div>
<a href="v1.1" id="start_blank" class="cool_button">
<div>OR, MAKE A MODEL FROM SCRATCH →</div>
</a>
</div>
<!-- CONCLUSION -->
<div class="light-gray section" style="font-size:24px">
<div class="content">
Like duct tape, you can use LOOPY for all sorts of things:
</div>
<div id="uses" class="content" style="margin-top:1.2em">
<img src="img/use_1.png"/><img src="img/use_2.png"/><img src="img/use_3.png"/><img src="img/use_4.png"/><img src="img/use_5.png"/>
</div>
<div class="content" style="margin-top:1.2em">
However you choose to use LOOPY, hopefully it can give you not just
the software tools, but also the <i>mental</i> tools to understand
the complex systems of the world around us.
It's a hot mess out there.
<br><br>
<a href="v1.1" id="final_button" class="cool_button">
<div>TRY OUT LOOPY →</div>
</a>
<br>
Happy simulating! <3
</div>
</div>
<!-- CREDITS -->
<div class="dark-gray section">
<div class="content">
<div>LOOPY is a part of</div>
<div style="text-align:center; font-size:42px; font-weight:bold; color:#fff; margin:7px 0;">
<a style="color:#fff" href="http://explorableexplanations.com/">EXPLORABLE EXPLANATIONS</a>
</div>
<div style="text-align:right;">a movement to make learning active, not just passive</div>
</div>
<div class="content">
LOOPY is also open source and public domain,
meaning it's free for coders, educators, and just about anybody
to re-use and re-mix LOOPY as they see fit.
<a href="https://github.com/ncase/loopy">(Get the source code on Github!)</a>
</div>
<div class="content">
LOOPY is made by Nicky Case,
(<a href="http://ncase.me/">my wobsite</a> | <a href="https://twitter.com/ncasenmare">my tweeter</a>)
<br>
thanks to my generous supporters on Patreon!
<a href="v1.1/pages/credits">(see them all here)</a>
<br><br>
And if you like what I make, feel free to
<a href="https://www.patreon.com/ncase">toss coins at me on Patreon</a>. <3
</div>
</div>
<!-- SOCIAL SHARING -->
<div class="black section">
<div id="sharing" class="content">
<span style="position:relative; top:-10px">share:</span>
<ul class="share-buttons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fncase.me%2Floopy&t=LOOPY%2C%20a%20tool%20for%20thinking%20in%20systems" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="css/icons/Facebook.png"></a></li>
<li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fncase.me%2Floopy&text=LOOPY%2C%20a%20tool%20for%20thinking%20in%20systems:%20http%3A%2F%2Fncase.me%2Floopy&via=ncasenmare" target="_blank" title="Tweet"><img alt="Tweet" src="css/icons/Twitter.png"></a></li>
<li><a href="mailto:?subject=LOOPY%2C%20a%20tool%20for%20thinking%20in%20systems&body=http%3A%2F%2Fncase.me%2Floopy" target="_blank" title="Send email"><img alt="Send email" src="css/icons/Email.png"></a></li>
</ul>
</div>
</div>
</body>
</html>