-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
252 lines (246 loc) · 11.3 KB
/
index.html
File metadata and controls
252 lines (246 loc) · 11.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Remote Diffusion</title>
<link rel="preconnect" href="https://fonts.googleapis.com" >
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css" >
<link rel="icon" href="static/images/favicon.ico">
</head>
<body>
<div class="main-container">
<div class="purple-bubble"></div>
<div class="header">
<div class="green-bubble"></div>
<div class="logo">
<img src="static/images/logo.png" alt="Logo" class="logo-img" >
<div class="logo-text">Remote Diffusion</div>
</div>
<div class="menu">
<div class="menu-item"><a href="#how-to-start">how to start</a></div>
<div class="menu-item"><a href="#why-us">why us</a></div>
<!-- <div class="menu-item"><a href="#pricing">pricing</a></div> -->
<div class="menu-item"><a href="https://github.com/HashedViking/remote-diffusion-server" target="_blank">check on Github</a></div>
<div class="menu-item"><a href="#contact">contact us</a></div>
</div>
</div>
<div class="hero-container">
<div class="hero-section">
<div class="hero-left-container">
<div class="hero-text">
<span>Unlock Remote Access</span>
<span style="color: #c19bf3">To Your Local Stable Diffusion Anytime, Anywhere!</span>
<div class="hero-secondary-text">
Easily access your local Stable Diffusion from anywhere. Install the application on your computer or server, enter your access key. Enjoy unrestricted access with unlimited traffic.
</div>
</div>
<div class="hero-form">
<input
type="text"
class="hero-input"
placeholder="Enter your access key"
>
<button class="hero-button">Dashboard</button>
</div>
<div class="download-buttons-container">
<a href="static/install/remote-diffusion-0.1.0-Setup.exe" download class="download-button">
<span>Download for Windows</span>
<img src="static/images/Windows.png" alt="Windows Icon">
</a>
<!-- <button class="download-button">
<span>Download for Linux</span>
<img src="static/images/Linux.png" alt="Linux Icon">
</button> -->
</div>
</div>
<img
class="hero-image"
src="static/images/Illustration.png"
alt="Hero Image"
>
</div>
</div>
<div class="how-to-start" id="how-to-start">
<h1 class="how-to-start-title">How to start</h1>
<div class="container-grid">
<div class="grid-item">
<span class="grid-number">1</span>
<img src="static/images/1_download.png" class="grid-image" alt="Description">
<p class="grid-text"><a href="#" class="download-link">Download</a> the client app</p>
</div>
<div class="grid-item">
<span class="grid-number">2</span>
<img src="static/images/2_open.png" class="grid-image" alt="Description">
<p class="grid-text">Launch the client app and register a new key</p>
</div>
<div class="grid-item">
<span class="grid-number">3</span>
<img src="static/images/4_set_path.png" class="grid-image" alt="Description">
<p class="grid-text">Set paths for your webapp, file server (optional)</p>
</div>
<div class="grid-item">
<span class="grid-number">4</span>
<img src="static/images/5_set_login.png" class="grid-image" alt="Description">
<p class="grid-text">Set login and password for security</p>
</div>
<div class="grid-item">
<span class="grid-number">5</span>
<img src="static/images/3_start.png" class="grid-image" alt="Description">
<p class="grid-text">Press <b>start</b> at the client app or at the dashboard</p>
</div>
<div class="grid-item">
<span class="grid-number">6</span>
<img src="static/images/6_enjoy.png" class="grid-image" alt="Description">
<p class="grid-text">Enjoy remote access to SDWebUI/ComfyUI + FileServer</p>
</div>
</div>
</div>
<h1 class="why-us-title" id="why-us" style="margin-top: 120px;">Why Remote Diffusion?</h1>
<div class="why-us-columns">
<div class="column">
<p class="big-paragraph">
Utilize your own GPU for complex tasks without the expense of external servers.
</p>
<p class="paragraph-why-us">
<b>Effortless UI Access.</b>
Use your favorite local UIs like ComfyUI and SDWebUI with ease. Remote Diffusion seamlessly integrates, letting you access them remotely without complex setups. Just launch and go!
</p>
</div>
<div class="column">
<p class="paragraph-why-us">
<b>Collaborative Powerhouse.</b>
Share your GPU workstation with friends and team members effortlessly. Collaborate in real-time on projects and tasks, maximizing productivity without geographical limitations.
</p>
<p class="paragraph-why-us">
<b>Seamless Remote Access.</b>
Access your home PC from anywhere with ease. No more complex setups or technical hurdles—just simple, secure access to your desktop wherever you are.
</p>
</div>
<div class="column">
<p class="paragraph-why-us">
<b>Security.</b>
Your privacy is paramount. Remote Diffusion ensures that no data is stored on our servers, including logs. Your network and files remain safe from external threats with our robust security measures.
</p>
<p class="paragraph-why-us">
<b>Versatile and Flexible.</b>
Perfect for remote work, creative collaborations, or personal projects. Share access to files and folders with colleagues and work together without barriers.
</p>
</div>
</div>
<!-- <div class="pricing-container" id="pricing">
<h1 class="pricing-title">Pricing</h1>
<div class="pricing-cards">
<div class="pricing-card">
<h2 class="card-title">Basic</h2>
<p class="price-number">free</p>
<ul class="card-perks">
<li><b>Unlimited traffic</b></li>
<li>Client GUI</li>
<li>Supported OS: Windows</li>
<li>Supported web apps: SDWebUI, ComfyUI</li>
<li>Remote connections: 1</li>
</ul>
<div class="spacer"></div>
<button class="card-perk-button"><a href="#how-to-start">Get Started</a></button>
</div>
<div class="pricing-card">
<h2 class="card-title">Pro</h2>
<p class="price-number">$3/month</p>
<ul class="card-perks">
<li><b>Unlimited traffic</b></li>
<li>Client GUI</li>
<li>Supported OS: Windows, Linux</li>
<li>Supported web apps: Any</li>
<li>Remote connections: 5</li>
<li>CLI</li>
</ul>
<div class="spacer"></div>
<button class="card-perk-button"><a href="#" title="Choose Plan">Choose Plan</a></button>
</div>
<div class="pricing-card">
<h2 class="card-title">Enterprise</h2>
<p class="price-number">On request</p>
<ul class="card-perks">
<li><b>Unlimited traffic</b></li>
<li>Client GUI</li>
<li>Supported OS: Windows, Linux</li>
<li>Supported web apps: Any</li>
<li>Remote connections: On demand</li>
<li>CLI</li>
<li>Hosted ComfyUI, SDWebUI</li>
<li>API</li>
<li>24/7 customer support</li>
</ul>
<div class="spacer"></div>
<button class="card-perk-button"><a href="mailto:contact@remotediffusion.com">Contact Sales</a></button>
</div>
</div>
</div> -->
<div class="footer-container" id="contact">
<div class="footer-line"></div>
<div class="form-links-container">
<div class="form-container">
<h1 class="newsletter-title">Join our newsletter</h1>
<p-footer class="newsletter-text">Get all the latest news about the future of App </p-footer>
<div class="input-button-container">
<input class="email-input" type="email" placeholder="YOUR@EMAIL">
<button class="custom-submit-button">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
<path d="M2.5 24L24 2M24 2V21M24 2H5" stroke="#202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
<div class="social-button-container">
<a href="https://t.me/remotediffusion" target="_blank">on Telegram</a>
<a href="https://discord.gg/34wvZhFENw" target="_blank">on Discord</a>
<a href="https://github.com/HashedViking/remote-diffusion-server" target="_blank">on GitHub</a>
</div>
</div>
<div class="footer-line-2"></div>
<div class="get-in-touch-law-container">
<div class="get-in-touch-container">
<h1 class="get-in-touch-title">Get in touch</h1>
<a class="email-link" href="mailto:contact@remotediffusion.com">contact@remotediffusion.com</a>
</div>
<div class="law-container">
<a href="static/tos.html">Terms of Use</a>
<a href="static/privacy.html">Privacy Policy</a>
</div>
</div>
<div class="footer-line-3"></div>
<div class="copyright-design">
<p class="copyright-text">© All rights reserved</p>
<p class="website-credit">Design by <a class="credit-link" href="https://www.behance.net/annanedeliaeva">Anna Nedeliaeva</a></p>
</div>
</div>
</div>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector('.hero-button');
button.addEventListener('click', function() {
const input = document.querySelector('.hero-input');
const userKey = input.value;
if (userKey) {
window.location.href = `/rdapi/status/${userKey}`;
} else {
alert('Please enter a key.');
}
});
});
</script>
</body>
</html>