tarasis
/
motivational-picture-generator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made colors optional, with garish alts for now if none specified, also updated the placeholder image to server that I host so I'm not hitting someone elses

This commit is contained in:
Robert McGovern 2024-03-07 12:35:03 +00:00
parent cd4c279760
commit 9d0c53cefe
4 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -10,10 +10,10 @@ To start server
npm run dev npm run dev
``` ```
Make url request to `localhost:4000` with. Not providing all the parameters will cause the render to fail. Make url request to `localhost:4000` with. Not providing all the parameters will cause the render to fail atm. Have only added optional checking for CSS colors for now with garish defaults so I can see if something failed.
```bash ```bash
wget --output-document screenshot.png 'http://localhost:4200/submit/mpgParams?title=A Motivational Poster&sentence=something pithy&imageWidth=450px&imageUrl=https://picsum.photos/seed/1709802270038/300/300' wget --output-document screenshot.png 'http://localhost:4200/submit/mpgParams?title=A Motivational Poster&sentence=something pithy&imageWidth=600px&imageUrl=https://dj.tdn.wf/image/400x300/282828&titleColor=blue&sentenceColor=orange&borderColor=red&backgroundColor=%23107a00'
``` ```
This generates This generates

BIN
screenshots/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 359 KiB

After

Width:  |  Height:  |  Size: 32 KiB

16
views/poster.ejs
View File

@ -11,6 +11,22 @@
<link rel="stylesheet" href="assets/css/poster.css"> <link rel="stylesheet" href="assets/css/poster.css">
</head> </head>
<style>
:root {
<% if (mpgParams.titleColor) { %>
--font-color-title: <%=mpgParams.titleColor%>;
<% } %>
<% if (mpgParams.sentenceColor) { %>
--font-color-sentence: <%=mpgParams.sentenceColor%>;
<% } %>
<% if (mpgParams.borderColor) { %>
--border-color: <%=mpgParams.borderColor%>;
<% } %>
<% if (mpgParams.backgroundColor) { %>
--background-color: <%=mpgParams.backgroundColor%>;
<% } %>
}
</style>
<body> <body>
<%- include('header.ejs') -%> <%- include('header.ejs') -%>

23
www/assets/css/poster.css
View File

@ -1,8 +1,22 @@
body { body {
background-color: black; background-color: var(--background-color, #807a00);
display: grid; display: grid;
place-items: center; place-items: center;
color: white; /* color: var(--background-colour); */
}
h1 {
/* font-size: 3rem; */
/* text-align: center; */
color: var(--font-color-title, pink);
}
p {
color: var(--font-color-sentence, green);
}
footer p {
color: powderblue;
} }
main { main {
@ -15,6 +29,11 @@ img {
display: block; display: block;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
border-color: var(--border-color, pink);
border-radius: 10px;
border-width: 3px;
border-style: solid;
} }
footer { footer {