Compare commits

...

7 Commits

14 changed files with 189 additions and 14 deletions
+72
View File
@@ -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;
}
+42
View File
@@ -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)
})
+29
View File
@@ -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>
+3 -3
View File
@@ -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": {
+6 -1
View File
@@ -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
} }
] ]
+6
View File
@@ -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;
+3 -3
View File
@@ -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>&emsp;- nous envoyer un mail<br>&emsp;- ou un DM sur insta</p> <p>Si tu veux nous contacter directement, tu peux:<br>&emsp;- nous envoyer un mail<br>&emsp;- 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">
+1
View File
@@ -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')
}, },
}, },
} }