mirror of
https://github.com/agam778/MS-365-Electron.git
synced 2026-02-17 09:02:10 +00:00
Release v0.5.1
Changelog: - Add Discord RPC
This commit is contained in:
Agampreet Singh
@@ -1,19 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading MS Office - Electron</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Loading MS Office - Electron</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader"></div>
|
||||
<div class="shadow"></div>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader"></div>
|
||||
<div class="shadow"></div>
|
||||
|
||||
<div class="logo">
|
||||
<a href="https://github.com/agam778/MS-Office-Electron" target="_blank"><img src="https://raw.githubusercontent.com/agam778/MS-Office-Electron/main/MSlogo.svg" alt="MS Office - Electron"></a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<div class="logo">
|
||||
<a href="https://github.com/agam778/MS-Office-Electron" target="_blank"
|
||||
><img
|
||||
src="https://raw.githubusercontent.com/agam778/MS-Office-Electron/main/MSlogo.svg"
|
||||
alt="MS Office - Electron"
|
||||
/></a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,246 +1,248 @@
|
||||
@-webkit-keyframes mainAnimation {
|
||||
0% {
|
||||
width: 50px;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 50px;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 150px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 150px;
|
||||
transform-origin: bottom right;
|
||||
transform: translateX(-150px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
80% {
|
||||
width: 50px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
width: 50px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
}
|
||||
@keyframes mainAnimation {
|
||||
0% {
|
||||
width: 50px;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 50px;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 150px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 150px;
|
||||
transform-origin: bottom right;
|
||||
transform: translateX(-150px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
80% {
|
||||
width: 50px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
width: 50px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes secundaryAnimation {
|
||||
0% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
@keyframes secundaryAnimation {
|
||||
0% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadowAnimation {
|
||||
0% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 200px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes shadowAnimation {
|
||||
0% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 200px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes float {
|
||||
0% {
|
||||
top: 50%;
|
||||
}
|
||||
50% {
|
||||
top: 51%;
|
||||
}
|
||||
100% {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
@keyframes float {
|
||||
0% {
|
||||
top: 50%;
|
||||
}
|
||||
50% {
|
||||
top: 51%;
|
||||
}
|
||||
100% {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
background: #5684f0;
|
||||
background: linear-gradient(135deg, #5684f0 0%, #fa7587 100%);
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
0% {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -25px;
|
||||
margin-left: -25px;
|
||||
background-color: #FFF5A5;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
-webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;
|
||||
animation: mainAnimation 2.6s ease 0s infinite forwards;
|
||||
z-index: 2;
|
||||
}
|
||||
.loader:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
20% {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
left: -50px;
|
||||
background-color: #FFF5A5;
|
||||
transform-origin: top right;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
-webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;
|
||||
animation: secundaryAnimation 2.6s ease 0s infinite forwards;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
40% {
|
||||
width: 150px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 150px;
|
||||
transform-origin: bottom right;
|
||||
transform: translateX(-150px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
80% {
|
||||
width: 50px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
width: 50px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
}
|
||||
@keyframes mainAnimation {
|
||||
0% {
|
||||
width: 50px;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 50px;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 150px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 150px;
|
||||
transform-origin: bottom right;
|
||||
transform: translateX(-150px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
80% {
|
||||
width: 50px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
100% {
|
||||
width: 50px;
|
||||
transform: translateX(-50px) translateY(0px) rotate(90deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes secundaryAnimation {
|
||||
0% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
@keyframes secundaryAnimation {
|
||||
0% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px) translateY(0px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadowAnimation {
|
||||
0% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 200px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes shadowAnimation {
|
||||
0% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
width: 200px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
60% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
width: 75px;
|
||||
transform: translateX(37.5px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
width: 150px;
|
||||
transform: translateX(-25px) translateY(0px) rotate(0deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes float {
|
||||
0% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: 50px;
|
||||
margin-left: -75px;
|
||||
border-radius: 50%;
|
||||
background-color: #95a5a6;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
-webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;
|
||||
animation: shadowAnimation 2.6s ease 0s infinite forwards, float 5s ease-in-out 0s infinite forwards;
|
||||
filter: blur(5px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 12px 5px;
|
||||
margin-left: -21px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
50% {
|
||||
top: 51%;
|
||||
}
|
||||
.logo:hover {
|
||||
transform: scale(1.4);
|
||||
100% {
|
||||
top: 50%;
|
||||
}
|
||||
.logo img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@keyframes float {
|
||||
0% {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
top: 51%;
|
||||
}
|
||||
100% {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
background: #5684f0;
|
||||
background: linear-gradient(135deg, #5684f0 0%, #fa7587 100%);
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -25px;
|
||||
margin-left: -25px;
|
||||
background-color: #fff5a5;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
-webkit-animation: mainAnimation 2.6s ease 0s infinite forwards;
|
||||
animation: mainAnimation 2.6s ease 0s infinite forwards;
|
||||
z-index: 2;
|
||||
}
|
||||
.loader:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
left: -50px;
|
||||
background-color: #fff5a5;
|
||||
transform-origin: top right;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
-webkit-animation: secundaryAnimation 2.6s ease 0s infinite forwards;
|
||||
animation: secundaryAnimation 2.6s ease 0s infinite forwards;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: 50px;
|
||||
margin-left: -75px;
|
||||
border-radius: 50%;
|
||||
background-color: #95a5a6;
|
||||
transform: translateX(0px) translateY(0px) rotate(0deg);
|
||||
-webkit-animation: shadowAnimation 2.6s ease 0s infinite forwards,
|
||||
float 5s ease-in-out 0s infinite forwards;
|
||||
animation: shadowAnimation 2.6s ease 0s infinite forwards,
|
||||
float 5s ease-in-out 0s infinite forwards;
|
||||
filter: blur(5px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
padding: 12px 5px;
|
||||
margin-left: -21px;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
.logo:hover {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
.logo img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user