-
Notifications
You must be signed in to change notification settings - Fork 0
/
flyme.html
107 lines (99 loc) · 4.15 KB
/
flyme.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
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flyme OS | Han Li</title>
<link rel='shortcut icon' type='image/png' href='images/favicon.png'/>
<script type='text/javascript' src="addons/p5.min.js"></script>
<script type='text/javascript' src="addons/p5.dom.min.js"></script>
<script type='text/javascript' src="js/sketch-flyme.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='addons/jquery.mousewheel.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style-flyme.css">
<link rel="stylesheet" type="text/css" href="css/style-work.css">
<script type='text/javascript'>
window.onload = function () {
document.getElementById("loading").style.right = "120%";
document.getElementById("loading").style.opacity = "0";
}
$(document).ready(function () {
$('html, body, *').mousewheel(function (e) {
// console.log(e.deltaX, e.deltaY, e.deltaFactor);
this.scrollLeft += (e.deltaX - e.deltaY)*e.deltaFactor;
// this.scrollTop = 0;
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false; //IE
}
});
});
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
video.pause();
}, false)
</script>
</head>
<body>
<div id="loading">
<svg width="70" height="70" viewbox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="loading-svg" d="M26 21V41L36 43V23V32.5L46 35V25V47" stroke="#2C7632" stroke-width="4"/>
</svg>
</div>
<div id="home" onclick="location.href='index.html';">
<svg width="70" height="70" viewbox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="svg-bg" width="70" height="70" fill="white"/>
<path class="svg-home" d="M46 45H24L24 30.4093L35.3667 21L46 30.4093V47" stroke="white" stroke-width="4"/>
<path class="svg-lh" d="M26 21V41L36 43V23V32.5L46 35V25V47" stroke="#2C7632" stroke-width="4"/>
</svg>
</div>
<div class="wrapper">
<section class="openning">
<h1 class="font-section-title">Flyme OS</h1>
<span class="divider divider-adjust"></span>
<div class="brief">
<p class="font-section-desc">
From Flyme OS3.0 to OS4.0, the focus was on achieving simplicity, clarity, and intuitive interactions through meticulously refined design details. Flyme OS was widely recognized as one of the most user-centric domestic Android operating systems during that period.
</p>
</div>
<div id="sketch"></div>
</section>
<section class="showcase">
<div class="showcase-wrapper">
<img src="images/flyme/03.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-wrapper nomargin">
<video autoplay="autoplay" loop="loop" muted="muted" preload="auto" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x-webkit-airplay="allow">
<source src="images/flyme/all.mp4" type="video/mp4"/>
YOU BROWSER DOESN'T SUPPORT VIDEO.
</video>
</div>
</section>
<section class="showcase">
<div class="showcase-wrapper nomargin">
<img src="images/flyme/01.jpg">
</div>
</section>
<section class="showcase">
<div class="showcase-wrapper">
<img src="images/flyme/02.jpg">
</div>
</section>
<section class="ending next" onclick="location.href='qq.html';">
<div class="button">
<div class="arrow"></div>
<div class="line"></div>
</div>
<div class="title">
<span class="font-section-desc">UP NEXT</span>
<h1 class="font-section-title">QQ</h1>
</div>
</section>
</section>
</div>
</body>
</html>