JIT
Creating a website for caring for all types of pets
Log in
@brownb2031
Lets make a website were you can have and take cair of ANY Pet
DeepSeek V3
@brownb2031
ok
DeepSeek V3
Updated files
v1
@brownb2031
more realistic
DeepSeek V3
@brownb2031
ok
DeepSeek V3
<jitProject id="realistic-pet-care" title="Realistic Pet Care Simulation"> <jitFile type="file" filePath="index.html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Realistic Pet Care</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <h1>Realistic Pet Care</h1> <div class="pet-selection"> <h2>Choose Your Pet</h2> <div class="pet-options"> <div class="pet-card" data-type="dog"> <div class="pet-icon">🐕</div> <h3>Dog</h3> <p>Requires daily walks and attention</p> </div> <div class="pet-card" data-type="cat"> <div class="pet-icon">🐈</div> <h3>Cat</h3> <p>Independent but needs affection</p> </div> <div class="pet-card" data-type="bird"> <div class="pet-icon">🦜</div> <h3>Bird</h3> <p>Needs social interaction</p> </div> <div class="pet-card" data-type="rabbit"> <div class="pet-icon">🐇</div> <h3>Rabbit</h3> <p>Requires space to hop</p> </div> </div> </div> <div class="pet-display hidden"> <div class="pet-header"> <div class="pet-visual"> <div class="pet-image"></div> <div class="pet-mood-indicator"></div> </div> <div class="pet-info"> <h2 class="pet-name">Buddy</h2> <div class="pet-type">Dog</div> <div class="pet-age">Age: 1 year</div> </div> </div> <div class="pet-needs"> <div class="need hunger"> <div class="need-label">Hunger</div> <div class="need-bar"> <div class="need-fill"></div>
@brownb2031
do it
DeepSeek V3
</div> </div> </div> <div class="need happiness"> <div class="need-label">Happiness</div> <div class="need-bar"> <div class="need-fill"></div> </div> </div> <div class="need energy"> <div class="need-label">Energy</div> <div class="need-bar"> <div class="need-fill"></div> </div> </div> <div class="need cleanliness"> <div class="need-label">Cleanliness</div> <div class="need-bar"> <div class="need-fill"></div> </div> </div> </div> <div class="pet-actions"> <button class="action-btn" data-action="feed">Feed</button> <button class="action-btn" data-action="play">Play</button> <button class="action-btn" data-action="sleep">Sleep</button> <button class="action-btn" data-action="clean">Clean</button> </div> </div> </div> <script src="script.js"></script> </body> </html> </jitFile> <jitFile type="file" filePath="styles.css"> body { font-family: 'Poppins', sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; color: #333; }

.container { max-width: 600px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

h1 { color: #333; text-align: center; margin-bottom: 20px; }

.pet-selection { margin-bottom: 20px; }

.pet-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.pet-card { background-color: #f9f9f9; border-radius: 8px; padding: 15px; text-align: center; cursor: pointer; transition: all 0.3s ease; }

.pet-card:hover { background-color: #f0f0f0; transform: translateY(-5px); }

.pet-icon { font-size: 40px; margin-bottom: 10px; }

.pet-card h3 { margin: 0; font-size: 18px; }

.pet-card p { margin: 5px 0 0; font-size: 14px; color: #666; }

.hidden { display: none; }

.pet-display { margin-top: 20px; }

.pet-header { display: flex; align-items: center; margin-bottom: 20px; }

.pet-visual { position: relative; margin-right: 20px; }

.pet-image { width: 100px; height: 100px; background-color: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 50px; }

.pet-mood-indicator { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background-color: #4CAF50; border-radius: 50%; border: 2px solid white; }

.pet-info { flex: 1; }

.pet-name { margin: 0; font-size: 24px; }

.pet-type { display: inline-block; background-color: #4CAF50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; margin-top: 5px; }

.pet-age { font-size: 14px; color: #666; margin-top: 5px; }

.pet-needs { margin-bottom: 20px; }

.need { margin-bottom: 15px; }

.need-label { font-size: 14px; margin-bottom: 5px; display: flex; justify-content: space-between; }

.need-bar { height: 10px; background-color: #f0f0f0; border-radius: 5px; overflow: hidden; }

.need-fill { height: 100%; background-color: #4CAF50; width: 50%; transition: width 0.3s ease; }

.pet-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.action-btn { padding: 10px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; font-size: 16px; cursor: pointer; transition: all 0.3s ease; }

.action-btn:hover { background-color: #45a049; } </jitFile>

<jitFile type="file" filePath="script.js"> class Pet { constructor(name, type) { this.name = name; this.type = type; this.hunger = 50; this.happiness = 50; this.energy = 50; this.cleanliness = 50; this.age = 0; this.mood = 'happy'; this.lastFed = Date.now(); this.lastPlayed = Date.now(); this.lastSlept = Date.now(); this.lastCleaned = Date.now(); }

updateStats() { const now = Date.now(); const timeSinceFed = (now - this.lastFed) / 1000; const timeSincePlayed = (now - this.lastPlayed) / 1000; const timeSinceSlept = (now - this.lastSlept) / 1000; const timeSinceCleaned = (now - this.lastCleaned) / 1000;

// Update hunger
this.hunger = Math.max(0, this.hunger - timeSinceFed * 0.1);
this.happiness = Math.max(0, this.happiness - timeSincePlayed * 0.05);
this.energy = Math.max(0, this.energy - timeSinceSlept * 0.1);
this.cleanliness = Math.max(0, this.cleanliness - timeSinceCleaned * 0.05);

// Update mood
const avg = (this.hunger + this.happiness + this.energy + this.cleanliness) / 4;
if (avg > 75) {
  this.mood = 'happy';
} else if (avg > 50) {
  this.mood = 'content';
} else if (avg > 25) {
  this.mood = 'sad';
} else {
  this.mood = 'angry';
}

this.updateUI();

}

feed() { this.hunger = Math.min(100, this.hunger + 30); this.cleanliness = Math.max(0, this.cleanliness - 10); this.lastFed = Date.now(); this.updateStats(); }

play() { this.happiness = Math.min(100, this.happiness + 20); this.energy = Math.max(0, this.energy - 15); this.hunger = Math.max(0, this.hunger - 5); this.lastPlayed = Date.now(); this.updateStats(); }

sleep() { this.energy = Math.min(100, this.energy + 40); this.hunger = Math.max(0, this.hunger - 10); this.lastSlept = Date.now(); this.updateStats(); }

clean() { this.cleanliness = Math.min(100, this.cleanliness + 40);