Skip to content

Commit

Permalink
update contact form
Browse files Browse the repository at this point in the history
  • Loading branch information
@stiemsdev
stiemsdev committed Feb 27, 2024
1 parent 8ddfffe commit 34c021d
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 24 deletions.
24 changes: 24 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ iframe {
max-width: 100%;
}

dialog{
position: relative;
}

/* video {
width:"960";
height:"671";
Expand Down Expand Up @@ -172,6 +176,26 @@ h1 span {
flex: 0 0 40%;
}

.button2 {
width: 320px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: 500;
border-radius: 12px;
background-color: #F06895;
}

.contact {
display: none;
background: #7661FF;
padding: 80px 50px 50px;
/* max-width: 1440px; */
margin: 0 auto;
position: relative;
}

.modal-wrap {
display: none;
position: fixed;
Expand Down
92 changes: 72 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
<body>
<header class="header">
<div class="header__logo">
<img src="img/ownables-logo.png" alt="Ownables Logo" class="logo" onclick="openDialog()">
<img src="img/ownables-logo.png" alt="Ownables Logo" class="logo" onclick="openDialog()">
<!-- <img src="img/ownables-logo.png" alt="Ownables Logo" class="logo" onclick="openDialog(); document.body.style.overflow = 'hidden';"> -->
</div>
<div class="header__actions">
<!-- <button onclick="openDialog()">Open Dialog</button> -->
Expand All @@ -42,43 +43,53 @@

<main class="main">

<dialog max-width="80%" id="dialog">
<button class="close-button" onclick="openDialog()">X</button>
<!-- <dialog class="modal" max-width="80%" id="dialog"> -->
<dialog class="contact" max-width="80%" id="dialog">
<a onclick="openDialog()" class="modal__close">+</a>

<!-- <div id="dialog" style="display: none;"> -->
<div class="flex items-center min-h-screen bg-gray-100 dark:bg-gray-900">
<!-- <div class="flex items-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto">
<div class="max-w-md mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
<div class="text-center">
<div class="text-center"> -->
<div>
<div>
<div>
<div>
<h1 class="my-3 text-3xl font-semibold text-black dark:text-gray-200">
Contact Us
</h1>
<p class="text-gray-600 dark:text-gray-400">
Fill up the form below to send us a message.
</p>
</div>
<div class="m-7">
<div>
<form action="https://api.web3forms.com/submit" method="POST" id="form">
<input type="hidden" name="access_key" value="06560c56-4fa0-446d-a9e1-762f64dfac2b" />
<input type="hidden" name="subject" value="New Submission from Web3Forms" />
<input type="hidden" name="redirect" value="https://web3forms.com/success" />
<input type="checkbox" name="botcheck" id="" style="display: none;" />
<div class="mb-6">
<label for="name" class="block mb-2 font-medium text-sm text-gray-600 dark:text-gray-400">Full Name</label>
<input type="text" name="name" id="name" placeholder="John Doe" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-400 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
<div>
<label for="name">Full Name</label>
<br>
<input type="text" name="name" id="name" placeholder="John Doe" style="background-color:beige; " required/>
</div>
<div class="mb-6">
<label for="email" class="block mb-2 font-medium text-sm text-gray-600 dark:text-gray-400">Email Address</label>
<input type="email" name="email" id="email" placeholder="[email protected]" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-400 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
<br>
<div>
<label for="email">Email Address</label>
<br>
<input type="email" name="email" id="email" placeholder="[email protected]" required/>
</div>
<div class="mb-6">
<label for="message" class="block mb-2 font-medium text-sm text-gray-600 dark:text-gray-400">Your Message</label>

<textarea rows="5" name="message" id="message" placeholder="Your Message" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-400 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" required></textarea>
<br>
<div>
<label for="message">Your Message</label>
<br>
<textarea rows="8" name="message" id="message" placeholder="Your Message" required></textarea>
</div>
<br>
<!-- <div class="h-captcha" data-captcha="true"></div> -->
<div class="h-captcha" data-sitekey="454fa1de-0ee2-419c-a133-8c187ad18d1a" data-callback="enableButton"></div>
<div class="mb-6">
<button id="submit-button" type="submit" class="w-full px-3 py-4 text-white bg-indigo-700 rounded-md focus:bg-indigo-600 focus:outline-none" disabled>
<div>
<button id="submit-button" type="submit" class="button2">
Send Message
</button>
</div>
Expand All @@ -91,6 +102,10 @@ <h1 class="my-3 text-3xl font-semibold text-black dark:text-gray-200">
</div>
</dialog>

<!-- <div class="h-captcha" data-captcha="true"></div> -->
<!-- <div class="h-captcha" data-sitekey="454fa1de-0ee2-419c-a133-8c187ad18d1a" data-callback="enableButton"></div> -->



<!-- <h1>Ownables are <br>the ultimate <span>DIGITAL ASSET</span></h1>
<a href="https://demo.ownables.info/" class="button">Try Demo</a>
Expand All @@ -116,6 +131,9 @@ <h1><span>Real World Assets</span>Meet Web3 </h1></p>

<h2>Power Up your NFTs</h2>
<div class="click-row">
<!-- <a href="javascript:void(0)" class="click-row__item" data-target="modal-0">
contact us
</a> -->
<a href="javascript:void(0)" class="click-row__item" data-target="modal-1">
<img src="img/click-item-1.png" alt="Unlockable Content" data-target="modal-1">
</a>
Expand Down Expand Up @@ -144,15 +162,49 @@ <h2>SDK now available</h2>
</div>
</main>



<div class="modal-wrap">
<div class="modal" id="modal-0">
<a href="javascript:void(0)" aria-label="close modal" class="modal__close">+</a>
<h2> Contact Us</h2>
<p class="modal_intro">Fill up the form below to send us a message.</p>
<form action="https://api.web3forms.com/submit" method="POST" id="form">
<input type="hidden" name="access_key" value="06560c56-4fa0-446d-a9e1-762f64dfac2b" />
<input type="hidden" name="subject" value="New Submission from Web3Forms" />
<input type="hidden" name="redirect" value="https://web3forms.com/success" />
<input type="checkbox" name="botcheck" id="" style="display: none;" />
<div>
<label for="name" class="block mb-2 font-medium text-sm text-gray-600 dark:text-gray-400">Full Name</label>
<input type="text" name="name" id="name" placeholder="John Doe" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-400 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
</div>
<br/>
<div >
<label for="email" class="block mb-2 font-medium text-sm text-gray-600 dark:text-gray-400">Email Address</label>
<input type="email" name="email" id="email" placeholder="[email protected]" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-400 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
</div>
<br/>
<div >
<label for="message" class="block mb-2 font-medium text-sm text-gray-600 dark:text-gray-400">Your Message</label>

<textarea rows="5" name="message" id="message" placeholder="Your Message" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-400 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" required></textarea>
</div>
<div >
<button id="submit-button" type="submit" class="w-full px-3 py-4 text-white bg-indigo-700 rounded-md focus:bg-indigo-600 focus:outline-none">
Send Message
</button>
</div>
<p class="text-base text-center text-gray-400" id="result"></p>
</form>
</div>
<div class="modal" id="modal-1">
<a href="javascript:void(0)" aria-label="close modal" class="modal__close">+</a>
<h2>Unlockable Content</h2>
<h3>Real Value</h3>
<p class="modal__intro">Have you ever wondered how you can protect the content of your NFTs from being screenshotted, copied, or used without permission?</p>
<img src="img/modal-placeholder-2.png" class="modal__image" alt="Van Gogh with flower stylized" />
<p>Ownables bring the concept of Unlockable Content to the NFT space. Using Ownables as your digital collectible platform allows your digital assets to remain private.
</p>
</p>
<ul>
<li>Prevent Copyright Theft</li>
<li>Retain Value</li>
Expand Down
13 changes: 9 additions & 4 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,21 +60,24 @@ navigator.saysWho = (() => {
mp4Source.remove()
}


const dialog = document.getElementById("dialog");

function openDialog() {
var dialog = document.getElementById("dialog");
// var dialog = document.getElementById("dialog");
if (dialog.style.display === "block") {
dialog.style.display = "none";
document.body.style.overflow = 'auto';
} else {
dialog.style.display = "block";
document.body.style.overflow = 'hidden';
}
// document.getElementById("dialog").style.display = "block";
}

function enableButton() {
document.getElementById('submit-button').disabled = false;
}

const form = document.getElementById("form");
const result = document.getElementById("result");

Expand Down Expand Up @@ -117,6 +120,8 @@ form.addEventListener("submit", function (e) {
form.reset();
setTimeout(() => {
result.style.display = "none";
}, 5000);
dialog.style.display = "none";
document.body.style.overflow = 'auto';
}, 1000);
});
});

0 comments on commit 34c021d

Please sign in to comment.