added portal with teleprompter
All checks were successful
code.valorantdigital.com-projectgaruda/portal.intranet.valorantdigital.com/pipeline/head This commit looks good

This commit is contained in:
Your Name
2025-09-12 22:21:22 -04:00
parent a6d321bebb
commit 8c1c8f098a
3 changed files with 415 additions and 17 deletions

View File

@@ -23,31 +23,36 @@
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8"> <div class="col-12 col-md-10 col-lg-8">
<h2 class="text-center mb-4">EmbaNET Portal</h2> <h2 class="text-center mb-4">Valorant Digital Portal</h2>
<p class="text-center mb-4"> <p class="text-center mb-4">
This portal provides a central hub for accessing various internal development and management tools, This portal provides a central hub for accessing various internal development and management tools,
making it easy to navigate to the different services required for your projects. making it easy to navigate to the different services required for your projects.
</p> </p>
<div class="row" id="link-container"> <div class="row" id="link-container">
<div class="col-12 d-grid gap-2"> <div class="col-12 d-grid gap-2">
<a href="http://intranet.valorantdigital.com:8000" id="wordpress" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Wordpress
</a>
<a href="http://intranet.valorantdigital.com:9000" id="kanban" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Aria OS
</a>
<a href="http://intranet.valorantdigital.com:8096" id="radio" class="btn btn-primary" target="radio">
<i class="fa-solid fa-globe"></i>&nbsp;Radio
</a>
<a href="http://intranet.valorantdigital.com:3380" id="phpmyadmin" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;PHPMyAdmin
</a>
<a href="http://intranet.valorantdigital.com:3000" id="gitea" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Gitea
</a>
<a href="http://intranet.valorantdigital.com:5000" id="jenkins" class="btn btn-primary" target="_blank"> <a href="http://intranet.valorantdigital.com:5000" id="jenkins" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Jenkins <i class="fa-solid fa-globe"></i>&nbsp;Source Code Build & Deploy
</a> </a>
<a href="http://intranet.valorantdigital.com:3000" id="gitea" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Private Code Repositories
</a>
<a href="http://intranet.valorantdigital.com:3380" id="phpmyadmin" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Development Database Manager
</a>
<a href="/tools/teleprompter.html" id="phpmyadmin" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Streaming Teleprompter (tool)
</a>
<a href="http://intranet.valorantdigital.com:8096" id="radio" class="btn btn-primary" target="radio">
<i class="fa-solid fa-globe"></i>&nbsp;Streaming Radio
</a>
</div> </div>
</div> </div>
</div> </div>

70
legacy.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Valorant Digital Intranet</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.3/dist/lux/bootstrap.min.css">
<style>
.container {
padding-top: 50px;
padding-bottom: 50px;
}
/* Style the link container to take up more space on wider screens */
#link-container .btn {
width: 100%;
margin-bottom: 1.5rem; /* Increased margin for more separation */
padding: 1.5rem; /* Increased padding to make buttons taller */
font-size: 1.25rem; /* Larger font size for better readability */
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<h2 class="text-center mb-4">EmbaNET Portal</h2>
<p class="text-center mb-4">
This portal provides a central hub for accessing various internal development and management tools,
making it easy to navigate to the different services required for your projects.
</p>
<div class="row" id="link-container">
<div class="col-12 d-grid gap-2">
<a href="http://intranet.valorantdigital.com:5000" id="jenkins" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Source Code Build & Deploy
</a>
<a href="http://intranet.valorantdigital.com:3000" id="gitea" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Private Code Repositories
</a>
<a href="http://intranet.valorantdigital.com:8000" id="wordpress" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Wordpress
</a>
<a href="http://intranet.valorantdigital.com:9000" id="kanban" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Aria OS
</a>
<a href="http://intranet.valorantdigital.com:3380" id="phpmyadmin" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Experiments Database Manager
</a>
<a href="/tools/teleprompter.html" id="phpmyadmin" class="btn btn-primary" target="_blank">
<i class="fa-solid fa-globe"></i>&nbsp;Streaming Teleprompter (tool)
</a>
<a href="http://intranet.valorantdigital.com:8096" id="radio" class="btn btn-primary" target="radio">
<i class="fa-solid fa-globe"></i>&nbsp;Streaming Radio
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/ee2093fa90.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

323
tools/teleprompter.html Normal file
View File

@@ -0,0 +1,323 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superhero Teleprompter</title>
<!-- Bootswatch Superhero Theme -->
<link rel="stylesheet" href="https://bootswatch.com/4/superhero/bootstrap.min.css">
<!-- Custom Styles -->
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Inter', sans-serif;
overflow: hidden; /* Hide scrollbars on the body */
}
/* Main welcome screen */
.welcome-screen {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
text-align: center;
}
.welcome-screen h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
.welcome-screen p {
font-size: 1.25rem;
margin-bottom: 2rem;
color: #adb5bd;
}
/* Teleprompter screen styles */
.teleprompter-view {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
z-index: 1050;
}
/* The content area that will scroll */
#teleprompter-content {
font-size: 5vw; /* Responsive font size */
line-height: 1.5;
text-align: center;
padding: 50vh 10% 50vh 10%; /* Top and bottom padding push text start/end to center */
white-space: pre-wrap; /* Respect newlines and spaces */
overflow-wrap: break-word;
will-change: transform;
}
/* Center line indicator */
.indicator {
position: fixed;
top: 50%;
left: 0;
width: 100%;
border-top: 3px solid #df691a;
transform: translateY(-50%);
z-index: 1051;
opacity: 0.7;
}
/* Controls at the bottom */
.controls {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
z-index: 1052;
flex-wrap: wrap;
}
.controls .btn {
min-width: 100px;
}
.controls .btn-info {
background-color: #4e5d6c;
border-color: #4e5d6c;
}
.controls .btn-info.active {
background-color: #df691a;
border-color: #c95a0c;
}
</style>
</head>
<body>
<!-- Welcome Screen -->
<div class="container welcome-screen" id="welcomeScreen">
<div>
<h1 class="display-4">Teleprompter Suite</h1>
<p class="lead">Your presentation, delivered with precision. Paste your script to begin.</p>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#scriptModal">
Load Script
</button>
</div>
</div>
<!-- Teleprompter View -->
<div class="teleprompter-view" id="teleprompterView">
<div class="indicator"></div>
<div id="teleprompter-content-wrapper" style="height:100%; overflow-y:scroll;">
<div id="teleprompter-content"></div>
</div>
<div class="controls">
<button id="speedSlow" class="btn btn-info">Slow</button>
<button id="speedMedium" class="btn btn-info">Medium</button>
<button id="speedFast" class="btn btn-info">Fast</button>
<button id="pauseResume" class="btn btn-success">Start</button>
<button id="reset" class="btn btn-danger">Restart</button>
<button id="editScript" class="btn btn-secondary">Edit Script</button>
<button id="exit" class="btn btn-dark">Exit</button>
</div>
</div>
<!-- Modal for script input -->
<div class="modal fade" id="scriptModal" tabindex="-1" role="dialog" aria-labelledby="scriptModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scriptModalLabel">Enter Your Script</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<textarea id="scriptInput" class="form-control" rows="15" placeholder="Paste your text here..."></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveScript">Save & Use Script</button>
</div>
</div>
</div>
</div>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- js-cookie for easy cookie management -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script>
$(document).ready(function() {
// --- State Variables ---
let scrollInterval;
let isPaused = true;
let currentSpeed = 25; // Default speed (milliseconds per pixel)
const speeds = {
slow: 50,
medium: 25,
fast: 10
};
const $teleprompterView = $('#teleprompterView');
const $welcomeScreen = $('#welcomeScreen');
const $contentWrapper = $('#teleprompter-content-wrapper');
const $pauseResumeBtn = $('#pauseResume');
const $speedBtns = $('.controls .btn-info');
// --- Core Functions ---
// Function to start scrolling
function startScrolling() {
if (scrollInterval) clearInterval(scrollInterval); // Clear any existing interval
scrollInterval = setInterval(function() {
$contentWrapper.scrollTop($contentWrapper.scrollTop() + 1);
}, currentSpeed);
isPaused = false;
$pauseResumeBtn.text('Pause').removeClass('btn-success').addClass('btn-warning');
}
// Function to stop scrolling
function stopScrolling() {
clearInterval(scrollInterval);
isPaused = true;
$pauseResumeBtn.text('Resume').removeClass('btn-warning').addClass('btn-success');
}
// Function to update the active speed button UI
function updateSpeedUI() {
$speedBtns.removeClass('active');
if (currentSpeed === speeds.slow) {
$('#speedSlow').addClass('active');
} else if (currentSpeed === speeds.medium) {
$('#speedMedium').addClass('active');
} else if (currentSpeed === speeds.fast) {
$('#speedFast').addClass('active');
}
}
// --- Cookie Management ---
// On load, check for a speed cookie
const savedSpeed = Cookies.get('teleprompterSpeed');
if (savedSpeed) {
currentSpeed = parseInt(savedSpeed, 10);
} else {
// Default to medium if no cookie is found
currentSpeed = speeds.medium;
Cookies.set('teleprompterSpeed', currentSpeed, { expires: 365 });
}
updateSpeedUI();
// On load, check for a script cookie
const savedScript = Cookies.get('teleprompterScript');
if (savedScript) {
$('#scriptInput').val(savedScript);
}
// --- Event Handlers ---
// Save/Start Teleprompter button in the modal
$('#saveScript').on('click', function() {
const scriptText = $('#scriptInput').val();
if (scriptText.trim() === '') {
alert('Please enter some text for the script.');
return;
}
// Save the script to a cookie for persistence
Cookies.set('teleprompterScript', scriptText, { expires: 365 });
$('#teleprompter-content').text(scriptText);
$('#scriptModal').modal('hide');
// If teleprompter isn't visible, it's the first run, so show it.
if (!$teleprompterView.is(':visible')) {
$welcomeScreen.hide();
$teleprompterView.show();
}
// Always reset the state after saving new text
stopScrolling();
$contentWrapper.scrollTop(0);
$pauseResumeBtn.text('Start').removeClass('btn-warning').addClass('btn-success');
});
// Pause/Resume button
$pauseResumeBtn.on('click', function() {
if (isPaused) {
startScrolling();
} else {
stopScrolling();
}
});
// Speed control buttons
$('.controls .btn-info').on('click', function() {
const speedKey = $(this).attr('id').replace('speed', '').toLowerCase();
currentSpeed = speeds[speedKey];
Cookies.set('teleprompterSpeed', currentSpeed, { expires: 365 }); // Save preference
updateSpeedUI();
// If it's not paused, restart the scrolling with the new speed
if (!isPaused) {
startScrolling();
}
});
// Reset button
$('#reset').on('click', function() {
stopScrolling();
$contentWrapper.scrollTop(0); // Scroll back to the top
$pauseResumeBtn.text('Start').removeClass('btn-warning').addClass('btn-success');
});
// Edit Script button
$('#editScript').on('click', function() {
stopScrolling();
// Ensure the modal has the latest text from the prompter
$('#scriptInput').val($('#teleprompter-content').text());
$('#scriptModal').modal('show');
});
// Exit button
$('#exit').on('click', function() {
stopScrolling();
$contentWrapper.scrollTop(0);
$teleprompterView.hide();
$welcomeScreen.show();
$pauseResumeBtn.text('Start').removeClass('btn-warning').addClass('btn-success');
});
// Allow keyboard control
$(document).on('keydown', function(e) {
// Only control if the teleprompter is visible
if ($teleprompterView.is(':visible')) {
// Space bar for pause/resume
if (e.keyCode === 32) {
e.preventDefault(); // Prevent page from scrolling
$pauseResumeBtn.click();
}
// Arrow up to scroll up (rewind)
if (e.keyCode === 38) {
e.preventDefault();
$contentWrapper.scrollTop($contentWrapper.scrollTop() - 30);
}
// Arrow down to scroll down (fast forward)
if (e.keyCode === 40) {
e.preventDefault();
$contentWrapper.scrollTop($contentWrapper.scrollTop() + 30);
}
}
});
});
</script>
</body>
</html>