Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9a2c9bae86 | |||
| 43bbc053eb | |||
| ace3588b8c | |||
| c346673bd9 | |||
| 1ec359f546 | |||
| 5507942029 | |||
| 72a96a7d6c |
@@ -0,0 +1,72 @@
|
|||||||
|
/*=============Typo*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'lineal';
|
||||||
|
src: url('../typo/Lineal-Heavy.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'pressStart2P';
|
||||||
|
src: url('../typo/PressStart2P-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
src: url('../typo/Velvelyne-Light.ttf') format('truetype');
|
||||||
|
font-weight:lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============General*/
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--back-color: black;
|
||||||
|
--main-color: white;
|
||||||
|
--accent-color: #3CFF00;
|
||||||
|
--neon-color: #3CFF00;
|
||||||
|
|
||||||
|
color: var(--main-color);
|
||||||
|
font-size: 1rem;
|
||||||
|
background: var(--back-color);
|
||||||
|
font-family: 'velvelyne', sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > *{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome-panel {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'lineal', sans-serif;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ui-canvas {
|
||||||
|
display: block;
|
||||||
|
height: 1350px;
|
||||||
|
width: 1080px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
const CANVAS = document.getElementById("ui-canvas")
|
||||||
|
const UI_CUTTER = new Image(CANVAS)
|
||||||
|
const FORM = document.getElementById("cutter-form")
|
||||||
|
|
||||||
|
async function updateFromForm(){
|
||||||
|
let data = new FormData(FORM)
|
||||||
|
|
||||||
|
let image = data.get("image")
|
||||||
|
if(image.size > 0){
|
||||||
|
if(UI_CUTTER.currentImageFile != image){
|
||||||
|
await UI_CUTTER.setImage(image)
|
||||||
|
UI_CUTTER.clearGlitch()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
UI_CUTTER.clearImage()
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("welcome-panel").hidden = image.size > 0
|
||||||
|
document.getElementById("glitch-panel").hidden = image.size == 0
|
||||||
|
|
||||||
|
UI_CUTTER.render()
|
||||||
|
}
|
||||||
|
|
||||||
|
FORM.addEventListener("submit", e => {
|
||||||
|
e.preventDefault()
|
||||||
|
updateFromForm()
|
||||||
|
})
|
||||||
|
|
||||||
|
FORM.addEventListener("reset", e => {
|
||||||
|
FORM.elements["image"].value = ""
|
||||||
|
updateFromForm()
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById("download-btn").addEventListener("click", async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
let data = await UI_CUTTER.toBlob("image/jpeg", 1);
|
||||||
|
let a = document.createElement('a')
|
||||||
|
a.href = URL.createObjectURL(data)
|
||||||
|
a.download = UI_CUTTER.currentImageFile.name
|
||||||
|
a.click()
|
||||||
|
setTimeout(() => URL.revokeObjectURL(a.href), 10000)
|
||||||
|
})
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="cutter.css">
|
||||||
|
<title>Insta Ninja</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<form id="cutter-form">
|
||||||
|
<div id="welcome-panel">
|
||||||
|
<h1>Insta Ninja</h1>
|
||||||
|
<p>Séléctionne un photo pour la découper<br>en une grille au format du feed insta</p>
|
||||||
|
|
||||||
|
<input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" />
|
||||||
|
</div>
|
||||||
|
<div id="cutter-panel" hidden>
|
||||||
|
<canvas id="ui-canvas"></canvas>
|
||||||
|
<nav>
|
||||||
|
<button type="reset">Reset</button>
|
||||||
|
<button type="button" id="download-btn">Télécharger</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script type="module" src="cutter.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+3
-3
@@ -1769,9 +1769,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "7.3.1",
|
"version": "7.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
|
||||||
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
|
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
[
|
[
|
||||||
"vga_nar6_ta"
|
"vga_nar6_ta",
|
||||||
|
"openup42",
|
||||||
|
"berthasse",
|
||||||
|
"arlsn",
|
||||||
|
"djstarheartzzz",
|
||||||
|
"openup42"
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -6,5 +6,25 @@
|
|||||||
{
|
{
|
||||||
"name": "drags_nerds",
|
"name": "drags_nerds",
|
||||||
"folder": 2
|
"folder": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "berthasse",
|
||||||
|
"folder": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "berthasse",
|
||||||
|
"folder": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "arlsn",
|
||||||
|
"folder": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "djstarheartzzz",
|
||||||
|
"folder": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "openup42",
|
||||||
|
"folder": 1
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -136,6 +136,7 @@ html, body{
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
|
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
transition: 7.77s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#canvas .overlay {
|
#canvas .overlay {
|
||||||
@@ -300,11 +301,16 @@ html, body{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zFocus{
|
.zFocus{
|
||||||
|
z-index: revert;
|
||||||
z-index: 1312;
|
z-index: 1312;
|
||||||
border-color: var(--accent-color);
|
border-color: var(--accent-color);
|
||||||
border-width: thick;
|
border-width: thick;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#artistPannel.zFocus{
|
||||||
|
z-index: 3333;
|
||||||
|
}
|
||||||
|
|
||||||
.windowTitle{
|
.windowTitle{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:50px;
|
height:50px;
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ function titleAndContent(str){
|
|||||||
for(let line of contentData){
|
for(let line of contentData){
|
||||||
if(line.includes('http')||line.includes('@')){
|
if(line.includes('http')||line.includes('@')){
|
||||||
let linkData = line.split("# ");
|
let linkData = line.split("# ");
|
||||||
console.log(linkData[1]);
|
//console.log(linkData[1]);
|
||||||
let linkNoFormat;
|
let linkNoFormat;
|
||||||
let url = "";
|
let url = "";
|
||||||
if (linkData[1].includes('http')){
|
if (linkData[1].includes('http')){
|
||||||
@@ -31,7 +31,7 @@ function titleAndContent(str){
|
|||||||
} else if (linkData[1].includes('@')){
|
} else if (linkData[1].includes('@')){
|
||||||
url = 'mailto:' + linkData[1];
|
url = 'mailto:' + linkData[1];
|
||||||
}
|
}
|
||||||
console.log("url info", url)
|
//console.log("url info", url)
|
||||||
src.push({
|
src.push({
|
||||||
caption: linkData[0],
|
caption: linkData[0],
|
||||||
url: url
|
url: url
|
||||||
@@ -129,7 +129,7 @@ export async function loadPeopleData() {
|
|||||||
dateInfo: selectedPouet.created_at,
|
dateInfo: selectedPouet.created_at,
|
||||||
type: "link",
|
type: "link",
|
||||||
author: displayName,
|
author: displayName,
|
||||||
caption: textInfos.title + '.liens',
|
caption: textInfos.title + '.plus',
|
||||||
links: textInfos.links,
|
links: textInfos.links,
|
||||||
description: textInfos.content,
|
description: textInfos.content,
|
||||||
isSelected: false
|
isSelected: false
|
||||||
|
|||||||
@@ -23,10 +23,10 @@
|
|||||||
<div id="contactText">
|
<div id="contactText">
|
||||||
<p>Si tu veux nous contacter directement, tu peux:<br> - nous envoyer un mail<br> - ou un DM sur insta</p>
|
<p>Si tu veux nous contacter directement, tu peux:<br> - nous envoyer un mail<br> - ou un DM sur insta</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop>
|
<a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
|
||||||
E-MAIL
|
E-MAIL
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop>
|
<a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
|
||||||
INSTA
|
INSTA
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,7 +24,6 @@
|
|||||||
<div id="linkRow">
|
<div id="linkRow">
|
||||||
<a href="#" class="textBtnStyle">Lydia</a>
|
<a href="#" class="textBtnStyle">Lydia</a>
|
||||||
<a href="#" class="textBtnStyle">Paypal</a>
|
<a href="#" class="textBtnStyle">Paypal</a>
|
||||||
<a href="#" class="textBtnStyle">SumUp</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,7 +75,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#linkRow .textBtnStyle{
|
#linkRow .textBtnStyle{
|
||||||
width: 27%;
|
width: 40%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
margin-bottom: 16.1px;
|
margin-bottom: 16.1px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -104,7 +104,7 @@
|
|||||||
emits: ['close','focus'],
|
emits: ['close','focus'],
|
||||||
computed: {
|
computed: {
|
||||||
selectedLink(){
|
selectedLink(){
|
||||||
console.log(this.selectedLink);
|
//console.log(this.selectedLink);
|
||||||
return dataStorage.selectedLink
|
return dataStorage.selectedLink
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -21,7 +21,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="windowContent" id="visualizerContent">
|
<div class="windowContent" id="visualizerContent">
|
||||||
<video controls id="displayedImgStyle" :src="selectedVideo.src"></video>
|
<video controls id="displayedImgStyle" :src="selectedVideo.src" :type="selectedVideo.format">
|
||||||
|
</video>
|
||||||
<div class="reactBar">
|
<div class="reactBar">
|
||||||
<p class="reactStatStyle">{{selectedVideo.like}}</p>
|
<p class="reactStatStyle">{{selectedVideo.like}}</p>
|
||||||
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
|
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
si tu as envie de participer !
|
si tu as envie de participer !
|
||||||
</p>
|
</p>
|
||||||
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
|
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
|
||||||
<button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
|
<button type="button" class="textBtnStyle" @click="openPannel('donation')">NOUS FAIRE UNE DONATION</button>
|
||||||
<button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
|
<button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="btnColumn">
|
<div id="btnColumn">
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ export default defineConfig({
|
|||||||
input: {
|
input: {
|
||||||
main: path.resolve(import.meta.dirname, 'index.html'),
|
main: path.resolve(import.meta.dirname, 'index.html'),
|
||||||
glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
|
glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
|
||||||
|
cutter: path.resolve(import.meta.dirname, 'cutter/index.html')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user