Colorful Mood Tracker App
About this app
A fun and engaging mood tracker application that allows users to log their daily moods and feelings, providing vibrant visuals and insightful trends over time.
DTF Print & Press V26 DTF Print & Press V26 🎨 Name/PO Number (max 40 characters): Quantity: Product Type: Product Price T-Shirt $10.00 Hoodie $15.00 Mug $20.00 Calculate Pricing
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 V26</title>
<meta name="description" content="A rainbow-fueled DTF Print & Press V26 app that lets you calculate pricing based on quantity and product selections!">
<meta name="keywords" content="DTF, Print & Press, pricing calculator, interactive app, colorful app, flexible pricing, sliders, products">
<style>
body {
background: linear-gradient(135deg, #FFCCBC, #80DEEA);
color: #333;
font-family: 'Lobster', cursive;
text-align: left;
padding: 20px;
}
#main-container {
margin: auto;
max-width: 600px;
padding: 20px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
}
.form-group {
margin-bottom: 20px;
}
input[type="text"], input[type="number"], select {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #ffffff;
color: #333;
}
input[type="text"] {
max-width: 100%;
}
.result {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
border: 2px dashed #Open in dialogue box09;
padding: 15px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.9);
animation: fadeIn 0.5s;
}
.btn {
background-color: #FF7043;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
color: white;
font-weight: bold;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #F4511E;
}
label {
display: block;
margin: 10px 0 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background-color: rgba(255, 255, 255, 0.7);
}
th, td {
border: 2px solid #009688;
padding: 10px;
text-align: center;
}
th {
background-color: #B2DFDB;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<div id="main-container" class="container">
<h1>DTF Print & Press V26 🎨</h1>
<div class="form-group">
<label for="name">Name/PO Number (max 40 characters):</label>
<input type="text" id="name" maxlength="40" placeholder="Enter Name/PO" />
</div>
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" placeholder="1" />
<input type="range" id="quantity-slider" min="1" max="100" value="1" />
</div>
<div class="form-group">
<label>Product Type:</label>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="product-type-1">T-Shirt</label>
</td>
<td>$<input type="hidden" id="product-type-1" value="10.00" disabled>10.00</td>
</tr>
<tr>
<td>
<label for="product-type-2">Hoodie</label>
</td>
<td>$<input type="hidden" id="product-type-2" value="15.00" disabled>15.00</td>
</tr>
<tr>
<td>
<label for="product-type-3">Mug</label>
</td>
<td>$<input type="hidden" id="product-type-3" value="20.00" disabled>20.00</td>
</tr>
</tbody>
</table>
</div>
<button id="calculate" class="btn">Calculate Pricing</button>
<div class="result" id="result"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const calculateButton = document.getElementById("calculate");
const resultDisplay = document.getElementById("result");
const quantityInput = document.getElementById("quantity");
const quantitySlider = document.getElementById("quantity-slider");
quantitySlider.oninput = function() {
quantityInput.value = quantitySlider.value;
};
calculateButton.onclick = function() {
const name = document.getElementById("name").value || "Customer";
const quantity = parseInt(quantityInput.value) || 1;
const productTypePrice = document.querySelector("table tbody input:checked")?.value || "0.00";
const totalPrice = (parseFloat(productTypePrice) * quantity).toFixed(2);
resultDisplay.innerText = `${name}, your Total Price: $${totalPrice}`;
};
saveLocal = function() {
const name = document.getElementById("name").value;
const quantity = quantityInput.value;
const data = { name, quantity };
localStorage.setItem("dtfData", JSON.stringify(data));
alert("Data saved!");
}
loadLocal = function() {
const data = JSON.parse(localStorage.getItem("dtfData"));
if (data) {
document.getElementById("name").value = data.name || '';
quantityInput.value = data.quantity || '1';
quantitySlider.value = data.quantity || '1';
} else {
alert("No data found.");
}
}
loadLocal(); // Auto-load storage data on start
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!