tuple/index.html at master · sschoger/tuple · GitHub

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
<!doctype html>
<html lang="en">

<head>
    <title>Tuple</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./dist/styles.css">

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@r00k" />
    <meta name="twitter:title" content="Tuple" />
    <meta name="twitter:description" content="A Screenhero Replacement" />
    <meta name="twitter:image" content="src/img/twitter-card.jpg" />
    <meta name="twitter:creator" content="@r00k" />

    <link rel="apple-touch-icon" sizes="180x180" href="src/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="src/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="src/favicon/favicon-16x16.png">
    <link rel="manifest" href="src/favicon/site.webmanifest">
    <link rel="mask-icon" href="src/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
</head>

<body class="bg-indigo-dark font-sans antialiased">
    <div class="border-t-8 border-indigo-dark" style="background-image: linear-gradient(-180deg, #FFFFFF 0%, #F4F6F9 100%);">
        <div class="container mx-auto px-6 pt-12 pb-20">
            <svg class="mb-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 52" width="140" height="52">
                <g>
                    <path fill="#1F2E41" d="M57.2 36V21.93h-4.68v-4.52h15.31v4.52h-4.7V36H57.2zm22.1.34c-5.43 0-8.5-2.7-8.5-8.01V17.41h5.88V28.1c0 2.41.52 3.61 2.63 3.61 2.08 0 2.6-1.2 2.6-3.64V17.41h5.93v10.87c0 5.59-3.33 8.06-8.53 8.06zM91.96 36V17.41h7.41c5.36 0 7.65 2.4 7.65 6.37v.1c0 3.88-2.58 6.06-7.39 6.06h-1.8V36h-5.87zm5.88-10.01h1.22c1.56 0 2.37-.7 2.37-2.08v-.1c0-1.43-.8-2-2.34-2h-1.25v4.18zM110.08 36V17.41h5.9v14.04h6.77V36h-12.67zm16 0V17.41h13.21v4.52h-7.33v2.63h5.82v4.13h-5.82v2.79h7.75V36h-13.63z"></path>
                    <polygon fill="#BFC6F1" points="8 18 32 10 32 52 8 44"></polygon>
                    <polygon fill="#4652AF" points="0 8 24 0 24 42 0 34"></polygon>
                </g>
            </svg>
            <div class="w-full lg:w-5/6">
                <div class="mb-8">
                    <h1 class="font-black text-black text-4xl md:text-5xl lg:text-6xl mb-4">Remember when Slack <span class="italic">stole</span><br> Screenhero from us?</h1>
                    <p class="text-grey-darkest text-xl md:text-2xl lg:text-3xl leading-tight">We do too, and it <span class="italic">sucked</span>.
                        <br>That's why we're on a mission to replace it.</h2>
                    </p>
                </div>
                <div class="text-grey-darkest text-base md:text-xl lg:text-xxl leading-normal">
                    <p class="mb-4 lg:mb-6"><span class="block float-left w-10 h-10  md:w-12 mr-1 md:h-12 md:mr-2 mt-2 lg:mt-3" style="text-indent: -9000px; background: url(src/svg/drop-w.svg) 0 0 no-repeat;">W</span><span class="text-black font-semibold text-xs md:text-sm lg:text-base uppercase tracking-wide">hen Slack bought Screehero</span>, we were sure someone new would come along to make a tool specifically for pair programming.</p>
                    <p class="mb-4 lg:mb-6">But <span class="italic">four years</span> later, no one has.</p>
                    <p class="mb-4 lg:mb-6">That sucks, because the remaining tools like <span class="italic">Skype</span> and <span class="italic">Hangouts</span> don't give both people full keyboard and mouse control.</p>
                    <p class="mb-4 lg:mb-6">Have you ever tried to dictate some code for your pair to write? Or narrated a set of vim commands? <span class="italic">Not fun.</span></p>
                    <p class="mb-4 lg:mb-6">Another problem: if you're going to type on a remote machine, the connection has to be super low-latency. This is the sort of thing that videoconferencing tools just don't care much about.</p>
                    <p class="mb-4 lg:mb-6">Since no one has built anything as close to as good as <span class="italic">Screenhero</span> was, we're building its spiritual successor.</p>
                    <p class="mb-6 lg:mb-8 font-bold text-black">If your sick of pairing over <span class="italic">Skype</span> or <span class="italic">Hangouts</span> give us your email and we’ll let you know when Tuple is ready</p>
                    <form class="w-full max-w-md">
                        <div class="block md:flex items-center rounded-lg shadow-none md:shadow-lg bg-tranparent md:bg-white">
                            <input class="bg-white border-none w-full rounded-lg md:rounded-none md:rounded-l-lg text-grey-darkest py-4 px-4 leading-tight md:shadow-none shadow-lg mb-6 md:mb-0" type="text" placeholder="dissatisfied-pair-programmer@github.com" aria-label="Full name">
                            <button class="w-full md:w-auto md:flex-no-shrink bg-indigo-dark hover:bg-indigo border-indigo-dark hover:border-indigo uppercase font-bold tracking-wide border-4 text-white py-4 px-4 rounded-lg md:rounded-none md:rounded-r-lg text-base md:shadow-none shadow-lg" type="button">
                                Stay in the Loop
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-indigo-dark">
        <div class="container mx-auto pt-16 pb-8" style="text-shadow: 0 1px 3px rgba(0,0,0,0.30);">
            <h2 class="font-extrabold text-2xl md:text-3xl text-white mb-8 px-6">Details we're sweating</h2>
            <div class="flex flex-wrap">
                <div class="w:full md:w-1/2 px-6">
                    <div class="flex mb-8">
                        <svg class="mr-6 flex-no-shrink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" width="54" height="54">
                            <g fill="none" stroke="#FFFFFF" stroke-linejoin="round" stroke-width="2" transform="translate(9 2)">
                                <path stroke-linecap="round" d="M2.81 27.96A18.12 18.12 0 0 1 6.46 4.4a18.67 18.67 0 0 1 24.12.03A18.12 18.12 0 0 1 34.16 28"></path>
                                <path d="M13.81 16.84a2.82 2.82 0 0 1 2.8-2.84c1.55 0 2.8 1.27 2.8 2.84v13.51l11 3.33A3.65 3.65 0 0 1 32.9 38s-2.1 11.36-2.39 13H13.36L4.78 37.96c-3.4-5.28 5.15-7.11 9.02 1.67l.01-22.79z"></path>
                            </g>
                        </svg>
                        <div class="leading-normal">
                            <h3 class="text-lg md:text-xl text-white font-bold">Full-time control for two</h3>
                            <p class="text-base md:text-lg text-blue-lighter">Seamless mouse and keyboard control for both parties (not easy, but essential).</p>
                        </div>
                    </div>
                </div>
                <div class="w:full md:w-1/2 px-6">
                    <div class="flex mb-8">
                        <svg class="mr-6 flex-no-shrink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" width="54" height="54">
                            <g fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(4 9)">
                                <rect width="6" height="12" y="24" rx=".5"></rect>
                                <rect width="6" height="18" x="10" y="18" rx=".5"></rect>
                                <rect width="6" height="24" x="20" y="12" rx=".5"></rect>
                                <rect width="6" height="30" x="30" y="6" rx=".5"></rect>
                                <rect width="6" height="36" x="40" rx=".5"></rect>
                            </g>
                        </svg>
                        <div class="leading-normal">
                            <h3 class="text-lg md:text-xl text-white font-bold">Snappy interactions</h3>
                            <p class="text-base md:text-lg text-blue-lighter">An obsession with ridiculously low latency (extra not easy, extra-extra essential).</p>
                        </div>
                    </div>
                </div>
                <div class="w:full md:w-1/2 px-6">
                    <div class="flex mb-8">
                        <svg class="mr-6 flex-no-shrink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" width="54" height="54">
                            <g fill="none" transform="translate(4 7)">
                                <rect width="46" height="40" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" rx="2"></rect>
                                <path stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M0 10h46"></path>
                                <path fill="#FFFFFF" fill-rule="nonzero" d="M6.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm6 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"></path>
                                <polyline stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="10 20 15 25 10 30"></polyline>
                                <path stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 26h8" />
                            </g>
                        </svg>
                        <div class="leading-normal">
                            <h3 class="text-lg md:text-xl text-white font-bold">Command-line friendly</h3>
                            <p class="text-base md:text-lg text-blue-lighter">A proper command-line interface (lol if your pairing tool isn't command-line driven).</p>
                        </div>
                    </div>
                </div>
                <div class="w:full md:w-1/2 px-6">
                    <div class="flex mb-8">
                        <svg class="mr-6 flex-no-shrink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" width="54" height="54">
                            <g fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(3 7)">
                                <ellipse cx="24" cy="15" rx="6" ry="3"></ellipse>
                                <ellipse cx="24" cy="3" rx="6" ry="3"></ellipse>
                                <ellipse cx="38" cy="9" rx="6" ry="3"></ellipse>
                                <ellipse cx="11" cy="9" rx="6" ry="3"></ellipse>
                                <path d="M19.47 4.97l-4.3 1.87m18.22.24l-4.87-2.11m-22.37 5.8l-3.95 1.7A2 2 0 0 0 1 14.32v13.4a2 2 0 0 0 1.17 1.82l20.03 9.11a2 2 0 0 0 1.6.03l21.97-9.16A2 2 0 0 0 47 27.67V14.3a2 2 0 0 0-1.2-1.83L42.4 11M23 23v15.82m23.63-25.67L23 23m0 0L1.36 13.16"></path>
                            </g>
                        </svg>
                        <div class="leading-normal">
                            <h3 class="text-lg md:text-xl text-white font-bold">Pluginability</h3>
                            <p class="text-base md:text-lg text-blue-lighter">A plugin system to let you customize your experience.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-black">
        <div class="container mx-auto py-16 px-6" style="text-shadow: 0 1px 3px rgba(0,0,0,0.30);">
            <h2 class="font-extrabold text-2xl md:text-3xl text-white mb-8">Frequently asked questions</h2>
            <div class="block md:flex border-t-2 border-grey-darkest leading-normal py-6">
                <h3 class="text-base md:text-lg text-white font-bold w:full md:w-1/3 pr-0 md:pr-3 mb-4 m:mb-0">What exactly are you making?</h3>
                <p class="text-base md:text-lg text-blue-lighter w:full md:w-2/3 pl-0 md:pl-3">A tool for programmers to pair on the same machine regardless of how far apart they are. Both people will have full control of the machine with their own mouse and keyboard. We also plan to spend a ridiculous amount of effort on making things super low-latency. That's the sort of thing Skype will never care about, but makes an enormous difference when trying to type on a remote machine.</p>
            </div>
            <div class="block md:flex border-t-2 border-grey-darkest leading-normal py-6">
                <h3 class="text-base md:text-lg text-white font-bold w:full md:w-1/3 pr-0 md:pr-3 mb-4 m:mb-0">And who are you guys?</h3>
                <p class="text-base md:text-lg text-blue-lighter w:full md:w-2/3 pl-0 md:pl-3"><a href="https://twitter.com/r00k" class="text-white hover:text-blue-lightest no-underline font-semibold">Ben</a>, <a href="https://github.com/robamaton" class="text-white hover:text-blue-lightest no-underline font-semibold">Joel</a>, and <a href="https://twitter.com/SpencerCDixon" class="text-white hover:text-blue-lightest no-underline font-semibold">Spencer</a>; three programmers who aren't happy with the options for remote pairing out there.</p>
            </div>
            <div class="block md:flex border-t-2 border-grey-darkest leading-normal py-6">
                <h3 class="text-base md:text-lg text-white font-bold w:full md:w-1/3 pr-0 md:pr-3 mb-4 m:mb-0">What do you look like</h3>
                <div class="block w:full md:w-2/3 pl-0 md:pl-3">
                    <img src="src/img/tuple-team.jpg">
                </div>
            </div>
            <div class="block md:flex border-t-2 border-grey-darkest leading-normal py-6">
                <h3 class="text-base md:text-lg text-white font-bold w:full md:w-1/3 pr-0 md:pr-3 mb-4 m:mb-0">What's next?</h3>
                <p class="text-base md:text-lg text-blue-lighter w:full md:w-2/3 pl-0 md:pl-3">Shipping a v1 to a limited alpha group.</p>
            </div>
            <div class="block md:flex border-t-2 border-grey-darkest leading-normal py-6">
                <h3 class="text-base md:text-lg text-white font-bold w:full md:w-1/3 pr-0 md:pr-3 mb-4 m:mb-0">Can I get in the alpha?</h3>
                <p class="text-base md:text-lg text-blue-lighter w:full md:w-2/3 pl-0 md:pl-3">Sorry, it's invite-only for now. But if you drop your email in the box above, we'll put you on the list for a future invite.</p>
            </div>
        </div>
</body>

</html>