VoltEuropa/profile.volt.link
VoltEuropa/profile.volt.link
1
0
Fork 0
mirror of https://github.com/voltbonn/profile-picture-generator.git synced 2024-12-22 15:55:08 +00:00
Code Activity

added headers + css

Browse source
This commit is contained in:
thomasrosen 2021-01-21 19:33:07 +01:00
parent 536fb84bf8
commit 23835a0527
2 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.css
View file

@ -1,6 +1,11 @@
.App { .App {
text-align: center; text-align: center;
h2{
margin: 10vh 0 2vh 0;
font-size: calc(10px + 4vmin);
}
.HeaderImage{ .HeaderImage{
height: calc(10px + 30vmin); height: calc(10px + 30vmin);
max-width: 100%; max-width: 100%;

4
src/App.js
View file

@ -61,6 +61,8 @@ return (
<input type="file" onChange={handleImage} /> <input type="file" onChange={handleImage} />
<img src={HeaderImage} className="HeaderImage" /> <img src={HeaderImage} className="HeaderImage" />
<h2>Choose your Photo:</h2>
<label className="labelButton" tabIndex="0" style={{outline:'none'}}> <label className="labelButton" tabIndex="0" style={{outline:'none'}}>
{!!photo ? <img src={photo} /> : null} {!!photo ? <img src={photo} /> : null}
<span>Load Photo</span> <span>Load Photo</span>
@ -68,6 +70,8 @@ return (
</label> </label>
<FrameChooser onFrameChange={handleFrameURL} /> <FrameChooser onFrameChange={handleFrameURL} />
<h2>Download your Photo:</h2>
<img src={combinedImage} className="FinishedFrame" alt="Finished Frame" /> <img src={combinedImage} className="FinishedFrame" alt="Finished Frame" />
<button onClick={() => download(combinedImage, "volt-profile-picture.png", "image/png")}>Download Profile Picture</button> <button onClick={() => download(combinedImage, "volt-profile-picture.png", "image/png")}>Download Profile Picture</button>
</div> </div>