mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-16 07:33:42 -05:00
Compare commits
41 commits
cdaa7b8383
...
f387478ad1
Author | SHA1 | Date | |
---|---|---|---|
![]() |
f387478ad1 | ||
![]() |
6dec49e9b9 | ||
![]() |
5a507c1a00 | ||
![]() |
1de8c759fe | ||
![]() |
00b97cd784 | ||
![]() |
8431aeda71 | ||
![]() |
1f0844f6ab | ||
![]() |
b94bf2fcf2 | ||
![]() |
0c4031a6b4 | ||
![]() |
d12ef50b40 | ||
![]() |
6f9f5eecff | ||
![]() |
b6f92c2769 | ||
![]() |
a7a1124777 | ||
![]() |
ada8421ff0 | ||
![]() |
e93fbb4493 | ||
![]() |
211fc2417d | ||
![]() |
b3b8ba2635 | ||
![]() |
1434914526 | ||
![]() |
0311f5cd2e | ||
![]() |
53f980a4f0 | ||
![]() |
e7d877d7ab | ||
![]() |
e338df7dfe | ||
![]() |
b8664fb3c7 | ||
![]() |
fde4985a89 | ||
![]() |
87b0f7c3ba | ||
![]() |
2e26475bdd | ||
![]() |
ac6bbadd89 | ||
![]() |
53af769168 | ||
![]() |
044f1ec481 | ||
![]() |
8ab6268f69 | ||
![]() |
2a341df29d | ||
![]() |
fed17909a1 | ||
![]() |
4f265053e5 | ||
![]() |
53180d2b4b | ||
![]() |
5c8453c03a | ||
![]() |
063b8498a6 | ||
![]() |
897ff5e673 | ||
![]() |
0dbd68a685 | ||
![]() |
2211e17680 | ||
![]() |
6fde431c77 | ||
![]() |
bb96308a5a |
7 changed files with 725 additions and 3 deletions
71
assets/games/casino/index.html
Normal file
71
assets/games/casino/index.html
Normal file
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MilkNet | Casino</title>
|
||||
<link id="favicon" rel="icon" href="/assets/img/milk.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>MilkNet Casino</h1>
|
||||
<p>Feeling lucky? Inspired by github.com/Xameren/Casino</p>
|
||||
<p id="balance">Balance: $1000</p>
|
||||
|
||||
<!-- Bet amount input -->
|
||||
<label for="bet-amount">Bet Amount:</label>
|
||||
<input type="number" id="bet-amount" value="100">
|
||||
|
||||
<!-- Navigation buttons -->
|
||||
<div>
|
||||
<button onclick="showGame('horse-racing')">Horse Racing</button>
|
||||
<button onclick="showGame('blackjack')">Blackjack</button>
|
||||
<button onclick="showGame('slots')">Slots</button>
|
||||
<button onclick="showGame('coin-flip')">Coin Flip</button>
|
||||
</div>
|
||||
|
||||
<!-- Horse Racing Game -->
|
||||
<div id="horse-racing" class="game" style="display:none;">
|
||||
<h2>Horse Racing</h2>
|
||||
<label for="horse-selection">Choose your horse:</label>
|
||||
<select id="horse-selection">
|
||||
<option value="Horse 1">Horse 1</option>
|
||||
<option value="Horse 2">Horse 2</option>
|
||||
<option value="Horse 3">Horse 3</option>
|
||||
<option value="Horse 4">Horse 4</option>
|
||||
</select>
|
||||
<button onclick="startHorseRacing()">Start Race</button>
|
||||
<p id="race-result"></p>
|
||||
</div>
|
||||
|
||||
<!-- Blackjack Game -->
|
||||
<div id="blackjack" class="game" style="display:none;">
|
||||
<h2>Blackjack</h2>
|
||||
<button onclick="startBlackjack()">Start Game</button>
|
||||
<button onclick="hit()">Hit</button>
|
||||
<button onclick="stand()">Stand</button>
|
||||
<p id="blackjack-cards"></p>
|
||||
<p id="blackjack-status"></p>
|
||||
</div>
|
||||
|
||||
<!-- Slots Game -->
|
||||
<div id="slots" class="game" style="display:none;">
|
||||
<h2>Slots</h2>
|
||||
<button onclick="playSlots()">Spin</button>
|
||||
<p id="slots-result"></p>
|
||||
</div>
|
||||
|
||||
<!-- Coin Flip Game -->
|
||||
<div id="coin-flip" class="game" style="display:none;">
|
||||
<h2>Coin Flip</h2>
|
||||
<label for="coin-choice">Choose:</label>
|
||||
<select id="coin-choice">
|
||||
<option value="Heads">Heads</option>
|
||||
<option value="Tails">Tails</option>
|
||||
</select>
|
||||
<button onclick="flipCoin()">Flip Coin</button>
|
||||
<p id="coin-flip-result"></p>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
174
assets/games/casino/script.js
Normal file
174
assets/games/casino/script.js
Normal file
|
@ -0,0 +1,174 @@
|
|||
let balance = 1000;
|
||||
|
||||
// Update balance display
|
||||
function updateBalance() {
|
||||
document.getElementById('balance').innerText = `Balance: $${balance}`;
|
||||
}
|
||||
|
||||
// Show selected game
|
||||
function showGame(gameId) {
|
||||
const games = document.querySelectorAll('.game');
|
||||
games.forEach(game => game.style.display = 'none');
|
||||
document.getElementById(gameId).style.display = 'block';
|
||||
}
|
||||
|
||||
// Get bet amount
|
||||
function getBetAmount() {
|
||||
const bet = parseInt(document.getElementById('bet-amount').value);
|
||||
if (bet > balance) {
|
||||
alert("You don't have enough balance for this bet.");
|
||||
return null;
|
||||
}
|
||||
if (bet <= 0) {
|
||||
alert("Please enter a valid bet amount.");
|
||||
return null;
|
||||
}
|
||||
return bet;
|
||||
}
|
||||
|
||||
// Horse Racing Game
|
||||
function startHorseRacing() {
|
||||
const bet = getBetAmount();
|
||||
if (bet === null) return;
|
||||
|
||||
const playerHorse = document.getElementById('horse-selection').value;
|
||||
const horses = ['Horse 1', 'Horse 2', 'Horse 3', 'Horse 4'];
|
||||
const winner = horses[Math.floor(Math.random() * horses.length)];
|
||||
|
||||
let resultMessage = `You bet on ${playerHorse}. ${winner} wins the race! `;
|
||||
|
||||
if (playerHorse === winner) {
|
||||
balance += bet;
|
||||
resultMessage += `You win $${bet}!`;
|
||||
} else {
|
||||
balance -= bet;
|
||||
resultMessage += `You lose $${bet}.`;
|
||||
}
|
||||
|
||||
document.getElementById('race-result').innerText = resultMessage;
|
||||
updateBalance();
|
||||
}
|
||||
|
||||
// Blackjack Game
|
||||
let playerCards = [];
|
||||
let dealerCards = [];
|
||||
|
||||
function startBlackjack() {
|
||||
const bet = getBetAmount();
|
||||
if (bet === null) return;
|
||||
|
||||
playerCards = [drawCard(), drawCard()];
|
||||
dealerCards = [drawCard(), drawCard()];
|
||||
|
||||
document.getElementById('blackjack-status').innerText = 'Game started. Your move!';
|
||||
showBlackjackCards();
|
||||
}
|
||||
|
||||
function drawCard() {
|
||||
return Math.floor(Math.random() * 11) + 1;
|
||||
}
|
||||
|
||||
function calculateTotal(cards) {
|
||||
return cards.reduce((a, b) => a + b, 0);
|
||||
}
|
||||
|
||||
function showBlackjackCards() {
|
||||
document.getElementById('blackjack-cards').innerText =
|
||||
`Your cards: ${playerCards.join(', ')} (Total: ${calculateTotal(playerCards)})\n` +
|
||||
`Dealer shows: ${dealerCards[0]}`;
|
||||
}
|
||||
|
||||
function hit() {
|
||||
playerCards.push(drawCard());
|
||||
showBlackjackCards();
|
||||
const total = calculateTotal(playerCards);
|
||||
if (total > 21) endBlackjackGame('lose');
|
||||
}
|
||||
|
||||
function stand() {
|
||||
while (calculateTotal(dealerCards) < 17) {
|
||||
dealerCards.push(drawCard());
|
||||
}
|
||||
|
||||
const playerTotal = calculateTotal(playerCards);
|
||||
const dealerTotal = calculateTotal(dealerCards);
|
||||
|
||||
if (dealerTotal > 21 || playerTotal > dealerTotal) {
|
||||
endBlackjackGame('win');
|
||||
} else if (playerTotal === dealerTotal) {
|
||||
endBlackjackGame('draw');
|
||||
} else {
|
||||
endBlackjackGame('lose');
|
||||
}
|
||||
}
|
||||
|
||||
function endBlackjackGame(result) {
|
||||
const bet = getBetAmount();
|
||||
if (bet === null) return;
|
||||
|
||||
let message = '';
|
||||
if (result === 'win') {
|
||||
balance += bet;
|
||||
message = `You win $${bet}!`;
|
||||
} else if (result === 'lose') {
|
||||
balance -= bet;
|
||||
message = `You lose $${bet}.`;
|
||||
} else {
|
||||
message = "It's a draw!";
|
||||
}
|
||||
|
||||
updateBalance();
|
||||
document.getElementById('blackjack-status').innerText =
|
||||
`${message} Dealer's cards: ${dealerCards.join(', ')} (Total: ${calculateTotal(dealerCards)})`;
|
||||
}
|
||||
|
||||
// Slots Game
|
||||
function playSlots() {
|
||||
const bet = getBetAmount();
|
||||
if (bet === null) return;
|
||||
|
||||
const symbols = ['🍒', '🍋', '🍊', '🍉', '⭐'];
|
||||
const spin = [randomSymbol(symbols), randomSymbol(symbols), randomSymbol(symbols)];
|
||||
|
||||
let resultMessage = `Result: ${spin.join(' ')}`;
|
||||
if (spin.every(s => s === spin[0])) {
|
||||
balance += bet * 5;
|
||||
resultMessage += `\nJackpot! You win $${bet * 5}!`;
|
||||
} else if (new Set(spin).size === 2) {
|
||||
balance += bet * 2;
|
||||
resultMessage += `\nTwo of a kind! You win $${bet * 2}!`;
|
||||
} else {
|
||||
balance -= bet;
|
||||
resultMessage += `\nYou lose $${bet}.`;
|
||||
}
|
||||
|
||||
document.getElementById('slots-result').innerText = resultMessage;
|
||||
updateBalance();
|
||||
}
|
||||
|
||||
function randomSymbol(symbols) {
|
||||
return symbols[Math.floor(Math.random() * symbols.length)];
|
||||
}
|
||||
|
||||
// Coin Flip Game
|
||||
function flipCoin() {
|
||||
const bet = getBetAmount();
|
||||
if (bet === null) return;
|
||||
|
||||
const playerChoice = document.getElementById('coin-choice').value;
|
||||
const outcomes = ['Heads', 'Tails'];
|
||||
const result = outcomes[Math.floor(Math.random() * outcomes.length)];
|
||||
|
||||
let resultMessage = `You chose ${playerChoice}. The coin landed on ${result}. `;
|
||||
|
||||
if (playerChoice === result) {
|
||||
balance += bet;
|
||||
resultMessage += `You win $${bet}!`;
|
||||
} else {
|
||||
balance -= bet;
|
||||
resultMessage += `You lose $${bet}.`;
|
||||
}
|
||||
|
||||
document.getElementById('coin-flip-result').innerText = resultMessage;
|
||||
updateBalance();
|
||||
}
|
88
assets/games/casino/style.css
Normal file
88
assets/games/casino/style.css
Normal file
|
@ -0,0 +1,88 @@
|
|||
/* Apply global styles */
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(to right, #000000, #1e3c72); /* Black to blue gradient */
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* Game selection buttons */
|
||||
.game-selection {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
background-color: #1e3c72;
|
||||
color: white;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #154c79;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #0d3a56;
|
||||
}
|
||||
|
||||
/* Game container styles */
|
||||
.game {
|
||||
display: none;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.game h2 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.game p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
font-size: 1em;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Game results */
|
||||
#race-result, #blackjack-result, #slots-result, #coin-flip-result {
|
||||
font-size: 1.5em;
|
||||
margin-top: 20px;
|
||||
font-weight: bold;
|
||||
}
|
273
draw/index.html
Normal file
273
draw/index.html
Normal file
|
@ -0,0 +1,273 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MilkNet | Draw</title>
|
||||
<link id="favicon" rel="icon" href="/assets/img/milk.png" type="image/x-icon">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
#drawingCanvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: #fff;
|
||||
border: 2px solid #ccc;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 40px);
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.controls input[type="color"],
|
||||
.controls input[type="range"],
|
||||
.controls select {
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.controls button:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
#shapeSelector {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<canvas id="drawingCanvas"></canvas>
|
||||
|
||||
<div class="controls">
|
||||
<div>
|
||||
<label for="toolSelector">Tool</label>
|
||||
<select id="toolSelector">
|
||||
<option value="brush">Brush</option>
|
||||
<option value="rainbow">Rainbow Brush</option>
|
||||
<option value="eraser">Eraser</option>
|
||||
<option value="shape">Shape</option>
|
||||
</select>
|
||||
|
||||
<label for="shapeSelector">Shape</label>
|
||||
<select id="shapeSelector">
|
||||
<option value="square">Square</option>
|
||||
<option value="circle">Circle</option>
|
||||
<option value="triangle">Triangle</option>
|
||||
</select>
|
||||
|
||||
<label for="colorPicker">Color</label>
|
||||
<input type="color" id="colorPicker" value="#000000">
|
||||
|
||||
<label for="brushSize">Thickness</label>
|
||||
<input type="range" id="brushSize" min="1" max="50" value="5">
|
||||
|
||||
<button id="undoButton">Undo</button>
|
||||
<button id="redoButton">Redo</button>
|
||||
</div>
|
||||
|
||||
<button id="clearButton">Clear</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('drawingCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const clearButton = document.getElementById('clearButton');
|
||||
const colorPicker = document.getElementById('colorPicker');
|
||||
const brushSize = document.getElementById('brushSize');
|
||||
const toolSelector = document.getElementById('toolSelector');
|
||||
const shapeSelector = document.getElementById('shapeSelector');
|
||||
const undoButton = document.getElementById('undoButton');
|
||||
const redoButton = document.getElementById('redoButton');
|
||||
|
||||
let isDrawing = false;
|
||||
let lastX = 0, lastY = 0;
|
||||
let startX = 0, startY = 0;
|
||||
let previewCanvas, previewCtx;
|
||||
let hue = 0;
|
||||
let currentTool = 'brush';
|
||||
let currentShape = 'square';
|
||||
const undoStack = [];
|
||||
const redoStack = [];
|
||||
|
||||
function saveState() {
|
||||
undoStack.push(canvas.toDataURL());
|
||||
redoStack.length = 0;
|
||||
}
|
||||
|
||||
function restoreState(stackFrom, stackTo) {
|
||||
if (stackFrom.length === 0) return;
|
||||
stackTo.push(canvas.toDataURL());
|
||||
const img = new Image();
|
||||
img.src = stackFrom.pop();
|
||||
img.onload = () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
};
|
||||
}
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
ctx.lineCap = 'round';
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
function getPosition(e) {
|
||||
if (e.touches && e.touches.length > 0) {
|
||||
return { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
||||
} else {
|
||||
return { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
}
|
||||
|
||||
function startDrawing(e) {
|
||||
const pos = getPosition(e);
|
||||
isDrawing = true;
|
||||
startX = lastX = pos.x;
|
||||
startY = lastY = pos.y;
|
||||
if (currentTool !== 'shape') saveState();
|
||||
}
|
||||
|
||||
function stopDrawing(e) {
|
||||
if (!isDrawing) return;
|
||||
isDrawing = false;
|
||||
if (currentTool === 'shape') {
|
||||
const pos = getPosition(e);
|
||||
drawShape(startX, startY, pos.x, pos.y, true);
|
||||
saveState();
|
||||
}
|
||||
}
|
||||
|
||||
function draw(e) {
|
||||
const pos = getPosition(e);
|
||||
if (currentTool === 'shape' && isDrawing) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
restorePreview();
|
||||
drawShape(startX, startY, pos.x, pos.y, false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isDrawing) return;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastX, lastY);
|
||||
ctx.lineTo(pos.x, pos.y);
|
||||
|
||||
if (currentTool === 'rainbow') {
|
||||
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
|
||||
hue = (hue + 1) % 360;
|
||||
} else if (currentTool === 'eraser') {
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
} else {
|
||||
ctx.strokeStyle = colorPicker.value;
|
||||
}
|
||||
|
||||
ctx.lineWidth = brushSize.value;
|
||||
ctx.stroke();
|
||||
lastX = pos.x;
|
||||
lastY = pos.y;
|
||||
}
|
||||
|
||||
function drawShape(x1, y1, x2, y2, finalDraw) {
|
||||
if (finalDraw) restorePreview();
|
||||
ctx.fillStyle = colorPicker.value;
|
||||
ctx.lineWidth = brushSize.value;
|
||||
ctx.beginPath();
|
||||
|
||||
if (currentShape === 'square') {
|
||||
const width = x2 - x1;
|
||||
const height = y2 - y1;
|
||||
ctx.fillRect(x1, y1, width, height);
|
||||
} else if (currentShape === 'circle') {
|
||||
const radius = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) / 2;
|
||||
ctx.arc((x1 + x2) / 2, (y1 + y2) / 2, radius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
} else if (currentShape === 'triangle') {
|
||||
ctx.moveTo((x1 + x2) / 2, y1);
|
||||
ctx.lineTo(x1, y2);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function restorePreview() {
|
||||
const img = new Image();
|
||||
img.src = canvas.toDataURL();
|
||||
img.onload = () => ctx.drawImage(img, 0, 0);
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', startDrawing);
|
||||
canvas.addEventListener('mousemove', draw);
|
||||
canvas.addEventListener('mouseup', stopDrawing);
|
||||
canvas.addEventListener('mouseout', stopDrawing);
|
||||
|
||||
canvas.addEventListener('touchstart', startDrawing);
|
||||
canvas.addEventListener('touchmove', draw);
|
||||
canvas.addEventListener('touchend', stopDrawing);
|
||||
|
||||
colorPicker.addEventListener('input', (e) => ctx.strokeStyle = e.target.value);
|
||||
brushSize.addEventListener('input', (e) => ctx.lineWidth = e.target.value);
|
||||
toolSelector.addEventListener('change', (e) => {
|
||||
currentTool = e.target.value;
|
||||
shapeSelector.style.display = currentTool === 'shape' ? 'block' : 'none';
|
||||
});
|
||||
shapeSelector.addEventListener('change', (e) => currentShape = e.target.value);
|
||||
|
||||
undoButton.addEventListener('click', () => restoreState(undoStack, redoStack));
|
||||
redoButton.addEventListener('click', () => restoreState(redoStack, undoStack));
|
||||
clearButton.addEventListener('click', () => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
saveState();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -9,7 +9,7 @@
|
|||
<body>
|
||||
<img src="/assets/img/milk_optimized.png" class="center">
|
||||
<h1 class="center-text">MilkNet</h1>
|
||||
<p class="center-text">Paradise for bored students. What would you like to do?</p>
|
||||
<p class="center-text">Boredom medicine. What would you like to do?</p>
|
||||
|
||||
<div class="center-text">
|
||||
<a href="/games">Games</a> •
|
||||
|
@ -17,7 +17,9 @@
|
|||
<a href="/links.txt">Links</a> •
|
||||
<a href="/form">Contact</a> •
|
||||
<a href="/gba">GBA Games</a> •
|
||||
<a href="/tools">Settings & tools</a>
|
||||
<a href="/tools">Settings & tools</a> •
|
||||
<a href="/wx">Weather</a> •
|
||||
<a href="/assets/games/casino">Casino (WIP also no actual money lel)</a>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
|
114
notes/index.html
Normal file
114
notes/index.html
Normal file
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MilkNet | Notepad</title>
|
||||
<link id="favicon" rel="icon" href="/assets/img/milk.png" type="image/x-icon">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background: black;
|
||||
color: white;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
#toolbar button, #toolbar select {
|
||||
background: #222;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#notepad {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
background: black;
|
||||
color: white;
|
||||
border: none;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="toolbar">
|
||||
<button onclick="format('bold')">Bold</button>
|
||||
<button onclick="format('italic')">Italic</button>
|
||||
<button onclick="insertBullet()">Bullet</button>
|
||||
<button onclick="format('strikeThrough')">Strike</button>
|
||||
<select onchange="changeFontSize(this.value)">
|
||||
<option value="1">Small</option>
|
||||
<option value="3" selected>Normal</option>
|
||||
<option value="5">Large</option>
|
||||
<option value="7">Huge</option>
|
||||
</select>
|
||||
<button onclick="downloadText()">Download as .txt</button>
|
||||
<button onclick="downloadMarkdown()">Download as .md</button>
|
||||
</div>
|
||||
<iframe id="notepad" contenteditable="true"></iframe>
|
||||
|
||||
<script>
|
||||
const iframe = document.getElementById('notepad');
|
||||
const doc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
doc.designMode = 'on';
|
||||
|
||||
const saved = localStorage.getItem('darkNotepad');
|
||||
doc.body.style.background = 'black';
|
||||
doc.body.style.color = 'white';
|
||||
doc.body.style.margin = '0';
|
||||
doc.body.style.padding = '1rem';
|
||||
doc.body.style.fontFamily = 'Helvetica Neue, sans-serif';
|
||||
doc.body.innerHTML = saved || '';
|
||||
|
||||
doc.addEventListener('input', () => {
|
||||
localStorage.setItem('darkNotepad', doc.body.innerHTML);
|
||||
});
|
||||
|
||||
function format(cmd) {
|
||||
doc.execCommand(cmd, false, null);
|
||||
}
|
||||
|
||||
function insertBullet() {
|
||||
doc.execCommand('insertUnorderedList');
|
||||
}
|
||||
|
||||
function changeFontSize(size) {
|
||||
doc.execCommand('fontSize', false, size);
|
||||
}
|
||||
|
||||
function downloadText() {
|
||||
const textContent = doc.body.innerText;
|
||||
const blob = new Blob([textContent], { type: 'text/plain' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'notepad.txt';
|
||||
link.click();
|
||||
}
|
||||
|
||||
function downloadMarkdown() {
|
||||
let markdownContent = doc.body.innerText;
|
||||
markdownContent = markdownContent.replace(/•/g, '-');
|
||||
const blob = new Blob([markdownContent], { type: 'text/plain' });
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = 'notepad.md';
|
||||
link.click();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<div class="center-text">
|
||||
<p class="center-text">Weather apps</p>
|
||||
<a href="/weather">IntelliSTAR by qconrad</a> • <a href="/weatherscan-v1/v1.weatherscan.net">Weatherscan v1 by mistwx.com</a> • <a href="/weatherscan-v2/v2.weatherscan.net">Weatherscan v2 by mistwx.com</a>
|
||||
<a href="/weather">IntelliSTAR by qconrad</a> • <a href="/weatherscan-v2/v2.weatherscan.net">Weatherscan 2 by mistwx.com</a>
|
||||
|
||||
<footer>
|
||||
<a href="/"><img src="/assets/img/88x31.png" loading="lazy" width="88" height="31"></a>
|
||||
|
|
Loading…
Add table
Reference in a new issue