iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1
Software Development

透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計系列 第 28

[第二十八隻羊] 迷霧森林頂尖對決 登入介面套版

天亮了 昨晚是平安夜

關於迷霧森林故事

香水

在場本來許多animal們牽著喜鵲兒的翅膀小手跳舞
都紛紛放下了手 小腳步的移動與他們保持距離
Lulu則是用翅膀摸自己的額頭說 笑死
也不想想你幾兩重 在這邊大小聲
看你這樣欺騙大家的感情我也覺得你很辛苦
不如這樣
如果你兔崽子妳嫩講出任何一個證據證明我是壞人
那你剛就直接說了不用在那邊吱吱嗚嗚還扯什麼我推妳下海
你自己投海我還不知道為什麼你會出現在這呢?

來源
兔兔馬上接著說
兇手不用在那邊情感發言
洛神之所以讓12人的遊戲繼續進行
就算人數只有10個人也不吭聲就是因為
身為神職的技能施予者
她也自帶預言家功能
當你把我們兩個推下海之後
是她開了量子穿隧通道讓我們直接回到舞會現場
況且你根本就瞞不住,洛神也跟我說了你的陰謀
大家只有看看那海馬就知道 你就別演了快點自爆吧
眾animal黑人問號的把頭轉向旋木周遭漂浮的海馬
可愛的海馬在空氣中游動~還不時吐著泡泡 看不出哪裡有可疑之處
Lulu則是臉帶驚訝的說 沒想到洛神還留了這一手
那就沒辦法了
烏雲籠罩在旋木上空
旋木上漂浮的海馬從悠遊自在地飄
海馬身上的金色幻化成金粉
空氣中先是出現了金色的粉狀物 飄在整個森林之中

圖片來源
待續..

動物園派對

今天把登入介面稍微套版也同時再練習一下 tailwind css

<section class="flex max-h-full">
  <main class="w-96 bg-yellow-500 p-7 space-y-5 hidden md:block">
    <header>
      <nav class="p-3">
        <h4 style="font-family: 'montserrat regular';" class="text-xl text-white font-normal uppercase">動物園派對</h4>
      </nav>
    </header>

    <div class="p-3 my7 space-y-6">
      <h1 style="font-family: 'montserrat regular';" class="text-2xl  text-white font-semibold">
        一起趴踢趴踢 all night
      </h1>
      <p class="text-white text-sm" style="font-family: 'inter';">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti iusto nostrum sit placeat reprehenderit
        temporibus, fuga nihil mollitia id culpa?
      </p>
    </div>

    <img src="<%= asset_path("halloween_cute_black_cat.svg")%>", alt="wolf_bg" class="justify-center">
  </main>
  <main class="flex-auto bg-white space-y-7 p-2">
    <header class="py-5 px-5 my-4">
      <nav>
        <ul class="flex items-center justify-end space-x-4">
          <a href="#">
            <li>
              <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
              </svg>
            </li>
          </a>
          <a href="#">
            <li>
              <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
              </svg>
            </li>
          </a>
          <a href="#">
            <li>
              <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
              </svg>
            </li>
          </a>
        </ul>
      </nav>
    </header>

    <div class="flex items-center justify-center p-5">
      <h4 style="font-family: 'montserrat regular';" class="text-3xl font-black text-black">
        帳號登入
      </h4>
    </div>

    <section class="flex flex-col items-center justify-center">
      <%= simple_form_for(resource, as: resource_name, html: { class: 'space-y-4' }, url: session_path(resource_name)) do |f| %>
        <div class="form-inputs text-4xl text-black">
          <div class="email">
            <div class="relative mt-1">
              <div class="input email required user_email bg-white">
                <input autocomplete="email" class="string email required p-4 w-80 h-10 rounded pl-10 text-sm focus:outline-none border border-gray-200 focus:border-red-400 font-light" autofocus="autofocus" required="required" aria-required="true" placeholder="email address" type="email" value="" name="user[email]" id="user_email">
              </div>
              <svg class="w-4 h-4 absolute top-1 ml-8 m-3 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd"></path>
              </svg>
            </div>
          </div>
          <div class="password">
            <div class="relative mt-1 mb-2">
              <div class="input password required user_password bg-white">
                <input autocomplete="current-password" class="password required p-4 w-80 h-10 rounded pl-10 text-sm focus:outline-none border border-gray-200 focus:border-red-400 font-light" required="required" aria-required="true" type="password" name="user[password]" id="user_password">
              </div>
              <svg class="w-4 h-4 absolute top-1 ml-8 m-3 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"></path>
              </svg>
            </div>
          </div>
          <div class="remember_me">
            <div class="relative mt-1 mb-2">
              <div class="input boolean optional user_remember_me bg-white">
                <input value="0" type="hidden" name="user[remember_me]">
                <label class="boolean optional checkbox" for="user_remember_me">
                  <input class="boolean optional mr-3" type="checkbox" value="1" name="user[remember_me]" id="user_remember_me">Remember
                me</label></div>
            </div>
          </div>
        </div>

        <div class="form-actions">
          <button class="w-full  focus:ring focus:ring-red-200 w-80 h-9 btn btn-primary" type="submit" name="commit" value="Log in" >進入動物園</button>
        </div>
      <% end %>

    </section>

    <section class="flex flex-col items-center justify-center space-y-4">
    </section>
  </main>
</section>

阿虎每日選幣

$dydx


上一篇
[第二十七隻羊] 迷霧森林舞會XVI 整理客廳,首頁列表介面
下一篇
[第二十九隻羊] 迷霧森林交響樂章 發牌邏輯
系列文
透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:00:40

寫得好讚,恭喜即將邁入完賽啦!

毛毛 iT邦新手 5 級 ‧ 2021-10-14 23:17:43 檢舉

謝謝 Juck 來訪 受寵若驚
你的 Youtube 也很棒
我最近剛好也有做Youtube相關的應用之後會上線
有機會再來交流
讓我先趕一下文章(遮臉)

juck30808 iT邦新手 3 級 ‧ 2021-10-15 00:16:16 檢舉

加油加油XD

我要留言

立即登入留言