-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (122 loc) · 11.2 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>
<head>
<title>Polyphony Demo</title>
<link href="//fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<link href="css/polyphony-demo.css" rel="stylesheet">
</head>
<body>
<div class="banner">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 908 908" class="logo">
<polygon style="fill:#96CA2D;" points="230.6,908 44.9,558.5 230.6,222.7 440,544.1 787.9,561.9 602.2,908"/>
<polygon style="fill:#B5E655;" points="491.7,464.9 336.4,222.7 491.7,0 631.3,212.9 863.2,229.5 739.3,476.4"/>
</svg>
<h1 class="inline">polyphony</h1>
</div>
<div class="subtitle">A cross-platform library for real-time text editing.</div>
<div id="errorContainer" class="error">
Sorry, this demo is limited to 1000 characters.
</div>
<div id="editor" class="editor">
</div>
<div class="nav-buttons">
<a href="//github.com/polyphony-ot/polyphony-site/blob/master/doc/walkthrough.md" class="button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="button-icon">
<path d="M42,34v4H25.1l14.7-17.2c0.3-0.4,0.2-0.8-0.4-0.8H30V1c0-0.5-0.4-1-0.9-1H19c-0.5,0-1,0.5-1,1v19H8.6c-0.5,0-0.7,0.4-0.4,0.8L23,38H6v-4H0v12c0,1.1,0.9,2,2,2h44c1.1,0,2-0.9,2-2V34H42z" />
</svg>
<span class="button-text">Get Started</span>
</a>
<a href="//github.com/polyphony-ot/polyphony-ios-demo" class="button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="button-icon">
<path d="M24.1,18.4c1.2,1.2,2,3.3,1.9,5.3c0,3.1-1.8,5.6-4.1,5.6c-2,0-4.2-1.9-4.2-6c0-4.1,2.2-6,4.2-6 C22.7,17.4,23.5,17.8,24.1,18.4z M48,5v38c0,2.8-2.2,5-5,5H5c-2.8,0-5-2.2-5-5V5c0-2.8,2.2-5,5-5h38C45.8,0,48,2.2,48,5z M12,19.9 H8V32h4L12,19.9z M12.8,16c0-1.5-1.3-2.7-2.8-2.7S7.2,14.5,7.2,16c0,1.5,1.3,2.7,2.8,2.7S12.8,17.4,12.8,16z M30.3,23.4 c0-5.7-3.4-9.6-8.3-9.6c-5,0-8.3,3.9-8.3,9.6c0,5.7,3.3,9.6,8.3,9.6C26.6,33,30.3,28.8,30.3,23.4z M42.5,27.3 c0.2-3.5-3-4.8-5.1-5.9s-2.2-1.6-2.1-2.5c0.1-0.8,1.2-1.6,2.6-1.6c2,0,3.1,1.2,3.1,1.2l0.9-3.4c0,0-1.8-1.4-4.6-1.4 c-3.4,0-5.9,1.9-6.3,4.2c-0.4,2.5,1,5.6,3.9,6.5c2.3,0.7,3.6,1.6,3.6,2.5c0,0.7-0.1,2.1-2.6,2.3c-2.2,0.2-4.4-1.4-4.4-1.4l-1.2,3.6 c0,0,2.6,1.2,5.8,1.2c0.7,0,1.2-0.1,1.7-0.2C39.1,32.1,42.2,31.1,42.5,27.3z" />
</svg>
<span class="button-text">iOS Demo</span>
</a>
</div>
<ul class="ribbon">
<li>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="feature-icon">
<rect x="28.4" y="158.3" width="224.1" height="122.3" style="opacity:0.3;"/>
<line x1="8" y1="300.9" x2="272.9" y2="300.9"/>
<path d="M257.6,137.9H23.3c-8.4,0-15.3,6.9-15.3,15.3v147.7h264.9V153.2C272.9,144.8,266,137.9,257.6,137.9zM252.5,280.6H28.4V158.3h224.1V280.6z"/>
<path d="M8,303.5v14c0,9.3,6.9,14,15.3,14h234.3c8.4,0,15.3-4.8,15.3-14v-14H8z" style="opacity:0.5;"/>
<path d="M197.6,359c2.7,0,3,3,0,3H83.7c-3,0-2.9-3,0-3s26.3,3,26.3-17.4c0-10.2,0-10.2,0-10.2h61c0,0-0.1,0,0,10.2C171,362.1,194.9,359,197.6,359z"/>
<rect x="369.7" y="168.5" width="101.9" height="152.8" style="opacity:0.3;"/>
<path d="M466.5,127.7h-91.7c-14,0-25.5,11.5-25.5,25.5v193.6c0,14,11.5,25.5,25.5,25.5h91.7c14,0,25.5-11.5,25.5-25.5V153.2C492,139.2,480.5,127.7,466.5,127.7zM420.6,364.8c-10,0-18-8.1-18-18s8.1-18,18-18c10,0,18,8.1,18,18S430.6,364.8,420.6,364.8zM369.7,321.3V168.5h101.9v152.8H369.7z"/>
</svg>
<div class="feature-text">
<div class="feature-name">Cross-platform</div>
<div class="feature-description">The core of polyphony is written in pure C - making it portable to any platform.
</div>
</div>
</li>
<li>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="feature-icon small">
<polygon points="428,188.7 411.6,244.4 356,260.7 411.6,277.1 428,332.7 444.3,277.1 500,260.7 444.3,244.4"/>
<polygon points="323.6,295.2 302.5,367 230.7,388.1 302.5,409.2 323.6,481 344.7,409.2 416.5,388.1 344.7,367"/>
<path d="M333.7,123.8L5.6,451.9c-4.1,4.1-4.1,10.7,0,14.8l29.5,29.5c4.1,4.1,10.7,4.1,14.8,0L378,168L333.7,123.8z"/>
<path d="M495.2,50.8c4.1-4.1,4.1-10.7,0-14.8L465.7,6.5c-4.1-4.1-10.7-4.1-14.8,0l-84,84l44.3,44.3L495.2,50.8z"/>
<polygon points="103.3,167.8 0,137.8 103.3,105.2 134.6,0.8 166,105.2 268.7,136.8 166,167.8 135.3,271.9"/>
</svg>
<div class="feature-text">
<div class="feature-name">Simple</div>
<div class="feature-description">A simple API makes it easy to add real-time text editing to virtually any app or website.</div>
</div>
</li>
<li>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="feature-icon small">
<path d="M401.2,84h-52.5c-25.7,0-47.7,19.2-47.7,45v52.5c0,2.8,0.9,6.5,1.3,9.2L244.1,251H156V144.3c23-2.5,41-22.1,41-46.2V45.7C197,19.9,176.9,0,151.2,0H98.7C72.9,0,52,19.9,52,45.7v52.5c0,24,18,43.6,41,46.2v209.4c-23,2.5-41,22.1-41,46.2v52.5C52,478,72.9,500,98.7,500h52.5c25.7,0,45.8-22,45.8-47.7v-52.5c0-24-18-43.6-41-46.2V312h101.1c8.3,0,16.3-3.2,22.2-9.1l73.3-73.9h48.5c25.7,0,46.8-21.8,46.8-47.5V129C448,103.2,426.9,84,401.2,84zM93,45.7c0-2.8,2.9-4.7,5.7-4.7h52.5c2.8,0,4.8,1.9,4.8,4.7v52.5c0,2.8-2.1,5.9-4.8,5.9H98.7c-2.8,0-5.7-3.1-5.7-5.9V45.7zM156,452.3c0,2.8-2.1,6.7-4.8,6.7H98.7c-2.8,0-5.7-3.9-5.7-6.7v-52.5c0-2.8,2.9-3.8,5.7-3.8h52.5c2.8,0,4.8,1.1,4.8,3.8V452.3zM407,181.5c0,2.8-3.1,6.5-5.8,6.5h-52.5c-2.8,0-4.7-3.8-4.7-6.5V129c0-2.8,1.9-5,4.7-5h52.5c2.8,0,5.8,2.2,5.8,5V181.5z"/>
</svg>
<div class="feature-text">
<div class="feature-name">Open Source</div>
<div class="feature-description">All of polyphony is open source under Apache 2, and can be used in commercial projects.
</div>
</div>
</li>
</ul>
<h2>Cross-platform Collaboration</h2>
<div class="contributing">
<p>Many real-time text editors focus on the browser, making them difficult to use anywhere else. Polyphony provides a clean API for adding real-time collaboration directly into your apps - whether they're built for the browser, for a device, or for the desktop.</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 474.9 99.7" class="icon">
<rect style="opacity:0.3;" x="119.8" y="34" width="32.8" height="49.3"/>
<path d="M151,20.9h-29.6c-4.5,0-8.2,3.7-8.2,8.2v62.4c0,4.5,3.7,8.2,8.2,8.2H151c4.5,0,8.2-3.7,8.2-8.2V29.1C159.2,24.5,155.6,20.9,151,20.9zM136.3,97.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8S139.5,97.3,136.3,97.3zM119.8,83.3V34h32.8v49.3H119.8z"/>
<path d="M66.6,9.8H6.7C3,9.8,0,12.8,0,16.4V93c0,3.7,3,6.7,6.7,6.7h59.9c3.7,0,6.7-3,6.7-6.7V16.4C73.3,12.8,70.3,9.8,66.6,9.8zM36.6,98.6c-2.2,0-3.9-1.8-3.9-3.9s1.8-3.9,3.9-3.9c2.2,0,3.9,1.8,3.9,3.9S38.8,98.6,36.6,98.6zM63.3,89.7H10.1H10V19.8h53.3V89.7z"/>
<polygon style="opacity:0.3;" points="63.3,89.7 10.1,89.7 10,89.7 10,19.8 63.3,19.8"/>
<rect style="opacity:0.3;" x="370.6" y="40.8" width="81.6" height="49.8"/>
<path d="M472.6,90.6h-11.3V36.2c0-2.5-2-4.5-4.5-4.5h-90.6c-2.5,0-4.5,2-4.5,4.5v54.4h-11.3c-1.2,0-2.3,1-2.3,2.3v2.3c0,1.2,1,2.3,2.3,2.3l2.3,2.3h117.8l2.3-2.3c1.2,0,2.3-1,2.3-2.3v-2.3C474.9,91.6,473.8,90.6,472.6,90.6zM370.6,40.8h81.6v49.8h-81.6V40.8z"/>
<rect style="opacity:0.3;" x="208.3" y="9.1" width="99.7" height="54.4"/>
<line x1="199.2" y1="72.5" x2="317" y2="72.5"/>
<path d="M310.3,0H206c-3.7,0-6.8,3.1-6.8,6.8v65.7H317V6.8C317,3.1,314,0,310.3,0zM308,63.4h-99.7V9.1H308V63.4z"/>
<path style="opacity:0.5;" d="M199.2,73.6v6.2c0,4.1,3.1,6.2,6.8,6.2h104.2c3.7,0,6.8-2.1,6.8-6.2v-6.2H199.2z"/>
<path d="M283.6,98.3c1.2,0,1.3,1.3,0,1.3h-50.7c-1.3,0-1.3-1.3,0-1.3c1.3,0,11.7,1.3,11.7-7.7c0-4.5,0-4.5,0-4.5h27.1c0,0-0.1,0,0,4.5C271.7,99.7,282.4,98.3,283.6,98.3z"/>
</svg>
</div>
<h2>Contributing</h2>
<div class="contributing">
<p>Polyphony is looking for contributors! We pride ourselves on the code being clean, extensively documented, and well-tested. If you're interested in learning how a real-time text editor works or want to contribute new features, <a href="//github.com/polyphony-ot">please let us know</a> on GitHub.</p>
<a href="//github.com/polyphony-ot/libot/blob/master/CONTRIBUTING.md" class="image-button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.8 117.8">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M60.4,0C27,0,0,27,0,60.4c0,26.7,17.3,49.3,41.3,57.3c3,0.6,4.1-1.3,4.1-2.9c0-1.4-0.1-6.2-0.1-11.2C28.5,107.2,25,96.4,25,96.4c-2.7-7-6.7-8.8-6.7-8.8c-5.5-3.7,0.4-3.7,0.4-3.7c6.1,0.4,9.3,6.2,9.3,6.2c5.4,9.2,14.1,6.6,17.6,5c0.5-3.9,2.1-6.6,3.8-8.1C36,85.6,21.9,80.4,21.9,57.2c0-6.6,2.4-12,6.2-16.2c-0.6-1.5-2.7-7.7,0.6-16c0,0,5.1-1.6,16.6,6.2c4.8-1.3,10-2,15.1-2c5.1,0,10.3,0.7,15.1,2C87,23.4,92.1,25,92.1,25c3.3,8.3,1.2,14.5,0.6,16c3.9,4.2,6.2,9.6,6.2,16.2c0,23.2-14.1,28.3-27.6,29.8c2.2,1.9,4.1,5.5,4.1,11.2c0,8.1-0.1,14.6-0.1,16.6c0,1.6,1.1,3.5,4.1,2.9c24-8,41.3-30.6,41.3-57.3C120.8,27,93.7,0,60.4,0z" />
<path d="M22.9,86.7c-0.1,0.3-0.6,0.4-1,0.2c-0.4-0.2-0.7-0.6-0.5-0.9c0.1-0.3,0.6-0.4,1-0.2C22.8,86,23,86.4,22.9,86.7L22.9,86.7zM22.1,86.2" />
<path d="M25.3,89.4c-0.3,0.3-0.9,0.1-1.2-0.3c-0.4-0.4-0.5-1-0.2-1.3c0.3-0.3,0.8-0.1,1.2,0.3C25.5,88.6,25.6,89.2,25.3,89.4L25.3,89.4zM24.7,88.8" />
<path d="M27.7,92.9c-0.4,0.3-1,0-1.3-0.5c-0.4-0.5-0.4-1.2,0-1.4c0.4-0.3,1,0,1.3,0.5C28.1,92,28.1,92.6,27.7,92.9L27.7,92.9zM27.7,92.9" />
<path d="M31,96.3c-0.3,0.4-1,0.3-1.6-0.2c-0.5-0.5-0.7-1.2-0.3-1.5c0.3-0.4,1-0.3,1.6,0.2C31.2,95.2,31.3,95.9,31,96.3L31,96.3zM31,96.3" />
<path d="M35.5,98.2c-0.1,0.5-0.8,0.7-1.5,0.5c-0.7-0.2-1.1-0.8-1-1.2c0.1-0.5,0.8-0.7,1.5-0.5C35.2,97.2,35.6,97.7,35.5,98.2L35.5,98.2zM35.5,98.2" />
<path d="M40.4,98.6c0,0.5-0.6,0.9-1.3,0.9c-0.7,0-1.3-0.4-1.3-0.9c0-0.5,0.6-0.9,1.3-0.9C39.8,97.7,40.4,98.1,40.4,98.6L40.4,98.6zM40.4,98.6" />
<path d="M45,97.8c0.1,0.5-0.4,1-1.1,1.1c-0.7,0.1-1.3-0.2-1.4-0.7c-0.1-0.5,0.4-1,1.1-1.1C44.3,97,44.9,97.3,45,97.8L45,97.8zM45,97.8" />
</svg>
</a>
</div>
<script type="text/javascript" src="scripts/quill.min.js"></script>
<script type="text/javascript" src="scripts/polyphony.js"></script>
<script type="text/javascript" src="scripts/polyphony-demo.js"></script>
<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-56586037-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>