-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
122 lines (107 loc) · 6.53 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- GG font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" href="./scss/style.css">
<script src="script.js" defer></script>
<!-- fontawesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="icon" href="logo.svg">
<!-- Primary Meta Tags -->
<title>Tic tac toe</title>
<meta name="title" content="Tic tac toe">
<meta name="description" content="Just a 🌼 beautiful version of tic tac toe.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://vanviethieuanh.com/tictactoe/">
<meta property="og:title" content="Tic tac toe">
<meta property="og:description" content="Just a 🌼 beautiful version of tic tac toe.">
<meta property="og:image" content="https://vanviethieuanh.com/tictactoe/logo.svg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://vanviethieuanh.com/tictactoe/">
<meta property="twitter:title" content="Tic tac toe">
<meta property="twitter:description" content="Just a 🌼 beautiful version of tic tac toe.">
<meta property="twitter:image" content="https://vanviethieuanh.com/tictactoe/logo.svg">
</head>
<body class="light">
<div class="themes-menu">
</div>
<!-- Background -->
<svg style="position: absolute;z-index: -1;" class="defs" width="0" height="0" fill=" none"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="color_o" x1="-12" y1="-13" x2="31" y2="31" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#02AAB0" />
<stop offset="1" stop-color="#00CDAC" />
</linearGradient>
<linearGradient id="color_x" x1="-13.3431" y1="-2.27923" x2="31.9498" y2="31.2549"
gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#EB3349" />
<stop offset="1" stop-color="#F45C43" />
</linearGradient>
</defs>
</svg>
<svg id="bg" width="100vw" height="100vh" viewBox="0 0 115 75.8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="mark-x" fill-rule="evenodd" clip-rule="evenodd"
d="M1.82843 24.1716C0.266336 25.7337 0.266336 28.2663 1.82843 29.8284C3.39053 31.3905 5.92319 31.3905 7.48529 29.8284L15.8284 21.4853L24.4558 30.1127C26.0179 31.6748 28.5506 31.6748 30.1127 30.1127C31.6748 28.5506 31.6748 26.0179 30.1127 24.4558L21.4853 15.8284L30.1127 7.201C31.6748 5.6389 31.6748 3.10624 30.1127 1.54415C28.5506 -0.0179507 26.0179 -0.0179501 24.4558 1.54415L15.8284 10.1716L7.48529 1.82843C5.92319 0.266332 3.39053 0.266332 1.82843 1.82843C0.266336 3.39053 0.266337 5.92319 1.82843 7.48528L10.1716 15.8284L1.82843 24.1716Z"
fill="url(#color_x)" />
<path transform="translate(65,50)" class="mark-x" fill-rule="evenodd" clip-rule="evenodd"
d="M1.82843 24.1716C0.266336 25.7337 0.266336 28.2663 1.82843 29.8284C3.39053 31.3905 5.92319 31.3905 7.48529 29.8284L15.8284 21.4853L24.4558 30.1127C26.0179 31.6748 28.5506 31.6748 30.1127 30.1127C31.6748 28.5506 31.6748 26.0179 30.1127 24.4558L21.4853 15.8284L30.1127 7.201C31.6748 5.6389 31.6748 3.10624 30.1127 1.54415C28.5506 -0.0179507 26.0179 -0.0179501 24.4558 1.54415L15.8284 10.1716L7.48529 1.82843C5.92319 0.266332 3.39053 0.266332 1.82843 1.82843C0.266336 3.39053 0.266337 5.92319 1.82843 7.48528L10.1716 15.8284L1.82843 24.1716Z"
fill="url(#color_x)" />
<circle transform="translate(20,50)" class="mark-o" cx="15.5" cy="15.5" r="11.5" stroke="url(#color_o)"
stroke-width="8" />
<circle transform="translate(90,10)" class="mark-o" cx="15.5" cy="15.5" r="11.5" stroke="url(#color_o)"
stroke-width="8" />
</svg>
<!-- Board -->
<div id="container">
<div class="top-bar center-child">
<svg class="mark" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="mark-x" fill-rule="evenodd" clip-rule="evenodd"
d="M1.82843 24.1716C0.266336 25.7337 0.266336 28.2663 1.82843 29.8284C3.39053 31.3905 5.92319 31.3905 7.48529 29.8284L15.8284 21.4853L24.4558 30.1127C26.0179 31.6748 28.5506 31.6748 30.1127 30.1127C31.6748 28.5506 31.6748 26.0179 30.1127 24.4558L21.4853 15.8284L30.1127 7.201C31.6748 5.6389 31.6748 3.10624 30.1127 1.54415C28.5506 -0.0179507 26.0179 -0.0179501 24.4558 1.54415L15.8284 10.1716L7.48529 1.82843C5.92319 0.266332 3.39053 0.266332 1.82843 1.82843C0.266336 3.39053 0.266337 5.92319 1.82843 7.48528L10.1716 15.8284L1.82843 24.1716Z"
fill="url(#color_x)" />
</svg>
<div id="score">
0 - 0
</div>
<svg class="mark" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle class="mark-o" cx="15.5" cy="15.5" r="11.5" stroke="url(#color_o)" stroke-width="8" />
</svg>
</div>
<div class="board" id="board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
<div class="winning-message bottom-bar" id="winningMessage">
<button id="restartButton" class="restart center-child">
<i class="fas fa-redo-alt"></i>
</button>
</div>
</div>
<div class="themes" onclick="NextTheme()">
<p class="title">
Strawberry
</p>
</div>
<!-- Github -->
<div class="contact">
<a target="_blank" href="https://github.com/vanviethieuanh/tictactoe"><i class="fab fa-github-alt"></i></a>
</div>
</body>
</html>