<!DOCTYPE html>
<html>
<head>
<title>Data File Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
input[type="text"] {
width: calc(100% - 20px);
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
text-align:center;
}
input[type="text"]:focus {
outline: none;
border-color: #007bff;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.dropdown {
position: absolute;
top: 10px;
right: 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 60px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content button {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color: transparent;
border: none;
width: 100%;
text-align: left;
}
.dropdown-content button:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.img{border:0.11px solid red;
border-radius:100%;
height:120px; width:120px;
margin-top:px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
#data1{width:235px;
font-size:20px;
color:red;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
.fun{width:92.5px;
height:46px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}
.yt{ margin-top:-82px;
margin-left:142px;
position:fixed; }
.user{margin-top:-112px;
margin-left:155px;
position:fixed;
}
.wallet{width:235px;
font-size:20px;
color:red;
margin-left:100px;
margin-top:-36px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
padding:5px;}
.More{width:92.5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);}
</style>
<script>
function saveData() {
var data1 = document.getElementById("data1").value;
var data2 = document.getElementById("data2").value;
var data3 = document.getElementById("data3").value;
var data4 = document.getElementById("data4").value;
var data5 = document.getElementById("data5").value;
var password = prompt("Enter password to save data:");
if (password === "860149") {
var data = {
data1: data1,
data2: data2,
data3: data3,
data4: data4,
data5: data5
};
localStorage.setItem("user_data", JSON.stringify(data));
alert("Data saved successfully!");
document.getElementById("submitButton").style.display = "none"; // Hide submit button after successful save
} else {
alert("Incorrect password! Data not saved.");
}
}
window.onload = function() {
var savedData = localStorage.getItem("user_data");
if (savedData !== null) {
savedData = JSON.parse(savedData);
document.getElementById("data1").value = savedData.data1;
document.getElementById("data2").value = savedData.data2;
document.getElementById("data3").value = savedData.data3;
document.getElementById("data4").value = savedData.data4;
document.getElementById("data5").value = savedData.data5;
}
}
function editData() {
document.getElementById("submitButton").style.display = "block";
document.getElementById("submitButton").innerHTML = "Submit";
}
function editData1() {
document.getElementById("data2").style.display = "block";
document.getElementById("data3").style.display = "block";
document.getElementById("data4").style.display = "block";
document.getElementById("data5").style.display = "block";
}
</script>
</head>
<body>
<div class="container">
<img class="img"src="">
<div class="yt"> <a href=""><img style="height:40px;margin-top:5px" src="https://www.youtube.com/yts/img/favicon_32-vflOogEID.png" alt="YouTube Logo"> </a><a href=""><img style="height:35px;margin-top:-5px" src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook Logo"></a>
<a href=""><img style="margin-top:-7px" src="https://www.instagram.com/static/images/ico/favicon.ico/36b3ee2d91ed.ico" alt="Instagram Logo"></a>
</div>
<div class="user">@ <hr></div>
<input type="text" id="data1" placeholder=""> <button class="fun"onclick="editData1()">Bio </button><br>
<input type="text" id="data2"style="display: none;" placeholder=""><br>
<input type="text" id="data3"style="display: none;"placeholder=""><br>
<input type="text" id="data4"style="display: none;"placeholder=""><br>
<input type="text" id="data5"style="display: none;"placeholder=""><br><br>
<button id="submitButton" style="display: none;" onclick="saveData()">Submit</button>
<br> <button class="More">More </button> <div class="wallet">Wallet: </div>
<div class="dropdown">
<button>⁞</button>
<div class="dropdown-content">
<button id="editButton" onclick="editData()">Edit </button>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment