Hugging Face's logo

Spaces:
samihalawa
/
cika
Running

App Files Community
cika
File size: 6,255 Bytes
614c5a9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>旅行与交通 · 中西双语词卡</title>
  <style>
    body { font-family: sans-serif; background:#f9fafb; margin:0; padding:20px;}
    h1 { font-size:24px; margin-bottom:8px; }
    p.desc { font-size:14px; color:#555; margin-bottom:20px;}
    .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;}
    .card { background:#fff; border:1px solid #ddd; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.1);}
    .icon { display:flex; justify-content:center; align-items:center; background:#f3f4f6; height:140px;}
    .content { padding:12px;}
    .pinyin { font-size:12px; color:#666; }
    .hanzi { font-size:20px; font-weight:bold; margin-top:4px;}
    .es { font-size:16px; color:#333; margin-top:4px;}
    .example { font-size:13px; color:#555; margin-top:6px;}
    svg { width:64px; height:64px; stroke:#333; fill:none; }
  </style>
</head>
<body>
  <h1>旅行与交通 · 中西双语词卡</h1>
  <p class="desc">静态HTML版，中西双语例词，带简易图标。</p>

  <div class="grid">
    <!-- Example card: 飞机 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64"><path d="M6 38l26-6 24-16 4 4-16 24-6 26-6-10-8-8-10-6 12-4z" stroke-width="3"/></svg>
      </div>
      <div class="content">
        <div class="pinyin">fēijī</div>
        <div class="hanzi">飞机</div>
        <div class="es">avión</div>
        <div class="example">例句：我们明天坐飞机去北京。</div>
      </div>
    </div>

    <!-- 火车 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <rect x="12" y="12" width="40" height="28" rx="6" stroke-width="3"/>
          <circle cx="22" cy="46" r="4" fill="#333"/>
          <circle cx="42" cy="46" r="4" fill="#333"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">huǒchē</div>
        <div class="hanzi">火车</div>
        <div class="es">tren</div>
        <div class="example">例句：这班火车八点出发。</div>
      </div>
    </div>

    <!-- 高铁 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <rect x="12" y="12" width="40" height="28" rx="6" stroke-width="3"/>
          <circle cx="22" cy="46" r="4" fill="#333"/>
          <circle cx="42" cy="46" r="4" fill="#333"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">gāotiě</div>
        <div class="hanzi">高铁</div>
        <div class="es">tren de alta velocidad</div>
        <div class="example">例句：高铁很快，也很准时。</div>
      </div>
    </div>

    <!-- 汽车 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <rect x="12" y="28" width="40" height="12" rx="6" stroke-width="3"/>
          <path d="M18 28 L28 22 H46 L52 28" stroke-width="3"/>
          <circle cx="22" cy="44" r="4" fill="#333"/>
          <circle cx="46" cy="44" r="4" fill="#333"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">qìchē</div>
        <div class="hanzi">汽车</div>
        <div class="es">coche</div>
        <div class="example">例句：我开汽车去上班。</div>
      </div>
    </div>

    <!-- 公交车 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <rect x="8" y="16" width="48" height="24" rx="4" stroke-width="3"/>
          <circle cx="22" cy="44" r="4" fill="#333"/>
          <circle cx="42" cy="44" r="4" fill="#333"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">gōngjiāochē</div>
        <div class="hanzi">公交车</div>
        <div class="es">autobús</div>
        <div class="example">例句：我们坐公交车去市中心。</div>
      </div>
    </div>

    <!-- 自行车 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <circle cx="18" cy="44" r="8" stroke-width="3"/>
          <circle cx="46" cy="44" r="8" stroke-width="3"/>
          <path d="M18 44 L28 28 L36 44 L46 44" stroke-width="3"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">zìxíngchē</div>
        <div class="hanzi">自行车</div>
        <div class="es">bicicleta</div>
        <div class="example">例句：他每天骑自行车去学校。</div>
      </div>
    </div>

    <!-- 摩托车 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <circle cx="18" cy="44" r="8" stroke-width="3"/>
          <circle cx="46" cy="44" r="8" stroke-width="3"/>
          <path d="M18 44 L28 28 L36 44 L46 44" stroke-width="3"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">mótuōchē</div>
        <div class="hanzi">摩托车</div>
        <div class="es">moto</div>
        <div class="example">例句：他买了一辆新的摩托车。</div>
      </div>
    </div>

    <!-- 地铁 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <rect x="16" y="16" width="32" height="22" rx="4" stroke-width="3"/>
          <path d="M14 42 H50" stroke-width="3"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">dìtiě</div>
        <div class="hanzi">地铁</div>
        <div class="es">metro</div>
        <div class="example">例句：地铁在早上很拥挤。</div>
      </div>
    </div>

    <!-- 轮船 -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 64 64">
          <path d="M10 40h44l-6 8H16z" stroke-width="3"/>
          <rect x="24" y="24" width="16" height="10" stroke-width="3"/>
          <path d="M32 24 V16" stroke-width="3"/>
        </svg>
      </div>
      <div class="content">
        <div class="pinyin">lúnchuán</div>
        <div class="hanzi">轮船</div>
        <div class="es">barco</div>
        <div class="example">例句：我们坐轮船去岛上。</div>
      </div>
    </div>

  </div>
</body>
</html>