Skip to content

C
cxmooc-tools

东方怂天 / cxmooc-tools

通知 11
Star 1
Fork 1
C
cxmooc-tools

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ff212c07 编写于 作者: Black____White's avatar Black____White
浏览文件
操作

popup page update

上级 006f5020
隐藏空白更改
内联 并排
Showing with 294 addition and 76 deletion
src/cxmooc-tools/html/popup.html
浏览文件 @ ff212c07
......@@ -127,11 +127,14 @@
font-size: 10px;
transition: .3s ease;
width: 30px;
border-radius: 2px;
border-radius: 1px;
border: 1px solid #ccc;
height: 15px;
}
#dama-config .input_text{
margin-left: 0;
width: 130px;
}
.input_text:hover {
border: 1px solid #CCFFFF;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px;
......@@ -143,6 +146,7 @@
body {
width: 400px;
margin: 0 auto;
/*background-color: #ECEFF1;*/
}
.title {
......@@ -240,16 +244,20 @@
padding: 0 20px;
margin: 0 auto;
color: #003366;
margin-top: 10px;
/*margin-top: 10px;*/
}
.content_bottom .one_title {
margin-bottom: 10px;
padding-bottom: 10px;
}
.width_50 {
margin-top: 10px;
}
.mt5{
margin-top: 5px;
}
/*底部项目链接*/
.bottom_div {
......@@ -259,10 +267,19 @@
margin-top: 10px;
}
.bottom_div p {
margin-right: 20px;
display: inline-block;
margin-top: 10px;
.bottom_div ul {
width: 100%;
height: auto;
position: relative;
top: 0;
padding: 0;
left: 0;
list-style: none;
}
li{
width: 50%;
margin-bottom: 8px;
float: left;
}
/*移上去变手*/
......@@ -275,13 +292,22 @@
width: 80px;
}
/*渲染的公告*/
#injection p{
font-size: 13px;
line-height: 18px;
margin-bottom: 8px;
}
#vtoken,
#dama {
float: right;
}
.edit {
width: 150px;
width: 100px;
margin-left: 25px;
height: 24.8px;
margin-top: 0;
}
#vtoken {
......@@ -301,10 +327,15 @@
#dama {
width: 80px;
font-size: 10px;
cursor: pointer;
}
#dama-confirm {
width: 40px;
display: inline-block;
display: -moz-inline-block;
cursor: pointer;
}
#dama-pop {
......@@ -332,85 +363,272 @@
font-size: 12px;
color: #000000;
font-weight: normal;
position: relative;
top: -17px;
right: -50%;
color: #003366;
}
/*以下为按钮样式*/
.one_title .button {
/*float: left;*/
display: block;
padding: 0.5em 1em;
border: none;
background: none;
color: inherit;
vertical-align: middle;
position: relative;
z-index: 1;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.one_title .button:focus {
outline: none;
}
.one_title .button > span {
vertical-align: middle;
}
.bg-1 .button {
color: #37474f;
border-color: #37474f;
}
.button--tamaya {
overflow: hidden;
color: #003366;
min-width: 150px;
}
.button--tamaya.button--inverted {
color: #37474f;
border-color: #37474f;
}
.button--tamaya::before,
.button--tamaya::after {
content: attr(data-text);
position: absolute;
width: 100%;
height: 50%;
left: 0;
background: #003366;
color: #fff;
/*overflow: hidden;*/
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya.button--inverted::before,
.button--tamaya.button--inverted::after {
background: #fff;
color: #37474f;
}
.button--tamaya::before {
top: 0;
padding-top: 1em;
}
.button--tamaya::after {
bottom: 0;
line-height: 0;
}
.button--tamaya > span {
display: block;
-webkit-transform: scale3d(0.2, 0.2, 1);
transform: scale3d(0.2, 0.2, 1);
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya:hover::before {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.button--tamaya:hover::after {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.button--tamaya:hover > span {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.one_title_show .button--border-thick {
border: 3px solid;
}
/*打码设置中确认按钮样式*/
/*按钮样式结束*/
#dama-config #dama-confirm{
width: 70px;
}
.button--size-s {
font-size: 10px;
}
#dama-config .button--moema {
z-index: 10;
padding: 0.5em 1em;
border-radius: 50px;
background: #003366;
color: #fff;
margin-left: 5px;
-webkit-transition: background-color 0.3s, color 0.3s;
transition: background-color 0.3s, color 0.3s;
}
#dama-config .button--moema::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
background: inherit;
border-radius: 50px;
z-index: -1;
opacity: 0.4;
-webkit-transform: scale3d(0.8, 0.5, 1);
transform: scale3d(0.8, 0.5, 1);
}
#dama-config .button--moema:hover {
-webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
color: #37474f;
background-color: #ea879a;
-webkit-animation: anim-moema-1 0.3s forwards;
animation: anim-moema-1 0.3s forwards;
}
#dama-config .button--moema:hover::before {
-webkit-animation: anim-moema-2 0.3s 0.3s forwards;
animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-moema-1 {
60% {
-webkit-transform: scale3d(0.8, 0.8, 1);
transform: scale3d(0.8, 0.8, 1);
}
85% {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes anim-moema-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes anim-moema-2 {
to {
opacity: 0;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
</style>
<body>
<div class="head">
<h3 class="title"><span>超星慕课</span>小工具</h3>
<div class="head">
<h3 class="title"><span>超星慕课</span>小工具</h3>
</div>
<div class="content_top center-float-left">
<div class="content_topleft">
<h4 class="one_title">公告</h4>
<div id="injection">
</div>
<div class="content_top center-float-left">
<div class="content_topleft">
<h4 class="one_title">公告</h4>
<div id="injection" class="mt10">
</div>
</div>
</div>
<div class="content_bottom">
<h4 class="one_title"><span>插件配置:</span>
<button id="dama" class="btn" style="display:none">打码设置</button>
<input type="text" style="float: right" class="input_text edit" placeholder="token" config-key="vtoken" />
<div id="dama-config">
<span>若快打码设置:</span>
<br>
<p class="comment">请自行注册若快购买进行配置</p>
<input type="text" class="input_text edit" config-key="ruokuai_user" placeholder="若快账号" />
<input type="text" class="input_text edit" config-key="ruokuai_pwd" placeholder="若快密码" />
<div class="config-item">
<input type="checkbox" id="ruokuai" class="rdo check" config-key="is_ruokuai" />
<label for="ruokuai" title="打码调用若快打码,不使用token了">使用若快打码</label>
</div>
<button id="dama-confirm" class="btn">确定</button>
</div>
</h4>
<div id="config" class="page">
<div class="config-item width_50">
<input type="checkbox" id="rand-answer" class="rdo" />
<label for="rand-answer" title="没有正确的答案会随机选择">随机答案</label>
</div>
<div class="config-item width_50">
<input type="checkbox" id="auto" class="rdo" />
<label for="auto" title="进入一个页面就会自动开始挂机,完成一个任务之后会自动进行下一个">自动挂机</label>
</div>
<br>
<div class="config-item width_50">
<input type="checkbox" id="video-mute" class="rdo" />
<label for="video-mute" title="播放视频时,自动开启静音">视频静音</label>
</div>
<!--插件配置盒子-->
<div class="content_bottom">
<h4 class="one_title">
<div class="one_title_show">
<span>插件配置:</span>
<button id="dama" class="button button--tamaya button--border-thick" data-text="打码设置">打码设置</button>
<input type="text" class="input_text edit" placeholder="token" config-key="vtoken">
</div>
<div id="dama-config">
<span>若快打码设置:</span>
<p class="comment">请自行注册若快购买进行配置</p>
<input type="text" class="input_text edit" config-key="ruokuai_user" placeholder="若快账号" style="height: 17px;">
<input type="text" class="input_text edit" config-key="ruokuai_pwd" placeholder="若快密码" style="height: 17px;">
<div class="config-item mt5">
<input type="checkbox" id="ruokuai" class="rdo check" config-key="is_ruokuai">
<label for="ruokuai" title="打码调用若快打码,不使用token了" class="shou">使用若快打码</label>
</div>
<div id="ignore" class="config-item width_50">
<input class="rdo" type="checkbox" id="answer-ignore" />
<label for="answer-ignore" title="自动挂机时,忽略掉题目不做,直接跳过">忽略题目</label>
<button id="dama-confirm" class="button button--moema button--text-thick button--text-upper button--size-s">确定</button>
</div>
</h4>
<div id="config" class="page">
<div class="config-item width_50">
<input type="checkbox" id="rand-answer" class="rdo">
<label class="shou" for="rand-answer" title="没有正确的答案会随机选择">随机答案</label>
</div>
<div class="config-item width_50">
<input type="checkbox" id="auto" class="rdo">
<label class="shou" for="auto" title="进入一个页面就会自动开始挂机,完成一个任务之后会自动进行下一个">自动挂机</label>
</div>
<br>
<div class="config-item width_50">
<input type="checkbox" id="video-mute" class="rdo">
<label class="shou" for="video-mute" title="播放视频时,自动开启静音">视频静音</label>
</div>
<div id="ignore" class="config-item width_50">
<input class="rdo" type="checkbox" id="answer-ignore">
<label class="shou" for="answer-ignore" title="自动挂机时,忽略掉题目不做,直接跳过">忽略题目</label>
</div>
<div>
<div class="config-item width_50" style="color:#ff0000">
<label for="video-multiple" title="视频播放的倍数,1为正常速度(最高16倍,该功能有一定危险)">倍速播放:</label>
<input type="text" class="input_text" id="video-multiple" placeholder="1">倍
</div>
<div>
<div class="config-item width_50" style="color:#ff0000">
<label for="video-multiple" title="视频播放的倍数,1为正常速度(最高16倍,该功能有一定危险)">倍速播放:</label>
<input type="text" class="input_text" id="video-multiple" placeholder="1" />倍
</div>
<div id="auto-m" class="config-item width_50">
<label for="interval" title="播放(题目)完成后n分钟再继续下一个任务">间隔时间:</label>
<input type="text" class="input_text" id="interval" placeholder="5" />分
</div>
<div id="auto-m" class="config-item width_50">
<label for="interval" title="播放(题目)完成后n分钟再继续下一个任务">间隔时间:</label>
<input type="text" class="input_text" id="interval" placeholder="5">分
</div>
</div>
</div>
<div class="bottom_div">
<h4 class="one_title"><span>其他:</span></h4>
<p><a class="three_font" href="https://github.com/CodFrm/cxmooc-tools" target="_black">GitHub开源地址</a></p>
<p><a class="three_font" href="https://cx-doc.xloli.top" target="_black">使用文档</a></p>
<br>
<p><a class="three_font" href="https://github.com/CodFrm/cxmooc-tools/issues" target="_black">Bug/意见/题目反馈地址</a>
</p>
<p><a target="_blank"
href="https://shang.qq.com/wpa/qunwpa?idkey=9bddd2564d84bd999940de422d1c0c70f87ecaf02fe9d7c60389fc2b376179eb">交流qq群&nbsp614202391</a>
</p>
</div>
<div style="padding:0 20px;margin-top: 10px;">
<img id="tiku" src="https://img.shields.io/badge/%E9%A2%98%E5%BA%93-success-brightgreen.svg">
<p class="ps">PS:本扩展全部是免费的</p>
<p id="version" class="ps"></p>
</div>
</div>
<!--其他模块盒子-->
<div class="bottom_div">
<h4 class="one_title"><span>其他:</span></h4>
<ul>
<li><a class="three_font" href="https://github.com/CodFrm/cxmooc-tools" target="_black">GitHub开源地址</a></li>
<li><a class="three_font" href="https://cx-doc.xloli.top" target="_black">使用文档</a></li>
<li><a class="three_font" href="https://github.com/CodFrm/cxmooc-tools/issues" target="_black">Bug/意见/题目反馈地址</a></li>
<li><a class="three_font" target="_blank" href="https://shang.qq.com/wpa/qunwpa?idkey=9bddd2564d84bd999940de422d1c0c70f87ecaf02fe9d7c60389fc2b376179eb">交流qq群&nbsp614202391</a></li>
</ul>
<p></p>
<p></p>
<br>
<p>
</p>
<p>
</p>
</div>
<div style="padding:0 20px;margin-top: 10px;">
<img id="tiku" src="https://img.shields.io/badge/%E9%A2%98%E5%BA%93-success-brightgreen.svg">
<p class="ps">PS:本扩展全部是免费的</p>
<p id="version" class="ps"></p>
</div>
</body>
</html>
\ No newline at end of file
</html>
src/cxmooc-tools/popup.js
浏览文件 @ ff212c07
......@@ -56,7 +56,7 @@ window.onload = function () {
});
document.getElementById('dama').onclick = function () {
document.getElementById('dama-config').style.height = document.getElementById('dama-config').style.height == '80px' ? '0' : '80px';
document.getElementById('dama-config').style.height = document.getElementById('dama-config').style.height == '90px' ? '0' : '90px';
}
chrome.storage.sync.get(['rand_answer', 'video_mute', 'answer_ignore'], function (items) {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或