Skip to content

Commit

Permalink
Merge pull request #20 from ramnetos/revert-19-main
Browse files Browse the repository at this point in the history 
Revert merge of WifiGiver #19
  • Loading branch information
@DJshelfmushroom
DJshelfmushroom authored Jun 25, 2024
2 parents 578d4e0 + f4c1cac commit 55596c9
Show file tree
Hide file tree
Showing 5 changed files with 390 additions and 473 deletions.
Binary file removed images.jpg
View file
Binary file not shown.
328 changes: 209 additions & 119 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,209 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="taskbar.js"></script>
<title>RamOS Web | Early Access</title>
<link rel="icon" href="https://raw.githubusercontent.com/theshmunguss1/RamOS/main/images/favicon.ico">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>

<body>
<nav>
<div class="mainMenu">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<div class="settings">
<ul style="list-style-type: none; font-size: medium;">
<li><strong>Settings</strong></li>
<li><label for="background-upload" class="upload-button">Image background</label>
<input type="file" id="background-upload" accept="image/*" onchange="handleBackgroundUpload()">
</li>
<li><button class="Tourney reset" onclick="pageTitle()">Set Tab Title</button>
</li>
<li><button class="Tourney" onclick="restoreDefault()">Restore Defaults</button>
</li>
</ul>
<script>
const mainMenu = document.querySelector('.mainMenu');
const settings = document.querySelector('.settings');
const body = document.body;
const footer = document.footer;
mainMenu.addEventListener('click', () => {
mainMenu.classList.toggle('active');
settings.classList.toggle('active');
});

function handleBackgroundUpload() {
const fileInput = document.getElementById('background-upload');
const file = fileInput.files[0];
const reader = new FileReader();

reader.onload = function(e) {
const backgroundImage = e.target.result;
document.body.style.backgroundImage = `url(${backgroundImage})`;
adaptTextColor();
}

reader.readAsDataURL(file);
}

function adaptTextColor() {
const body = document.body;
const computedStyle = getComputedStyle(body);
const backgroundColor = computedStyle.backgroundColor;
const rgb = backgroundColor.match(/\d+/g);
const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;

if (brightness > 125) {
body.style.color = '#333';
} else {
body.style.color = '#f5f5f5';
}
}
</script>
</div>
<div style="color: rgb(255, 255, 255);">
<h1>Welcome to RamOS!</h1>
<p>Expect bugs and errors, and if you come across them, report them <a href="https://github.com/ramnetos/RamOS/issues" style="color: rgb(0, 81, 255)">here</a>.</p>
<img alt="RamWorks logo" id="logo" src="logo.png">
</div>
<!--I was thinking using IFrames for moveable windows in the browser.
You would already have the HTML made and it wouldn't take much more work. If so, put them here before the scrollbar:-->
<div class="scrollHeading1">
News, etc.
</div>
<div class="scrollbar_1">
<div class="scrollElement"><img src="images.jpg">News 1</div>
<div class="scrollElement"><img src="images.jpg">News 2</div>
<div class="scrollElement"><img src="images.jpg">News 3</div>
<div class="scrollElement"><img src="images.jpg">News 4</div>
<div class="scrollElement"><img src="images.jpg">News 5</div>
<!--Scrollbar- add or remove as necessary-->
</div>
<div class="taskContainer">
<div class="taskbar">
<a class="task" name="Home" href="./index.html">
<img alt="RamOS Icon" src="./icon/ramos.jpeg">
</a>
<a class="task" name="Astroid" href="./html/astroidv3.html">
<img alt="Astroid Icon" src="./icon/astroid-icon.png">
</a>
<a class="task" name="Doge Unblocker" href="./html/dogeub4.html">
<img alt="Doge Unblocker Icon" src="./icon/doge-icon.png">
</a>
<a class="task" name="Incognito" href="./html/incognito.html">
<img alt="Incognito Icon" src="./icon/incognito.png">
</a>
<a class="task" name="Scientific Calculator" href="./html/calc.html">
<img alt="Calculator Icon" src="./icon/graphing-icon.png">
</a>
<a class="task" name="3kho Games" href="./html/3kho.html">
<img alt='3kho Icon' src="./icon/3kho.png">
</a>
<a class='task' name='Snorlax Games' href='./html/Snore.html'>
<img alt='Snorlax Icon' src='./icon/snore.jpeg'>
</a>
</div>
</div>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RamOS Web | Early Access</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="taskbar.js"></script>
<link rel="icon" href="https://raw.githubusercontent.com/theshmunguss1/RamOS/main/images/favicon.ico">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<style>

body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
}

p {
text-align: center;
font-size: 18px;
margin-top: 20px;
}

#logo {
display: block;
margin: 0 auto;
width: 50%;
max-width: 400px;
}

a {
text-align: center;
text-decoration: none;
color: #007bff;
transition: color 0.3s;
}

a:hover {
color: #0056b3;
}

.taskbar {
background-color: #f0f0f0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Helvetica Neue", Arial, sans-serif;
color: #333;
text-decoration: none;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.taskbar .task {
margin: 3px 10px;
padding: 8px 16px;
border-radius: 20px;
background-color: transparent;
border: 2px solid #d0d0d0;
display: flex;
align-items: center;
transition: transform 0.3s, margin 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
transform: scale(1);
}

.taskbar .task:hover {
background-color: #d0d0d0;
color: #333;
border-color: #d0d0d0;
transition: transform 0.3s, margin-left 0.3s margin-right 0.3s margin-bottom 0.3s;
transform: scale(1.2);
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
}

.taskbar .task:active {
background-color: #007bff;
color: white;
border-color: #007bff;
}

.taskbar .task img {
width: 20px;
height: 20px;
margin-right: 2px;
margin-left: 2px;
}
.task {
position: relative;
display: inline-block;
}

.task:hover::after {
content: attr(name);
position: absolute;
border-radius: 5px;
top: -2.5em;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 0.2em;
font-size: 0.8em;
white-space: nowrap;
}
.upload-button {
display: inline-block;
margin: 0 10px;
padding: 8px 16px;
border-radius: 20px;
background-color: transparent;
border: 2px solid #007bff;
color: #007bff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.upload-button:hover {
background-color: #007bff;
color: white;
border-color: #007bff;
}

.upload-button:active {
background-color: #0056b3;
border-color: #0056b3;
}

/* Hide the default file input */
#background-upload {
display: none;
}
.github-button {
display: inline-block;
padding: 12px 24px;
background-color: #333;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 18px;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

</style>
<script>
$("#dialog").dialog();
$("#dialog").dialog("close");
function popup(){
$("#dialog").dialog().css("visibility: visible;");
}
function handleBackgroundUpload() {
const fileInput = document.getElementById('background-upload');
const file = fileInput.files[0];
const reader = new FileReader();

reader.onload = function(e) {
const backgroundImage = e.target.result;
document.body.style.backgroundImage = `url(${backgroundImage})`;
adaptTextColor();
}

reader.readAsDataURL(file);
}

function adaptTextColor() {
const body = document.body;
const computedStyle = getComputedStyle(body);
const backgroundColor = computedStyle.backgroundColor;
const rgb = backgroundColor.match(/\d+/g);
const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;

if (brightness > 125) {
body.style.color = '#333';
} else {
body.style.color = '#f5f5f5';
}
}
</script>
</head>
<body>
<h1>Welcome to RamOS!</h1>
<p>Expect bugs and errors, and if you come across them, report them <a href="https://github.com/ramnetos/RamOS/issues">here</a>.</p>
<img src="logo.png" alt="RamWorks logo" id="logo">
<p><i>RamOS Web Early Access v1.0.4</i></p>

<div class="taskbar">
</div>

<script>
adaptTextColor();
</script>
</body>
<div id="dialog" title="Basic dialog">
<p>This is a diolouge test to see if im an epic gamer or if I'm shit at coding.</p>
</div>
</html>
Binary file removed ramBackground.png
View file
Binary file not shown.
Loading

0 comments on commit 55596c9

Please sign in to comment.