index.html - master - ict/techshare_sites

index.html
296 строк11 KB
root
removed footer
19 фев 2026, 10:31
19 фев 2026, 10:311150750
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secret Code Games - Welcome!</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #FF9A8B, #A8E6CF, #FFD3B6, #DCEDC1);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        header {
            text-align: center;
            margin: 20px 0 40px;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 900px;
            position: relative;
            overflow: hidden;
        }
        
        h1 {
            color: #FF6B6B;
            font-size: 3.5rem;
            margin-bottom: 15px;
            text-shadow: 3px 3px 0 #A8E6CF;
        }
        
        .subtitle {
            font-size: 1.8rem;
            color: #4ECDC4;
            margin-bottom: 20px;
            text-shadow: 2px 2px 0 #FFF;
        }
        
        .tagline {
            font-size: 1.4rem;
            margin-bottom: 25px;
            color: #FF6B6B;
        }
        
        .games-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            width: 100%;
            max-width: 1200px;
            margin-bottom: 40px;
        }
        
        .game-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            width: 280px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .game-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
        }
        
        .game-card h2 {
            color: #FF6B6B;
            margin: 20px 0 15px;
            font-size: 1.8rem;
        }
        
        .game-card p {
            color: #555;
            font-size: 1.1rem;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .play-button {
            background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1.2rem;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            margin-top: 10px;
        }
        
        .play-button:hover {
            transform: scale(1.1);
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
        }
        
        .game-icon {
            font-size: 4rem;
            margin-bottom: 15px;
        }
        
        .qr-code {
            margin: 15px auto;
            width: 150px;
            height: 150px;
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 5px;
            background: white;
        }
        
        .qr-instruction {
            font-size: 0.9rem;
            color: #666;
            margin-top: 10px;
            font-style: italic;
        }
        
        footer {
            text-align: center;
            margin-top: auto;
            padding: 20px;
            color: white;
            font-size: 1.2rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .secret-message {
            animation: blink 2s infinite;
            font-weight: bold;
            color: #FFD3B6;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        @media (max-width: 768px) {
            .games-container {
                flex-direction: column;
                align-items: center;
            }
            
            h1 {
                font-size: 2.5rem;
            }
            
            .subtitle {
                font-size: 1.4rem;
            }
            
            .qr-code {
                width: 120px;
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>🔐 Secret Code Games 🔓</h1>
        <div class="subtitle">Crack the codes, solve the puzzles, become a master cryptographer!</div>
        <div class="tagline">Choose your adventure and start decoding today!</div>
    </header>
    
    <div class="games-container">
        <div class="game-card">
            <div class="game-icon">📖</div>
            <h2>Intro to User Stories</h2>
            <p>Learn how developers plan apps with user stories & epics! Discover how features are designed.</p>
            <img class="qr-code" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://techshare.cc/Introduction_to_user_stories.html" alt="QR Code for Introduction to User Stories">
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='Introduction_to_user_stories.html'">LEARN NOW</button>
        </div>

        <div class="game-card">
            <div class="game-icon">🏫</div>
            <h2>Word Processing</h2>
            <p>Team Mix & Match Activities.</p>
            <div class="qr-instruction">Scan to play on your phone!</div>
            <button class="play-button" onclick="window.location.href='Word Processing  Mix and Match.html'">PLAY NOW</button>
        </div>

        <div class="game-card">
            <div class="game-icon">🤖</div>
            <h2>AI Scheduler</h2>
            <p>Learn how to set up your own AI-powered scheduler web app! Create smart automation tools.</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='AI_Scheduler_Web_App_Setup.html'">LEARN NOW</button>
        </div>

        <div class="game-card">
            <div class="game-icon">❓</div>
            <h2>Quiz Game Portal</h2>
            <p>Test your knowledge with our interactive quiz game! Learn while having fun.</p>
            <div class="qr-instruction">Scan to play on your phone!</div>
            <button class="play-button" onclick="window.location.href='Quiz_Game_Project-Student Learning_Portal.html'">PLAY NOW</button>
        </div>

        <div class="game-card">
            <div class="game-icon">📘</div>
            <h2>HTML Basics</h2>
            <p>Learn the fundamentals of HTML and build a website!</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='HTML_Basics_ Porfolio_Learning_Portal.html'">LEARN NOW</button>
        </div>

        <div class="game-card">
            <div class="game-icon">🐍</div>
            <h2>Python OOP</h2>
            <p>Learn object-oriented programming principles using Python! Master classes, objects, and inheritance.</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='Object-Oriented-Programming-in-Python.html'">LEARN NOW</button>
        </div>

        <div class="game-card">
            <div class="game-icon">💻</div>
            <h2>Advanced HTML CSS</h2>
            <p>Create a professional portfolio website with advanced HTML techniques!</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='HTML_Advanced_Build_Your_Professional_Portfolio_Website.html'">LEARN NOW</button>
        </div>
        
        <!-- Dark Patterns Presentation Card -->
        <div class="game-card">
            <div class="game-icon">📘</div>
            <h2>Dark Patterns Presentation</h2>
            <p>Learn about dark patterns - tricks websites use to make you spend more online!</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='dark_patterns/Presentation_Dark Patterns_ Tricks to Make You Spend More Online.html'">LEARN NOW</button>
        </div>

        <!-- API Explorer Card -->
        <div class="game-card">
            <div class="game-icon">🌐</div>
            <h2>API Explorer</h2>
            <p>Learn REST APIs with Fetch! Explore how to work with web APIs and make network requests.</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='API _Explorer_ Learn REST APIs with Fetch.html'">LEARN NOW</button>
        </div>

        <!-- Asteroid Game Presentation Card -->
        <div class="game-card">
            <div class="game-icon">🚀</div>
            <h2>Asteroid Game</h2>
            <p>Create your first Asteroid Game with Python! Learn game development basics with Turtle graphics.</p>
            <div class="qr-instruction">Scan to learn on your phone!</div>
            <button class="play-button" onclick="window.location.href='Presentation Python_ Create Your First Asteroid Game_v4.html'">LEARN NOW</button>
        </div>

        <!-- UAT Playground Card -->
        <div class="game-card">
            <div class="game-icon">🧪</div>
            <h2>UAT Playground</h2>
            <p>Experience simulated web app testing with 3D feedback forms! Learn User Acceptance Testing concepts.</p>
            <div class="qr-instruction">Scan to explore on your phone!</div>
            <button class="play-button" onclick="window.location.href='UAT Playground · simulated web app + 3D feedback form.html'">EXPLORE NOW</button>
        </div>
    </div>
    
    <!--<footer>
        <p>Made with ❤️ for young codebreakers everywhere!</p>
        <p class="secret-message">Pssst... did you know? The first code was created over 4000 years ago! 🤫</p>
    </footer>-->
</body>
</html>