<!DOCTYPE html>
<html>
<head>
<title>Seamless texture check | pycheung.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Pragma" content="no-cache">

<style>
html,body{
    margin:0;
    width: 100%;
    height:100vh;
    /* height: 200vh; */
    background-size: 350px;
    background-image: url("pycheung_herringbone_bg.jpg");
    transition: background-size 0.1s;
}
.snap{
    scroll-snap-align: start;
}
*{
    box-sizing: border-box;
}
a, a:visited, a:active{
    text-decoration:none;
    color:#00f;
}
a:hover{
    color: #000;
}
.noshow{
    display:none !important;
}

.app{
    position:relative;
    font-family: Arial, Helvetica, sans-serif;
}
.app h1{
    margin:0;
}
.app a {
    text-decoration: none;
}
.app a, .app a:visited, .app a:active{
    border:0;
}
a:hover{
    border:0;
}
.flex{
    display:flex;
}
.flex-wrap{
    flex-wrap: wrap;
}
.align-items-center{
    align-items: center;
}
.align-items-start{
    align-items: start;
}
.flex-grow{
    flex-grow: 1;
}
.gap-s{
    gap:0.3rem;
}
.gap{
    gap:1rem;
}
.title{
    font-family: Arial, Helvetica, sans-serif;
    font-size:15pt;
    line-height: 15pt;
}
/* #container{
    transition: all 0.5s;
} */
.box{
    position:absolute;
    top:5rem;
    left:50%;
    transform: translateX(-50%);
    min-width:600px;
    width:80%;
    max-width:900px;
}
.bg{
    background-color:#fff;
    border-radius:0.8rem;
    padding:0.2rem 0.4rem;
}
.inner{
    padding: 0.4rem;
}
.box img{
    height:40px;
    vertical-align: middle;
}
.app #logo{
    height:60px;
}
.center2{
    display:flex;
    align-items: center;
    justify-content: center;
}
.btn{
    width:3rem;
    height:3rem;
    border-radius: 0.4rem;
    border:1px solid #888;
    font-size:0.8rem;
    line-height: 2.8rem;
    text-align: center;
}
button.btn:hover{
    cursor: pointer;
    outline:1px solid #000;
}
button.disabled:hover{
    cursor: default;
    outline:0;
}
button.btn .fill{
    fill:#444;
}
button.disabled .fill{
    fill:#ccc;
}
#pastebox{
    overflow:hidden;
    resize: none;
    text-align: center;
}

#sourcecontainer{
    position:absolute;
    width:100%;
    height:200vh;
    /* background-color: #f004; */
}
.source{
    font-family: Arial, Helvetica, sans-serif;
    color:#fff; 
    text-align:center;
    font-size:12pt;
    line-height:24pt;
    text-shadow:-1px -1px 1px #333,  
                1px -1px 1px #333,
                -1px 1px 1px #333,
                1px 1px 1px #333;
}
.source a{
    color:#fff;
    text-decoration: none;
}
.note{
    position:absolute;
    opacity:0.5;
    top:3rem;
    left:50%;
    transform: translateX(-50%);
    text-align:center;
    
}
.small{
    font-size: 0.8rem;
}
#onetime{
    font-size:1rem;
    color:#eee;
    width:100%;
    padding:0.5rem 2rem;
    background: #0008;
    border-radius: 0.6rem;
    margin-bottom:0.2rem;
    box-shadow: inset 0 0 5px #444;
}
#onetime .guide:hover{
    cursor: help;
}
#onetime a,
#onetime a:active,
#onetime a:visited{
    color:#eee;
}
.margin-bottom{
    margin-bottom: 0.5rem;
}
ol,ul{
    padding-left:1rem;
}
@media only screen and (max-width: 600px) {
    #container {
        top:0;
        transform: translate(-50%,0);
        width:100%;
        min-width:auto;
    }
    h1{
        font-size:1rem;
    }
    nav{
        justify-content: space-between;
    }
    .max600{
        display:none;
    }
	.flex-footer{
		align-items: center !important;
	}
}
@media only screen and (max-width: 320px) {
    .toolset{
        flex-wrap: wrap;
    }
}
/* range slider styles from https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/ */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    /* margin-top:0.2rem; */
    /* min-width:200px; */
    height:3rem;
    flex:auto;
}
input[type="range"]:active {
    cursor: grabbing;
}
/***** Track Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-runnable-track {
    background: #eee;
    height: 3rem;
    border-radius: 0.3rem;  
    box-shadow: inset 0 0 5px#ccc;
    border:1px solid #ccc;
}
/******** Firefox ********/
input[type="range"]::-moz-range-track {
    background: #eee;
    height: 3rem;
    border-radius: 0.3rem;  
    box-shadow: inset 0 0 5px#ccc;
    border:1px solid #ccc;
}

/***** Thumb Styles *****/
/***** Chrome, Safari, Opera, and Edge Chromium *****/
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -1px;
    background-color: #ddd;
    height: 3rem;
    width: 3rem;  
    border-radius: 0.2rem;  
    outline:1px solid #888;
    

}
/***** Firefox *****/
input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #ddd;
    height: 3rem;
    width: 3rem;
    border-radius: 0.2rem;  
    outline:1px solid #888;
}

/***** Chrome *****/
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}


.shadow{
    box-shadow: 0 25px 20px -30px #011a;
}
.shadow2{
    box-shadow: 0 5px 10px #888a;
}
.round{
    border-radius: 1rem;
}
.highlight{
    outline:2px solid #000;
}
.announcement{
    text-align: center;
    margin:0;
}
.announcement .btn{
    background:#555;
    padding:0.6rem 1.2rem;
    font-weight: bold;
}

#initial a,#initial a:visited{
  color:#fffc;
}
#initial{
  width:100%;
  font-size:9pt;
  text-align:center;
  color:#fffc;
}
.external{
    width: 100%;
    margin-top:-1rem;
    gap:0.5rem;
    position:relative;
    z-index:1;

}
.pullout{
    background-color: #fffC;
    color:#000;
    /* padding:0.8rem 0.8rem 0.4rem 0.8rem; */
    padding:1.3rem 0.8rem 0.2rem 0.8rem;
    border-radius: 0 0 0.8rem 0.8rem;
    backdrop-filter: blur(3px);
    font-size:0.8rem;
    
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    /* gap:0.4rem; */
    /* justify-content: center; */
}
.links{
    display:inline-block;
    /* background-color: #3335; */
    padding:0.2rem 0.4rem;
    border-radius: 0.4rem;
    /* font-size:0.8rem; */
}

</style>
<script src="tiff.min.js" charset="UTF-8"></script>
</head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HQGFEM1R7W"></script>
<script>window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag('js', new Date());  gtag('config', 'G-HQGFEM1R7W');</script>
<body>
<main class="scrollcontainer">

<section id="preview" class="app snap">

    <div class="general" id="extended">


        <nav class="box shadow round" id="container">

            <div class="shadow2 bg flex flex-wrap align-items-center" style="position:relative;z-index:2">
            <div class="inner flex gap align-items-center">
                <div>
                  <h1 id="displayed_title" class="title">
                      Seamless Texture Checker   
                </h1>
                  <span id="displayed_tagline" class="tagline small">
                        Quick tool to test & check seamless tiles<br>
                        by <a href="https://www.pycheung.com" target="_top">Eric</a> | <a href="https://x.com/pycweblog" target="_blank">Twitter @pycweblog</a> | <a href="https://www.buymeacoffee.com/pycheung" target="_blank">Buy me a coffee</a>
                    </span>
                </div>
            </div>
            <div class="inner flex gap-s flex-grow align-items-center toolset">
              <button id="filebtn" class="btn hl" onclick="selectfile()">
                  File
              </button>
                <input class="btn" id="pastebox" type="text" placeholder="Paste">


                <input id="setWidthSlider" type="range" name="points" min="1" max="20" value="7">
                <button  id="downloadBtn"  class="btn center2 disabled" disabled="true">
                    <svg width="28" height="28" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M44.6021 5.45437C44.6021 4.90208 44.1544 4.45437 43.6021 4.45437H20.3509C19.7986 4.45437 19.3509 4.90209 19.3509 5.45437V27.9424C19.3509 28.4946 18.9032 28.9424 18.3509 28.9424H7.63558C6.71239 28.9424 6.28225 30.0865 6.97682 30.6947L31.0353 51.7606C31.4092 52.088 31.9666 52.0912 32.3442 51.7681L56.9675 30.7022C57.6733 30.0984 57.2463 28.9424 56.3174 28.9424H45.6021C45.0498 28.9424 44.6021 28.4946 44.6021 27.9424V5.45437Z"/>
                      <rect class="fill" x="4.97552" y="55.3737" width="54.049" height="5.21133" rx="1"/>
                    </svg>
                </button>
            </div>


            <div id="onetime" class="">
                
                <p>
                    Image file input options:
                    <ol>
                        <li>Drag and drop image from another browser window or local file anywhere here</li>
                        <li>Click on the <span class="guide" onclick="document.getElementById('filebtn').focus()">[File]</span> button to select a local image (good for mobile users)</li>
                        <li>Paste (experimental)
                            <ul>
                                <li>a copied image into the <span class="guide" onclick="document.getElementById('pastebox').focus()">[Paste]</span> box </li>
                                <li>copied image link</li>
                                <li>copied local file (chrome only)</li>
                                <li>copy and paste image with keyboard shortcut on PC</li>
                            </ul>
                        </li>
                    </ol>
                    Shortcut: hold shift+mouse wheel scroll to change image size 
                    <br><br>
                    <div class="small">
                    2014.01.26 first online, last updated 2025.04.12 | <a href="https://www.pycheung.com/projects/seamless-texture-checker/">Change log</a> | Tested on Chrome & Firefox.

</div>
                </p>
              </div>

            </div>

            <div class="external">
                <div class="pullout">
                    <b>Useful links →</b>
                    
                    <div class="links">
                        Upscale and enhance your tiles at <a href="https://ClarityAI.co" target="_blank">ClarityAI.co</a>
                    </div> <span class="minhide">|</span>
                    <div class="links">
                        Tools to draw seamless texture <a href="https://versa.tile.graphics" target="_blank">versa.tile.graphics</a>
                    </div>
                </div>
            </div>
      </nav>
    </div>
</section>

<div class="snap">&nbsp;</div>
</main>

<input type="file" id="file" onchange="loadfile(this)" accept="image/png, image/jpeg, image/webp" class="noshow">
<script src="main.js?v9" charset="UTF-8"></script>
</body>
</html>