Skip to content

Instantly share code, notes, and snippets.

@alvonx

alvonx/default.html

Created March 21, 2023 07:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alvonx/a0a6257c97f277530930296946ad206e to your computer and use it in GitHub Desktop.
Save alvonx/a0a6257c97f277530930296946ad206e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
default.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
}
/*
* Base structure
*/
.cover-container {
max-width: 42em;
}
/*
* Header
*/
.nav-masthead .nav-link {
padding: 0.25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
border-bottom: 0.25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, 0.25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
.head-name{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#editable-name{
width: 200px;
border: none;
border-color: transparent;
background: transparent;
user-select: none;
}
</style>
<title>Hello, world!</title>
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<h3 class="mb-3 p-1 rounded d-none" id="name-saved">Saved</h3>
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0 head-name"><input id="editable-name" class="text-white" value="Cover-Name"/> <span onclick="edit_name()" id="editable-btn"><i class="fa-solid fa-pencil text-info"></i></span></h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#"
><img class="border border-light" width="50" src="https://randomuser.me/api/portraits/men/public_img.jpg" alt=""
/></a>
</nav>
</div>
</header>
<main class="px-3 py-5 my-5">
<h1 class="mt-5 pt-5">Your public ip <span class="fw-bold">public_ip</span></h1>
<p class="lead">
This is dynamic cover page created by using AWS Services like <br><span class="fw-bold">API Gateway,</span> <span class="fw-bold">Lambda</span>.
</p>
</main>
<footer class="mt-auto text-white-50">
<h2>Created by <a href="https://www.linkedin.com/in/alvonx/" target="_blank" class="text-white">Deepak</a></h2>
<h5 class="">This page will automatically delete in <span class="text-info" id="time-display">00:00:00</span></h5>
</footer>
</div>
<!-- Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script>
var page_url = window.location.href;
console.log("page url =>>> ", page_url);
var page_name = page_url.split('/')[3].replace('.html', '');
console.log(page_name);
</script>
<script>
var editing=false;
var editableBtn = document.getElementById('editable-btn');
var editableName = document.getElementById('editable-name');
var nameSavedBanner = document.getElementById('name-saved');
var oldValue = editableName.value;
editableName.disabled = true;
function edit_name(){
editing = !editing;
if(editing){
editableBtn.innerHTML = `<i class="fa-solid fa-check text-success"></i>` ;
editableName.disabled = false;
editableName.select();
console.log("editing enabled");
}else{
editableBtn.innerHTML = `<i class="fa-solid fa-pencil text-info"></i>` ;
editableName.disabled = true;
console.log("editing disabled");
// Call the API with the edited content
var editedContent = editableName.value;
var isCorrect = checkEdited(editedContent);
nameSavedBanner.classList.remove('d-none');
nameSavedBanner.classList.remove('bg-info');
nameSavedBanner.classList.remove('bg-success');
nameSavedBanner.classList.remove('bg-warning');
nameSavedBanner.classList.add('bg-success');
if(isCorrect){
nameSavedBanner.classList.add('bg-info');
nameSavedBanner.innerText = "Saving";
callAPI(editedContent);
}else{
nameSavedBanner.classList.add('bg-warning');
nameSavedBanner.innerText = "Name not valid";
setTimeout(()=>{
nameSavedBanner.classList.add('d-none');
editableName.value = oldValue;
}, 1500);
}
}
}
function checkEdited(edited_txt){
if(edited_txt.match(/^[-_ a-zA-Z0-9]+$/)){
return true;
}else{
return false;
}
}
function callAPI(edited_text){
console.log("Edited Text >>> ", edited_text);
// Call the API with the edited content
// Replace the URL and data with your API endpoint and payload
fetch(`https://up9rkpslaa.execute-api.ap-south-1.amazonaws.com/custom-html-v1/edit-name?page=${page_name}&cover=${edited_text}`, {
method: "GET",
})
.then(response => {
// Handle the API response
nameSavedBanner.classList.remove('bg-warning');
nameSavedBanner.classList.remove('bg-info');
nameSavedBanner.classList.add('bg-success');
nameSavedBanner.innerText = "Saved";
oldValue = edited_text;
})
.catch(error => {
// Handle any errors
nameSavedBanner.classList.remove('bg-warning');
nameSavedBanner.classList.remove('bg-info');
nameSavedBanner.classList.add('bg-danger');
nameSavedBanner.innerText = "Error while saving";
});
setTimeout(()=>{
nameSavedBanner.classList.add('d-none');
}, 1500);
}
</script>
<script>
var timeDisplayText = document.getElementById('time-display');
var max_time = 300;
function toHoursAndMinutes(totalSeconds) {
const totalMinutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
const hours = Math.floor(totalMinutes / 60);
const minutes = totalMinutes % 60;
var hh = hours<10?`0${hours}`:`${hours}`;
var mm = minutes<10?`0${minutes}`:`${minutes}`;
var ss = seconds<10?`0${seconds}`:`${seconds}`;
return `${hh}:${mm}:${ss}`;
}
var startTime = startTimeEpoch;
setInterval(()=>{
var thisTime = Date.now();
var millis = thisTime-startTime;
var secondsPassed = Math.floor(millis / 1000);
var remainingTime = max_time-secondsPassed;
var remainingFormatted = toHoursAndMinutes(remainingTime);
if(remainingTime <= 0){
console.log("Delete page");
console.log(page_name);
deletePage();
}else{
timeDisplayText.innerText = remainingFormatted;
}
}, 1000);
function deletePage(){
// Call the API with the edited content
// Replace the URL and data with your API endpoint and payload
fetch(`https://up9rkpslaa.execute-api.ap-south-1.amazonaws.com/custom-html-v1/delete-page?page=${page_name}&starttime=${startTime}`, {
method: "GET",
})
.then(response => {
location.reload();
})
.catch(error => {
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment