brunoconstantino · April 1, 2025 18:20 · brunoconstantino · Apr 1, 2025
diff --git a/uniqueTab.html b/uniqueTab.html
 <!DOCTYPE html>
 <html lang="pt">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Acesso Único - by Bruno Constantino</title>
    <style>
        <!--
        .uniqueTab {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .uniqueTab .uniqueTab-msg-erro {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 450px;
        }

        .uniqueTab .uniqueTab-msg-erro h2 {
            color: #ff9900;
            font-size: 23px;
            margin-bottom: 15px;
            font-family: Arial, sans-serif;
        }

        .uniqueTab .uniqueTab-msg-erro p {
            font-size: 15px;
            color: #555;
            font-family: Arial, sans-serif;
            line-height: 1.5;
        }

        .uniqueTab .uniqueTab-msg-erro button {
            margin-top: 5px;
            padding: 10px 20px;
            border: none;
            background: #ff9900;
            color: white;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }

        .uniqueTab .uniqueTab-msg-erro button:hover {
            background: #e68a00;
        }

        .uniqueTab .uniqueTab-icone {
            font-size: 50px;
            color: #ff9900;
            margin-bottom: 10px;
        }
        -->
    </style>
    <script type="text/javascript">
        /*
            uniqueTab
            @author Bruno Constantino
        */
        var uniqueTab = {
            init: function () {
                const sessionKey = 'uniqueTabAccess';
                const currentTabId = Date.now();

                function bloquearAba() {
                    window.addEventListener('DOMContentLoaded', () => {
                        document.body.innerHTML = `
                        <div class="uniqueTab">
                            <div class="uniqueTab-msg-erro">
                                <div class="uniqueTab-icone">⚠️</div>
                                <h2>Atenção!</h2>
                                <p>Você já possui uma aba do sistema aberta em seu navegador.<br>Para melhor performance e segurança, por favor, utilize apenas uma aba por vez.</p>
                                <button onclick="window.close();">Fechar esta aba</button><br>
                                <button onclick="localStorage.clear(); window.location.reload()">Forçar acesso nesta aba</button>
                            </div>
                        </div>`;
                    });
                    throw new Error('Bloqueio de múltiplas abas.');
                }

                if (localStorage.getItem(sessionKey)) {
                    bloquearAba();
                } else {
                    localStorage.setItem(sessionKey, currentTabId);
                }

                window.addEventListener('storage', (event) => {
                    if (event.key === sessionKey && event.newValue !== String(currentTabId)) {
                        bloquearAba();
                    }
                });

                window.addEventListener('beforeunload', () => {
                    if (localStorage.getItem(sessionKey) === String(currentTabId)) {
                        localStorage.removeItem(sessionKey);
                    }
                });
            }
        };

        // Ativa o uniqueTab
        uniqueTab.init();
    </script>
 </head>

 <body>
    <h1>Bem-vindo à aplicação!</h1>
    <p>Esta aplicação só pode ser acessada por uma única aba.</p>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="pt">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Acesso Único - by Bruno Constantino</title>
	<style>
	<!--
	.uniqueTab {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	}

	.uniqueTab .uniqueTab-msg-erro {
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	max-width: 450px;
	}

	.uniqueTab .uniqueTab-msg-erro h2 {
	color: #ff9900;
	font-size: 23px;
	margin-bottom: 15px;
	font-family: Arial, sans-serif;
	}

	.uniqueTab .uniqueTab-msg-erro p {
	font-size: 15px;
	color: #555;
	font-family: Arial, sans-serif;
	line-height: 1.5;
	}

	.uniqueTab .uniqueTab-msg-erro button {
	margin-top: 5px;
	padding: 10px 20px;
	border: none;
	background: #ff9900;
	color: white;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
	font-family: Arial, sans-serif;
	}

	.uniqueTab .uniqueTab-msg-erro button:hover {
	background: #e68a00;
	}

	.uniqueTab .uniqueTab-icone {
	font-size: 50px;
	color: #ff9900;
	margin-bottom: 10px;
	}
	-->
	</style>
	<script type="text/javascript">
	/*
	uniqueTab
	@author Bruno Constantino
	*/
	var uniqueTab = {
	init: function () {
	const sessionKey = 'uniqueTabAccess';
	const currentTabId = Date.now();

	function bloquearAba() {
	window.addEventListener('DOMContentLoaded', () => {
	document.body.innerHTML = `
	<div class="uniqueTab">
	<div class="uniqueTab-msg-erro">
	<div class="uniqueTab-icone">⚠️</div>
	<h2>Atenção!</h2>
	<p>Você já possui uma aba do sistema aberta em seu navegador.<br>Para melhor performance e segurança, por favor, utilize apenas uma aba por vez.</p>
	<button onclick="window.close();">Fechar esta aba</button><br>
	<button onclick="localStorage.clear(); window.location.reload()">Forçar acesso nesta aba</button>
	</div>
	</div>`;
	});
	throw new Error('Bloqueio de múltiplas abas.');
	}

	if (localStorage.getItem(sessionKey)) {
	bloquearAba();
	} else {
	localStorage.setItem(sessionKey, currentTabId);
	}

	window.addEventListener('storage', (event) => {
	if (event.key === sessionKey && event.newValue !== String(currentTabId)) {
	bloquearAba();
	}
	});

	window.addEventListener('beforeunload', () => {
	if (localStorage.getItem(sessionKey) === String(currentTabId)) {
	localStorage.removeItem(sessionKey);
	}
	});
	}
	};

	// Ativa o uniqueTab
	uniqueTab.init();
	</script>
	</head>

	<body>
	<h1>Bem-vindo à aplicação!</h1>
	<p>Esta aplicação só pode ser acessada por uma única aba.</p>
	</body>

	</html>