Spaces:

amaozjy
/

anycoder-6578df13

Running

App Files Files Community

amaozjy commited on Dec 8, 2025

Commit

ff15706

verified ·

1 Parent(s): e463b8a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +828 -19

index.html CHANGED Viewed

@@ -1,19 +1,828 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>你好 - 多语言问候应用</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-color: #6366f1;
+            --secondary-color: #8b5cf6;
+            --accent-color: #ec4899;
+            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --card-bg: rgba(255, 255, 255, 0.95);
+            --text-primary: #1f2937;
+            --text-secondary: #6b7280;
+            --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: var(--bg-gradient);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            width: 100%;
+            animation: fadeIn 0.8s ease-out;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            position: relative;
+        }
+        .header h1 {
+            font-size: clamp(2.5rem, 8vw, 4rem);
+            color: white;
+            font-weight: 800;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+            margin-bottom: 10px;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from {
+                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+            }
+            to {
+                text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.5);
+            }
+        }
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 1.2rem;
+            opacity: 0;
+            animation: fadeIn 1s ease-out 0.5s forwards;
+        }
+        .anycoder-link {
+            position: absolute;
+            top: -30px;
+            right: 0;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 8px 16px;
+            border-radius: 20px;
+            color: white;
+            text-decoration: none;
+            font-size: 0.9rem;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .anycoder-link:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 25px;
+            margin-bottom: 40px;
+        }
+        .greeting-card {
+            background: var(--card-bg);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: var(--shadow);
+            backdrop-filter: blur(10px);
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .greeting-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+            transition: left 0.5s;
+        }
+        .greeting-card:hover::before {
+            left: 100%;
+        }
+        .greeting-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        .greeting-text {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+            transition: all 0.3s ease;
+        }
+        .greeting-card:hover .greeting-text {
+            color: var(--accent-color);
+            transform: scale(1.1);
+        }
+        .language-name {
+            font-size: 1.1rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        .pronunciation {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            opacity: 0.8;
+            margin-top: 5px;
+            font-style: italic;
+        }
+        .interactive-section {
+            background: var(--card-bg);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: var(--shadow);
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        .interactive-section h2 {
+            font-size: 2rem;
+            color: var(--text-primary);
+            margin-bottom: 20px;
+        }
+        .input-group {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 30px;
+        }
+        .name-input {
+            padding: 15px 25px;
+            border: 2px solid #e5e7eb;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            min-width: 250px;
+            transition: all 0.3s ease;
+            outline: none;
+        }
+        .name-input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+        .generate-btn {
+            padding: 15px 30px;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .generate-btn::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        .generate-btn:hover::before {
+            width: 300px;
+            height: 300px;
+        }
+        .generate-btn:hover {
+            background: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+        }
+        .custom-greeting {
+            font-size: 2rem;
+            color: var(--primary-color);
+            font-weight: 700;
+            margin-top: 20px;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.5s ease;
+        }
+        .custom-greeting.show {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .animation-section {
+            background: var(--card-bg);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: var(--shadow);
+            text-align: center;
+        }
+        .animated-characters {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            flex-wrap: wrap;
+            margin-top: 30px;
+        }
+        .char-box {
+            width: 80px;
+            height: 80px;
+            background: var(--primary-color);
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 2rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+        .char-box:hover {
+            background: var(--accent-color);
+            transform: rotate(360deg) scale(1.2);
+        }
+        .char-box::after {
+            content: attr(data-pinyin);
+            position: absolute;
+            bottom: -25px;
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .char-box:hover::after {
+            opacity: 1;
+        }
+        .wave-animation {
+            animation: wave 2s ease-in-out infinite;
+        }
+        @keyframes wave {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        .pulse-animation {
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
+            }
+            70% {
+                transform: scale(1.05);
+                box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
+            }
+            100% {
+                transform: scale(1);
+                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+            }
+        }
+        .stats-section {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 40px;
+        }
+        .stat-card {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 25px;
+            text-align: center;
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            transition: all 0.3s ease;
+        }
+        .stat-card:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-5px);
+        }
+        .stat-number {
+            font-size: 2.5rem;
+            font-weight: 800;
+            margin-bottom: 5px;
+        }
+        .stat-label {
+            font-size: 1rem;
+            opacity: 0.9;
+        }
+        .floating-emoji {
+            position: fixed;
+            font-size: 2rem;
+            pointer-events: none;
+            animation: float 4s ease-in-out infinite;
+            z-index: 1000;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 0.8;
+            }
+            50% {
+                transform: translateY(-30px) rotate(180deg);
+                opacity: 0.4;
+            }
+            100% {
+                transform: translateY(0) rotate(360deg);
+                opacity: 0.8;
+            }
+        }
+        .footer {
+            text-align: center;
+            margin-top: 40px;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1rem;
+        }
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2.5rem;
+            }
+            .greeting-text {
+                font-size: 2rem;
+            }
+            .input-group {
+                flex-direction: column;
+                align-items: center;
+            }
+            .name-input {
+                min-width: 100%;
+                max-width: 300px;
+            }
+            .animated-characters {
+                gap: 10px;
+            }
+            .char-box {
+                width: 60px;
+                height: 60px;
+                font-size: 1.5rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+            .stats-section {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+                Built with anycoder
+            </a>
+            <h1>你好 👋</h1>
+            <p>探索世界各地的温暖问候</p>
+        </header>
+        <main class="main-content">
+            <div class="greeting-card" onclick="playGreeting('你好', 'zh-CN')">
+                <div class="greeting-text">你好</div>
+                <div class="language-name">中文 (Chinese)</div>
+                <div class="pronunciation">Nǐ hǎo</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Hello', 'en-US')">
+                <div class="greeting-text">Hello</div>
+                <div class="language-name">英语 (English)</div>
+                <div class="pronunciation">/həˈloʊ/</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Bonjour', 'fr-FR')">
+                <div class="greeting-text">Bonjour</div>
+                <div class="language-name">法语 (French)</div>
+                <div class="pronunciation">/bɔ̃.ʒuʁ/</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Hola', 'es-ES')">
+                <div class="greeting-text">Hola</div>
+                <div class="language-name">西班牙语 (Spanish)</div>
+                <div class="pronunciation">/ˈo.la/</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Konnichiwa', 'ja-JP')">
+                <div class="greeting-text">こんにちは</div>
+                <div class="language-name">日语 (Japanese)</div>
+                <div class="pronunciation">Konnichiwa</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Annyeonghaseyo', 'ko-KR')">
+                <div class="greeting-text">안녕하세요</div>
+                <div class="language-name">韩语 (Korean)</div>
+                <div class="pronunciation">Annyeonghaseyo</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Guten Tag', 'de-DE')">
+                <div class="greeting-text">Guten Tag</div>
+                <div class="language-name">德语 (German)</div>
+                <div class="pronunciation">/ˈɡuːtn̩ taːk/</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Ciao', 'it-IT')">
+                <div class="greeting-text">Ciao</div>
+                <div class="language-name">意大利语 (Italian)</div>
+                <div class="pronunciation">/ˈtʃa.o/</div>
+            </div>
+            <div class="greeting-card" onclick="playGreeting('Salam', 'ar-SA')">
+                <div class="greeting-text">سلام</div>
+                <div class="language-name">阿拉伯语 (Arabic)</div>
+                <div class="pronunciation">/saˈlaːm/</div>
+            </div>
+        </main>
+        <section class="interactive-section">
+            <h2>个性化问候生成器</h2>
+            <div class="input-group">
+                <input type="text" class="name-input" id="nameInput" placeholder="请输入您的名字..." maxlength="20">
+                <button class="generate-btn" onclick="generatePersonalizedGreeting()">生成问候</button>
+            </div>
+            <div class="custom-greeting" id="customGreeting"></div>
+        </section>
+        <section class="animation-section">
+            <h2>点击汉字体验动画</h2>
+            <div class="animated-characters">
+                <div class="char-box wave-animation" data-pinyin="nǐ" onclick="animateCharacter(this)">你</div>
+                <div class="char-box pulse-animation" data-pinyin="hǎo" onclick="animateCharacter(this)">好</div>
+                <div class="char-box" data-pinyin="shì" onclick="animateCharacter(this)">世</div>
+                <div class="char-box" data-pinyin="jiè" onclick="animateCharacter(this)">界</div>
+            </div>
+        </section>
+        <section class="stats-section">
+            <div class="stat-card">
+                <div class="stat-number" id="greetingCount">0</div>
+                <div class="stat-label">问候次数</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="languageCount">9</div>
+                <div class="stat-label">支持语言</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="characterCount">4</div>
+                <div class="stat-label">汉字动画</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="happyUsers">∞</div>
+                <div class="stat-label">快乐用户</div>
+            </div>
+        </section>
+        <footer class="footer">
+            <p>用问候连接世界 💝 | 每一个"你好"都是温暖的开始</p>
+        </footer>
+    </div>
+    <script>
+        // 初始化统计数据
+        let greetingCounter = 0;
+        let clickCount = 0;
+        // 从localStorage加载数据
+        window.addEventListener('load', () => {
+            const savedCount = localStorage.getItem('greetingCount');
+            if (savedCount) {
+                greetingCounter = parseInt(savedCount);
+                updateStats();
+            }
+            // 添加随机浮动表情
+            createFloatingEmoji();
+            setInterval(createFloatingEmoji, 5000);
+        });
+        // 播放问候语音
+        function playGreeting(text, lang) {
+            // 增加计数
+            greetingCounter++;
+            localStorage.setItem('greetingCount', greetingCounter);
+            updateStats();
+            // 创建语音合成
+            if ('speechSynthesis' in window) {
+                const utterance = new SpeechSynthesisUtterance(text);
+                utterance.lang = lang;
+                utterance.rate = 0.9;
+                utterance.pitch = 1.1;
+                speechSynthesis.speak(utterance);
+            }
+            // 显示点击效果
+            showClickEffect();
+            // 显示提示
+            showNotification(`正在播放: ${text}`);
+        }
+        // 生成个性化问候
+        function generatePersonalizedGreeting() {
+            const name = document.getElementById('nameInput').value.trim();
+            const greetingElement = document.getElementById('customGreeting');
+            if (!name) {
+                showNotification('请输入您的名字！', 'warning');
+                return;
+            }
+            const greetings = [
+                `你好，${name}！很高兴认识你！`,
+                `Hello, ${name}! Nice to meet you!`,
+                `Bonjour, ${name}! Enchanté!`,
+                `Hola, ${name}! Mucho gusto!`,
+                `こんにちは、${name}さん！はじめまして！`,
+                `안녕하세요, ${name}님! 만나서 반갑습니다!`
+            ];
+            const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
+            greetingElement.textContent = randomGreeting;
+            greetingElement.classList.add('show');
+            // 播放语音
+            if ('speechSynthesis' in window) {
+                const utterance = new SpeechSynthesisUtterance(randomGreeting);
+                utterance.lang = randomGreeting.includes('你好') ? 'zh-CN' : 'en-US';
+                utterance.rate = 0.9;
+                speechSynthesis.speak(utterance);
+            }
+            // 添加动画效果
+            greetingElement.style.animation = 'none';
+            setTimeout(() => {
+                greetingElement.style.animation = 'pulse 0.5s ease-in-out';
+            }, 10);
+            // 清空输入框
+            setTimeout(() => {
+                document.getElementById('nameInput').value = '';
+            }, 1000);
+        }
+        // 动画效果
+        function animateCharacter(element) {
+            clickCount++;
+            // 添加旋转动画
+            element.style.animation = 'none';
+            setTimeout(() => {
+                element.style.animation = 'spin 0.6s ease-in-out';
+            }, 10);
+            // 创建粒子效果
+            createParticles(element);
+            // 显示点击次数
+            if (clickCount % 5 === 0) {
+                showNotification(`太棒了！你已经点击了 ${clickCount} 次！`, 'success');
+            }
+        }
+        // 创建粒子效果
+        function createParticles(element) {
+            const rect = element.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + rect.height / 2;
+            for (let i = 0; i < 8; i++) {
+                const particle = document.createElement('div');
+                particle.style.cssText = `
+                    position: fixed;
+                    width: 6px;
+                    height: 6px;
+                    background: ${['#6366f1', '#ec4899', '#8b5cf6', '#f59e0b'][Math.floor(Math.random() * 4)]};
+                    border-radius: 50%;
+                    left: ${centerX}px;
+                    top: ${centerY}px;
+                    pointer-events: none;
+                    z-index: 9999;
+                `;
+                document.body.appendChild(particle);
+                const angle = (i / 8) * Math.PI * 2;
+                const distance = 50 + Math.random() * 30;
+                const duration = 800 + Math.random() * 400;
+                particle.animate([
+                    {
+                        transform: 'translate(0, 0) scale(1)',
+                        opacity: 1
+                    },
+                    {
+                        transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px) scale(0)`,
+                        opacity: 0
+                    }
+                ], {
+                    duration: duration,
+                    easing: 'ease-out'
+                }).onfinish = () => particle.remove();
+            }
+        }
+        // 创建浮动表情
+        function createFloatingEmoji() {
+            const emojis = ['😊', '❤️', '✨', '🌟', '💖', '🎉', '🌈', '💫'];
+            const emoji = document.createElement('div');
+            emoji.className = 'floating-emoji';
+            emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+            emoji.style.left = Math.random() * window.innerWidth + 'px';
+            emoji.style.top = window.innerHeight + 'px';
+            emoji.style.animationDuration = (3 + Math.random() * 2) + 's';
+            document.body.appendChild(emoji);
+            setTimeout(() => emoji.remove(), 5000);
+        }
+        // 显示点击效果
+        function showClickEffect() {
+            const effect = document.createElement('div');
+            effect.style.cssText = `
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                width: 100px;
+                height: 100px;
+                border: 3px solid rgba(255, 255, 255, 0.8);
+                border-radius: 50%;
+                transform: translate(-50%, -50%) scale(0);
+                pointer-events: none;
+                z-index: 9999;
+            `;
+            document.body.appendChild(effect);
+            effect.animate([
+                { transform: 'translate(-50%, -50%) scale(0)', opacity: 1 },
+                { transform: 'translate(-50%, -50%) scale(2)', opacity: 0 }
+            ], {
+                duration: 600,
+                easing: 'ease-out'
+            }).onfinish = () => effect.remove();
+        }
+        // 显示通知
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            const colors = {
+                info: 'rgba(99, 102, 241, 0.9)',
+                success: 'rgba(16, 185, 129, 0.9)',
+                warning: 'rgba(245, 158, 11, 0.9)'
+            };
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: ${colors[type]};
+                color: white;
+                padding: 15px 25px;
+                border-radius: 10px;
+                font-weight: 500;
+                z-index: 10000;
+                transform: translateX(100%);
+                transition: transform 0.3s ease;
+                backdrop-filter: blur(10px);
+                box-shadow: var(--shadow);
+            `;
+            notification.textContent = message;
+            document.body.appendChild(notification);
+            setTimeout(() => notification.style.transform = 'translateX(0)', 100);
+            setTimeout(() => {
+                notification.style.transform = 'translateX(100%)';
+                setTimeout(() => notification.remove(), 300);
+            }, 3000);
+        }
+        // 更新统计数据
+        function updateStats() {
+            const countElement = document.getElementById('greetingCount');
+            countElement.textContent = greetingCounter;
+            // 添加数字动画
+            countElement.style.transform = 'scale(1.2)';
+            countElement.style.color = '#ec4899';
+            setTimeout(() => {
+                countElement.style.transform = 'scale(1)';
+                countElement.style.color = 'white';
+            }, 300);
+        }
+        // 键盘事件监听
+        document.getElementById('nameInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                generatePersonalizedGreeting();
+            }
+        });
+        // 添加CSS动画关键帧
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes spin {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(360deg); }
+            }
+        `;
+        document.head.appendChild(style);
+        // 页面可见性变化时的处理
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                speechSynthesis.cancel();
+            }
+        });
+        // 随机背景动画
+        setInterval(() => {
+            const cards = document.querySelectorAll('.greeting-card');
+            const randomCard = cards[Math.floor(Math.random() * cards.length)];
+            randomCard.style.transform = 'scale(1.05)';
+            setTimeout(() => {
+                randomCard.style.transform = '';
+            }, 200);
+        }, 5000);
+    </script>
+</body>
+</html>