OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Supabase With Javascript [duplicate]

  • Thread starter Thread starter Nicolas Houloudes
  • Start date Start date
N

Nicolas Houloudes

Guest
I want to add a 8 digit code into my column in supabase with javascript when the page loads, but i can't! I always get errors, can somebody help me please!

This is the error that i had:

Code:
Uncaught ReferenceError: require is not defined
    at developers.js:1:17

I tried this code:

Code:
const express = require('express');
const supabase = require('@supabase/supabase-js');

const app = express();
const port = process.env.PORT || 3000;

// Replace with your Supabase project details
const supabaseUrl = '';
const supabaseAnonKey = '';

const supabaseClient = supabase.createClient(supabaseUrl, supabaseAnonKey);

// Function to generate a random 8-digit numeric code
function generateRandomCode() {
  return Math.floor(10000000 + Math.random() * 90000000).toString();
}

// Function to insert the code into the database
async function insertCode(code) {
  try {
      const { data, error, status } = await supabase
          .from('secrets') // Replace with your table name
          .insert([{ 'secret': code }]); // Replace 'secret' with your column name

      if (error) {
          console.error('Error inserting code:', error.message);
          if (status === 401) {
              console.error('Unauthorized - check row-level security policy.');
          }
          return false;
      }

      return true;
  } catch (error) {
      console.error('Error inserting code:', error.message);
      return false;
  }
}

// Endpoint to handle code generation and redirection
app.get('/generate-code', async (req, res) => {
  const uniqueCode = generateRandomCode();
  const success = await insertCode(uniqueCode);

  if (success) {
    console.log('Code inserted successfully:', uniqueCode);
    // Generate a temporary session token (replace with your secure token generation logic)
    const sessionToken = 'your_secure_session_token'; // Placeholder, implement secure token generation

    // Redirect with a temporary session token (avoid exposing code directly)
    res.redirect(`connected.html?token=${sessionToken}`);
  } else {
    console.error('Failed to insert code.');
    res.status(500).send('Internal Server Error');
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Connected to this html:

Code:
<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "mo59qy3t56");
</script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      if (window.top !== window.self) {
          window.top.location = window.location.href;
      }
  });
</script>
</head>
<style>
  /* Your CSS Styles */
  body {
    margin: 0;
    padding: 0;
    font-family: "Varela Round", sans-serif;
    overflow-x: hidden;
    position: relative;
    justify-content: center;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('../4085479.jpg') no-repeat center center fixed;
    background-size: cover;
  }

  .container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
    position: relative;
  }

  .sidebar {
    width: 250px;
    background-color: rgba(117, 117, 117, 0.9); /* Semi-transparent white */
    padding: 20px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -250px; /* Initially hidden */
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease; /* Slide in from left */
    z-index: 2;
    border-radius: 25px;
  }

  .sidebar.open {
    left: 0; /* Slide in to show */
  }

  .logo {
    text-align: center;
    margin-bottom: 30px;
  }

  .logo img {
    width: 100px;
    height: 100px; /* Reduced size */
    border-radius: 50%; /* Circular */
  }

  .menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu li {
    margin-bottom: 10px;
  }

  .menu a {
    color: #a3a3a3; /* Darker Gray */
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    padding: 15px;
    border-radius: 5px;
    transition: background-color opacity 0.3s ease;
    background-color: #474747; /* Light Gray */
    opacity: 0.6;
    width: 200px;
  }

  .menu a:hover {
    background-color: #ddd; /* Light Gray */
    color: #333; /* Darker Gray */
    opacity: 1;
  }

  .special {
    color: #a3a3a3; /* Darker Gray */
    text-decoration: none;
    font-size: 1.2rem;
    display: block;
    padding: 15px;
    border-radius: 5px;
    transition: background-color opacity 0.3s ease;
    background-color: #1a1a1a; /* Light Gray */
    opacity: 0.9;
    width: 200px;
  }

  .special:hover {
    background-color: #0f0f0f; /* Light Gray */
    color: #333; /* Darker Gray */
    opacity: 1;
  }

  .content {
    flex: 1;
    margin-left: 250px;
    padding: 20px;
    transition: margin-left 0.3s ease;
    background-color: #f9f9f9; /* Light Gray */
    border-radius: 10px;
  }

  .header {
    text-align: center;
    margin-bottom: 50px;
    color: #fff; /* White */
  }

  .header h1 {
    font-size: 3rem;
    color: #000000;
  }

  .header p {
    font-size: 1.2rem;
    color: #709dff; /* Darker Gray */
  }

  .about p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .contact {
    background-color: #f9f9f9; /* Light Gray */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .contact h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .contact p {
    font-size: 1.2rem;
  }

  /* Toast Messages */
  .toast-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .toast-item {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease;
    width: 300px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #3498db; /* Blue */
    color: #fff; /* White */
  }

  .toast {
    padding: 15px;
    position: relative;
  }

  .toast-content {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .close-toast {
    position: absolute;
    right: 100px;
    bottom: 20px;
    width: 100%;
    height: 100%;
    scale: 100;
    cursor: url('delete.png'), auto;
  }

  .close-toast:before,
  .close-toast:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff; /* White */
    border-radius: 2px;
  }

  .close-toast:before {
    transform: rotate(45deg);
  }

  .close-toast:after {
    transform: rotate(-45deg);
  }

  /* Menu Icon */
  .menu-icon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background-color: none; /* White background */
  color: #000; /* Black color */
  z-index: 1;
  cursor: pointer;
  scale: 2;
  right: 7px;
  transition: 0.3s ease-in-out;
}

.menu-icon:hover {
  transform: opa(0.6);
  color: #ffffff;
}


  ::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
  }

  .button2 {
    background-color: #4580ff;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    scale: 1.5;
    top: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    border: none;
    text-align: center;
    justify-self: center;
    transition: 0.3s ease-in-out;
    width: 100px;
    height: 30px;
  }

  .button2:hover {
    background-color: #0076c5;
    color: #fff;
    transform: scale(1.1);
  }
  
  .taskbar {
      width: 100%;
      z-index: 100000000000000000000;
      cursor: help;
      position: fixed; /* Ensures the taskbar stays fixed at the bottom */
      border: none;
      height: 50px;
      bottom: 0px;
      display: flex; /* Use flexbox for centering content */
      justify-content: center;
      align-items: center; /* Ensure content is vertically centered */
      background-color: #2e2e2e;
      opacity: 0.9;
      color: #a3a3a3;
      text-align: center; /* Ensure text is center-aligned */
      transition: 0.4s ease-in-out;
    }

    .taskbar p {
      display: inline-block; /* Make paragraphs display inline */
      margin: 0 10px; /* Add some spacing between paragraphs */
      transition: 0.4s ease-in-out;
    }

    .taskbar .text {
      color: #a3a3a3;
      font-weight: bold;
      border-radius: 20px;
      transition: 0.4s ease-in-out;
      font-family: 'Times New Roman', Times, serif;
    }

    .taskbar .text:hover {
      color: green;
      transform: scale(1.1);
      transition: 0.4s ease-in-out;
      cursor: crosshair;
    }

    .taskbar #ip-address {
  color: #a3a3a3;
  font-weight: bold;
  border-radius: 20px;
  transition: 0.4s ease-in-out;
  font-family: 'Times New Roman', Times, serif;
  cursor: pointer;
}

.taskbar #ip-address:hover {
  color: red;
  transform: scale(1.1);
  transition: 0.4s ease-in-out;
  cursor: crosshair;
}
.body2 {
  margin: 0;
  padding: 0;
  justify-content: center;
  text-align: center;
  justify-items: center;
  text-justify: auto;
  font-family: 'Times New Roman', Times, serif;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  justify-content: center;
  justify-items: center;
  text-justify: center;
}

#intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #121212;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.intro-content {
  display: flex;
  text-align: center;
  justify-content: center;
  justify-items: center;
  text-justify: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin-top: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#main-content {
  display: none;
}

.content {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 80%;
  max-width: 600px;
}

.subscription {
  margin-top: 50px;
}


.dots-bars-1 {
  width: 40px;
  height: 40px;
  --c: linear-gradient(currentColor 0 0);
  --r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
  --r2: radial-gradient(farthest-side at top   ,currentColor 93%,#0000);
  background: 
    var(--c) ,
    var(--r1),
    var(--r2),
    var(--c) ,  
    var(--r1),
    var(--r2),
    var(--c) ,
    var(--r1),
    var(--r2);
  background-repeat: no-repeat;
  animation: db1 1s infinite  alternate;
}

@keyframes db1 {
  0%,10% {
    background-size: 8px 0,8px 4px,8px 4px;
    background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
 }
 90%,100% {
    background-size: 8px 100%,8px 4px, 8px 4px;
    background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
 }
}



  .load {
    --uib-size: 80px;
    --uib-color: black;
    --uib-speed: 1.75s;
    --uib-stroke: 5px;
    --uib-bg-opacity: .1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--uib-stroke);
    width: var(--uib-size);
    border-radius: calc(var(--uib-stroke) / 2);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    z-index: auto;
  }

  .load::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: background-color 0.3s ease;
  }

  .load::after {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: calc(var(--uib-stroke) / 2);
    animation: wobble var(--uib-speed) ease-in-out infinite;
    transform: translateX(-95%);
    background-color: var(--uib-color);
    transition: background-color 0.3s ease;
  }

  @keyframes wobble {
    0%,
    100% {
      transform: translateX(-95%);
    }
    50% {
      transform: translateX(95%);
    }
  }

  @keyframes wipe-enter {
    0% {
        transform: scale(0, .025);
    }
    50% {
        transform: scale(1, .025);
    }
}

/*  <div class="load"></div>  */
/*  <div class="dots-bars-1"></div>  *//* BEST */
</style>
<style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .section {
      background: none;
      padding: 3rem;
      z-index: 999999;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      text-align: center;
      width: 400px;
      animation: fadeIn 1s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .input-group {
      margin-bottom: 1.5rem;
      text-align: left;
      position: relative;
      animation: slideIn 1s ease-in-out;
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-100px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .input-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: bold;
      animation: fadeInLabel 1s ease-in-out;
    }

    @keyframes fadeInLabel {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .input-group input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      transition: border-color 0.3s;
    }

    .input-group input:focus {
      border-color: #5151E5;
      outline: none;
    }

    .image-preview {
      width: 100%;
      max-width: 200px;
      height: auto;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin-top: 1rem;
      display: none;
      animation: fadeInPreview 0.5s ease-in-out;
    }

    @keyframes fadeInPreview {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: #0000ff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 1rem;
      animation: bounceIn 1s ease-in-out;
      transition: background-color 0.3s;
      transition: 0.3s ease-in-out;
    }

    @keyframes bounceIn {
      0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }
      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }
      40% {
        transform: scale3d(.9, .9, .9);
      }
      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }
      80% {
        transform: scale3d(.97, .97, .97);
      }
      100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }
    }

    button:hover {
      transition: 0.3s ease-in-out;
      background-color: #0077ff;
    }

    button {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: #0000ff;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 1rem;
      animation: bounceIn 1s ease-in-out;
      transition: background-color 0.3s;
      transition: 0.3s ease-in-out;
      margin: 25px
    }

    @keyframes bounceIn {
      0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }
      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }
      40% {
        transform: scale3d(.9, .9, .9);
      }
      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }
      80% {
        transform: scale3d(.97, .97, .97);
      }
      100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }


    }



        .title {
            font-size: 1.5em;
            margin-bottom: 10px;
            color: #333;
        }
        .description {
            font-size: 1em;
            margin-bottom: 20px;
            color: #666;
        }
        .link {
            font-size: 1em;
            color: #007BFF;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .link:hover {
            color: #0056b3;
        }

        #hiddenContainer {
          z-index: 99999;
          background-color: none;
          height: 100%;
          width: 100%;
          size: 100px;
        }
    </style>
</head>
<body>




  <div id="hiddenContainer" style="display: none;">
    <div class="container10" id="container10"></div>
    <div class="section">
        <h1>Hello</h1>
    </div>
    <!-- Add more hidden elements here if needed -->
</div>
<div id="loader" class="loader5">
    <div class="square" id="sq1"></div>
    <div class="square" id="sq2"></div>
    <div class="square" id="sq3"></div>
    <div class="square" id="sq4"></div>
    <div class="square" id="sq5"></div>
    <div class="square" id="sq6"></div>
    <div class="square" id="sq7"></div>
    <div class="square" id="sq8"></div>
    <div class="square" id="sq9"></div>
</div>
  <div class="toast-panel">
  </div>
    <div class="background-video"></div>
</body>
</html>
<p>I want to add a 8 digit code into my column in supabase with javascript when the page loads, but i can't! I always get errors, can somebody help me please!</p>
<p>This is the error that i had:</p>
<pre><code>Uncaught ReferenceError: require is not defined
at developers.js:1:17
</code></pre>
<p>I tried this code:</p>
<pre><code>const express = require('express');
const supabase = require('@supabase/supabase-js');

const app = express();
const port = process.env.PORT || 3000;

// Replace with your Supabase project details
const supabaseUrl = '';
const supabaseAnonKey = '';

const supabaseClient = supabase.createClient(supabaseUrl, supabaseAnonKey);

// Function to generate a random 8-digit numeric code
function generateRandomCode() {
return Math.floor(10000000 + Math.random() * 90000000).toString();
}

// Function to insert the code into the database
async function insertCode(code) {
try {
const { data, error, status } = await supabase
.from('secrets') // Replace with your table name
.insert([{ 'secret': code }]); // Replace 'secret' with your column name

if (error) {
console.error('Error inserting code:', error.message);
if (status === 401) {
console.error('Unauthorized - check row-level security policy.');
}
return false;
}

return true;
} catch (error) {
console.error('Error inserting code:', error.message);
return false;
}
}

// Endpoint to handle code generation and redirection
app.get('/generate-code', async (req, res) => {
const uniqueCode = generateRandomCode();
const success = await insertCode(uniqueCode);

if (success) {
console.log('Code inserted successfully:', uniqueCode);
// Generate a temporary session token (replace with your secure token generation logic)
const sessionToken = 'your_secure_session_token'; // Placeholder, implement secure token generation

// Redirect with a temporary session token (avoid exposing code directly)
res.redirect(`connected.html?token=${sessionToken}`);
} else {
console.error('Failed to insert code.');
res.status(500).send('Internal Server Error');
}
});

app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
</code></pre>
<p>Connected to this html:</p>
<pre><code><script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "mo59qy3t56");
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (window.top !== window.self) {
window.top.location = window.location.href;
}
});
</script>
</head>
<style>
/* Your CSS Styles */
body {
margin: 0;
padding: 0;
font-family: "Varela Round", sans-serif;
overflow-x: hidden;
position: relative;
justify-content: center;
text-align: center;
justify-content: center;
align-items: center;
}

.background-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url('../4085479.jpg') no-repeat center center fixed;
background-size: cover;
}

.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
z-index: 1;
position: relative;
}

.sidebar {
width: 250px;
background-color: rgba(117, 117, 117, 0.9); /* Semi-transparent white */
padding: 20px;
position: fixed;
top: 0;
bottom: 0;
left: -250px; /* Initially hidden */
overflow-y: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease; /* Slide in from left */
z-index: 2;
border-radius: 25px;
}

.sidebar.open {
left: 0; /* Slide in to show */
}

.logo {
text-align: center;
margin-bottom: 30px;
}

.logo img {
width: 100px;
height: 100px; /* Reduced size */
border-radius: 50%; /* Circular */
}

.menu {
list-style: none;
padding: 0;
margin: 0;
}

.menu li {
margin-bottom: 10px;
}

.menu a {
color: #a3a3a3; /* Darker Gray */
text-decoration: none;
font-size: 1.2rem;
display: block;
padding: 15px;
border-radius: 5px;
transition: background-color opacity 0.3s ease;
background-color: #474747; /* Light Gray */
opacity: 0.6;
width: 200px;
}

.menu a:hover {
background-color: #ddd; /* Light Gray */
color: #333; /* Darker Gray */
opacity: 1;
}

.special {
color: #a3a3a3; /* Darker Gray */
text-decoration: none;
font-size: 1.2rem;
display: block;
padding: 15px;
border-radius: 5px;
transition: background-color opacity 0.3s ease;
background-color: #1a1a1a; /* Light Gray */
opacity: 0.9;
width: 200px;
}

.special:hover {
background-color: #0f0f0f; /* Light Gray */
color: #333; /* Darker Gray */
opacity: 1;
}

.content {
flex: 1;
margin-left: 250px;
padding: 20px;
transition: margin-left 0.3s ease;
background-color: #f9f9f9; /* Light Gray */
border-radius: 10px;
}

.header {
text-align: center;
margin-bottom: 50px;
color: #fff; /* White */
}

.header h1 {
font-size: 3rem;
color: #000000;
}

.header p {
font-size: 1.2rem;
color: #709dff; /* Darker Gray */
}

.about p {
font-size: 1.2rem;
line-height: 1.6;
}

.contact {
background-color: #f9f9f9; /* Light Gray */
padding: 20px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.contact h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.contact p {
font-size: 1.2rem;
}

/* Toast Messages */
.toast-panel {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.toast-item {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease;
width: 300px;
margin-bottom: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
background-color: #3498db; /* Blue */
color: #fff; /* White */
}

.toast {
padding: 15px;
position: relative;
}

.toast-content {
font-weight: bold;
margin-bottom: 10px;
}

.close-toast {
position: absolute;
right: 100px;
bottom: 20px;
width: 100%;
height: 100%;
scale: 100;
cursor: url('delete.png'), auto;
}

.close-toast:before,
.close-toast:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #fff; /* White */
border-radius: 2px;
}

.close-toast:before {
transform: rotate(45deg);
}

.close-toast:after {
transform: rotate(-45deg);
}

/* Menu Icon */
.menu-icon {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background-color: none; /* White background */
color: #000; /* Black color */
z-index: 1;
cursor: pointer;
scale: 2;
right: 7px;
transition: 0.3s ease-in-out;
}

.menu-icon:hover {
transform: opa(0.6);
color: #ffffff;
}


::-webkit-scrollbar {
display: none; /* Hide scrollbar */
}

.button2 {
background-color: #4580ff;
color: #fff;
border-radius: 5px;
cursor: pointer;
scale: 1.5;
top: 20px;
right: 20px;
z-index: 1000;
cursor: pointer;
border: none;
text-align: center;
justify-self: center;
transition: 0.3s ease-in-out;
width: 100px;
height: 30px;
}

.button2:hover {
background-color: #0076c5;
color: #fff;
transform: scale(1.1);
}

.taskbar {
width: 100%;
z-index: 100000000000000000000;
cursor: help;
position: fixed; /* Ensures the taskbar stays fixed at the bottom */
border: none;
height: 50px;
bottom: 0px;
display: flex; /* Use flexbox for centering content */
justify-content: center;
align-items: center; /* Ensure content is vertically centered */
background-color: #2e2e2e;
opacity: 0.9;
color: #a3a3a3;
text-align: center; /* Ensure text is center-aligned */
transition: 0.4s ease-in-out;
}

.taskbar p {
display: inline-block; /* Make paragraphs display inline */
margin: 0 10px; /* Add some spacing between paragraphs */
transition: 0.4s ease-in-out;
}

.taskbar .text {
color: #a3a3a3;
font-weight: bold;
border-radius: 20px;
transition: 0.4s ease-in-out;
font-family: 'Times New Roman', Times, serif;
}

.taskbar .text:hover {
color: green;
transform: scale(1.1);
transition: 0.4s ease-in-out;
cursor: crosshair;
}

.taskbar #ip-address {
color: #a3a3a3;
font-weight: bold;
border-radius: 20px;
transition: 0.4s ease-in-out;
font-family: 'Times New Roman', Times, serif;
cursor: pointer;
}

.taskbar #ip-address:hover {
color: red;
transform: scale(1.1);
transition: 0.4s ease-in-out;
cursor: crosshair;
}
.body2 {
margin: 0;
padding: 0;
justify-content: center;
text-align: center;
justify-items: center;
text-justify: auto;
font-family: 'Times New Roman', Times, serif;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center;
justify-content: center;
justify-items: center;
text-justify: center;
}

#intro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #121212;
color: white;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.intro-content {
display: flex;
text-align: center;
justify-content: center;
justify-items: center;
text-justify: center;
}

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin-top: 20px;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#main-content {
display: none;
}

.content {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 80%;
max-width: 600px;
}

.subscription {
margin-top: 50px;
}


.dots-bars-1 {
width: 40px;
height: 40px;
--c: linear-gradient(currentColor 0 0);
--r1: radial-gradient(farthest-side at bottom,currentColor 93%,#0000);
--r2: radial-gradient(farthest-side at top ,currentColor 93%,#0000);
background:
var(--c) ,
var(--r1),
var(--r2),
var(--c) ,
var(--r1),
var(--r2),
var(--c) ,
var(--r1),
var(--r2);
background-repeat: no-repeat;
animation: db1 1s infinite alternate;
}

@keyframes db1 {
0%,10% {
background-size: 8px 0,8px 4px,8px 4px;
background-position: 0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);
}
90%,100% {
background-size: 8px 100%,8px 4px, 8px 4px;
background-position: 0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);
}
}



.load {
--uib-size: 80px;
--uib-color: black;
--uib-speed: 1.75s;
--uib-stroke: 5px;
--uib-bg-opacity: .1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: var(--uib-stroke);
width: var(--uib-size);
border-radius: calc(var(--uib-stroke) / 2);
overflow: hidden;
transform: translate3d(0, 0, 0);
z-index: auto;
}

.load::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--uib-color);
opacity: var(--uib-bg-opacity);
transition: background-color 0.3s ease;
}

.load::after {
content: '';
height: 100%;
width: 100%;
border-radius: calc(var(--uib-stroke) / 2);
animation: wobble var(--uib-speed) ease-in-out infinite;
transform: translateX(-95%);
background-color: var(--uib-color);
transition: background-color 0.3s ease;
}

@keyframes wobble {
0%,
100% {
transform: translateX(-95%);
}
50% {
transform: translateX(95%);
}
}

@keyframes wipe-enter {
0% {
transform: scale(0, .025);
}
50% {
transform: scale(1, .025);
}
}

/* <div class="load"></div> */
/* <div class="dots-bars-1"></div> *//* BEST */
</style>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.section {
background: none;
padding: 3rem;
z-index: 999999;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
text-align: center;
width: 400px;
animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}

.input-group {
margin-bottom: 1.5rem;
text-align: left;
position: relative;
animation: slideIn 1s ease-in-out;
}

@keyframes slideIn {
from { opacity: 0; transform: translateX(-100px); }
to { opacity: 1; transform: translateX(0); }
}

.input-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
animation: fadeInLabel 1s ease-in-out;
}

@keyframes fadeInLabel {
from { opacity: 0; }
to { opacity: 1; }
}

.input-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 6px;
transition: border-color 0.3s;
}

.input-group input:focus {
border-color: #5151E5;
outline: none;
}

.image-preview {
width: 100%;
max-width: 200px;
height: auto;
border: 1px solid #ccc;
border-radius: 6px;
margin-top: 1rem;
display: none;
animation: fadeInPreview 0.5s ease-in-out;
}

@keyframes fadeInPreview {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}

.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #0000ff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 1rem;
animation: bounceIn 1s ease-in-out;
transition: background-color 0.3s;
transition: 0.3s ease-in-out;
}

@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}

button:hover {
transition: 0.3s ease-in-out;
background-color: #0077ff;
}

button {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #0000ff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 1rem;
animation: bounceIn 1s ease-in-out;
transition: background-color 0.3s;
transition: 0.3s ease-in-out;
margin: 25px
}

@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}


}



.title {
font-size: 1.5em;
margin-bottom: 10px;
color: #333;
}
.description {
font-size: 1em;
margin-bottom: 20px;
color: #666;
}
.link {
font-size: 1em;
color: #007BFF;
text-decoration: none;
transition: color 0.3s ease;
}
.link:hover {
color: #0056b3;
}

#hiddenContainer {
z-index: 99999;
background-color: none;
height: 100%;
width: 100%;
size: 100px;
}
</style>
</head>
<body>




<div id="hiddenContainer" style="display: none;">
<div class="container10" id="container10"></div>
<div class="section">
<h1>Hello</h1>
</div>
<!-- Add more hidden elements here if needed -->
</div>
<div id="loader" class="loader5">
<div class="square" id="sq1"></div>
<div class="square" id="sq2"></div>
<div class="square" id="sq3"></div>
<div class="square" id="sq4"></div>
<div class="square" id="sq5"></div>
<div class="square" id="sq6"></div>
<div class="square" id="sq7"></div>
<div class="square" id="sq8"></div>
<div class="square" id="sq9"></div>
</div>
<div class="toast-panel">
</div>
<div class="background-video"></div>
</body>
</html>
</code></pre>
Continue reading...
 

Latest posts

Top