Desgine Modified
parent
2e0e100189
commit
4314342c42
|
|
@ -89,16 +89,22 @@ import Layout from '../../layouts/Layout.astro';
|
|||
colorContainer.style.top = '10%';
|
||||
colorContainer.style.left = '20px';
|
||||
colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
|
||||
|
||||
// Create the color picker
|
||||
const colorPicker = document.createElement('input');
|
||||
colorPicker.type = 'color';
|
||||
colorPicker.value = selectedColor;
|
||||
colorPicker.className = 'color-picker';
|
||||
colorPicker.style.marginTop = '-5px';
|
||||
colorPicker.style.marginRight = '5px';
|
||||
colorPicker.style.width = '45px';
|
||||
colorPicker.style.height = '48px';
|
||||
colorPicker.style.marginTop = '-0px';
|
||||
colorPicker.style.marginRight = '15px';
|
||||
colorPicker.style.padding = '1px 1px';
|
||||
colorPicker.style.outline = 'none';
|
||||
colorPicker.style.width = '46px';
|
||||
colorPicker.style.height = '46px';
|
||||
colorPicker.style.border = '3px solid #05b3a4';
|
||||
colorPicker.style.backgroundColor = '#05b3a4';
|
||||
colorPicker.style.borderRadius = '50%';
|
||||
colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
|
||||
|
||||
colorPicker.addEventListener('input', (event) => {
|
||||
if (!isErasing) {
|
||||
|
|
@ -110,8 +116,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
colorContainer.appendChild(colorPicker);
|
||||
|
||||
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
|
||||
const buttonSize = 40;
|
||||
const buttonSpacing = 10;
|
||||
const buttonSize = 50;
|
||||
const buttonSpacing = 15;
|
||||
|
||||
// Create a container div for the color buttons
|
||||
const colorButtonsContainer = document.createElement('div');
|
||||
|
|
@ -130,13 +136,15 @@ import Layout from '../../layouts/Layout.astro';
|
|||
button.style.backgroundColor = color;
|
||||
button.style.width = `${buttonSize}px`;
|
||||
button.style.height = `${buttonSize}px`;
|
||||
button.style.border = 'none';
|
||||
button.style.border = '3px solid #05b3a4';
|
||||
button.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
button.style.borderRadius = '50%'
|
||||
button.style.marginRight = `${buttonSpacing}px`;
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
// Remove the mark from the previously selected button, if any
|
||||
if (selectedButton) {
|
||||
selectedButton.style.border = 'none'; // Remove the border
|
||||
// Remove the border
|
||||
}
|
||||
// Set the new selected color
|
||||
selectedColor = color;
|
||||
|
|
@ -160,21 +168,24 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// Create a container div for both buttons
|
||||
const buttonsContainer = document.createElement('div');
|
||||
buttonsContainer.style.position = 'absolute';
|
||||
buttonsContainer.style.top = '15%';
|
||||
buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
|
||||
buttonsContainer.style.left = '20px';
|
||||
buttonsContainer.style.top = '17%';
|
||||
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
|
||||
document.body.appendChild(buttonsContainer);
|
||||
|
||||
// Create the Clear button
|
||||
const clearButton = document.createElement('button');
|
||||
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
|
||||
clearButton.style.border = '3px solid blue';
|
||||
// clearButton.textContent = 'Clear';
|
||||
clearButton.style.color = 'blue';
|
||||
// clearButton.style.color = 'white';
|
||||
clearButton.style.marginRight = '10px';
|
||||
clearButton.style.padding = '5px 10px';
|
||||
clearButton.style.fontSize = '16px';
|
||||
clearButton.style.fontWeight = 'bold';
|
||||
clearButton.style.borderRadius = '50%';
|
||||
clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
|
||||
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||||
clearButton.addEventListener('click', () => {
|
||||
clearDrawing();
|
||||
});
|
||||
|
|
@ -184,7 +195,9 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// eraserButton.textContent = 'Eraser';
|
||||
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
|
||||
eraserButton.style.color = '#7c4c23';
|
||||
eraserButton.style.border = '3px solid #7c4c23';
|
||||
// eraserButton.style.color = 'white';
|
||||
eraserButton.style.marginRight = '15px';
|
||||
eraserButton.style.padding = '5px 5px';
|
||||
eraserButton.style.fontSize = '16px';
|
||||
eraserButton.style.fontWeight = 'bold';
|
||||
|
|
@ -219,6 +232,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
slider.max = '80';
|
||||
slider.value = brushSize.toString();
|
||||
slider.className = 'slider';
|
||||
// slider.style.width = `${window.innerWidth / 2}px`;
|
||||
|
||||
slider.addEventListener('input', (event) => {
|
||||
brushSize = parseInt(event.target.value);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import MainHeader from '../components/MainHeader.vue';
|
||||
import Footer from '../components/Footer.astro';
|
||||
---
|
||||
|
|
@ -8,43 +7,18 @@ import Footer from '../components/Footer.astro';
|
|||
<Layout title="Welcome to Astro.">
|
||||
<MainHeader />
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
<code>To get started, open the directory src/pages</code> in your project.<br />
|
||||
<code>Code Challenge: Tweak the "Welcome to Astro" message above.</code>
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
<div>
|
||||
<p class="text-center text-white py-96 text-8xl font-bold">Beanstalkedu Games</p>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
body{
|
||||
background-color: #ffd3ea;
|
||||
background-image: linear-gradient(315deg, #ffd3ea 0%, #403020 74%);
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
|
|
|
|||
Loading…
Reference in New Issue