TEMP

4 years ago in HTML

                            <!doctype html>
<html>
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
* {
 font-family: "Source Sans Pro", Verdana, sans-serif;
}
body, #navbtn, #navcontent {
 width: 100%;
}
body {
 margin: 0px;
 padding: 0px;
}
#navcontent {
 font-size: 4vmin;
 height: 0px;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.5s, height 0.5s;
}
#nav {
 width: 96%;
 font-family: Verdana;
 font-size: 5vmin;
 background: #52b6ff;
 position: absolute;
 left: 0;
 top: 0;
 padding: 2%;
}
#navbtn {
 color: white;
}
#navcontent a {
 color: white;
 text-decoration: none;
 display: block;
 white-space: nowrap;
 overflow: scroll;
}
#navlogo {
 height: 50px;
}
#content {
 text-align: center;
 margin-top: 65px;
 padding: 15px;
 font-size: 4.75vmin;
}
.shop-block {
 vertical-align: top;
 display: inline-block;
 max-width: 75vmin;
 word-break: break-word;
 box-shadow: 0px 2px 5px rgb(150,150,150);
 margin: 15px;
}
.shop-block img {
 width: 100%;
}
</style>
</head>
<body>
<div id="nav">
  <div id="navbtn"><img id="navlogo" src="logo.png" /></div>
  <div id="navcontent" class="navcontent-closed">
   <a href="#" onClick="se(this.innerHYML);">Accessoires (bijouterie, maroquinerie, cosmétique)</a>
   <a href="#" onClick="se(this.innerHTML);">Alimentation (frais, sec, spiritueux)</a>
   <a href="#" onClick="se(this.innerHTML);">Loisirs (créatif, livres, jeunesse)</a>
   <a href="#" onClick="se(this.innerHTML);">Maison (meuble, déco, électroménager)</a>
   <a href="#" onClick="se(this.innerHTML);">Services</a>
   <a href="#" onClick="se(this.innerHTML);">Vêtements (homme, femme, enfant)</a>
  </div>
</div>
<div id="content">
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.7/xlsx.full.min.js"></script>
<script>
document.querySelector("#navbtn").addEventListener("click", function() {
 let e = document.querySelector("#navcontent");
 if(e.style.height === "0px") {
  e.style.height = "120px";
  e.style.transform = "scaleY(1)";
 } else {
  e.style.height = "0px";
  e.style.transform = "scaleY(0)";
 }
});
document.querySelector("#navbtn").click();
function se(s) {
 document.querySelector("#navbtn").click();
 window.setTimeout(function() {
  location.search = "?search="+encodeURI(s);
 },1000);
}
const MAX_CHARS = 250;
const TMP_LOGO_URL = "http://majoras16.github.io/Hackathon_Cotentin/Majoras16_test/";
function more(id, desc) {
	if (!desc || !id || typeof desc !== "string" || typeof id !== "string") {
		return false;
	}
	let e = document.querySelector("#shop-block-" + id);
	let h = e.querySelector(".shop-desc").innerHTML;
	if(e.className === "shop-block" || e.className === "shop-block-more") {
		h = desc.substring(0,MAX_CHARS-3)+"...";
		e.className = "shop-block-less";
	} else {
		h = desc;
		e.className = "shop-block-more";
	}
}
function logoError(el) {
	let isFirst = el.src.substring(el.src.length-3,el.src.length);
	if(isFirst === "png") {
		el.src = el.src.substring(0,el.src.length-3)+"jpg";
	} else if(isFirst === "jpg") {
		el.src = TMP_LOGO_URL+"noimg.png";
		el.onerror = null;
	}
}
	
function Shop(data) {
	if (!data || (typeof data !== "string" && typeof data !== "object")) {
		return false;
	}
	let j = (typeof data === "string" ? JSON.stringify(data) : data);
	j.id = j.id.toString();
	let b = document.createElement("div");
	b.className = "shop-block";
	b.id = "shop-block-" + j.id;
	b.onclick = "more('"+j.id+"','"+j.desc+"');";
	let i = "<img src=\""+j.img+"\" onerror=\"logoError(this);\" class=\"shop-img\" />";
	let n = document.createElement("div");
	n.className = "shop-name";
	n.innerHTML = j.nom;
	let d = document.createElement("div");
	d.className = "shop-desc";
	d.innerHTML = (j.desc.length > MAX_CHARS ? j.desc.substring(0, MAX_CHARS-3) + "..." : j.desc);
	b.innerHTML += i;
	b.appendChild(n);
	b.appendChild(d);
	document.querySelector("#content").appendChild(b);
	/* Génère la structure suivante :
		div .shop-block
		- img .shop-img
		- div .shop-name
		- div .shop-desc
	*/
}
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://majoras16.github.io/Hackathon_Cotentin/Majoras16_test/data.xlsx", true);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
	let d = new Uint8Array(xhr.response);
	let wb = XLSX.read(d, {type:"array"}).Sheets.Feuil1;
	let rown = wb["!ref"];
	rown = Number(rown.substring(rown.indexOf(":"),rown.length).replace(/\D/g,""));
	let i = 2; // 1 = header
	while(i <= rown) {
		if(location.search.length > 0 && location.search.substring(0,8) === "?search=") {
			let cat = decodeURI(location.search.substring(8,location.search.length));
			if(wb["C"+i].v === cat) {
				if(wb["A"+i] === undefined) {
					wb["A"+i] = {v:""};
				}
				if(wb["B"+i] === undefined) {
					wb["B"+i] = {v:""};
				}
				if(wb["D"+i] === undefined) {
					wb["D"+i] = {v:""};
				}
				if(wb["E"+i] === undefined) {
					wb["E"+i] = {v:""};
				}
				if(wb["F"+i] === undefined) {
					wb["F"+i] = {v:""};
				}
				if(wb["G"+i] === undefined) {
					wb["G"+i] = {v:""};
				}
				if(wb["H"+i] === undefined) {
					wb["H"+i] = {v:""};
				}
				if(wb["I"+i] === undefined) {
					wb["I"+i] = {v:""};
				}
				if(wb["J"+i] === undefined) {
					wb["J"+i] = {v:""};
				}
				if(wb["K"+i] === undefined) {
					wb["K"+i] = {v:""};
				}
				if(wb["L"+i] === undefined) {
					wb["L"+i] = {v:""};
				}
				let id = Number(wb["A"+i].v);
				let idz = (id<10?"00"+id:(id>=10&&id<100?"0"+id:id));
				new Shop({
					id: id, // ID
					nom: wb["B"+i].v, // Nom du commerce
					cat: wb["C"+i].v, // Catégorie
					desc: wb["D"+i].v, // Description
					nom_c: wb["E"+i].v, // Nom (contact)
					tel: wb["F"+i].v, // Numéro de télephone
					email_c: wb["G"+i].v, // E-mail (contact)
					addresse: wb["H"+i].v, // Adresse
					site: wb["I"+i].v, // Site Web
					reseaux: wb["J"+i].v, // Réseaux sociaux
					services: wb["K"+i].v, // Services
					email_adm: wb["L"+i].v, // E-mail (admin)
					img: "logos/logo_"+idz+".png"
				});
				i += 1;
			} else {
				i += 1;
			}
		} else {	
			if(wb["A"+i] === undefined) {
				wb["A"+i] = {v:""};
			}
			if(wb["B"+i] === undefined) {
				wb["B"+i] = {v:""};
			}
			if(wb["C"+i] === undefined) {
				wb["C"+i] = {v:""};
			}
			if(wb["D"+i] === undefined) {
				wb["D"+i] = {v:""};
			}
			if(wb["E"+i] === undefined) {
				wb["E"+i] = {v:""};
			}
			if(wb["F"+i] === undefined) {
				wb["F"+i] = {v:""};
			}
			if(wb["G"+i] === undefined) {
				wb["G"+i] = {v:""};
			}
			if(wb["H"+i] === undefined) {
				wb["H"+i] = {v:""};
			}
			if(wb["I"+i] === undefined) {
				wb["I"+i] = {v:""};
			}
			if(wb["J"+i] === undefined) {
				wb["J"+i] = {v:""};
			}
			if(wb["K"+i] === undefined) {
				wb["K"+i] = {v:""};
			}
			if(wb["L"+i] === undefined) {
				wb["L"+i] = {v:""};
			}
			let id = Number(wb["A"+i].v);
			let idz = (id<10?"00"+id:(id>=10&&id<100?"0"+id:id));
			new Shop({
				id: id, // ID
				nom: wb["B"+i].v, // Nom du commerce
				cat: wb["C"+i].v, // Catégorie
				desc: wb["D"+i].v, // Description
				nom_c: wb["E"+i].v, // Nom (contact)
				tel: wb["F"+i].v, // Numéro de télephone
				email_c: wb["G"+i].v, // E-mail (contact)
				addresse: wb["H"+i].v, // Adresse
				site: wb["I"+i].v, // Site Web
				reseaux: wb["J"+i].v, // Réseaux sociaux
				services: wb["K"+i].v, // Services
				email_adm: wb["L"+i].v, // E-mail (admin)
				img: TMP_LOGO_URL+"logos/logo_"+idz+".png"
			});
			i += 1;
		}
	}
};
xhr.onerror = function () {
	alert("Impossible de charger les donn\u00e9es. Essayez de recharger la page.");
};
xhr.send();
</script>
</html>

                        
Recent Public Pastes
6 videos of old men fucking young girls BEST COLLECTION - 1 day ago Amazing Collections - 4 days ago [v1.2.1.0] Farming Simulator 25 Trainer (2025) (Plus +8) - 6 days ago TradingView - 1 week ago Untitled - 1 week ago They Like Nature - 1 week ago Untitled - 2 weeks ago Untitled - 2 weeks ago VIDEOS NO SHORTLINK AT ALL FREEEEEEEEEEEEE - 2 weeks ago Sanyuuu - 2 weeks ago