Spaces:

openfree
/

ncfkpd

Running

App Files Files Community

ncfkpd / index.html

openfree

Upload index.html with huggingface_hub

bb6d6df verified over 1 year ago

raw

history blame contribute delete

6.01 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Daily Focus - 하루 5분의 집중력</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Arial', sans-serif;
	}

	body {
	background: #f5f6fa;
	color: #2d3436;
	}

	.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	}

	header {
	text-align: center;
	padding: 40px 0;
	background: linear-gradient(135deg, #6c5ce7, #a8e6cf);
	color: white;
	border-radius: 15px;
	margin-bottom: 30px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	}

	.timer-container {
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	text-align: center;
	margin-bottom: 30px;
	}

	.timer {
	font-size: 4em;
	font-weight: bold;
	color: #6c5ce7;
	margin: 20px 0;
	}

	.controls button {
	padding: 12px 25px;
	margin: 0 10px;
	border: none;
	border-radius: 25px;
	background: #6c5ce7;
	color: white;
	font-size: 1.1em;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.controls button:hover {
	background: #5849c4;
	transform: translateY(-2px);
	}

	.stats-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 30px;
	}

	.stat-card {
	background: white;
	padding: 20px;
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	}

	.stat-value {
	font-size: 1.8em;
	font-weight: bold;
	color: #6c5ce7;
	margin: 10px 0;
	}

	.progress-container {
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	}

	.progress-bar {
	width: 100%;
	height: 20px;
	background: #dfe6e9;
	border-radius: 10px;
	overflow: hidden;
	margin: 20px 0;
	}

	.progress {
	width: 0%;
	height: 100%;
	background: linear-gradient(135deg, #6c5ce7, #a8e6cf);
	transition: width 0.3s ease;
	}

	@media (max-width: 600px) {
	.stats-container {
	grid-template-columns: 1fr;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>Daily Focus</h1>
	<p>하루 5분의 집중으로 시작하는 습관 만들기</p>
	</header>

	<div class="timer-container">
	<div class="timer">05:00</div>
	<div class="controls">
	<button id="startBtn">시작</button>
	<button id="resetBtn">리셋</button>
	</div>
	</div>

	<div class="stats-container">
	<div class="stat-card">
	<h3>연속 일수</h3>
	<div class="stat-value">7일</div>
	</div>
	<div class="stat-card">
	<h3>총 집중 시간</h3>
	<div class="stat-value">35분</div>
	</div>
	<div class="stat-card">
	<h3>달성률</h3>
	<div class="stat-value">89%</div>
	</div>
	</div>

	<div class="progress-container">
	<h3>이번 달 목표 달성도</h3>
	<div class="progress-bar">
	<div class="progress" style="width: 70%"></div>
	</div>
	</div>
	</div>

	<script>
	let timer;
	let timeLeft = 300; // 5 minutes in seconds
	let isRunning = false;

	const timerDisplay = document.querySelector('.timer');
	const startBtn = document.getElementById('startBtn');
	const resetBtn = document.getElementById('resetBtn');

	function updateTimer() {
	const minutes = Math.floor(timeLeft / 60);
	const seconds = timeLeft % 60;
	timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
	}

	function startTimer() {
	if (!isRunning) {
	isRunning = true;
	startBtn.textContent = '일시정지';
	timer = setInterval(() => {
	timeLeft--;
	updateTimer();
	if (timeLeft === 0) {
	clearInterval(timer);
	isRunning = false;
	startBtn.textContent = '시작';
	alert('5분 집중 완료! 오늘도 수고하셨습니다.');
	}
	}, 1000);
	} else {
	clearInterval(timer);
	isRunning = false;
	startBtn.textContent = '시작';
	}
	}

	function resetTimer() {
	clearInterval(timer);
	isRunning = false;
	timeLeft = 300;
	updateTimer();
	startBtn.textContent = '시작';
	}

	startBtn.addEventListener('click', startTimer);
	resetBtn.addEventListener('click', resetTimer);

	// Initialize progress animation
	document.addEventListener('DOMContentLoaded', () => {
	const progress = document.querySelector('.progress');
	progress.style.width = '70%';
	});
	</script>
	</body>
	</html>