From 1e709fc0c6b07c23a441dc29eede1541aad57733 Mon Sep 17 00:00:00 2001 From: pimgeek Date: Mon, 29 Oct 2018 15:34:20 +0800 Subject: [PATCH] =?UTF-8?q?1=20=E5=88=9B=E5=BB=BA=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E6=96=87=E6=A1=A3=20docs/hintsnet=5Fui=5Flayout=5Fdesign.ods?= =?UTF-8?q?=20(=20OpenOffice=20=E6=A0=BC=E5=BC=8F=E7=9A=84=E7=94=B5?= =?UTF-8?q?=E5=AD=90=E8=A1=A8=E6=A0=BC)=20=20=20=E5=86=85=E5=90=AB=20index?= =?UTF-8?q?.html=20=E4=B8=AD=E4=B8=BB=E8=A6=81=E7=95=8C=E9=9D=A2=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E7=9A=84=E5=B0=BA=E5=AF=B8=E3=80=81=E8=BE=B9=E7=95=8C?= =?UTF-8?q?=E3=80=81=E7=95=99=E7=99=BD=E7=AD=89=E5=AE=9A=E4=B9=89=20=20=20?= =?UTF-8?q?=E5=B9=B6=E4=B8=94=E5=9C=A8=E5=8D=95=E5=85=83=E6=A0=BC=E4=B9=8B?= =?UTF-8?q?=E9=97=B4=E5=BB=BA=E7=AB=8B=E4=BA=86=E6=95=B0=E5=80=BC=E8=81=94?= =?UTF-8?q?=E5=8A=A8=E5=85=B3=E7=B3=BB=EF=BC=8C=E5=8F=AA=E8=A6=81=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=B0=91=E9=87=8F=E9=A2=84=E8=AE=BE=E6=95=B0=E5=80=BC?= =?UTF-8?q?=20=20=20=E5=8D=B3=E5=8F=AF=E8=BF=9E=E5=B8=A6=E5=9C=B0=E6=94=B9?= =?UTF-8?q?=E5=8F=98=E6=89=80=E6=9C=89=E7=95=8C=E9=9D=A2=E5=85=83=E7=B4=A0?= =?UTF-8?q?=E7=9A=84=E7=9B=B8=E5=85=B3=E6=95=B0=E5=80=BC=202=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20index.html=20=E5=92=8C=20styles/index.css=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3=EF=BC=8C=E4=B8=8E=E4=B8=8A=E8=BF=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E4=B8=AD=E7=9A=84=E5=B0=BA=E5=AF=B8=E6=B1=82=E4=B8=80?= =?UTF-8?q?=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/hintsnet_ui_layout_design.ods | Bin 0 -> 7321 bytes index.html | 24 +++-- styles/index.css | 142 +++++++++++++++++++---------- 3 files changed, 113 insertions(+), 53 deletions(-) create mode 100755 docs/hintsnet_ui_layout_design.ods diff --git a/docs/hintsnet_ui_layout_design.ods b/docs/hintsnet_ui_layout_design.ods new file mode 100755 index 0000000000000000000000000000000000000000..7efe774f672a895c3b47ff7bd5ad26d32d649d0d GIT binary patch literal 7321 zcmZ{J1yq#X*Y5z*APPeYB1j5Dj>7;F(mB#GNOyO~&?Q}x($XL$Idmf>CDI*3N(l&D z{D1e}_ult@_dM(D=ft!3UTd%OJ8M7trzDT@2oLaIjSdiE!yn1!Jp^K%x9jBX}35UI*v!yeKy@RQpiM_F_t*M<0hqHr|siBFpg{i5F(t}MP z0P8;%=m7OhhDs(F008rYo4=l%T|8|}ojE*gZCW+t6DGNyEUNa>ywB4TfMKyvXlBkS zv1@mt0kz$F1`^~Fm~k}?289~Y8Unn>udfmZ6+C;{6Xfo1&QUWqM=+YP=fx0(NIY8& z>m=p3CL}0RERL1eLO5VD+eB}IEV@Z)~3X)w`Hgq-~%Sxgv+v$k`5MSQhXG4eG)t_zi3QHf{=gbR?<+LwRK_3?t0OudIVoz zS1~uoXL+~ytZC}X#A9h7a{y*I4A{3!B{5%X6T`Mv*9P{lJG%PRCNzT}4Gj$;vw6_s zbON{1*#({Hf}G6e+;pSbpTI$lv&Bz)g`_h-)}()@VjE2JX!!4v91NOS63hYE`B**x z)5iZ`9S{dS!`-*#%Jo#lh8pXeZjo-ycDTk4b0DQ}#}&tTHK0Pc-`_MuQ7M)1D)6GeR2xd=c zWE_AY%~sPIfQSK&B^yL%sRQ!fCuo*bcnK6H>}al2pvi@Ile+UqF-^VU;3SwZi?@i8N5}z4dkbmC2)OH=;l4TYYFy$ zFI;N4oQoQXrs{O!&Vu%~R#MY@)vv=Wh7d6f7a{@W@huoIv@=6(pq=IDiS~sXL}uF7 zUx)5j&lY<9V-y*SZDHxS*Le)CNC?ZKJbrCc-b!5nTe}{z-C?|3NCC**6dE#EXvXz6 zwbmPzG{vO>0Ti`HRH^L!q!F;b?8ZrhaM{e7{qVtQEz{6@7a@P5GOb%}GzG;CFEN%L!UuL6x>3O?E?(V<9}<0?K8< zdP+0FN{Lp*NmHC+f+B{%4JnfK>2Dp=Az_7`3%^OI`ko6=Q5y%13G{tsejRJ8@A7e} z@{AS^KSews?fxDE@PA`5>9<>J>1AL& zc^Jb0S{tF0`yi9!AM-rVt2%^XnQWxh_kt;!CJCqaJO-95rKsJ#!#%Ik<_yg?M8jfw zi?J5+^PKiz$yM({=0r)_x!JY><7FaZNiD_6SxDz->O5tRTf?beiu3Yzy8SkT%`AVS zoO0N;cEcTmCZFF69nrH4u5rZO-v}?702;a1Yy?0D>$IbTdkp`vwv=yeaki%)T=-g zprCpy`?n)y_}$)uw-;@O5%lG#uXmAtUhX+M5$AY~uRnX4iPsU-qFGHiIqQ+HUN@!a z(73H)oxLy2oh2x=n}Q>!**L83dCm|!#4sYgLBdb>Tl3`iSjKCkoi*;#Epq}F?OIyM znibhoe2Ns5?(EIixlpMxR#<17=ysL=m-O74iT(mU7tJW%FG=YWR)p=ldt}cLqqca@ z%-EV-^K&nCE{-415CQXT>?K+iJ-Wo$y!o=osRGZ0upby(oA)7*XU!4wEJg4p& zU*ywqrNyv*eu2}k> zbCV_Da*=|Yk2-?z&Cbleo)ODC{$Lr{{<#bm(rdgR=SpSR;9h!4NYoH{@C(Hc`Q+FOo7)ti+q9|m(n$-9I4 zdCumC+9tR_$FQ_}LF)dMQ&Gwxc--~s1&1%x^rv0s4CG>CvZesjDo zWp2e&fC9tUu7!(7bCF92Ut>t;)nXnij;5@dzt7VKmp7L&{xb+yrqw@^!qS&Ks#BqNo`4NGz z@6G-dpZQq!RkG34h&5zpJm6PqJCQF!3voC@g&L|f`RL@`Z~+|Np=!3BqEk`jU=PrC zJSuJR8Ov(OoVf_*L8mOoM0Gx;pWDIB#faQJHA7DG0dE@dD`sjz7L&OfIb2euSsrrk z=YL|40y$vM?=6onW;MxLKO6^8zTy+u$jQ?C9F)=P&}{P!dH3r|K**2(_pk2Gp#J4H z4}W-3mrN}4yX-84)BXM?vNN9TtNGs$e!ACg!7zsPh<*l{62us z&PVa$t-So>u$4s)2d*GJn$P`%EDjy()Nc@I!at|%RPs&tL;+!*FSqUk$B@NW9PZ;M zplE|H8K22SMh7`!OKc{8OY4I*|t}Qk~e+{BBr_$u$Z}i3c`LqQmrsr6G z`h11|dW3{khJMI8J7d}3vFI|zFWhHyRFpYxR&cy~ZL6ijf{u`?CeA40(I z4lL!bXGs%K(Nc5p9C&8VX(60{^-UkpH)BMYsNRE}mq%VeyT;pN&hVXz@=SURak;ZU z*sbkZ_~nFdXxu@s1X5onqsKa8wSEm4u>zM(lrwRcJ+-Evktnykf@$QxqCAuHM7SIe zGuw+L{q=>CS5^roG~eJ%XqUO8zxq(uI4Kk!q@jK?^P;gnGz&xOIxQ!g{W>4v1x+j$ zqAus56Nab$l%*zrmR~LuZT`!BaCs919Wif({0-5In~vDF2LKr#6%)4`2U8Lh{3vuGb5|jN?h7s_2TiV8(A2 zayc(vV4|_&gp)t|cKw_FqvN1Rgs1C4zsM)S+q1IHmkZL(&cus_Xde%$bw3G6@Y~r7 zF;DoCO&1D=@g{m)jAXx~U8eoB%{eN3eZX!l@cU2qsk^YS@1MKf8&0!Vm#gLx144+4 z`^<&8`lFTM{=tFUKi&52zhAqQA}D>1cQ$sB@{29JsLAn$_jC8@{x;jyeYNEk=DcRb z%l;#&xeE`X@cok6Hzm7{{}KknpeVE7iA7_hB29>kUrQ?!iS0hO*i*6}jdX#ibjxzK z+cqCpF!8(P8>{19!A1-RM~1_3yM{Zz<#O70AZ{m})aFJCU!N3#8uT)UNy#J*CFcUK zM3ch&hUjGKH}Aqx<^>10WcD7t8b%T^s12{w=3>$?rb0vbfuFqoU|RHMGNSn^k+wp= zIXSyspz6TyNW)JNbjaavc@@?>+N`L^WD#c}s^W&i~+ZEfcO^87OImM>~2$V;kW}kD5ehMe@_a+#w7Y zuCv_imLZ2qswVs=vh|5`DD6?am?6}bB0Hff9A=HHpQ-=95dn~Wq z4$x99BD%zuGK>Cvl47*j30H8znN4bvQYd6`la~%L5KEolr}x2+N0JI#Xnu;CeZz4n=6>iBKfBF1EB&?!L4; zx?aODwmb(d&?=or1xMyInFI?bX&kNb<&-;^fmU9pl;A)YV30~!jwWXa0fem8HP~mY zfAR8BLT5{0B{$}H#slx=vEGbW=v@yYhJ%vgf8Ybzr}P_4z#l?2K=05|6Jog2rKXwH zq_)LS!4=WPlnJ(kk;n{GIJpW>d_u(CPp08FcpSEY_)o`<>lDKDb~+`MYhr(`rr3S* zxi}eYA;NCIyPX>*H`n*!X}sT@!jey-fqa9vH<;^q9k|sxe<{)l6|UcxX;X`q*L75@ zC|w@-bc8Z*>BqWXJ8I~qiwbq6cZ{6+;GzT&{mCa5${Y$ z6Zi#-C4`k87->xNVRHwvJ?_Pzj1B@u25BTQ$r(uIMs<;ly4b`d#%TdO1-^o`LeZar3%*{o7?T=UH zcB>8_l26a$yMEPoHF*-%rr>>~My<1V6&Bk&Z|~Q&#;B1PL&fM92^^)#KA!Q2s|!}H zxBPED*9aDUBi(M}b7w=StGjc0XOp>alWnbpmTl@@%DK89g51UuE*qK~*=oA6<5s4s z)dtDYt9Bv?Q#h^Q)I_hY@$odW)*RxPGWMhFymA;cw{x4qU>X)nYnK*utc+4T(KauU_@KQE6Sk9Vav8(S3`8C5%(nJlJ)9@2$)$OCE#h zl(k$f^H6)rKNubH@I%(lYKR`r zTdEW6kwv{)jl(DYJ_tX@DStH8Q@1C&2n*5((|x^x^CW-~UH%ayiUGJPGHUk`u$CvO0MoXxCM;|qP zrCwX>%4vKYXzNGmOZ+0L!5Z~tBHU@3Y_fz6?N3X*DTW+P1hwf>p`I9_>?U&VYENAT zPlrnz+hh7T)eZevgCLfEtO2AE`qyOE=*T3|$ey{LIJ?eNxpZBa#9sVx`HMwZ0PNPl z$O6V}C%cf)XiC+zd1hVM_OfA0Wf&y6fb3~v6f9#TW0{cNp6LF;0kcTxX0BvMqx2y( zZbEB+Vni^zwJy%!bL5f8lRmqSP4MwiznqCxNTb3QVaI0qfa{W5og^9$LE&moaPVmw zK=nt^yHECVxr(XwLk5Z|_CqgvA$@506tGsiLO_WHL>0@bYfgc(Smxkel=IMm>&vPT z*iTOo^MQd#DyI(fRcj5kW||-FqPt0ENF5K1D_>khSb`PW4knD^eaT1%WS^ZhlC^JC1QL0iWe8hoi7>ZwQZEoKoY8Ex=J3k>o7A9^94T5JnmZlkH z@>nFAWfE(VJP4V1g|(j6+}bI3e5_;#pGUYQTEH(uSvXChAMKQxv|d1MzQ#XV zn|*h9wn#)WcfI@RDLBzKn-N6oYh>t=U(|9LYkThU@spSLn^h-Lh`+#%@G382dhP~y zwskSP9FTjPO+XwI#?p3A;uhR#r880mvhjBLS|`Q`{yIFZ?W+^MI5JeN)uWi_NGBgN zqS(GBm{9yX0i)B&ozLN0d7tzP2l(t|kytemj7E#MiL1#KGAqJhNLqqBxE)QHxU}V1H zDq#VS#RMb{#w7Y!b3P93gQWkXYP-*9W%e}~r!tNGc7vk5JSQZ%&1F8OIY#FI?&5hK zrRqAWb@nHiOn3@Fs5;OiG(%eY%)QRh#ib&w&Jvu0+YM3XO6E?9Jbg3Sp|c*~WV0rw zqJsFI!GH5|uyz4cAO#|J8RoK~2ue|P?smP9I0?nKm&Vci1+I=`O=k&!c&4+ULAVoE zo`WCxszbH>C5U})1Ogb$044oTYXe;bF)NP3(#1~&lqK@QC7zNLg$IRYGkPmjPQQUF ztnxPvW`h_$?JJ~%nOdl3vklM>F=^a}4~S^`guAGkA)HgL97Y#4JYKCTGHkQDDVG?R z2cI>7I5cl9p_Y*NfB(`MreVdjvHl^4P zz-5))H$(Z)Ym$8*J@%h}(zI~;u946;9({&&?er;%VW#PgbDMnmWU5b(t(Eq6qqyBL z2g>E)GKvJC6gue|k`=09ly$PTFx+z72T>qX-c2MDGcst`nL|A4@{*3!EQ?qv@vo?^ zlN&a@yp7UWz$;g%ezo79V1oP;RXv)Wg}fb|yGMHeIyz!@nyN4bUzjhluF)R$!%9P5!xRKqL>U%PROWMaG z`#9&+EKiFLN+l7Zm{Hmul1$Hhx|T%#rV14jBAUtKs12tX({Zs}s71aaRoJv(oQ7Df zRw&3z3SZn*1J+0a9D>3@;f9NH7#gnh8upfz!FuWpNUM-s%2?ht=%R ztg?pdP$OFRhpe7^MtKW->bWsHqV=B&7;B2>lq!3^_0Csi{lSvEvmwhLRUNfJMbvQ*TG%fHtv66p~FAR**=cgpkOeMRZ z>x?ISUI{>WVwKL;6Cjra!35qejt_quv3I2z^?vg^KjcRCe;l`6YyP+8&#)n)lOGQ| zKy(0r^x>^2srD8m3zOosHMFxdGj;w?A+$X1trZ40f#hY#Qm2QATP+*Yr+u%$3qaQl z7)uB8QgL8G7-pE@rYw^yC`)$a>xqDVEQdjzOE=C(TP;F>Rtjgk=lwVH$EBqBO2O}O zk$UmxhCY5j$#cMTALj9Mv3cZ zXx39M)NQ;0$K}szEcas?2fm$|Ielx*j~V9|Bcu%0NBibpwF-GDAxt0nHTIeIOq7k+ zp8iyzdG+kJh^RQ@uJj#meNIP^jQ7n#1qJ7S8w$mw0~1v=0Kn%V6#rp*OkE8BmVu*G z6zzjvP_%K*A-EQvR#&R$U3{?#V;tsKeBAQX2PN|~YGwcK7FfUQ^)vqR%FFY`a`rP) zA93@-3CujhVD#}WHI-RRFOfIvK+G9OT}M+ea0i?H=f_L;CjRGz01e6sz8o66juQj$ zWXgzAz%`7wyP{6v6pP(CFpcc&mEo+-R{r*&$+`Y{4{}B$PgH-jJ}U0(k(xzwx>}%r zpryRLg$yqI;tgBLJMwETg4Hi4=;@}ECoFg=-g@f5d?(~>lHQhI7!}xMA+6FUIgfXS zdNHFaeB71-^W*BIwm*IB`v^TpzOQ%OA7j^9qTTtMxHCoyQ(#UZlGws)g_^``LI0t?9u@%qFUj_I^`G{?C^sefzgqu)8toqq zwTIz9q}spr{$29_M{nhUl>0vjfPX9g8!Z1QE>rw}p!07N|2|~@nAoFyAQ%7VkyDb# T#QM8~`S84WIFiQC{?7gf(SDpK literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 104d927..2e6e83e 100644 --- a/index.html +++ b/index.html @@ -9,14 +9,24 @@ -
-
-
- -
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/styles/index.css b/styles/index.css index dfe23ac..24d9310 100644 --- a/styles/index.css +++ b/styles/index.css @@ -2,74 +2,124 @@ * index.css */ -// 设定元素的 width 时，把元素的边界 border 和空白填充量 padding 考虑在内 -* { +/* 设定元素的 width 时，把元素的边界 border 和空白填充量 padding 考虑在内 */ + +div { -webkit-box-sizing:border-box; - -moz-box-sizing:border-box; - box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + display:block; } html,body { - margin:0 0 0 0; - background-color:gray; + background-color:rgb(180,130,80); + background-color:rgba(180,130,80,0.8); + border:1px solid transparent; + margin:0 auto; + overflow:hidden; } -#hyper_whiteboard { - display:block; - margin:0 0 0 0; - border:1px dotted rgba(0,0,0,0); +.hyper_whiteboard { + background-color:rgb(180,130,80); + background-color:rgba(180,130,80,0.8); + border:1px solid transparent; + height:99vh; + margin:0.5vh auto 0.5vh auto; width:99vw; - height:99vh; } -#global_view_area { - margin:2vh auto 5vh auto; - width:40vw; +.global_view { + background-color:rgb(240,220,180); + background-color:rgba(240,220,180,0.9); + border-radius:0.5vw; height:1vh; - display:block; - border-radius:5px; - background-color:rgba(255,255,85,0.7); + margin:2.1vh 35.5vw 0 35.5vw; + width:28vw; } -#focus_tracking_area { - margin:5vh auto 2vh auto; - width:80vw; - height:70vh; - display:block; - border-radius:5px; - background-color:rgba(255,255,85,0.5); +.focus_tracking_area { + background-color:rgb(60,60,100); + background-color:rgba(60,60,100,0.9); + border-radius:0.5vw; + box-shadow:1px 1px 1px 0 rgb(70,60,50); + height:60vh; + margin:6vh 3.5vw 0 3.5vw; + width:92vw; } -#backtracking_links { - margin:2vh 1.5vw 2vh 1.5vw; - width:12vw; - height:66vh; +.left_link_cards_container { + background-color:transparent; + border-radius:0.5vw; float:left; - background-color:rgba(255,55,85,0.2); + height:57.33vh; + margin:1.33vh 0 0 1vw; + width:17.6vw; +} + +.left_link_card_1,.left_link_card_2,.left_link_card_3 { + background-color:rgb(90,90,130); + background-color:rgba(90,90,130,0.9); + border-radius:0.5vw; + box-shadow:1px 1px 1px 1px rgb(30,40,70); + height:18.22vh; + width:17.6vw; +} + +.left_link_card_2,.left_link_card_3 { + margin:1.33vh 0 0 0; } -#current_focus_card { - margin:3vh 0 3vh 0; - width:50vw; - height:64vh; +.focus_cards_container { + background-color:transparent; + border:1 solid transparent; + border-radius:1vw; float:left; - border-radius:5px; - background-color:rgba(255,255,85,0.4); + height:57.33vh; + margin:1.33vh 0 0 1vw; + width:52.8vw; } -#heuristic_links { - margin:2vh 1.5vw 2vh 1.5vw; - width:12vw; - height:66vh; +.focus_card_1 { + background-color:rgb(210,210,210); + background-color:rgba(210,210,210,0.8); + border-radius:1vw; + box-shadow:1px 1px 1px 1px rgb(30,40,70); + height:57.33vh; + margin:0 0 0 0; + text-align:center; + width:52.8vw; +} + +.right_link_cards_container { + background-color:transparent; + border-radius:1vw; float:left; - background-color:rgba(255,55,85,0.2); + height:57.33vh; + margin:1.33vh 0 0 1vw; + width:17.6vw; } -#ref_cards_area { - margin:1vh auto 2vh auto; - width:75vw; - height:16vh; - display:block; - background-color:rgba(155,255,205,0.2); +.right_link_card_1,.right_link_card_2,.right_link_card_3 { + background-color:rgb(130,140,180); + background-color:rgba(130,140,180,0.8); + border-radius:0.5vw; + box-shadow:1px 1px 1px 1px rgb(30,40,70); + height:18.22vh; + width:17.6vw; +} + +.right_link_card_2,.right_link_card_3 { + margin:1.33vh 0 0 0; +} + +.ref_cards_container { + background-color:rgb(200,190,170); + background-color:rgba(200,190,170,0.7); + border:1px solid rgb(135,135,135); + border-radius:0.5vw; + box-shadow:1px 1px 1px 0 rgb(70,60,50); + height:22.7vh; + margin:2.1vh 3.5vw 3vh 3.5vw; + width:92vw; }