フロントエンドプレイアブル
This commit is contained in:
110
app/views/layouts/application.html.erb
Normal file
110
app/views/layouts/application.html.erb
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title><%= content_for(:title) || "Dip Front" %></title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="application-name" content="Dip Front">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
|
||||
<%= yield :head %>
|
||||
|
||||
<link rel="icon" href="/icon.png" type="image/png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/icon.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
|
||||
<%= javascript_importmap_tags %>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-image: url('<%= asset_path("background.png") %>');
|
||||
background-repeat: repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: 1920px; /* Adjust as needed */
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, .font-cinzel {
|
||||
font-family: 'Cinzel', serif;
|
||||
}
|
||||
.diplomacy-card {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid #d4c5a9;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.diplomacy-text-gold {
|
||||
color: #c5a059;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="text-gray-900 leading-normal tracking-normal">
|
||||
<nav class="bg-green-900/95 backdrop-blur-sm border-b border-[#c5a059] fixed w-full z-30 top-0 shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
</div>
|
||||
<div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
|
||||
<%= link_to root_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
|
||||
<i class="fa-solid fa-house mr-2"></i> トップ
|
||||
<% end %>
|
||||
<%= link_to new_game_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
|
||||
<i class="fa-solid fa-plus-circle mr-2"></i> New Game
|
||||
<% end %>
|
||||
<% if logged_in? && current_user.admin? %>
|
||||
<%= link_to users_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
|
||||
<i class="fa-solid fa-users-cog mr-2"></i> ユーザー管理
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
|
||||
<% if logged_in? %>
|
||||
<%= link_to user_path(current_user), class: "text-sm text-green-100 hover:text-[#c5a059] transition-colors duration-200 flex items-center" do %>
|
||||
<i class="fa-solid fa-user-shield mr-2"></i>
|
||||
<%= current_user.username %>さん
|
||||
<% if current_user.admin? %>
|
||||
<span class="ml-1 px-2 py-0.5 text-[10px] font-bold text-green-900 bg-[#c5a059] rounded border border-yellow-600">ADMIN</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= button_to logout_path, method: :delete, class: "inline-flex items-center px-3 py-1.5 border border-[#c5a059] shadow-sm text-sm font-medium rounded text-[#c5a059] bg-green-900 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#c5a059] transition-colors duration-200" do %>
|
||||
<i class="fa-solid fa-right-from-bracket mr-2"></i> ログアウト
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= link_to "ログイン", login_path, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<%= link_to "新規登録", signup_path, class: "inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="pt-24 pb-12 min-h-screen">
|
||||
<%= yield :top_content %>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-white/85 backdrop-blur-sm rounded-xl shadow-xl border border-white/20 py-8">
|
||||
<% if notice %>
|
||||
<div class="bg-green-100/90 border border-green-400 text-green-800 px-4 py-3 rounded relative mb-6" role="alert">
|
||||
<span class="block sm:inline"><%= notice %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if alert %>
|
||||
<div class="bg-red-100/90 border border-red-400 text-red-800 px-4 py-3 rounded relative mb-6" role="alert">
|
||||
<span class="block sm:inline"><%= alert %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<main>
|
||||
<%= yield %>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user