<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app" class="container mx-auto p-4 max-w-6xl">
        <div class="grid grid-cols-1 gap-6 mb-8">
            <div class="file-container" style="--animation-order: 1">
                <div class="file-header mb-4">spotify.json</div>
                <div class="spotify-container cursor-pointer" @click="openSpotifyTrack">
                    <img :src="albumArt" class="spotify-art" v-if="albumArt">
                    <div class="spotify-info">
                        <div class="text-2xl font-bold">{{ isPlaying ? currentTrack : 'На данный момент трек не играет' }}</div>
                        <div class="text-lg text-gray-400 mb-2">{{ isPlaying ? currentArtist : 'Spotify не активен' }}</div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" :style="{ width: progressWidth + '%' }"></div>
                        </div>
                        <div class="text-sm mt-3 text-gray-400">{{ trackTime }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="file-container mb-8" style="--animation-order: 4">
            <div class="file-header">about.md</div>
            <div class="flex items-center gap-8 mb-8">
                <img src="ava.jpg" class="w-24 h-24 rounded-full avatar mt-5">
                <div>
                    <h1 class="text-3xl font-bold mb-4 greeting">
                        Сап, я {{ profile.username }}
                    </h1>
                    <div class="flex flex-wrap gap-3">
                        <span class="tech-tag" 
                              v-for="tech in profile.technologies">{{ tech }}</span>
                    </div>
                </div>
            </div>
            <p class="text-gray-300 leading-relaxed text-lg">{{ profile.description }}</p>
        </div>

        <div class="file-container mb-8" style="--animation-order: 4.5">
            <div class="file-header mb-6">projects.md</div>
            <div class="grid grid-cols-1 gap-6">
                <div class="bg-opacity-10 bg-accent p-6 rounded-lg cursor-pointer" onclick="window.location.href='https://t.me/WlxNet'">
                    <h3 class="text-xl font-bold text-accent mb-2">WelNet</h3>
                    <p class="text-gray-300 mb-4">Сносер телеграм аккаунтов</p>
                </div>
                <div class="bg-opacity-10 bg-accent p-6 rounded-lg cursor-pointer" onclick="window.location.href='https://requiem.website'">
                    <h3 class="text-xl font-bold text-accent mb-2">REQUIEM Tool</h3>
                    <p class="text-gray-300 mb-4">Программа для ддоса серверов и сайтов</p>
                </div>
                <div class="bg-opacity-10 bg-accent p-6 rounded-lg cursor-pointer" onclick="window.location.href='https://anti.requiem.website'">
                    <h3 class="text-xl font-bold text-accent mb-2">AntiGram</h3>
                    <p class="text-gray-300 mb-4">Приватный мессенджер (BETA)</p>
                </div>
            </div>
        </div>

<div class="file-container" style="--animation-order: 5">
    <div class="file-header">skills.md</div>
    <h2 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-accent to-success">
        Языки программирования
    </h2>
    <div class="grid grid-cols-3 gap-6">
        <div v-for="skill in skills" class="skill-item flex items-center justify-between">
            <span class="font-medium text-lg">{{ skill.name }}</span>
            <span :class="{'status-active': skill.status === 'active',
                         'status-progress': skill.status === 'in progress'}"
                  class="text-sm">
                {{ skill.status }}
            </span>
        </div>
    </div>
</div>

        <div class="text-center text-gray-400 mt-8">
            © 2025 tenvick. Все права защищены.
        </div>
    </div>

    <script>
        const { createApp } = Vue
        const clientId = 'c969efed4e3e4031a510bdcd9c49aac8';
        const clientSecret = '2b341f9ac5744635a4e19d535dc3b23a';
        const refreshToken = 'AQAWzRgAYGgLjS6P7YSIg8ColO0tPYvdYMD5_yLuPHC6Wy2D22meO_v8AQgrGRseldktBWLyvJt2LID0ndcwzTwYEIhMJioHHv1vBCDRYippA8AYLewJtquNx8dPm4vouBg';

        createApp({
            data() {
                return {
                    currentTrack: 'Загрузка...',
                    currentArtist: 'Загрузка...',
                    albumArt: '',
                    progressWidth: 0,
                    trackTime: '0:00 / 0:00',
                    accessToken: null,
                    tokenExpiry: 0,
                    isPlaying: false,
                    currentTrackUrl: '',
                    profile: {
                        username: 'tenvick',
                        technologies: ['TypeScript', 'Vue', 'Tailwind', 'Flask'],
                        description: 'Почти фулл стак разработчик со страстью к созданию функциональных веб-приложений или приложений на Python.',
                        stats: {
                            projects: 4,
                            experience: 1.5
                        }
                    },
                    skills: [
                        { name: 'TypeScript', status: 'active' },
                        { name: 'Python', status: 'active' },
                        { name: 'PHP', status: 'active' },
                    ]
                }
            },
            methods: {
                openSpotifyTrack() {
                    if (this.currentTrackUrl && this.isPlaying) {
                        window.open(this.currentTrackUrl, '_blank');
                    }
                },
                formatTime(seconds) {
                    const minutes = Math.floor(seconds / 60);
                    const remainingSeconds = Math.floor(seconds % 60);
                    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
                },
                async refreshAccessToken() {
                    try {
                        const response = await fetch('https://accounts.spotify.com/api/token', {
                            method: 'POST',
                            headers: {
                                'Authorization': 'Basic ' + btoa(`${clientId}:${clientSecret}`),
                                'Content-Type': 'application/x-www-form-urlencoded',
                            },
                            body: new URLSearchParams({
                                grant_type: 'refresh_token',
                                refresh_token: refreshToken,
                            }),
                        });
                        const data = await response.json();
                        this.accessToken = data.access_token;
                        this.tokenExpiry = Date.now() / 1000 + data.expires_in;
                        this.fetchCurrentTrack();
                    } catch (error) {
                        console.error('Ошибка при обновлении токена:', error);
                    }
                },
                async fetchCurrentTrack() {
                    if (!this.accessToken) {
                        await this.refreshAccessToken();
                        return;
                    }

                    try {
                        const response = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
                            headers: {
                                'Authorization': `Bearer ${this.accessToken}`,
                            },
                        });
                        const data = await response.json();
                        
                        if (data.item) {
                            this.currentTrack = data.item.name;
                            this.currentArtist = data.item.artists[0].name;
                            this.albumArt = data.item.album.images[0].url;
                            this.isPlaying = data.is_playing;
                            this.currentTrackUrl = data.item.external_urls.spotify;
                            
                            const progress = data.progress_ms / 1000;
                            const duration = data.item.duration_ms / 1000;
                            this.progressWidth = (progress / duration) * 100;
                            this.trackTime = `${this.formatTime(progress)} / ${this.formatTime(duration)}`;
                        } else {
                            this.currentTrack = 'Нет активного трека';
                            this.currentArtist = 'Spotify не воспроизводит музыку';
                            this.albumArt = '';
                            this.isPlaying = false;
                            this.progressWidth = 0;
                            this.trackTime = '0:00 / 0:00';
                            this.currentTrackUrl = '';
                        }
                    } catch (error) {
                        console.error('Ошибка при получении данных:', error);
                        this.currentTrack = 'Ошибка загрузки';
                        this.currentArtist = 'Попробуйте позже';
                        this.albumArt = '';
                        this.isPlaying = false;
                        this.currentTrackUrl = '';
                    }
                }
            },
            mounted() {
                this.refreshAccessToken()
                setInterval(this.fetchCurrentTrack, 1000)
            }
        }).mount('#app')
    </script>
</body>
</html>