-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
267 lines (254 loc) · 17.4 KB
/
index.html
File metadata and controls
267 lines (254 loc) · 17.4 KB
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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strawberry Computer</title>
<!-- Open Graph / Social Media Card -->
<meta property="og:title" content="Strawberry Computer">
<meta property="og:description" content="Reimagining Computing with AI">
<meta property="og:image" content="https://strawberry.computer/images/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://strawberry.computer">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="stylesheet" href="styles.css">
<script
src="https://app.rybbit.io/api/script.js"
data-site-id="281"
defer
></script>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<svg id="strawberry-logo" width="60" height="60" viewBox="0 0 60 60">
<path class="strawberry-body" d="M30,10 Q45,5 40,30 Q38,50 30,55 Q22,50 20,30 Q15,5 30,10" fill="#ff3b5c"/>
<path class="strawberry-seeds" d="M25,20 L27,22 M33,20 L35,22 M29,25 L31,27 M25,30 L27,32 M33,30 L35,32 M29,35 L31,37 M25,40 L27,42 M33,40 L35,42" stroke="#ffeb3b" stroke-width="2" stroke-linecap="round"/>
<path class="strawberry-leaf" d="M30,10 Q20,0 15,5 Q10,10 20,12" fill="#4caf50"/>
<path class="strawberry-leaf" d="M30,10 Q40,0 45,5 Q50,10 40,12" fill="#4caf50"/>
</svg>
<h1>Strawberry Computer</h1>
</div>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#vision">Vision</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#join">Join Us</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="container">
<div class="hero-content">
<h2>Reimagining Computing with AI</h2>
<p>A truly personal device that adapts to you, not the other way around.</p>
<div class="showcase-section">
<div class="berrry-showcase">
<div class="app-fan">
<div class="app-card app-card-1" data-app="savespace">
<img src="https://berrry.app/admin/apps/savespace/screenshot?version=2" alt="SaveSpace - Bookmarking app" loading="lazy">
<div class="app-info">
<h3>SaveSpace</h3>
<p>Pocket-like bookmarking</p>
</div>
</div>
<div class="app-card app-card-2" data-app="moviesense">
<img src="https://berrry.app/admin/apps/moviesense/screenshot?version=2" alt="MovieSense - Movie recognition" loading="lazy">
<div class="app-info">
<h3>MovieSense</h3>
<p>Shazam for movies</p>
</div>
</div>
<div class="app-card app-card-center" data-app="pizzaparty">
<img src="https://berrry.app/admin/apps/pizzaparty/screenshot?version=2" alt="PizzaParty - Pizza calculator" loading="lazy">
<div class="app-info">
<h3>PizzaParty</h3>
<p>Pizza quantity calculator</p>
</div>
</div>
<div class="app-card app-card-3" data-app="icebreak">
<img src="https://berrry.app/admin/apps/icebreak/screenshot?version=2" alt="IceBreak - Conversation starters" loading="lazy">
<div class="app-info">
<h3>IceBreak</h3>
<p>Conversation starters</p>
</div>
</div>
<div class="app-card app-card-4" data-app="doodleboard">
<img src="https://berrry.app/admin/apps/doodleboard/screenshot?version=2" alt="DoodleBoard - Collaborative drawing" loading="lazy">
<div class="app-info">
<h3>DoodleBoard</h3>
<p>Collaborative drawing</p>
</div>
</div>
</div>
<div class="showcase-text">
<h3 class="showcase-title">Make tiny self-contained web apps with AI</h3>
<p class="showcase-tagline">Mention <a href="https://x.com/BerrryComputer" target="_blank">@BerrryComputer</a> on Twitter → get app back</p>
<a href="https://berrry.app" target="_blank" class="berrry-cta-hero">Try Berrry.app</a>
</div>
</div>
<div class="unpkg-showcase">
<div class="code-examples">
<div class="code-card">
<div class="code-header">
<span class="language">JavaScript</span>
</div>
<pre><code>import { leftPad } from
'https://unpkg.ai/esm/left-pad.js';
leftPad('hello', 10, '0');</code></pre>
</div>
</div>
<div class="showcase-text">
<h3 class="showcase-title">Generate JavaScript modules with AI</h3>
<p class="showcase-tagline">Import any module from a URL → AI generates it on-demand</p>
<a href="https://unpkg.ai" target="_blank" class="unpkg-cta-hero">Try unpkg.ai</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2 class="section-heading">About Strawberry Computer</h2>
<p>We're reimagining what a computer means now that AI is widely available, fast, and cheap.</p>
<p>No longer just a tool, but an extension of yourself that understands and adapts to your unique needs.</p>
</div>
</section>
<section id="problems" class="problems">
<div class="container">
<h2 class="section-heading">Problems We're Solving</h2>
<ul class="problems-list">
<li><strong>Health Over Engagement</strong><br>Addressing attention and health issues that app vendors have no incentive to solve</li>
<li><strong>Integrated Daily Tasks</strong><br>Making common tasks like rides, tickets and reservations first-class OS features</li>
<li><strong>Better App Flow</strong><br>Eliminating rigid app ecosystems with no natural flow between applications</li>
<li><strong>People-Centered Messaging</strong><br>Unifying fractured messaging spread across multiple platforms</li>
<li><strong>Real User Control</strong><br>Empowering users to modify apps and easily move data between services</li>
</ul>
</div>
</section>
<section id="vision" class="vision">
<div class="container">
<h2 class="section-heading">Our Vision</h2>
<div class="vision-columns">
<div class="vision-item">
<div class="vision-icon personal"></div>
<h3>Truly Personal</h3>
<p>A computer that adapts to your workflow, preferences, and needs — not one that forces you to adapt to it.</p>
</div>
<div class="vision-item">
<div class="vision-icon customizable"></div>
<h3>Infinitely Customizable</h3>
<p>Express what you want in natural language, and your computer will configure itself accordingly.</p>
</div>
<div class="vision-item">
<div class="vision-icon intelligent"></div>
<h3>Deeply Intelligent</h3>
<p>AI integration at every level means your computer learns and grows with you over time.</p>
</div>
<div class="roadmap">
<h3>Master Plan</h3>
<div class="roadmap-item">
<span class="version">v0</span>
<div class="roadmap-content">
<h4><a href="https://berrry.app" target="_blank">Berrry.app</a> <span class="status-badge delivered">✓ Delivered</span></h4>
<p>Make tiny self-contained web apps with AI. Mention <a href="https://x.com/BerrryComputer" target="_blank">@BerrryComputer</a> on Twitter and get your app back.</p>
</div>
</div>
<div class="roadmap-item">
<span class="version">v1</span>
<div class="roadmap-content">
<h4><a href="https://github.com/Strawberry-Computer/speakbuild" target="_blank">SpeakBuild</a> <span class="status-badge in-progress">🚧 In Progress</span></h4>
<p>Create apps by talking to your phone. Express an idea and watch it come to life as interactive widgets.</p>
</div>
</div>
<div class="roadmap-item">
<span class="version">v2</span>
<div class="roadmap-content">
<h4>AI Assistant</h4>
<p>Your AI assistant handles daily phone tasks. Text, calls, apps, and services - all through natural conversation.</p>
</div>
</div>
<div class="roadmap-item">
<span class="version">v3</span>
<div class="roadmap-content">
<h4>AI-Native Phone</h4>
<p>Hardware and software built for AI-first computing. A phone that adapts to you, not the other way around.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="projects">
<div class="container">
<h2 class="section-heading">Open Source Projects</h2>
<div class="project-cards">
<div class="project-card">
<h3>unpkg.ai</h3>
<p>AI-powered ESM module generation service that creates JavaScript modules on-demand using Pollinations.ai.</p>
<a class="github-button" href="https://github.com/Strawberry-Computer/unpkg.ai" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Strawberry-Computer/unpkg.ai on GitHub">Star on GitHub</a>
</div>
<div class="project-card">
<h3>Vibe Compiler</h3>
<p>Build applications from specifications in any language that LLMs can understand.</p>
<a class="github-button" href="https://github.com/Strawberry-Computer/vibe-compiler" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Strawberry-Computer/vibe-compiler on GitHub">Star on GitHub</a>
</div>
<div class="project-card">
<h3>SpeakBuild</h3>
<p>Our first consumer app: an AI assistant that adapts to user needs.</p>
<a class="github-button" href="https://github.com/Strawberry-Computer/speakbuild" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Strawberry-Computer/speakbuild on GitHub">Star on GitHub</a>
</div>
</div>
</div>
</section>
<section id="join" class="join">
<div class="container">
<h2 class="section-heading">Join the Future of Computing</h2>
<p>We're an early-stage company building the future of personal computing. Interested in what we're doing?</p>
<div class="cta-buttons">
<a href="https://t.me/StrawberryComputer" target="_blank" class="cta-button telegram">
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
</svg>
Telegram
</a>
<a href="https://github.com/Strawberry-Computer" target="_blank" class="cta-button github">
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub
</a>
<a href="https://x.com/BerrryComputer" target="_blank" class="cta-button twitter">
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
Twitter
</a>
<a href="https://reddit.com/u/BerrryBot" target="_blank" class="cta-button reddit">
<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
</svg>
Reddit
</a>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 Strawberry Computer. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
<!-- GitHub Buttons -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>