Skip to content

Instantly share code, notes, and snippets.

@kimboslice99

kimboslice99/index.php

Created February 20, 2023 02:19
Show Gist options
  • Save kimboslice99/a6e29b55af4a43c23a7a260fb0c7bb93 to your computer and use it in GitHub Desktop.
Save kimboslice99/a6e29b55af4a43c23a7a260fb0c7bb93 to your computer and use it in GitHub Desktop.
Download ZIP
A simple single file website using PHP, HTML, CSS, and JS
Raw
index.php
<?php
if (isset($_POST['name']) && isset($_POST['message']) && isset($_POST['email'])) {
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: from@yourdomain.tld';
$message = 'Email from: '.filter_input(INPUT_POST, 'name').' '.filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL).'<br>';
$message .= filter_input(INPUT_POST, 'message');
$message .= '<br><br>';
$message .= 'Remote address '.$_SERVER['REMOTE_ADDR'];
if(mail('to@yourdomain.tld', 'Contact Form', $message, $headers)){
die(json_encode(array('success' => true)));
} else {
die(json_encode(array('success' => false)));
}
}
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE</title>
<style>
*{
box-sizing:border-box
}
body,html{
height:100%;
margin:0;
font-family:Arial
}
.tablink{
background-color:grey;
color:#000;
float:left;
border:none;
outline:none;
cursor:pointer;
padding:8px 16px;
font-size:14px;
width:33.33333%
}
.tablink:hover{
background-color:#777
}
.tabcontent{
background-color:#fff!important;
display:none;
padding:100px 20px;
height:100%
}
h2,h6{
color:#000
}
.input-container{
height:50px;
position:relative;
width:100%
}
.ic1{
margin-top:40px
}
.input{
background-color:#303245;
border-radius:12px;
border:0;
box-sizing:border-box;
color:#eee;
font-size:18px;
height:100%;
outline:0;
padding:4px 20px 0;
width:100%
}
.cut{
background-color:#fff;
border-radius:10px;
height:20px;
left:20px;
position:absolute;
top:-20px;
transform:translateY(0);
transition:transform 500ms;
width:55px;
text-color:#fff
}
.cut-short{
width:120px
}
.input:focus ~ .cut,.input:not(:placeholder-shown) ~ .cut{
transform:translateY(8px)
}
.placeholder{
color:#fff;
font-family:sans-serif;
left:20px;
line-height:14px;
pointer-events:none;
position:absolute;
transform-origin:0 50%;
transition:transform 200ms,color 200ms;
top:20px
}
.input:focus ~ .placeholder,.input:not(:placeholder-shown) ~ .placeholder{
transform:translateY(-30px) translateX(10px) scale(0.75)
}
.input:not(:placeholder-shown) ~ .placeholder{
color:#808097
}
.input:focus ~ .placeholder{
color:#000
}
.submit{
background-color:#08d;
border-radius:12px;
border:0;
box-sizing:border-box;
color:#eee;
cursor:pointer;
font-size:18px;
height:50px;
margin-top:38px;
text-align:center;
width:25%
}
.submit:active{
background-color:#06b
}
.submission{
width:35vw;
display:block;
margin-left:auto;
margin-right:auto
}
@media (max-width:900px){
.submission{
width:100%
}
}
</style>
</head>
<body>
<button id="tab1" class="tablink" data-page="Home">Home</button>
<button id="tab2" class="tablink" data-page="About">About</button>
<button id="tab3" class="tablink" data-page="Contact">Contact</button>
<div id="Home" class="tabcontent">
<center><h2>Your main page!</h2><h6>Coming soon</h6></center>
</div>
<div id="About" class="tabcontent">
<center><h2 class="equ">About you!</h2></center>
</div>
<div id="Contact" class="tabcontent">
<form id="form" class="submission">
<div class="input-container ic1">
<input name="name" id="name" class="input" type="text" placeholder=" " />
<div class="cut"></div>
<label for="name" class="placeholder">Name</label>
</div>
<div class="input-container ic1">
<input id="email" class="input" type="text" placeholder=" " name="email" />
<div class="cut"></div>
<label for="email" class="placeholder">E-mail</label>
</div>
<textarea placeholder="Message..." class="input box ic1" rows="4" cols="50" id="message" name="message"></textarea>
<center><button id="btn" type="submit" class="submit" name="btn">Send</button></center>
</form>
</div>
<script>
document.addEventListener('click', function(e){
if(e.target.tagName=="BUTTON" && document.getElementById(e.target.id).dataset.page){
let pn = document.getElementById(e.target.id).dataset.page;
console.log(e.target.id);
openPage(pn, e.target.id);
}
})
// openPage function
function openPage(pageName,tabnum) {
var i, tabcontent, tablinks;
// Loop through tab content div and hide all
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Loop through tab buttons, remove background color
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// show selected page
document.getElementById(pageName).style.display = "block";
document.getElementById(tabnum).style.backgroundColor = "white";
sessionStorage.setItem('tab', pageName);
sessionStorage.setItem('button', tabnum);
}
// Hide all, first time visiting
for (i=0;i<document.getElementsByClassName('tabcontent').length; i++){
document.getElementsByClassName('tabcontent')[i].style.display = 'none';
}
// Set all buttons to empty background color
for (i=0;i<document.getElementsByClassName('tablink').length; i++){
document.getElementsByClassName('tablink')[i].style.backgroundColor = '';
}
let p = sessionStorage.getItem('tab');
let t = sessionStorage.getItem("button");
// if null
if (p == null || t == null) { p = 'Home';t = 'tab1'; }
// show
document.getElementById(p).style.display = 'block';
document.getElementById(t).style.backgroundColor = '#fff';
// form functions
var form = document.querySelector("#form");
function resetstate() {
btn.disabled = false;
btn.style.background = "#08D";
btn.innerHTML = "Send";
}
btn.addEventListener('click', function (event) {
console.log('click');
// Prevent double submit!
btn.disabled = true;
btn.style.background = 'grey';
let x = document.forms["form"]["name"].value;
let y = document.forms["form"]["email"].value;
let z = document.forms["form"]["message"].value;
if (x == "" || y == "" || z == "") {
btn.style.backgroundColor = 'red';
btn.style.color = 'white';
btn.innerHTML = 'Failed!';
btn.disabled = true;
setTimeout(() => {
resetstate();
}, "1500")
} else {
const httpRequest = new XMLHttpRequest();
httpRequest.open("POST", window.location.href, true);
var formData=new FormData(form);
httpRequest.send(formData);
httpRequest.onreadystatechange = function() {//Call a function when the state changes.
if(httpRequest.readyState == 4 && httpRequest.status == 200) {
const data = JSON.parse(httpRequest.responseText);
//console.log(data);
if(data.success){
btn.style.backgroundColor = "green";
btn.innerHTML = "Sent!";
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("message").value = "";
} else {
btn.style.backgroundColor = "red";
btn.style.color = "white";
btn.innerHTML = "Failed!";
setTimeout(() => {
resetstate();
}, 1500)
}
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment