Access Widget: Ideas

I understand! :wink:

Its easy to fix! Heres your final code:
(If something is wrong please tell me!)


<div id="pwLock" style=" 
position: fixed; 
top: 0; left: 0; 
width: 100%; 
height: 100%; 
background: #ffffff; 
z-index: 999999; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
font-family: sans-serif; 
transition: opacity 0.5s ease;
"> 
<div style="text-align:center;"> 
<h1 style="margin-bottom: 20px;">🔐 Protected area</h1> 
<input id="pwInput" type="text" placeholder="Enter password" style=" 
padding: 12px 20px; 
font-size: 18px; 
border-radius: 8px; 
border: 1px solid #ccc; 
width: 280px; 
text-align: center; 
"> 
<br><br> 
<button onclick="checkPassword()" style=" 
padding: 12px 30px; 
font-size: 18px; 
border-radius: 8px; 
background-color: #4CAF50; 
color: white; 
border: none; 
cursor: pointer; 
">Unlock</button> 
<p id="pwError" style="color: red; font-weight: bold; margin-top: 15px;"></p> 
</div>
</div>

<script> 
function checkPassword() { 
const input = document.getElementById("pwInput").value.trim(); 
const error = document.getElementById("pwError"); 

if (input === "YOUR_PASSWORD") { 
const overlay = document.getElementById("pwLock"); 
overlay.style.opacity = "0"; 
setTimeout(() => overlay.style.display = "none", 500); 
} else { 
error.textContent = "❌ Wrong password!"; 
} 
}
</script>
2 Likes

Bravo Maxim Smith very good and fast

Στις Παρ 25 Απρ 2025 στις 11:33 μ.μ., ο/η Alexandros Zeppos <alexandroszeppos7@gmail.com> έγραψε:

3 Likes

You are welcome! :blush:

If your question is answered, feel free to click the solution button :slight_smile:

Hope you have a good night / day! :smiley:

2 Likes

THIS IS WHAT I WANT!!!
Have a look.Made a change.
https://soulification.blogspot.com/
pass:Alexandros Zeppos

Στις Παρ 25 Απρ 2025 στις 11:40 μ.μ., ο/η Maxim Smith via Elfsight Community <notifications@elfsight.discoursemail.com> έγραψε:

3 Likes

Wow! it looks wonderful! :heart_eyes:
I’m glad I could help you! :blush:

1 Like

Where is the solution button?
What do you mean?
In elfsight community?

Στις Παρ 25 Απρ 2025, 11:45 μ.μ. ο χρήστης Maxim Smith via Elfsight Community <notifications@elfsight.discoursemail.com> έγραψε:

2 Likes

Yes, if you go on the elfsight community website (Access Widget - #22 by maxim) theres a solution button near the massage! You can click it and other will notice, that this topic has a solution! :slight_smile:

1 Like

Hi there, respect @maxim :clap:

Very great. You can join the dev team. :wink:

Now just a little design for the dashboard around it, and a new widget is ready. :grin:
I’m already excited to hear what @Max and @Helga have to say about it.
I think it’s great. :+1:

Now I realize again that the better a new idea is described and the goal it pursues, the easier it is to understand. This helps everyone identify their strengths in their area.

user → idea → sorter → dev → designer → tester → “new widget”

Have fun and success with it @Alexandros_Zeppos

One more thing to keep in mind: The access code is written in plain text in the source code. This is certainly not secure.

2 Likes

I am excited! @Sina :star_struck:
Let us speak in private about it! :blush:

1 Like

Oh, i didnt see it! :sweat_smile:

I will fix it! Give me a minute :slight_smile:

2 Likes

I will be waiting for elfsight access widget if any but thanks for the information

Στις Σάβ 26 Απρ 2025, 12:33 π.μ. ο χρήστης Sina via Elfsight Community <notifications@elfsight.discoursemail.com> έγραψε:

3 Likes

@maxim

while you’re at it


2 Likes

It needs correction to work in the beginning.
WHen I surf my blog with newer or older posts it again starts with an access widget.
I guess that other websites when you click on a button might have the same issue.

Στις Σάβ 26 Απρ 2025 στις 12:45 π.μ., ο/η Sina via Elfsight Community <notifications@elfsight.discoursemail.com> έγραψε:

1 Like