Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@multiverseweb
multiverseweb authored Jan 22, 2025
1 parent 2bcb6af commit 68bddea
Show file tree
Hide file tree
Showing 7 changed files with 426 additions and 0 deletions.
Binary file added images/blotcoin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/blotic.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/blotic_full.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/line.webp
View file
Binary file not shown.
175 changes: 175 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blotic | Blotcoins</title>
<link rel="shortcut icon" href="images/blotic.png" type="image/x-icon">
<style>
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
text-align: center;
color: white;
}

h1 {
margin-top: 50px;
}

#blotic {
height: 50px;
margin-top: 50px;
}

#coin {
height: 170px;
animation-name: flipcoin;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.flip-card {
background-image: radial-gradient(rgba(255, 219, 18, 0.475),transparent,transparent);
width: 200px;
height: 200px;
perspective: 1000px;
margin-left: 50%;
transform: translate(-50%);
/* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

@keyframes flipcoin {
0%{
transform: rotateY(0deg);
}
20% {
transform: rotateY(20deg);
}

50% {
transform: rotateY(180deg);
}

80% {
transform: rotateY(340deg);
}
100% {
transform: rotateY(360deg);
}
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
color: black;
}

/* Style the back side */
.flip-card-back {
color: white;
transform: rotateY(180deg);
}

footer {
background-color: #000000;
position: fixed;
bottom: 0;
font-size: small;
width: calc(80% - 20px);
margin-left: 10%;
border-top: 1px solid rgb(150, 150, 150);
color: rgb(164, 164, 164);
padding: 10px;
text-align: center;
}

#heading {
background-image: linear-gradient(45deg,
rgb(255, 0, 0),
yellow,
rgb(255, 98, 0));
color: transparent;
background-clip: text;
}

button {
margin-top: 70px;
width: 40%;
max-width: 200px;
padding: 10px;
background-color: #3b3b3b;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition-duration: 0.3s;
position: absolute;
transform: translate(-50%);
}

button:hover {
background-color: #ffffff;
color: rgb(0, 0, 0);
box-shadow: 0 0 10px white;
}
#line{
height: 150px;
width: 100%;
max-width: 500px;
position: absolute;
margin-top: -50px;
left:0;
margin-left: 50%;
transform: translate(-50%);
z-index: 0;
}
</style>
</head>

<body>
<a href="{% url 'index' %}"><img src="images/blotic_full.png" alt="Coin Image" id="blotic" /></a>
<h1 id="heading">Blotcoins</h1>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/blotcoin.png" alt="" id="coin">
</div>
<div class="flip-card-back">

<img src="images/blotcoin.png" alt="" id="coin">
</div>
</div>
</div>
<img src="images/line.webp" alt="" id="line">
<a href="pages/form.html"><button>Create Account</button></a>
<footer>
<p>&copy; Blotic 2025. All rights reserved.</p>
</footer>
</body>

</html>
149 changes: 149 additions & 0 deletions pages/form.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blotcoins | Register</title>
<link rel="shortcut icon" href="../images/blotcoin.png" type="image/x-icon">
<style>
body {
background-color: black;
color: white;
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#blotic {
height: 45px;
margin-top: 30px;
}

.gradient {
background-image: linear-gradient(to right, yellow, rgb(255, 111, 0));
color: transparent;
background-clip: text;
font-weight: 500;
}

#blotcoins {
filter: hue-rotate(140deg);
}

form {
display: flex;
flex-direction: column;
margin-top: 30px;
max-width: 500px;
width: 95%;
margin-left: 50%;
transform: translate(-50%);
}

input {
padding: 7px;
background-color: rgba(156, 156, 156, 0.214);
border: none;
border-radius: 5px;
margin: 10px;
color: white;
}

label {
margin-left: 15px;
text-align: left;
}

button {
border: none;
background-color: #3b3b3b;
color: white;
max-width: 100px;
padding: 7px;
border-radius: 5px;
margin-left: 12px;
margin-top: 12px;
}

button:hover {
color: black;
background-color: white;
box-shadow: 0 0 10px white;
}

footer {
background-color: #000000;
position: fixed;
bottom: 0;
font-size: small;
width: calc(80% - 20px);
margin-left: 10%;
border-top: 1px solid rgb(150, 150, 150);
color: rgb(164, 164, 164);
padding: 10px;
text-align: center;
}
</style>
</head>

<body>
<img src="../images/blotic_full.png" alt="" id="blotic">
<p class="message">Register now- only <span class="gradient">300 users</span> can claim <span class="gradient"
id="blotcoins">Blotcoins!</span></p>
<form method="POST" action="/success" data-netlify="true" name="Blotcoins-register-1">
<label for="username">Username must only contain alphanumeric characters.</label>
<input type="text" id="username" name="username" placeholder="Username *" required pattern="^[a-zA-Z0-9]+$"
title="Username must only contain alphanumeric characters.">

<input type="email" id="email" name="email" placeholder="Email ID *" required
title="Please enter a valid email address.">

<input type="password" id="password" name="password" placeholder="Password *" required pattern=".{8,}"
title="Password must be at least 8 characters long." oninput="validatePassword()"
onfocus="validatePassword()"
onblur="validatePassword()" >
<p id="pwdError"
style="color:#fd4346; opacity: 0; font-size: 15px; white-space: normal; transition: opacity 0.4s ease ">
Password must be at least 8 characters long.</p>

<label for="confirm-password">Please confirm your password.</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm Password *" required
title="Please confirm your password.">

<div id="error-message" class="error"></div>

<button type="submit">Submit</button>
</form>
<footer>
<p>&copy; Blotic 2025. All rights reserved.</p>
</footer>
<script>
document.querySelector('form').addEventListener('submit', function (e) {
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
const errorMessage = document.getElementById('error-message');

if (password !== confirmPassword) {
e.preventDefault();
errorMessage.textContent = "Passwords do not match!";
} else {
errorMessage.textContent = "";
// Redirect to profile.html after submission
e.preventDefault(); // Prevent default Netlify form submission
window.location.href = "profile.html";
}
});
function validatePassword() {
const passwordField = document.getElementById('password');
const hint = document.getElementById('pwdError');

if (passwordField.value.length > 0 && passwordField.value.length < 8) {
hint.style.opacity="100%";
} else {
hint.style.opacity="0%";
}
}
</script>
</body>

</html>
Loading

0 comments on commit 68bddea

Please sign in to comment.