DTF Print & Press - Customer Supplied Goods & Art
About this app
DTF Print & Press - An easy way to manage customer supplied goods and art.DTF print service calculator for quality prints.
DTF Print & Press - Customer Supplied Goods & Art DTF Print & Press - Customer Supplied Goods & Art - V1 (Receive Goods/Print/Press/Prep & Pack/Ship or Pickup) Calculator Powered by SeaSide Silk Screening ✨ Name/PO Number: Quantity 0: Qty Price Breaks 24, 36, 48, 72, 144, 288. Product Type: T-Shirt - $0 Polo - $1 Fleece - $2 Cap - $3 Print Location 1: N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Print Location 2: N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Print Location 3: N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Print Location 4: N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Total Cost: $0.00 Submit
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DTF Print & Press - Customer Supplied Goods & Art</title>
<meta name="description" content="DTF Print & Press - An easy way to manage customer supplied goods and art. DTF print service calculator for quality prints.">
<meta name="keywords" content="DTF Print, Print & Press, Customer Supplied Goods, Artwork, Print Calculator">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// Function to reset form fields
function resetForm() {
document.getElementById('printForm').reset();
updateCost();
}
// Function to calculate cost based on selected values
function updateCost() {
const quantity = parseInt(document.getElementById('quantity').value) || 0;
const productPrices = { 'T-Shirt': 0, 'Polo': 1, 'Fleece': 2, 'Cap': 3 };
const locationPrices = { 'N/A': 0, 'Left Front Chest': 1, 'Right Front Chest': 1, 'Full Front': 2, 'Full Back': 2 };
const productType = document.getElementById('productType').value;
const location1 = document.getElementById('printLocation1').value;
const location2 = document.getElementById('printLocation2').value;
const location3 = document.getElementById('printLocation3').value;
const location4 = document.getElementById('printLocation4').value;
const productCost = productPrices[productType] || 0;
const locationCost1 = locationPrices[location1] || 0;
const locationCost2 = locationPrices[location2] || 0;
const locationCost3 = locationPrices[location3] || 0;
const locationCost4 = locationPrices[location4] || 0;
const totalCost = (quantity * (productCost + locationCost1 + locationCost2 + locationCost3 + locationCost4) + (quantity * 0.16)).toFixed(2);
document.getElementById('totalCost').innerText = `Total Cost: $${totalCost}`;
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('quantity').addEventListener('input', function() {
document.getElementById('quantityDisplay').innerText = this.value;
updateCost();
});
const selectElements = document.querySelectorAll('select');
selectElements.forEach(select => {
select.addEventListener('change', updateCost);
});
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #f8cdda, #1d2b64);
color: #333;
font-family: 'Poppins', sans-serif;
animation: fadeIn 1.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#main-container {
max-width: 600px;
margin: 30px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
h5 {
text-align: center;
color: #4a4a4a;
}
.reset-btn {
float: right;
background-color: #ff3e36;
border: none;
border-radius: 50%;
color: white;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.reset-btn:hover {
background-color: #ff6260;
}
label {
margin-top: 10px;
}
small {
color: #666;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h5>DTF Print & Press - Customer Supplied Goods & Art - V1</h5>
<h6 class="text-center">(Receive Goods/Print/Press/Prep & Pack/Ship or Pickup)</h6>
<h6 class="text-center">Calculator Powered by SeaSide Silk Screening</h6>
<button class="reset-btn" onclick="resetForm()">✨</button>
<form id="printForm">
<div class="mb-3">
<label for="namePO">Name/PO Number:</label>
<input type="text" id="namePO" class="form-control" required>
</div>
<div class="mb-3">
<label>Quantity <span id="quantityDisplay">0</span>:</label>
<input type="range" id="quantity" class="form-range" min="0" value="0" step="1">
<small>Qty Price Breaks 24, 36, 48, 72, 144, 288.</small>
</div>
<input type="hidden" id="receivingCost" value="0.16">
<div class="mb-3">
<label for="productType">Product Type:</label>
<select id="productType" class="form-select" required>
<option value="T-Shirt">T-Shirt - $0</option>
<option value="Polo">Polo - $1</option>
<option value="Fleece">Fleece - $2</option>
<option value="Cap">Cap - $3</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation1">Print Location 1:</label>
<select id="printLocation1" class="form-select" required>
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation2">Print Location 2:</label>
<select id="printLocation2" class="form-select" required>
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation3">Print Location 3:</label>
<select id="printLocation3" class="form-select" required>
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation4">Print Location 4:</label>
<select id="printLocation4" class="form-select" required>
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<h6 id="totalCost" class="text-center">Total Cost: $0.00</h6>
<button type="submit" class="btn btn-lg btn-primary w-100 mt-4">Submit</button>
</form>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!