Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: really init commit #1

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

WIP: really init commit #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 155 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>PiterJS image generator</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&amp;display=swap&amp;subset=cyrillic" id="web-font">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.css" />
<link rel="stylesheet" href="styles/index.css">
</head>

<body>
<div class="drawer">
<form action="">
<fieldset>
<legend>Convert colors</legend>
<fieldset>
<legend>On original image:</legend>
<div><b>Colors</b></div>
<div>
<label for="color-primary">Primary: </label>
<input type="text" name="color-primary" id="color-primary" value="#F7DF1E" class="jscolor">
</div>
<div>
<label for="color-secondary">Secondary: </label>
<input type="text" name="color-secondary" id="color-secondary" value="#F7DF1E" class="jscolor">
</div>
</fieldset>
<fieldset>
<legend>To generated image:</legend>
<div><b>Colors</b></div>
<div>
<label for="color-primary">Primary: </label>
<input type="text" name="color-primary" id="color-primary" value="#F7DF1E" class="jscolor">
</div>
<div>
<label for="color-secondary">Secondary: </label>
<input type="text" name="color-secondary" id="color-secondary" value="#F7DF1E" class="jscolor">
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Data:</legend>
<fieldset>
<legend>Sizes:</legend>
<div>
<label for="predefined">Predefined:</label>
<!-- https://amplifr.com/blog/ru/pictures/ -->
<!-- http://tilda.education/articles-images-for-social -->
<select name="predefined" id="predefined">
<optgroup label="Universal">
<option value="1024x512">Пост</option>
</optgroup>
<optgroup label="Facebook">
<option value="1200x630">Картинка к внешним</option>
<option value="1200x630">Картинка для поста</option>
<option value="820x312">Обложка универсальная</option>
<option value="851x315">Обложка десктоп</option>
<option value="640x360">Обложка смартфон</option>
<option value="180x180">Фото профиля</option>
</optgroup>
<optgroup label="VK">
<option value="1024x512">Пост с картинкой</option>
<option value="506x253">Пост ссылки</option>
<option value="1590x400">Обложка страницы</option>
</optgroup>
</select>
</div>
<div>
<label for="width">Width:</label>
<input type="number" id="width" id="width" value="1024">
</div>
<div>
<label for="height">Height:</label>
<input type="number" name="height" id="height" value="512">
</div>
</fieldset>
<fieldset>
<legend>Data:</legend>
<div>
<label for="number">Meetup №:</label>
<input type="number" name="number" id="number" value="33">
</div>
<div>
<label for="number">Address:</label>
<input type="text" value="">
</div>
<div>
<label for="office">Company:</label>
<input type="text" name="office" id="office" value="офис Wrike sdfds fsdf sdfsd fsdf">
</div>
<div>
<label for="number">Date:</label>
<input type="datetime-local" value="">
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Speakers</legend>
<fieldset>
<legend>1 speaker:</legend>
<div>
<label for="number">Report:</label>
<input type="text" value="">
</div>
<div>
<label for="number">Fullname:</label>
<input type="text" value="">
</div>
<div>
<label for="number">Time:</label>
<input type="text" value="">
</div>
</fieldset>
<fieldset>
<legend>2 speaker:</legend>
<div>
<label for="number">Report:</label>
<input type="text" value="">
</div>
<div>
<label for="number">Fullname:</label>
<input type="text" value="">
</div>
<div>
<label for="number">Time:</label>
<input type="text" value="">
</div>
</fieldset>
<fieldset>
<legend>3 speaker:</legend>
<div>
<label for="number">Report:</label>
<input type="text" value="">
</div>
<div>
<label for="number">Fullname:</label>
<input type="text" value="">
</div>
<div>
<label for="number">Time:</label>
<input type="text" value="">
</div>
</fieldset>
</fieldset>
</form>
</div>
<main>
<output class="image" />
</main>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script type="module" src='./scripts/index.js'></script>
</body>

</html>
51 changes: 51 additions & 0 deletions scripts/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import {$} from './query/index.js'
import {html, render} from 'https://unpkg.com/lit-html?module'

const myTemplate = (name) => html`
<svg width="1024" height="512" viewBox="0 0 1024 512" fill="none" xmlns="http://www.w3.org/2000/svg" id="image">
<defs>
<clipPath id="clip0">
<rect width="1024" height="512" fill="white"/>
</clipPath>
</defs>
<style>
:root {
--color-brand: #F7DF1E;
--color-primary: #F7DF1E;
--color-secondary: red;
--color-default: #000;
}
text {
font-family: Montserrat, sans-serif;
}
.small {
font-size: 72px;
font-weight: 900;
fill: var(--color-default);
}
.normal {
font-size: 42px;
font-weight: 500;
fill: #636363;
}
</style>
<g clip-path="url(#clip0)">
<rect width="1024" height="512" fill="white"/>
<!-- background: -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000349998 0.000244021H1024V512H0.000349998V0.000244021Z" fill="white"/>
<text x="432" y="270" class="small" id="svg-title">PiterJS #<tspan id="svg-number">33</tspan></text>
<text x="432" y="324" width="20" class="normal" id="svg-subtitle">17.01.2019, <tspan id="svg-office">офис ok.ru</tspan></text>
<!-- lines around logo -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M146.997 325.942H144.658L132.997 325.984V374.998H181.997L181.908 363.303V361.047H146.997V325.942Z" fill="var(--color-secondary)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M363.004 142.001H314.003L314.093 153.697V155.953H349.004V191.058H351.342L363.004 191.016V142.001Z" fill="var(--color-secondary)"/>
<!-- logo -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M226.327 204.797L226.393 207.945H233.718H235.001L233.454 213.309C231.025 215.392 225.954 220.737 230.679 222.919L229.534 226.898H205.014V232.188C206.574 232.643 207.7 233.951 207.7 235.498C207.7 237.423 205.955 238.989 203.807 238.989C201.659 238.989 199.921 237.423 199.921 235.498C199.921 233.951 201.047 232.643 202.606 232.188V226.898H180.156C180.118 225.996 177.932 222.701 176.657 221.34C174.062 218.573 170.927 215.101 170.546 213.984C170.099 212.676 170.647 210.774 170.647 210.774L164.374 202.722V199.532H157.001L158.866 197.104L157.055 194.617H165.248V202.575L175.241 212.594L176.128 212.609V210.315H178.438V210.315L178.543 204.797H171.502C168.369 200.205 168.849 193.222 172.012 186.936H178.881L178.933 184.184H178.929H171.556L173.421 181.757L171.61 179.269H179.803V184.158H179.809L179.861 186.936H186.744C184.992 192.918 183.948 200.205 187.081 204.797H180.199L180.304 210.315V210.315H186.562H201.239L201.282 206.874H197.886H191.424C181.664 199.369 193.033 176.893 193.033 176.893H201.652L201.726 170.912H194.857L196.722 168.485L194.911 165.997H203.104V170.892L203.178 176.893H217.84C217.84 176.893 206.471 199.369 216.231 206.874H203.55L203.592 210.315H204.15H215.33H216.901C217.205 209.001 218.295 207.945 219.067 207.945H220.632H224.527H224.527L224.593 204.797H216.958C213.825 200.205 214.869 192.918 216.621 186.936H224.965L225.022 184.184H217.651L219.516 181.757L217.705 179.269H225.898V184.162L225.955 186.936H234.369C232.617 192.918 231.574 200.205 234.707 204.797H226.327ZM188.078 213.17H185.779V215.444H188.078V213.17ZM192.494 213.17H190.187V215.444H192.494V213.17ZM196.903 213.17H194.604V215.444H196.903V213.17ZM199.012 215.444H201.317V213.17H199.012V215.444ZM209.016 213.17H206.717V215.444H209.016V213.17ZM213.431 213.17H211.125V215.444H213.431V213.17ZM217.84 213.17H215.541V215.444H217.84V213.17ZM222.256 213.17H219.949V215.444H222.256V213.17ZM194.945 328.195L194.945 328.195C200.088 339.031 210.22 348.01 227.672 348.01C246.998 348.01 260.243 337.792 260.243 315.343V241.341H238.426V315.036C238.426 325.873 233.906 328.659 226.737 328.659C219.258 328.659 216.14 323.551 212.712 317.513L194.945 328.195L194.945 328.193V328.195ZM289.859 315.654L272.094 325.873C278.483 338.414 291.574 348.012 311.833 348.012C332.56 348.012 347.989 337.33 347.989 317.822C347.989 299.708 337.547 291.659 319.001 283.762L313.547 281.44C304.197 277.415 300.145 274.783 300.145 268.28C300.145 263.017 304.197 258.991 310.587 258.991C316.82 258.991 320.872 261.623 324.612 268.28L341.599 257.443C334.431 244.902 324.457 240.102 310.587 240.102C291.106 240.102 278.639 252.488 278.639 268.745C278.639 286.394 289.08 294.754 304.821 301.411L310.275 303.734C320.249 308.068 326.17 310.7 326.17 318.131C326.17 324.325 320.406 328.815 311.366 328.815C300.613 328.815 294.535 323.241 289.859 315.654Z" fill="#010203"/>
<!-- stripes left top -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M702.114 625.446L1154.01 153.012L1153.2 276.589L701.314 749.024L702.114 625.446ZM631.335 640.38L818.374 444.9L818.46 483.787L631.003 679.267L631.335 640.38ZM1137.65 320.742L685.755 793.177L678.89 830L1130.78 357.565L1137.65 320.742Z" fill="var(--color-primary)"/>
<!-- stripes right bottom -->
<path fill-rule="evenodd" clip-rule="evenodd" d="M-157.498 102.502L158.686 -228V-22.5016L13.3969 129.366C-69.6771 216.202 -157.498 308 -157.498 308V134.234L-196 174.479L-195.633 158.472L-157.498 118.522V102.502ZM93.2543 69.6879L299.905 -146.8L300.001 -103.733L92.8876 112.755L93.2543 69.6879Z" fill="var(--color-primary)"/>
</g>
</svg>`;

// Render the template to the document
export const renderImage = () => render(myTemplate('World'), $('.image'))
44 changes: 44 additions & 0 deletions scripts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// import Pickr from 'https://cdn.jsdelivr.net/npm/@simonwep/[email protected]/dist/pickr.min.js'
import {id, $, $$} from './query/index.js'
import {renderImage} from './image.js'

const $primaryPicker = id('color-primary')
const $secondaryPicker = id('color-secondary')
const $$colors = $$('.jscolor')

const $width = id('width')
const $height = id('height')
const $predefined = id('predefined')
const $number = id('number')
const $office = id('office')

const $image = id('image')

const ready = event => {
$$colors.forEach($color => {
// https://github.com/Simonwep/pickr
const pickr = Pickr.create({
el: $color,

components: {

// Main components
preview: true,

// Input / output Options
interaction: {
hex: true,
input: true,
clear: true,
save: true
}
}
});
})
}

// TODO: convert to canvas https://jsfiddle.net/Wijmo5/h2L3gw88/

renderImage()

document.addEventListener('DOMContentLoaded', ready)
5 changes: 5 additions & 0 deletions scripts/query/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const id = id => document.getElementById(id)

export const $ = query => document.querySelector(query)

export const $$ = query => Array.from(document.querySelectorAll(query))
47 changes: 47 additions & 0 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex;
max-height: 100vh;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #f0f0f0;
}

.image {
/*padding: 10px;*/
}

.image svg {
max-width: 100%;
}

.drawer {
max-height: 100%;
overflow-x: hidden;
overflow-y: scroll;
background-color: #f0f0f0;
}

form {
position: relative;
font-family: 'Nunito Sans', sans-serif;
}

fieldset {
padding: 10px;
}

input,
select {
width: 100%;
border: 1px solid #aaa;
border-radius: 3px;
padding: 4px 8px;
line-height: 1.2em;
}