commit
ce73b0b653
@ -0,0 +1,23 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
|
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,23 @@ |
||||
# Pride Background Generator |
||||
|
||||
A small single page app for generating custom pride backgrounds. The inspiration for this work is based off a background that I used for awhile that had the Trans, Lesbian, and Pride flags rotated 45 degrees. ([Source](https://www.reddit.com/r/traaaaaaannnnnnnnnns/comments/depebm/i_made_a_4k_wallpaper_that_has_the_trans_lesbian/)) The purpose of this app is to allow anyone to create their own background with any arrangement of flags. |
||||
|
||||
## Project setup |
||||
``` |
||||
npm ci |
||||
``` |
||||
|
||||
### Compiles and hot-reloads for development |
||||
``` |
||||
npm run serve |
||||
``` |
||||
|
||||
### Compiles and minifies for production |
||||
``` |
||||
npm run build |
||||
``` |
||||
|
||||
### Lints and fixes files |
||||
``` |
||||
npm run lint |
||||
``` |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
] |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "es5", |
||||
"module": "esnext", |
||||
"baseUrl": "./", |
||||
"moduleResolution": "node", |
||||
"paths": { |
||||
"@/*": [ |
||||
"src/*" |
||||
] |
||||
}, |
||||
"lib": [ |
||||
"esnext", |
||||
"dom", |
||||
"dom.iterable", |
||||
"scripthost" |
||||
] |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@ |
||||
{ |
||||
"name": "pride-background", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build", |
||||
"lint": "vue-cli-service lint" |
||||
}, |
||||
"dependencies": { |
||||
"core-js": "^3.8.3", |
||||
"vue": "^3.2.13" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.12.16", |
||||
"@babel/eslint-parser": "^7.12.16", |
||||
"@vue/cli-plugin-babel": "~5.0.0", |
||||
"@vue/cli-plugin-eslint": "~5.0.0", |
||||
"@vue/cli-service": "~5.0.0", |
||||
"eslint": "^7.32.0", |
||||
"eslint-plugin-vue": "^8.0.3" |
||||
}, |
||||
"eslintConfig": { |
||||
"root": true, |
||||
"env": { |
||||
"node": true |
||||
}, |
||||
"extends": [ |
||||
"plugin:vue/vue3-essential", |
||||
"eslint:recommended" |
||||
], |
||||
"parserOptions": { |
||||
"parser": "@babel/eslint-parser" |
||||
}, |
||||
"rules": {} |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions", |
||||
"not dead", |
||||
"not ie 11" |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@ |
||||
<!DOCTYPE html> |
||||
<html lang=""> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,18 @@ |
||||
<template> |
||||
<div class="app"> |
||||
<div class="sidebar"> |
||||
<ImageSettings /> |
||||
</div> |
||||
<div class="body"> |
||||
<ImagePreview /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import ImageSettings from './components/ImageSettings.vue' |
||||
import ImagePreview from './components/ImagePreview.vue' |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,343 @@ |
||||
<template> |
||||
<div class="flag"> |
||||
<h3> |
||||
Flag #{{ index + 1 }} |
||||
<button @click="$emit('remove')">Remove Flag</button> |
||||
</h3> |
||||
|
||||
<label>Flag Type</label> |
||||
<select v-model="selectedFlagTypeId"> |
||||
<option |
||||
disabled |
||||
value=""> |
||||
Select a flag type |
||||
</option> |
||||
<option |
||||
v-for="flagType in flagTypes" |
||||
:key="flagType.id" |
||||
:value="flagType.id"> |
||||
{{ flagType.label }} |
||||
</option> |
||||
</select> |
||||
|
||||
<div class="bars" v-if="selectedFlagTypeId === 'custom'"> |
||||
<h4> |
||||
Bars |
||||
<button @click="addBar">Add Bar</button> |
||||
</h4> |
||||
|
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { defineProps, ref } from 'vue' |
||||
|
||||
defineProps({ |
||||
index: Number |
||||
}) |
||||
|
||||
const selectedFlagTypeId = ref('') |
||||
const flagTypes = ref([ |
||||
{ |
||||
id: 'aceflux', |
||||
label: 'Aceflux', |
||||
bars: [ |
||||
'#C82067', |
||||
'#BCC5C6', |
||||
'#EC6D87', |
||||
'#91479B', |
||||
'#800080', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'agender', |
||||
label: 'Agender', |
||||
bars: [ |
||||
'#000', |
||||
'#BCC5C6', |
||||
'#FFF', |
||||
'#B5F582', |
||||
'#FFF', |
||||
'#BCC5C6', |
||||
'#000', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'androgyne', |
||||
label: 'Androgyne', |
||||
bars: [ |
||||
'#FE007F', |
||||
'#9832FF', |
||||
'#00B8E7', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'aromantic', |
||||
label: 'Aromantic', |
||||
bars: [ |
||||
'#3AA740', |
||||
'#A8D47A', |
||||
'#FFF', |
||||
'#ABABAB', |
||||
'#000', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'asexual', |
||||
label: 'Asexual', |
||||
bars: [ |
||||
'#000', |
||||
'#A6A7A6', |
||||
'#FFF', |
||||
'#820082', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'bigender', |
||||
label: 'Bigender', |
||||
bars: [ |
||||
'#ED78AB', |
||||
'#FEF54D', |
||||
'#FFF', |
||||
'#AE6DBE', |
||||
'#719EE3', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'bisexual', |
||||
label: 'Bisexual', |
||||
bars: [ |
||||
'#D80071', |
||||
'#744E96', |
||||
'#0035A9', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'ceterosexual', |
||||
label: 'Ceterosexual', |
||||
bars: [ |
||||
'#FCF980', |
||||
'#169C47', |
||||
'#FFF', |
||||
'#000', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'demiboy', |
||||
label: 'Demiboy', |
||||
bars: [ |
||||
'#7F7F7F', |
||||
'#C4C4C4', |
||||
'#9AD9EB', |
||||
'#FFF', |
||||
'#9AD9EB', |
||||
'#C4C4C4', |
||||
'#7F7F7F', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'demigender', |
||||
label: 'Demigender', |
||||
bars: [ |
||||
'#7F7F7F', |
||||
'#C4C4C4', |
||||
'#FAFF72', |
||||
'#FFF', |
||||
'#FAFF72', |
||||
'#C4C4C4', |
||||
'#7F7F7F', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'demigirl', |
||||
label: 'Demigirl', |
||||
bars: [ |
||||
'#7F7F7F', |
||||
'#C4C4C4', |
||||
'#FFAEC9', |
||||
'#FFF', |
||||
'#FFAEC9', |
||||
'#C4C4C4', |
||||
'#7F7F7F', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'fraysexual', |
||||
label: 'Fraysexual', |
||||
bars: [ |
||||
'#226CB5', |
||||
'#93E7DD', |
||||
'#FFF', |
||||
'#636363', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'mlm', |
||||
label: 'MLM', |
||||
bars: [ |
||||
'#008F72', |
||||
'#1BD0AD', |
||||
'#9BEAC4', |
||||
'#FFF', |
||||
'#7DB1E5', |
||||
'#4E45CD', |
||||
'#390B7A', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'genderfluid', |
||||
label: 'Genderfluid', |
||||
bars: [ |
||||
'#FF77A5', |
||||
'#F5F5F5', |
||||
'#C009D8', |
||||
'#232323', |
||||
'#2C39BF', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'genderqueer', |
||||
label: 'Genderqueer', |
||||
bars: [ |
||||
'#B880DE', |
||||
'#FFF', |
||||
'#478318', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'greysexual', |
||||
label: 'Greysexual', |
||||
bars: [ |
||||
'#740195', |
||||
'#AEB2AA', |
||||
'#FFF', |
||||
'#AEB2AA', |
||||
'#740195', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'lesbian', |
||||
label: 'Lesbian', |
||||
bars: [ |
||||
'#D52800', |
||||
'#FD9954', |
||||
'#FFF', |
||||
'#D261A4', |
||||
'#A40061', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'nonbinary', |
||||
label: 'NonBinary', |
||||
bars: [ |
||||
'#FEF32A', |
||||
'#FEFEFE', |
||||
'#9D57D2', |
||||
'#000', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'omnisexual', |
||||
label: 'Omnisexual', |
||||
bars: [ |
||||
'#FF9DCF', |
||||
'#FF51C0', |
||||
'#1A0042', |
||||
'#675FFF', |
||||
'#8EA9FF', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'pangender', |
||||
label: 'Pangender', |
||||
bars: [ |
||||
'#FFF798', |
||||
'#FFDDCD', |
||||
'#FFEBFB', |
||||
'#FFF', |
||||
'#FFEBFB', |
||||
'#FFDDCD', |
||||
'#FFF798', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'pansexual', |
||||
label: 'Pansexual', |
||||
bars: [ |
||||
'#FF148E', |
||||
'#FFDA00', |
||||
'#14B5FF', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'polysexual', |
||||
label: 'Polysexual', |
||||
bars: [ |
||||
'#F614BA', |
||||
'#00D769', |
||||
'#1593F5', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'philadelphia-pride', |
||||
label: 'Philadelphia Pride', |
||||
bars: [ |
||||
'#000', |
||||
'#794E10', |
||||
'#E60000', |
||||
'#FF8E00', |
||||
'#FFEF00', |
||||
'#00821B', |
||||
'#004BFF', |
||||
'#770089', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'pride', |
||||
label: 'Pride', |
||||
bars: [ |
||||
'#E60000', |
||||
'#FF8E00', |
||||
'#FFEF00', |
||||
'#00821B', |
||||
'#004BFF', |
||||
'#770089', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'transgender', |
||||
label: 'Transgender', |
||||
bars: [ |
||||
'#5CCFFA', |
||||
'#F4ABB8', |
||||
'#FFF', |
||||
'#F4ABB8', |
||||
'#5CCFFA', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'trigender', |
||||
label: 'Trigender', |
||||
bars: [ |
||||
'#FF95C4', |
||||
'#9580FF', |
||||
'#6AD969', |
||||
'#9580FF', |
||||
'#FF95C4', |
||||
], |
||||
}, |
||||
{ |
||||
id: 'custom', |
||||
label: 'Custom', |
||||
bars: [], |
||||
}, |
||||
]) |
||||
|
||||
function addBar() { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
</style> |
||||
@ -0,0 +1,9 @@ |
||||
<template> |
||||
<canvas /> |
||||
</template> |
||||
|
||||
<script setup> |
||||
</script> |
||||
|
||||
<style scoped> |
||||
</style> |
||||
@ -0,0 +1,67 @@ |
||||
<template> |
||||
<div class="settings"> |
||||
<h1>Settings</h1> |
||||
|
||||
<div class="field"> |
||||
<label for="width">Width</label> |
||||
<input |
||||
type="number" |
||||
id="width" |
||||
v-model="width"/> |
||||
</div> |
||||
|
||||
<div class="field"> |
||||
<label for="height">Height</label> |
||||
<input |
||||
type="number" |
||||
id="height" |
||||
v-model="height" /> |
||||
</div> |
||||
|
||||
<h2> |
||||
Flags |
||||
<button @click="addFlag">Add Flag</button> |
||||
</h2> |
||||
|
||||
<div |
||||
class="field" |
||||
v-for="(flag, index) in flags" |
||||
:key="index"> |
||||
<FlagSettings |
||||
:index="index" |
||||
@remove="removeFlag(index)" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref } from 'vue' |
||||
import FlagSettings from './FlagSettings.vue' |
||||
|
||||
const width = ref(window.screen.width) |
||||
const height = ref(window.screen.height) |
||||
const flags = ref([ |
||||
{ |
||||
numberOfBars: 1, |
||||
bars: [ |
||||
'#000000' |
||||
] |
||||
} |
||||
]) |
||||
|
||||
function addFlag() { |
||||
flags.value.push({ |
||||
numberOfBars: 1, |
||||
bars: [ |
||||
'#000000' |
||||
] |
||||
}) |
||||
} |
||||
|
||||
function removeFlag(index) { |
||||
flags.value = flags.value.filter((e, i) => i != index) |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
</style> |
||||
@ -0,0 +1,4 @@ |
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
createApp(App).mount('#app') |
||||
@ -0,0 +1,4 @@ |
||||
const { defineConfig } = require('@vue/cli-service') |
||||
module.exports = defineConfig({ |
||||
transpileDependencies: true |
||||
}) |
||||
Loading…
Reference in new issue