-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (92 loc) · 4.98 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
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="zhangguangda" />
<title>We Framework Introduction</title>
<link rel="stylesheet" type="text/css" href="css/impress.css">
<link rel="stylesheet" type="text/css" href="css/xcode.css">
</head>
<body>
<div id="loading">
<span>Loading...</span>
</div>
<div class="fallback-message">
<p>您的浏览器 <b>不支持</b> 我们的introduction页面，您将看到简化版的页面</p>
<p>为了获得更好的用户体验，请将您的浏览器升级到最新版本 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b></p>
</div>
<div id="impress">
<div id="worry" class="step title" data-x="-800" data-y="-1500">
<span class="organization">Which</span>
<h1>Framework?</h1>
</div>
<div class="step" data-x="0" data-y="-1500" data-z="-300">
<p class="stress">想使用更加<strong>强大</strong>的框架？</p>
</div>
<div class="step" data-x="0" data-y="-1380" data-z="-300">
<p class="stress">却担心框架<strong>过于庞大</strong>？</p>
</div>
<div class="step" data-x="0" data-y="-1260" data-z="-300">
<p class="stress">担心框架版本<strong>不兼容</strong>？</p>
</div>
<div class="step" data-x="0" data-y="-1140" data-z="-300">
<p class="stress">担心框架需要<strong>不断升级</strong>？</p>
</div>
<div class="step" data-x="0" data-y="-1020" data-z="-300">
<p class="stress">担心框架<strong>上手太难</strong>？</p>
</div>
<div class="step" data-x="1000" data-y="-1500" data-rotate="180">
<p>希望尝试一个<span class="big">全新的</span>，</p><p>拥有<span class="big">极强扩展性</span>的框架？</p>
</div>
<div id="title" class="step title" data-x="0" data-y="0" data-scale="4">
<span class="organization">SDO Web Energy</span>
<h1>We Framework</h1>
<span class="footnote"><sup>*</sup> 一个模块化，组件化的 <em>javascript</em> 框架</span>
</div>
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>它是一个<strong>前端解决方案</strong> <br/>
使用了模块加载 <a target="_blank" href="http://requirejs.org/">require.js</a> <br/>
并且基于 <strong>强大的 Loader </strong> 完成整个前端的框架需求。</p>
</div>
<div id="complex" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>无论是 <b>繁琐</b> <span class="thoughts">的业务需求</span></p>
</div>
<div id="dense" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>还是 <small>精简</small> 的函数库</p>
</div>
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>通过 <b class="positioning">简单的引用</b>，<b class="scaling">便捷的模块加载</b> 和 <b class="rotating">丰富的API</b>，你可以实现一切！</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>唯一的 <small>限制</small> 就是 your <b class="imagination">imagination</b></p>
</div>
<div id="intro" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>想了解更多？</p>
<q><a target="_blank" href="http://webenergy.github.com/">快来查看文档吧</a>，<br />少年！</q>
</div>
<div id="too-white" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>怎么，<br />觉得这个页面挺炫，<br />但是太白了？</p>
</div>
<div id="code" class="step" data-x="6200" data-y="4300" data-scale="2" data-rotate="180">
<a href="javascript:void(0);">RUN</a> <-- press this!
<pre class="runnable">
<code class="javascript">$we.require("core", function() {
$we.utils.addStyleSheet("body {color:#aaa; background:#444;}");
});</code></pre>
</div>
<div id="its-in-3d" class="step" data-x="6400" data-y="4600" data-z="-100" data-rotate="180" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">有没有</span> <span class="you">发现</span> <span class="noticed">很神奇</span> <span class="its">还有更多</span> <span class="in">等待你</span> <b>发现呢</b>！</p>
<span class="footnote">* GoGo! We Framework!</span>
</div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<div class="hint">
<p>使用 <b>空格</b> 或者 <b>方向键</b> 浏览</p>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="https://we.sdoprofile.com/common/js/release/loader.min.js"></script>
</body>
</html>