Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
125 lines (117 loc) · 8.06 KB
/
Copy pathindex.html
File metadata and controls
125 lines (117 loc) · 8.06 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#f4f5f1" />
<meta name="description" content="A free photo editing studio. Describe a change and let AI transform your image." />
<title>Morphly — a little change, a new feeling</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=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="app.js" defer></script>
</head>
<body>
<header class="topbar">
<a class="brand" href="#main" aria-label="Morphly home">
<span class="brand-mark" aria-hidden="true"><span></span><span></span></span>
<span>Morphly</span>
</a>
<div class="topbar-right">
<span class="privacy-label"><span class="privacy-dot"></span> AI-POWERED · FREE TO TRY</span>
<a class="about-link" href="#about">About</a>
<button class="about-link sign-out" id="sign-out" type="button" hidden>Sign out</button>
</div>
</header>
<main id="main">
<section class="intro" aria-labelledby="page-title">
<div>
<p class="eyebrow">YOUR PHOTO, YOUR POINT OF VIEW</p>
<h1 id="page-title">A little change.<br /><span>A new feeling.</span></h1>
</div>
<p class="intro-copy">Describe the change you want. A new place, a different style, a detail added or removed: start with your words.</p>
</section>
<section class="studio" aria-label="Photo editing studio">
<div class="work-area">
<div class="work-toolbar">
<div class="work-label"><span class="live-indicator"></span><span id="workspace-label">YOUR CANVAS</span></div>
<div class="toolbar-actions">
<button class="icon-button" id="reset-button" type="button" title="Reset to original" aria-label="Reset to original" disabled>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4.3 8a6 6 0 1 1-.2 3.8M4.3 8V3.8M4.3 8h4.2" /></svg>
</button>
<button class="icon-button" id="download-button" type="button" title="Download image" aria-label="Download image" disabled>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3.5v8m0 0 3-3m-3 3-3-3M4 13.5v3h12v-3" /></svg>
</button>
<button class="icon-button" id="share-button" type="button" title="Share result" aria-label="Share result" disabled>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7.2 10.7 12.9 7m-5.7 6 5.7 3.3" /><circle cx="5.3" cy="11.6" r="2" /><circle cx="14.8" cy="5.9" r="2" /><circle cx="14.8" cy="15.2" r="2" /></svg>
</button>
</div>
</div>
<div class="preview" id="preview">
<div class="empty-state" id="empty-state">
<div class="empty-illustration" aria-hidden="true">
<svg viewBox="0 0 82 68"><rect x="7" y="9" width="68" height="50" rx="5" /><circle cx="27" cy="27" r="6" /><path d="m13 52 18-17 11 10 9-8 16 15" /><path d="M41 4v13m-5-8 5-5 5 5" /></svg>
</div>
<p class="empty-title">A blank canvas, for now.</p>
<p class="empty-hint">Drop in a photo or choose one from your device.</p>
<button class="upload-button" id="choose-image" type="button">
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 13V3m0 0L6.5 6.5M10 3l3.5 3.5M4 12v4h12v-4" /></svg>
Choose a photo
</button>
<p class="file-note">JPG, PNG or WebP · sent to Cloudflare Workers AI only when you generate</p>
</div>
<div class="comparison" id="comparison" hidden>
<img class="comparison-image original-image" id="original-image" alt="Original photo" />
<img class="comparison-image edited-image" id="edited-image" alt="Edited photo preview" />
<span class="compare-tag before-tag">BEFORE</span>
<span class="compare-tag after-tag">AFTER</span>
<div class="compare-line" id="compare-line" aria-hidden="true"><span></span></div>
<input class="compare-slider" id="compare-slider" type="range" min="0" max="100" value="50" aria-label="Compare original and edited photo" disabled />
</div>
<div class="drop-overlay" id="drop-overlay" aria-hidden="true">Drop your image to get started</div>
</div>
<div class="preview-footer">
<span id="image-meta">NO IMAGE SELECTED</span>
<span id="compare-readout">DRAG TO COMPARE</span>
</div>
</div>
<aside class="controls" aria-label="Editing controls">
<div class="controls-heading">
<span class="step-number">01</span>
<div><h2>Describe your edit</h2><p>Ask for the change in your own words.</p></div>
</div>
<div class="prompt-block">
<label class="field-label" for="prompt-input"><span class="step-number">02</span><span>Your instructions</span><span class="optional-label">UP TO 1,000 CHARACTERS</span></label>
<textarea id="prompt-input" rows="5" maxlength="1000" placeholder="Replace the background with a quiet beach at sunset. Keep the person, pose, and lighting natural."></textarea>
<div class="suggestion-row" aria-label="Example edit prompts">
<button class="suggestion" type="button" data-prompt="Replace the background with a beach at sunset. Keep the subject unchanged.">Beach background</button>
<button class="suggestion" type="button" data-prompt="Change the clothing to a blue denim jacket. Keep the person, pose, and background unchanged.">Change outfit</button>
<button class="suggestion" type="button" data-prompt="Replace the distracting object in the background with a leafy potted plant.">Replace an object</button>
</div>
<p class="prompt-note">Describe the changes clearly. Say what should change and what should stay recognizable.</p>
</div>
<label class="consent-row" for="consent-check">
<input id="consent-check" type="checkbox" />
<span class="custom-check" aria-hidden="true"></span>
<span>I have the right to edit this photo and agree to send it to Cloudflare Workers AI for processing.</span>
</label>
<button class="apply-button" id="apply-button" type="button" disabled>
<span>Generate edit</span>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11m-4-4 4 4-4 4" /></svg>
</button>
<p class="status-message" id="status-message" role="status" aria-live="polite">Choose a photo to begin.</p>
<button class="change-photo" id="change-photo" type="button" hidden>Choose a different photo</button>
</aside>
</section>
<section class="details" id="about" aria-label="About Morphly">
<div class="detail-item"><span class="detail-index">01 / PROCESSING</span><p>Your image is sent to Cloudflare Workers AI to create the edit. Morphly does not store uploaded photos.</p></div>
<div class="detail-item"><span class="detail-index">02 / FREE TO TRY</span><p>No Morphly account or checkout. The free Cloudflare AI allowance is limited and may run out.</p></div>
<div class="detail-item"><span class="detail-index">03 / CONSENSUAL</span><p>Only upload images you have the right to edit, and get permission from people shown in them.</p></div>
</section>
<footer class="page-footer"><span>© 2026 MORPHLY STUDIO</span><span>Made for curious eyes.</span><a href="#main">BACK TO TOP ↑</a></footer>
</main>
<input id="file-input" type="file" accept="image/png,image/jpeg,image/webp" hidden />
<canvas id="image-canvas" hidden></canvas>
</body>
</html>