mirror of
https://github.com/milk-net/milk-net.github.io.git
synced 2025-04-19 17:43: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>
|
<body>
|
||||||
<img src="/assets/img/milk_optimized.png" class="center">
|
<img src="/assets/img/milk_optimized.png" class="center">
|
||||||
<h1 class="center-text">MilkNet</h1>
|
<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">
|
<div class="center-text">
|
||||||
<a href="/games">Games</a> •
|
<a href="/games">Games</a> •
|
||||||
|
|
@ -17,7 +17,9 @@
|
||||||
<a href="/links.txt">Links</a> •
|
<a href="/links.txt">Links</a> •
|
||||||
<a href="/form">Contact</a> •
|
<a href="/form">Contact</a> •
|
||||||
<a href="/gba">GBA Games</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>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<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">
|
<div class="center-text">
|
||||||
<p class="center-text">Weather apps</p>
|
<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>
|
<footer>
|
||||||
<a href="/"><img src="/assets/img/88x31.png" loading="lazy" width="88" height="31"></a>
|
<a href="/"><img src="/assets/img/88x31.png" loading="lazy" width="88" height="31"></a>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue