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:
Uncaught ReferenceError: require is not defined
at developers.js:1:17
I tried this 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:
<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>