added files via upload

SamRaha · Feb 28, 2024 · 1facef0 · 1facef0
1 parent 2c63ff8
commit 1facef0
Show file tree

Hide file tree

Showing 20 changed files with 1,038 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# TheLooseCut
+https://samraha.github.io/TheLooseCut/
+
+A static page front-end website created for the official band The Loose Cut.
diff --git a/dist/assets/Logo.png b/dist/assets/Logo.png
diff --git a/dist/assets/background10.jpg b/dist/assets/background10.jpg
diff --git a/dist/assets/background5.jpg b/dist/assets/background5.jpg
diff --git a/dist/assets/background6.jpg b/dist/assets/background6.jpg
diff --git a/dist/assets/background7.jpg b/dist/assets/background7.jpg
diff --git a/dist/assets/background8.jpg b/dist/assets/background8.jpg
diff --git a/dist/assets/background9.jpg b/dist/assets/background9.jpg
diff --git a/dist/assets/new_logo.png b/dist/assets/new_logo.png
diff --git a/dist/assets/theloosecut-tour.jpeg b/dist/assets/theloosecut-tour.jpeg
diff --git a/dist/assets/theloosecut.jpeg b/dist/assets/theloosecut.jpeg
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width">
+  <title>The Loose Cut</title>
+  <link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="./dist/style.css">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+  <link href="//db.onlinewebfonts.com/c/77d394fa0c1103c648f880b77cb4a32f?family=FuturaLTW01-Medium" rel="stylesheet" type="text/css"/>
+  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+</head>
+<body>
+<div id="container">
+  <div id="main">
+    <div class="header-container">
+    <div class="header-link">
+      <a href="https://theloosecut.bigcartel.com/" target="_blank">MERCH</a>
+    </div>
+    <div class="header-link">
+      <a href="https://linktr.ee/theloosecut" target="_blank">TICKETS</a>
+    </div>
+
+  </div>
+    <!-- <div class="logo">
+      <div class="image"> </div>
+    </div> -->
+    <!-- <div class="merch">
+      <a href="https://theloosecut.bigcartel.com/">MERCH</a>
+    </div> -->
+    <div class="social">
+      <ul>
+      <li><a href="https://en-gb.facebook.com/TheLooseCut/"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
+      <li><a href="https://twitter.com/theloosecut?lang=en"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+      <li><a href="https://www.instagram.com/theloosecut/"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
+      <li><a href="https://www.youtube.com/channel/UCi3Rhs98cK0xaQIR-aw0wHw/featured"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
+      <li><a href="https://open.spotify.com/artist/17JWTOMZY9IglBlQfJwiM1?si=yQ1E6QlRRb2C2SJPQyt5bg"><i class="fa fa-spotify" aria-hidden="true"></i></a></li>
+      <li><a href="https://itunes.apple.com/gb/artist/the-loose-cut/1029177866"><i class="fa fa-music music-note" aria-hidden="true"></i></a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+<footer id="footer">
+  <p class="text-bottom"> <strong>MANAGEMENT, BOOKINGS & MEDIA:</strong></p>
+  <p class="text-bottom email management" id="email"> Mark Kelly <span class="management-hide"><strong>|</strong></span> <a href="mailto:mark.kelly@stradamusic.com"><span>mark.kelly@stradamusic.com</span></a><span> <span class="management-hide"><strong>|</strong></span> 07989946718</span></p>
+
+  <!-- <p class="text-bottom"> <strong></strong>GENERAL ENQUIERIES</p> -->
+  <p class="text-bottom email" id="email"> <a href="mailto:theloosecut@gmail.com"><span>theloosecut@gmail.com</span></a></p>
+</footer>
+</div>
+<!-- <script>
+  if (screen && screen.width > 500) {
+    document.write('<script type="text/javascript" src="dist/main.js"><\/script>');
+  }
+</script>
+<script>
+  if (screen && screen.width < 500 ) {
+    document.write('<script type="text/javascript" src="dist/mobile.js"><\/script>');
+  }
+</script> -->
+</body>
+</html>
diff --git a/dist/main.js b/dist/main.js
@@ -0,0 +1,108 @@
+// Function created to change the background
+
+function easy_background(selector, a1, a2, b1, b2, c1, c2, d1, d2, e1, e2, f1, f2) {
+	function empty_var(x) {
+		if (x) {
+			return x;
+		} else {
+			return 0;
+		}
+	}
+
+	function empty_img(x) {
+		if (x) {
+			return "<img src='" + x + "'>";
+		} else {
+			return '';
+		}
+	}
+
+	var p = document.createElement('div');
+	p.innerHTML = ' ';
+	p.classList.add('easy_slider');
+
+	document.body.insertBefore(p, document.body.firstChild);
+
+	document.querySelector('.easy_slider').innerHTML =
+		empty_img(a2) + empty_img(b2) + empty_img(c2) + empty_img(d2) + empty_img(e2) + empty_img(f2);
+
+	document.querySelector('.easy_slider').style.display = 'none';
+
+	tot_time = empty_var(a1) + empty_var(b1) + empty_var(c1) + empty_var(d1) + empty_var(e1) + empty_var(f1);
+
+	function slider() {
+		if (a1) {
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + a2 + "')";
+			}, 0000); // 1
+		}
+
+		if (b1) {
+			var delay = a1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + b2 + "')";
+			}, delay); // 2
+		}
+
+		if (c1) {
+			var delay = a1 + b1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + c2 + "')";
+			}, delay); // 3
+		}
+
+		if (d1) {
+			var delay = a1 + b1 + c1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + d2 + "')";
+			}, delay); // 4
+		}
+
+		if (e1) {
+			var delay = a1 + b1 + c1 + d1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + e2 + "')";
+			}, delay); // 5
+		}
+		// if (e1) {
+		// 	var delay = a1 + b1 + c1 + d1 + e1;
+		// 	setTimeout(function() {
+		// 		document.querySelector(selector).style.backgroundImage = "url('" + f2 + "')";
+		// 	}, delay); // 5
+		// }
+	}
+
+	slider();
+
+	setInterval(function() {
+		// REPEAT
+
+		slider();
+	}, tot_time);
+}
+
+easy_background(
+	'body',
+	9000,
+	'./assets/background7.jpg',
+	7000,
+	'./assets/background9.jpg',
+	7000,
+	'./assets/background8.jpg',
+	7000,
+	'./assets/background12.jpg',
+	7000,
+	'./assets/background10.jpg'
+);
+
+// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+let vh = window.innerHeight * 0.01;
+// Then we set the value in the --vh custom property to the root of the document
+document.documentElement.style.setProperty('--vh', `${vh}px`);
+
+// We listen to the resize event
+window.addEventListener('resize', () => {
+	// We execute the same script as before
+	let vh = window.innerHeight * 0.01;
+	document.documentElement.style.setProperty('--vh', `${vh}px`);
+});
diff --git a/dist/mobile.js b/dist/mobile.js
@@ -0,0 +1,110 @@
+// Function created to change the background
+
+function easy_background(selector, a1, a2, b1, b2, c1, c2, d1, d2, e1, e2, f1, f2) {
+	function empty_var(x) {
+		if (x) {
+			return x;
+		} else {
+			return 0;
+		}
+	}
+
+	function empty_img(x) {
+		if (x) {
+			return "<img src='" + x + "'>";
+		} else {
+			return '';
+		}
+	}
+
+	var p = document.createElement('div');
+	p.innerHTML = ' ';
+	p.classList.add('easy_slider');
+
+	document.body.insertBefore(p, document.body.firstChild);
+
+	document.querySelector('.easy_slider').innerHTML =
+		empty_img(a2) + empty_img(b2) + empty_img(c2) + empty_img(d2) + empty_img(e2) + empty_img(f2);
+
+	document.querySelector('.easy_slider').style.display = 'none';
+
+	tot_time = empty_var(a1) + empty_var(b1) + empty_var(c1) + empty_var(d1) + empty_var(e1) + empty_var(f1);
+
+	function slider() {
+		if (a1) {
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + a2 + "')";
+			}, 0000); // 1
+		}
+
+		if (b1) {
+			var delay = a1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + b2 + "')";
+			}, delay); // 2
+		}
+
+		if (c1) {
+			var delay = a1 + b1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + c2 + "')";
+			}, delay); // 3
+		}
+
+		if (d1) {
+			var delay = a1 + b1 + c1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + d2 + "')";
+			}, delay); // 4
+		}
+
+		if (e1) {
+			var delay = a1 + b1 + c1 + d1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + e2 + "')";
+			}, delay); // 5
+		}
+		if (f1) {
+			var delay = a1 + b1 + c1 + d1 + e1;
+			setTimeout(function() {
+				document.querySelector(selector).style.backgroundImage = "url('" + f2 + "')";
+			}, delay); // 6
+		}
+	}
+
+	slider();
+
+	setInterval(function() {
+		// REPEAT
+
+		slider();
+	}, tot_time);
+}
+
+easy_background(
+	'body',
+	9000,
+	'./assets/background5.jpg',
+	7000,
+	'./assets/background8.jpg',
+	7000,
+	'./assets/background7.jpg',
+	7000,
+	'./assets/background6.jpg',
+	7000,
+	'./assets/background9.jpg',
+	7000,
+	'./assets/background12.jpg'
+);
+
+// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+let vh = window.innerHeight * 0.01;
+// Then we set the value in the --vh custom property to the root of the document
+document.documentElement.style.setProperty('--vh', `${vh}px`);
+
+// We listen to the resize event
+window.addEventListener('resize', () => {
+	// We execute the same script as before
+	let vh = window.innerHeight * 0.01;
+	document.documentElement.style.setProperty('--vh', `${vh}px`);
+});