Hugging Face's logo

Spaces:
Mabbs
/
blog
Running

App Files Community
blog
File size: 3,751 Bytes 
6013f62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
      <svg
        width="495"
        height="195"
        viewBox="0 0 495 195"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <style>
          .header {
            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
            fill: #fff;
            animation: fadeInAnimation 0.8s ease-in-out forwards;
          }
          
    .stat {
      font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: #9f9f9f;
    }
    .stagger {
      opacity: 0;
      animation: fadeInAnimation 0.3s ease-in-out forwards;
    }
    .rank-text {
      font: 800 100px 'Segoe UI', Ubuntu, Sans-Serif; fill: #66ccff; 
      animation: scaleInAnimation 0.3s ease-in-out forwards;
    }
    
    .bold { font-weight: 700 }
    .icon {
      fill: #79ff97;
      display: block;
    }
          
    /* Animations */
    @keyframes scaleInAnimation {
      from {
        transform: translate(-5px, 5px) scale(0);
      }
      to {
        transform: translate(-5px, 5px) scale(1);
      }
    }
    @keyframes fadeInAnimation {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  
          
        </style>

        <rect
          data-testid="card-bg"
          x="0.5"
          y="0.5"
          rx="4.5"
          height="99%"
          stroke="#e4e2e2"
          width="494"
          fill="#151515"
          stroke-opacity="1"
        />

        
      <g
        data-testid="card-title"
        transform="translate(25, 35)"
      >
        <g transform="translate(0, 0)">
      <text
        x="0"
        y="0"
        class="header"
        data-testid="header"
      >Mayx's Blog Article</text>
    </g>
      </g>

        <g
          data-testid="main-card-body"
          transform="translate(0, 55)"
        >
          
    <g transform="translate(370, 47.5)">
        <g class="rank-text">
          <text
            x="0"
            y="0"
            alignment-baseline="central"
            dominant-baseline="central"
            text-anchor="middle"
          >
            M
          </text>
        </g>
      </g>

    <svg x="0" y="0">
      <g transform="translate(0, 0)">
    <g class="stagger" style="animation-delay: 450ms" transform="translate(25, 0)">
      <line x1="12" y1="6.25" x2="19" y2="6.25"
style="stroke:rgb(255,255,255);stroke-width:2"/>
      <text class="stat bold" x="25" y="12.5">年终总结</text>
    </g>
  </g><g transform="translate(0, 25)">
    <g class="stagger" style="animation-delay: 600ms" transform="translate(25, 0)">
      <line x1="12" y1="6.25" x2="19" y2="6.25"
style="stroke:rgb(255,255,255);stroke-width:2"/>
      <text class="stat bold" x="25" y="12.5">在浏览器中运行Linux的各种方法</text>
    </g>
  </g><g transform="translate(0, 50)">
    <g class="stagger" style="animation-delay: 750ms" transform="translate(25, 0)">
      <line x1="12" y1="6.25" x2="19" y2="6.25"
style="stroke:rgb(255,255,255);stroke-width:2"/>
      <text class="stat bold" x="25" y="12.5">让博客永恒的探索</text>
    </g>
  </g><g transform="translate(0, 75)">
    <g class="stagger" style="animation-delay: 900ms" transform="translate(25, 0)">
      <line x1="12" y1="6.25" x2="19" y2="6.25"
style="stroke:rgb(255,255,255);stroke-width:2"/>
      <text class="stat bold" x="25" y="12.5">一次找回GitHub上被删除仓...</text>
    </g>
  </g><g transform="translate(0, 100)">
    <g class="stagger" style="animation-delay: 1050ms" transform="translate(25, 0)">
      <line x1="12" y1="6.25" x2="19" y2="6.25"
style="stroke:rgb(255,255,255);stroke-width:2"/>
      <text class="stat bold" x="25" y="12.5">关于ZIP Quine与自产生...</text>
    </g>
  </g>
    </svg> 
  
        </g>
      </svg>