Shape_Master/website/index.html at main · Xdev200/Shape_Master · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ShapeMaster | Draw. Match. Master.</title>
  <meta name="description" content="ShapeMaster is the ultimate geometric drawing challenge. Play Classic or Blitz mode and master the art of the perfect shape.">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="../icon-192.png">
</head>
<body>

  <!-- Navigation -->
  <nav>
    <div class="container">
      <a href="#" class="logo">SHAPE MASTER</a>
      <div class="nav-links">
        <a href="#features">Features</a>
        <a href="#how-to-play">How to Play</a>
        <a href="#showcase">Gallery</a>
        <a href="../index.html" class="btn btn-sm" style="font-size: 14px; padding: 5px 15px;">PLAY NOW</a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <div class="container hero-grid">
      <div class="hero-text">
        <h1 class="hero-title">MASTER OF <br>SHAPES</h1>
        <p class="hero-subtitle">The most addictive geometric puzzle game. Draw with precision, race against the clock, and unlock 20+ levels of mastership.</p>
        <div class="hero-btns">
          <a href="../index.html" class="btn btn-pink">PLAY ONLINE →</a>
          <a href="https://play.google.com/store/apps/details?id=com.taqnik.shapemaster" class="play-store-link">
            <img src="assets/playstore-no-bg.png" alt="Get it on Google Play" class="play-store-badge">
          </a>
        </div>
      </div>
      <div class="hero-img-wrap">
        <img src="assets/hero.png" alt="Geometric Shapes 3D" class="hero-img">
      </div>
    </div>
  </header>

  <!-- Features Section -->
  <section id="features" class="grid-bg">
    <div class="container">
      <h2 class="section-title">CHOOSE YOUR MODE</h2>
      <div class="features-grid">
        <div class="feature-card">
          <span class="feature-icon">🎮</span>
          <h3>CLASSIC MODE</h3>
          <p>Progress through a curated series of levels. Each level demands higher precision and faster strokes. Can you get 3 stars on all 20 levels?</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">⚡</span>
          <h3>BLITZ MODE</h3>
          <p>Pure adrenaline. You have 60 seconds to match as many shapes as possible. Every second counts. What's your high score?</p>
        </div>
        <div class="feature-card">
          <span class="feature-icon">🎯</span>
          <h3>AI PRECISION</h3>
          <p>Our advanced matching engine analyzes your strokes and provides real-time feedback. It's not just drawing; it's geometry mastered.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Showcase Section -->
  <section id="showcase" class="showcase grid-bg">
    <div class="container showcase-grid">
      <div class="showcase-text">
        <h2>PIXEL PERFECT PRECISION</h2>
        <p>Whether you're drawing on a tablet or a phone, ShapeMaster's responsive engine captures every nuance of your stroke. Join thousands of players chasing the perfect 100% match.</p>
      </div>
      <div class="showcase-img">
        <img src="assets/mockup.png" alt="App Mockup" class="mockup-img">
      </div>
    </div>
  </section>

  <!-- How to Play -->
  <section id="how-to-play" class="grid-bg">
    <div class="container">
      <h2 class="section-title">HOW TO PLAY</h2>
      <div class="steps-wrap">
        <div class="step-card">
          <div class="step-num">1</div>
          <div class="step-text">
            <h3>OBSERVE</h3>
            <p>Look at the target shape shown at the top of the screen. Whether it's a circle, square, or triangle, visualize your stroke before you begin.</p>
          </div>
        </div>
        <div class="step-card">
          <div class="step-num">2</div>
          <div class="step-text">
            <h3>DRAW</h3>
            <p>Use your finger or mouse to trace the shape in a single, smooth motion. The smoother you draw, the higher your precision score!</p>
          </div>
        </div>
        <div class="step-card">
          <div class="step-num">3</div>
          <div class="step-text">
            <h3>MASTER</h3>
            <p>Achieve over 80% matching score to pass. Aim for 98%+ to unlock the elusive 3-star rating and prove you are a true Shape Master.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-logo">SHAPE MASTER</div>
      <div class="footer-links">
        <a href="privacy.html">Privacy Policy</a>
        <a href="terms.html">Terms of Service</a>
      </div>
      <p>&copy; 2026 ShapeMaster Studio. All rights reserved.</p>
    </div>
  </footer>

  <script>
    // Intersection Observer for scroll animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.style.opacity = 1;
          entry.target.style.transform = 'translateY(0)';
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.feature-card, .step-card, .showcase-text, .hero-text').forEach(el => {
      el.style.opacity = 0;
      el.style.transform = 'translateY(30px)';
      el.style.transition = 'all 0.6s ease-out';
      observer.observe(el);
    });
  </script>
</body>
</html>