-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
231 lines (220 loc) · 14.6 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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="google-site-verification" content="Owva5V6SkhFjKaGs4fJSiQQkBUWAkywCjK1BLZevNCU">
<title>Cattaz - Collaboration tool with markdown and applications</title>
<meta name="description" content="Collaborate freely and openly with markdown and applications">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="landingpage-assets/img/cattaz-icon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="landingpage-assets/css/main.css">
</head>
<body id="top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#top" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="top">Cattaz</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-md-auto">
<li class="nav-item">
<a class="nav-link" href="#features" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#usecase" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="usecase">Use Case</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mind" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="mind">Mind</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index-ja.html" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="navbar" data-ga-event-label="japanese">日本語</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/FujitsuLaboratories/cattaz" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="navbar" data-ga-event-label="github"><img src="landingpage-assets/img/github-mark-32.png" alt="GitHub" width="30"></a>
</li>
</ul>
</div>
</div>
</nav>
<main role="main">
<section class="jumbotron text-center" style="background-color: #faede5;">
<div class="container">
<h1 style="margin: 0 0 20px;"><img src="landingpage-assets/img/cattaz-logo.png" width="100%" alt="Cattaz"></h1>
<p class="lead" style="color: #666666;">Collaborate freely and openly with markdown and applications</p>
<p>
<a href="https://github.com/FujitsuLaboratories/cattaz" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="intro" data-ga-event-label="github"><img src="landingpage-assets/img/github-btn.png" alt="GitHub" width="150" style="margin: 7px;"></a>
<a href="http://cattaz.io/build/" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="intro" data-ga-event-label="demo"><img src="landingpage-assets/img/demo-btn.png" alt="DEMO" width="150" style="margin: 7px;"></a>
</p>
</div>
</section>
<!-- START the Summary -->
<section class="text-center" style="background-color: #FFFFFF; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>What's Cattaz!</h2>
<p class="lead maintext-color">
Brings all of the activities of the team together at one place.<br>
Changes team's "Working Style", "Communication", "Motivation".<br>
It is an evolved Wiki that can launch, organize, accumulate and share knowledge freely using applications tailored to the activities of teams from Markdown.</p>
<img src="landingpage-assets/img/cattaz-concept.png" width="100%" alt="Cattaz Concept" style="max-width: 600px; margin-top: 20px;">
</div>
</section>
<!-- END the Summary -->
<!-- START the Video -->
<section class="text-center" style="background-color: #b2d6d4; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container" style="max-width: 800px;">
<div style="position: relative; width: 100%; padding-top: 56.25%;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/V7lqCuoK9Lw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<!-- END the Video -->
<!-- START the Features -->
<section id="features" class="text-center" style="background-color: #FFFFFF; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Features</h2>
<div class="row align-items-center" style="padding-top: 3rem;">
<div class="col-md-7">
<h3>Edit Markdown</h3>
<p class="text-left maintext-color">
CommonMark, standardization of Markdown, can be used for desrciption.<br>
With Markdown, keep the text in an easily formatted state.<br>
Copy & paste text as it is without requiring conversion between Cattaz and other Markdown editors.<br>
As you edit the text, you can see the preview in real time.<br>
Try it on the <a href="http://cattaz.io/build/#/page/sandbox" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="features" data-ga-event-label="sandbox">Sandbox page</a>.
</p>
</div>
<div class="col-md-5">
<img class="img-fluid mx-auto features-shadow" src="landingpage-assets/img/markdown.png" alt="Markdown">
</div>
</div>
<hr class="features-divider">
<div class="row align-items-center">
<div class="col-md-7 order-md-2">
<h3>Run Applications</h3>
<p class="text-left maintext-color">
Launch the application on the preview screen by specifying the application name in fenced code block (block starting with 3 backticks).<br>
Markdown makes it easy to enter complex information from the application's UI.<br>
Also, depending on the UI of the application, display the information in user friendly form.<br>
Placing multiple applications on one page, information entered in the application can be immediately reflected in the editor and can be saved as one page.<br>
Keeping everything on a single page in Cattaz, teams can co-create activities smoothly.
</p>
</div>
<div class="col-md-5 order-md-1">
<img class="img-fluid mx-auto features-shadow" src="landingpage-assets/img/app-work.png" alt="APP Work">
</div>
</div>
<hr class="features-divider">
<div class="row align-items-center">
<div class="col-md-7">
<h3>Easily Develop Applications</h3>
<p class="text-left maintext-color">
Engineers can develop and implement applications that run on the preview screen in the same way as creating web applications.<br>
Write the application using JavaScript and React library.<br>
By processing the specified props, you can realize an application with synchronization function added.<br>
Check the developer's guide for <a href="http://cattaz.io/build/#/doc/app-hello" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="features" data-ga-event-label="app-hello">Hello world</a> application to start developing your own application.
</p>
</div>
<div class="col-md-5">
<img class="img-fluid mx-auto" src="landingpage-assets/img/app-development.png" alt="APP Development">
</div>
</div>
<hr class="features-divider">
<div class="row align-items-center">
<div class="col-md-7 order-md-2">
<h3>Real-time Simultaneous Editing</h3>
<p class="text-left maintext-color">
Markdown texts and applications can be collaboratively edited simultaneously by multiple people in real time, so you can efficiently share and co-create information.
Cattaz is a also powerful tool when collaborating with people who are at remote locations such as remote conferences.
</p>
</div>
<div class="col-md-5 order-md-1">
<img class="img-fluid mx-auto" src="landingpage-assets/img/real-time-collaboration.png" alt="Real-time Cllaboration">
</div>
</div>
</div>
</section>
<!-- END the Features -->
<!-- START the Use Case -->
<section id="usecase" class="text-center text-white" style="background-color: #6490cd; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Use Case</h2>
<div class="row" style="padding-top: 3rem;">
<div class="col-lg-4">
<img class="rounded-circle usecase-circle" src="landingpage-assets/img/meeting.png" alt="Meeting" width="140" height="140">
<h3>Meeting</h3>
<p class="text-left">
It can be used to create minutes of meetings.<br>
It facilitates communication at the remote conference.<br>
It will help telework and promote reform of working style.
</p>
</div>
<div class="col-lg-4">
<img class="rounded-circle usecase-circle" src="landingpage-assets/img/agile.png" alt="Agile" width="140" height="140">
<h3>Agile Development</h3>
<p class="text-left">
By using Kanban application, KPT application, etc., summarize sprint's plan and review into one page.<br>
It visualizes the activities of the team and helps speed up agile development.
</p>
</div>
<div class="col-lg-4">
<img class="rounded-circle usecase-circle" src="landingpage-assets/img/events.png" alt="Events" width="140" height="140">
<h3>Event</h3>
<p class="text-left">
Events such as ideathon and hackathon can be operated with Cattaz, and knowledge born can be stored as it is on a Cattaz page.<br>
Through collaborative editing, we can co-create while enjoying, helping to create valuable things.
</p>
</div>
</div>
</div>
</section>
<!-- END the Use Case -->
<!-- START the Mind -->
<section id="mind" class="text-center text-white" style="background-color: #bf545e; padding-top: 3rem; padding-bottom: 3rem;">
<div class="container">
<h2>Mind</h2>
<p class="text-center">
At first, we thought how a platform would be for the engineers to be lively and freely and openly active.
With advent of many tools, various working styles, the way to master these tools and how to share information is becoming complicated.
Although freedom is increased, but it is getting more confusing.
So, we have developed "Cattaz" to share everything at one place and to maximize the capabilities of engineers and enable them to have fun activities.
In addition, we aim to make Cattaz a free and vigorous place for people of various occupations, with diverse cultures, not just limited to engineers.
"Cattaz" has been released as OSS (open source software).<br>
If you are interested, let's create a free and vigorous place together.
</p>
</div>
</section>
<!-- END the Mind -->
</main>
<footer class="text-muted" style="background-color: #F2F2F2;">
<div class="container">
<p class="float-right">
<a class="none-a" href="#top" data-ga-on="click" data-ga-event-category="nav" data-ga-event-action="footer" data-ga-event-label="top">Back to top</a>
</p>
<p>© 2017 Fujitsu Laboratories LTD.
· <a href="https://github.com/FujitsuLaboratories/cattaz" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="footer" data-ga-event-label="github">GitHub</a>
· <a href="http://cattaz.io/build/#/doc/index" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="footer" data-ga-event-label="document">Document</a>
· <a href="http://cattaz.io/build/" target="_blank" data-ga-on="click" data-ga-event-category="outbound" data-ga-event-action="footer" data-ga-event-label="demo">Demo</a>
</p>
</div>
</footer>
<script src="landingpage-assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="landingpage-assets/js/plugins.js"></script>
<script src="landingpage-assets/js/main.js"></script>
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-109517479-2','auto');
ga('require', 'eventTracker', { attributePrefix: 'data-ga-' });
ga('require', 'outboundLinkTracker');
ga('require', 'pageVisibilityTracker', { sendInitialPageview: true });
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<script async src='https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.4.1/autotrack.js'></script>
</body>
</html>