Ads.txt Alerts - Protect your revenue

simonpalmer.com Ads.txt file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simon Palmer</title>
<style>
body {
margin: 0;
font-family: sans-serif;
background: #fff;
color: #333;
}
.hero {
position: relative;
height: 100vh;
background: url('images/selfportrait.jpg') no-repeat center center/cover;
}
.hero-name {
position: absolute;
top: 20px;
left: 30px;
font-size: 2em;
color: white;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.3em 0.6em;
border-radius: 0.25em;
}
nav {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 2em;
background: rgba(34, 34, 34, 0.95);
padding: 1em 0;
z-index: 1000;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 2em;
max-width: 1000px;
margin: auto;
padding-top: 4em;
}
h2 {
border-bottom: 1px solid #ddd;
padding-bottom: 0.5em;
}
.carousel-container {
position: relative;
overflow: hidden;
margin-bottom: 2em;
}
.carousel {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 1em;
scroll-behavior: smooth;
padding: 1em 2em;
width: 100%;
box-sizing: border-box;
}
.carousel {
-ms-overflow-style: none;
scrollbar-width: none;
}
.carousel img {
flex: 0 0 auto;
height: 200px;
width: auto;
border: 1px solid #ccc;
}

.carousel-arrow {
position: absolute;
top: 0;
bottom: 0;
width: 30px;
background: rgba(0,0,0,0.3);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
font-size: 2em;
user-select: none;
}
.carousel-arrow.left {
left: 0;
}
.carousel-arrow.right {
right: 0;
}
.carousel::-webkit-scrollbar {
display: none;
}

.tool-item {
position: relative;
flex: 0 0 auto;
width: 200px;
text-align: center;
}
.tool-item img {
width: 100%;
height: auto;
border: 1px solid #ccc;
}
.tool-item .overlay {
display: none;
position: fixed;
background: rgba(255, 255, 255, 0.95);
color: #000;
border: 1px solid #ccc;
padding: 1em;
text-align: left;
z-index: 10000;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
max-width: 300px;
pointer-events: none;
}
.gallery {
display: flex;
flex-wrap: nowrap;
gap: 1em;
overflow-x: auto;
width: 100%;
padding: 1em 0;
}
.gallery img {
flex: 0 0 auto;
height: 200px;
width: auto;
border: 1px solid #ccc;
}
.gallery-title {
margin-top: 2em;
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EXBN1JTTC1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-EXBN1JTTC1');
</script>
<body>
<div class="hero">
<div class="hero-name">
<p align-items="center" display="flex" margin="0" gap="8px">Simon Palmer

</p>
</div>
</div>

<nav>
<a href="#tools">Tools</a>

<a href="https://www.simonpalmerartist.co.uk/" target="_blank">For the other (better) Simon Palmer artist click here</a>
</nav>

<section id="tools">
<h2>Painting Tools</h2>
<div class="carousel-container">
<div class="carousel-arrow left" onclick="scrollCarousel(-1, this)">❮</div>
<div class="carousel">
<div class="tool-item">
<a href="index-picker.html">
<img src="images/picker.png" alt="Munsell Colour Grouping Tool" />
<div>Munsell Colour Grouping Tool</div>
</a>
<div class="overlay">
<h2>Colour Grouping Tool</h2>
<p>This tool was created to enable you to put together groups of munsell colours that represent mixing strategies for colours in your paintings. It is intended for use alongside Michele Clamp's ChromaMagic tool. </p>
<p>I found myself wanting to simplify the variety of colours I was going to use for painting, and doing this ahead of time while analysing what was really in the image. I was making notes of the Munsell notations of the small number of colours - out of the almost infinite variety that exists in the real world. I wanted a way to both remind myself of the colour schemes I decided to use and then to be able to get them into large swatches on the screen for mixing.</p>
<p>Bear in mind you need to calibrate your monitor in order to make sure you are looking at the right colour when you use all these tools.</p>
</div>
</div>
<div class="tool-item">
<a href="index_circle_generic.html">
<img src="images/hue-wheel.png" alt="Munsell Hue Wheel" />
<div>Munsell Hue Navigator</div>
</a>
<div class="overlay">
<h2>Munsell Hue Navigator</h2>
<p>This tool is a convenient way to navigate the Munsell Colour Space and to get to a full screen rendition of a particular colour.</p>
<p>The Munsell to RGB colour mapping used in this tool come from Paul Centore whose work can be found at the link on this page.</p>
<p>To use it click on the hue you require and then on the link in any colour swatch to get a full screen page of that colour.</p>
</div>
</div>
<div class="tool-item">
<a href="gridder.html">
<img src="images/grid-image.jpg" alt="Grid tool" />
<div>Grid tool</div>
</a>
<div class="overlay">
<h2>Grid Tool</h2>
<p>This tool allows you to upload an image and add a grid to it.</p>
<p>You can change the number of lines horizontally and vertically and the grid line colour.</p>
<p>You can then download your gridded image.</p>
</div>
</div>
<div class="tool-item">
<a href="https://micheleclamp.com/ChromaMagic/" target="_blank">
<img src="images/chromamagic.png" alt="ChromaMagic" />
<div>Michele Clamp's ChromaMagic Tool</div>
</a>
<div class="overlay">
<h2>ChromaMagic</h2>
<p>Michele Clamp has created the amazing ChromaMagic tool. Upload a photo and you can get accurate Munsell notated colours for areas of the image. The tool hastens learning about what colours actually exist in a scene.</p>
<p>If you are serious about realism in your paintings, then ChromaMagic is the key to teaching your eye how to see what is really there.</p>
</div>
</div>
<div class="tool-item">
<a href="https://www.ebay.com/itm/223003792036" target="_blank">
<img src="images/centore-value-scale.jpg" alt="Paul Centore Value Scale" />
<div>Buy Paul Centore Value Scale</div>
</a>
<a href="https://www.munsellcolourscienceforpainters.com/" target="_blank">Go to Paul Centore's Web Site</a>
<div class="overlay">
<h2>Munsell to RGB conversions</h2>
<p>The Munsell to RGB conversions used in here come from Paul Centore's web site. No mapping between the two colour systems is exactly perfect, and online resources are scarce. I have done my best to create a true representation of the colour space in the tools above.</p>
<p>However, the caveat remains that the mapping are not perfect and you need to calibrate your monitor in order to make sure you are looking at the right colour when you use these tools.</p>
<p>In addition to the mappings, Paul Centore also sells an indispensible true Munsell value scale which can be found on ebay.</p>
</div>
</div>
<div class="tool-item">
<a href="https://www.learning-to-see.co.uk/" target="_blank">
<img src="images/foxton.png" alt="Paul Foxton" />
<div>Paul Foxton's online school</div>
</a>
<a href="https://www.youtube.com/@PaulFoxton/streams" target="_blank">
<div>Paul Foxton's YouTube Channel</div>
</a>
<div class="overlay">
<h2>Paul Foxton</h2>
<p>I owe my introduction, and a great deal of learning on this subject to Paul Foxton who is a painter and teacher of immense skill. Paul has a very active YouTube channel and importantly an online school. </p>
</div>
</div>
</div>
<div class="carousel-arrow right" onclick="scrollCarousel(1, this)">❯</div>
</div>
</section>







<script>
function scrollCarousel(direction, el) {
const carousel = el.parentElement.querySelector('.carousel');
const scrollAmount = direction * 220;
carousel.scrollBy({ left: scrollAmount, behavior: 'smooth' });
}

function updateCarouselArrows() {
document.querySelectorAll('.carousel-container').forEach(container => {
const carousel = container.querySelector('.carousel');
const leftArrow = container.querySelector('.carousel-arrow.left');
const rightArrow = container.querySelector('.carousel-arrow.right');

if (leftArrow && rightArrow && carousel) {
leftArrow.style.display = carousel.scrollLeft > 0 ? 'flex' : 'none';
rightArrow.style.display = carousel.scrollWidth - carousel.clientWidth - carousel.scrollLeft > 1 ? 'flex' : 'none';
}
});
}

function handleOverlayPosition(e) {
const toolItem = e.currentTarget;
const overlay = toolItem.querySelector('.overlay');
if (overlay) {
overlay.style.display = 'block';
overlay.style.position = 'fixed';
overlay.style.zIndex = '10000';

const padding = 10;
const marginBelowCursor = 15;
let left = e.clientX + padding;
let top = e.clientY + marginBelowCursor;

const overlayWidth = overlay.offsetWidth;
const overlayHeight = overlay.offsetHeight;
const pageWidth = window.innerWidth;
const pageHeight = window.innerHeight;

if (left + overlayWidth > pageWidth) {
left = e.clientX - overlayWidth - padding;
}
if (top + overlayHeight > pageHeight) {
top = pageHeight - overlayHeight - padding;
}

overlay.style.left = `${left}px`;
overlay.style.top = `${top}px`;
}
}

function hideOverlay(e) {
const overlay = e.target.closest('.tool-item')?.querySelector('.overlay');
if (overlay) overlay.style.display = 'none';
}

window.addEventListener('load', function() {
updateCarouselArrows();

// Add scroll event listeners to all carousels
document.querySelectorAll('.carousel').forEach(carousel => {
carousel.addEventListener('scroll', updateCarouselArrows);
});

// Add mouse event listeners to tool items
document.querySelectorAll('.tool-item').forEach(item => {
item.addEventListener('mousemove', handleOverlayPosition);
item.addEventListener('mouseleave', hideOverlay);
});
});

window.addEventListener('resize', updateCarouselArrows);
</script>

</body>
</html>

simonpalmer.com Ads.txt file

Ads.Txt Alerts - A trading name of Red Volcano Limited Waterloo Buildings, Second Floor Rear, 53 London Road, Southampton, Hampshire, United Kingdom, SO15 2AD Contact ⋅ Sites ⋅ Terms of Use ⋅ Privacy Policy © Red Volcano 2020. All Rights Reserved.

Ads.Txt Alerts - A trading name of Red Volcano Limited

Waterloo Buildings, Second Floor Rear, 53 London Road, Southampton, Hampshire, United Kingdom, SO15 2AD

Contact

⋅

Sites

⋅

Terms of Use

⋅

Privacy Policy

© Red Volcano 2020. All Rights Reserved.